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 (the developers actually found a way around this). 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.

Update: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.

> 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.

Why does everybody ignore DOM 3 Load and Save? It works in Firefox and the latest Opera betas already, and I believe Konqueror has a partial implementation already too (I haven’t checked out the latest version).

I agree that XMLHttpRequest is a great thing. I have been using it, basically, with IE since about 2000 I think on a project I did for the state of West Virginia’s Adult Literacy programs. They have large complicated forms that have alot of background processing and database interaction going on. Using the XMLHttpRequest object - though at the time it’s invocation was a bit different - I was able to make the form computations based on dynamic data from the database possible - and thus vastly improve the user experience.

Back when I first discovered the technique though you had to declare an xml object in your html like so:
<xml id=”appXMLObject” async=”false” />

As you can see from the function name it was referenced as a dataisland then. Anyway, I was, and am still, very happy to see it becoming more and more usable across browsers - even though the technique has changed.

Yup, the XMLHttpRequest objects are a beatuiful thing. We’ve been using them in server-side programming (ASP, ASP.NET) for a long time now and have been available in modern browsers for quite a while.

I remember a few years ago I helped somebody develop a form which used the XMLHttpRequest object to submit the form when you clicked the submit button, then used the DOM to display the result of the submission…all the while the page on in the browser was still there.

If you use GMail, it is largely driven by this type of interaction. Google Suggest was probably the biggest public release of such a feature, which I am much more impressed with than an interactive map. Just the shear fact that no matter what letter you type, you will have the top 10 Google results sitting in a scrollable DIV just beneath the textbox in an instant… that is quite impressive!

Are you aware of any good resources for learning “responsible” JavaScript? Esp. for those of us (ahem) who have never had particularly well-developed JS skills, so are not necessarily unlearning anything….

Flickr are using this quite a lot to edit metadata on an image. You need to have a user account to really experience it but they’ve put it to good use. As with the other examples, it means that part of a page can be updated without the need for reloading the entire page, making the system much faster.

* WinXP, FF 1.0
* text size bumped up a notch (high resolution combined with old eyeballs)
* it looks like longer comments get cut off…but if I highlight towards the end and keep “pulling” then I can see the rest, as if there ought to be a scrollbar.

OK lots more code, but maybe I’m daft, but the xmlhttprequest stuff only seems to be used for ad switching. All the images are obtained from a server-side process.

Getting xml/html is fine for partial rewrites, but the zooming could all be done using js code. And then have a server-side request for the right image, using coordinates. Which is what I think the site is using.

So either I need to go away and read it more thoroughly or this isn’t using XMLHttpRequest to do the zooming.

Think that’s my fault - cried XMLHttpRequest to soon (http://www.sitepoint.com/blog-post-view.php?id=220528) after finding it the source. See know that it’s more clever structuring of URLs and modifying img src attributes (via the set tile method). Still very cool though.

As Bernhard says, the core functionality isn’t actually XMLHttpRequest. I was following Simon’s comments and hadn’t bothered sifting through the source.

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 happy to discover there are other ways to pull off this kind of functionality — having a choice never hurts.

That map application was pretty cool. I think it would have been possible to do it without, you click the map and the server generates a new image. Maybe I will learn to use XMLHttpRequest some day when I get time to spear.

Dave didn’t note this, but at Navarik, a company he did some work with much of the past year, we’ve been using XMLHttpRequest to load dynamic sections of very complex pages in web-based applications for over a year now.

Big companies such as Shell Oil have been using these apps, and using XMLHttpRequest helps make them behave in more desktop-like ways, since otherwise those monster-size pages would take forever to do full refreshes on:

I think the rising popularity of the XMLHttpRequest interface might become the killer reason for coding web pages in XHTML. If all web pages are XML documents, then they can all be easily retrieved via the XMLHttpRequest interface, opening up new possibilities in enhancing the experience of users of the web.

Actually you could argue that the map uses a kind of XMLHTTP, since it sends requests back to the server for the data (= the images), even though it uses the ancient [someImgEl].src technique instead of modern XMLHTTP.

I couldn’t resist writing a little piece about this map, XMLHTTP, and what it all means.