Mapping, CERN, and the possibilities that the XMLHttpRequest method is opening up for the web this year.
Simon Willison points us to a phenomenal demonstration of XMLHttpRequest usage — Map.Search.ch, an interactive map of Switzerland that pulls in satellite photos and allows you to zoom down from a high level (the entire country) so close that you can make out houses, boats, and trees.
Here’s the kicker — it’s DHTML. No Flash or Java is involved, it’s all being pulled from the server real-time, and the interactive controls (Zoom and Pan both, try click + dragging the map) are something you’d have to be crazy to implement on dynamic data, but there it is anyway thanks to XMLHttpRequest. Google Suggest was one of the first uses of the method to cross my radar that actually did something with the technology beyond displaying test data, but Map.Search launched in October of 2004 (according to the release notes) and it blows Suggest out of the water.
From the layered data (GIF labels and JPG photography) to the staggered load as the zoom increases (where the already-loaded map resizes and interpolates to provide a rough, blurry outline of the new area as additional data loads, or vice-versa when zooming out), the almost-seamless interactivity is an impressive demonstration of what’s possible with XMLHttpRequest and clever, cross-browser tested scripting.
Various implementation quirks highlight some limitations of the technology though: the Back button
doesn’t work works inconsistently in non-Mozilla browsers (like Safari or IE), and none of the individual map stages are directly linkable . I have to take a screenshot to show you where I found CERN instead of linking it directly.
(Yep, that’s an overhead view of the Swiss portion of CERN that I found in Map.Search. If I aligned my maps right, the red arc indicates a portion of the LEP [Large Electron Positron collidor]. Hint: It’s in Genève [Geneva], Meyrin to be precise)
But what of the technology itself? If you’ve been following the development, you’ll know that it got started as an Internet Explorer extension. Everyone else must have seen merit in a method of loading bits and pieces of new data from the server without refreshing an entire document, a method that wasn’t frames/iframes anyway, and now Mozilla and Safari both support it and Opera’s getting on board in a hurry. You can start playing with it today, thanks to the growing body of information documenting its usage.
It’s not a part of any approved standard though, so therein lies the rub. At the moment, the technology is just a proprietary extension, though movement is underway to make it more “official”: The WHAT WG has incorporated it into their Web Applications Draft. This lack of official blessing may limit its use in some people’s minds, but at this point it’s essentially a de facto standard anyway. Nothing else like it exists, so as far as I’m concerned it falls into that fuzzy realm where the official specs need to catch up with the technology.
Anyway, particularly nice is the fact that with or without the DHTML that makes it go, Map.Search continues to function. It’s a more limited every-page-refreshes-like-MapQuest kind of functionality, but that’s a totally legitimate degradation.
It’s this kind of low-impact scripting that’s going to take off this year, I agree with Simon on that count. The name of the game is script that enhances HTML functionality, rather than provides core functionality in a non-scripted or older and less-capable environment. HTML is a fine building block to begin with, and responsible DOM scripting is going to take it to new levels.
Bernhard Seefeld, one of the developers of Map.Search, and various commenters have mentioned that XMLHttpRequest is actually only being used for ads. The mapping functionality itself is straight DHTML and image loading, so it works in even non-XMLHttpRequest-enabled browsers.
Still, it doesn’t make the site any less impressive, and it is a good example of the sort of thing one might use XMLHttpRequest for. If anything, I’m glad to discover there are other ways to pull off this kind of functionality — having a choice never hurts.