Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

DHTML '05

January 06, 2005

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.

CERN satellite photo with LEP path highlighted

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.


January 06, 01h

You can click on “Lesezeichen hinzufügen” (“Add bookmark”) to get a link to exactly the map you are currently viewing. I tried to reproduce your screenshot and here’s the result:
http://map.search.ch/index.en.html?x=-52553&y=21369&z=256

January 06, 05h

Yeah, I saw this a while back. It reminded me a bit of Keyhole, although Keyhole is certainly a little more fluid with all its OpenGL gimmickry.

http://keyhole.com

David says:
January 06, 06h

DHTML?! That’s pretty impressive. I saw this map before but i didn’t really think about how it was made. I guesss i just assumed it was Flash or Java or something.

I can’t wait to use XMLHTTPRequest in something (what a thing to get excited about ;-)

4
Jim says:
January 06, 08h

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

http://www.w3.org/TR/DOM-Level-3-LS/

January 06, 10h

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” />

then you could access it in your script as follows:

function DataIslandExecute(uri){
appXMLObject.async = false;
appXMLObject.SRC = uri;

return appXMLObject;
}


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.

Dave S. says:
January 06, 10h

“Why does everybody ignore DOM 3 Load and Save? It works in Firefox and the latest Opera betas already…”

You answered your own question.

January 06, 10h

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!

If you’re further interested in the nitty gritty of Google Suggest, I found this great dissection last week:
http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html

Turnip says:
January 06, 10h

Drew MacLellan talked about XMLHttpRequest too. He explains how this technology could be beneficial in *decreasing* server load.

http://allinthehead.com/retro/241/xmlhttprequest-for-the-masses

9
pablo says:
January 06, 10h

wow! thanks for that amazing link.
I can see my house.
I admit Switzerland is a small country, but it stills amazing!

Elaine says:
January 06, 10h

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

Dave S. says:
January 06, 10h

Elaine —

I’d be interested in some good resources as well. Most DHTML scripts you’ll now find are steeped in 1997.

Peter Paul Koch has written a few articles on the concept of unobtrusive Javascript that might serve as a starting point —

http://digital-web.com/articles/the_behavior_layer/
http://digital-web.com/articles/separating_behavior_and_presentation/
http://digital-web.com/articles/separating_behavior_and_structure_2/

And his QuirksMode has a bunch - http://www.quirksmode.org/. Other than those and a few loose articles here and there, I’m pretty much in the same boat. I don’t know what else is out there.

Pascal says:
January 06, 11h

only on a sidenote:

the service uses sonething along the lines of mod_rewrite. this method allows you to directly link to a spot on the map that you have found

as an example, you can spot the house that i am living in on this map: http://map.search.ch/4058-basel/riehenring-20

(at least for me i worked…

rick says:
January 06, 11h

Javascript Remote Scripting is a cross platform library for this purpose. It also comes with server side scripting libraries for various environments, so you can easily make simple RPC calls.

I used it to write a browser-based OPML browser (similar to http://www.opml.org/howToImplementOpmlDirectoryBrowser) many moons ago, but it has since faded from oblivion.

rick says:
January 06, 11h

crap… forgot the java script remote scripting link: http://www.ashleyit.com/rs/main.htm

Neil T. says:
January 06, 11h

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.

Elaine says:
January 06, 12h

I’d forgotten about PPK; thanks!

Totally (?) off-topic, I’m getting weird behavior reading the comments.

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

haven’t tried debugging or anything (sooo busy….) but thought you’d want to know.

17
John says:
January 06, 12h

www.in-store.com predates Suggest by a few months and is a pretty good usage of XMLHttpRequest.

Eric says:
January 06, 12h

The first time I saw a “live search” I thought it was awesome, and hadn’t seen anything like it. It’s definitely going to be a trend in ‘05

19
Tim says:
January 07, 01h

XMLHttpRequest is great. But I’m not convinced this mapsearch is using it.

Isn’t it just loading images on demand? Which image pre-loading code has been doing for years…

I can’t find any references to XMLHttpRequest in the code, and there’s no external file referenced that I can see. Am I missing something?

Still very impressive.

Dan says:
January 07, 04h

Tim, take a look at the /map.js file and you’ll see the xmlhttprequest functions 2/3rds of the way down.

21
Tim says:
January 07, 05h

Aah, thanks Dan, that cheeky doc.write imported map.js.

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.

*befuddled sigh*

January 07, 06h

Thanks for all the great comments on map.search.ch!

Actually Tim is right: We don’t use xmlhttprequest for the actual map (that’s why it also works in Opera and other non-xmlhttprequest-supporting browsers).

We’re in the progress of adding some features that will make plenty use of xmlhttprequest, but as of now I think this is just a DHTML demonstration, not really a xmlhttprequest demonstration.

January 07, 06h

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.

Vlad says:
January 07, 07h

hmmm, so , what exactly was the point to this post then?? you know what they, the comments are stronger than the post?

Dave S. says:
January 07, 07h

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.

W3news says:
January 08, 07h

I don’t have used xmlhttprequest for this website: http://mirror2.w3news.org/
I just set some iframes with a xml/rss file and than load information from that, so opera 7.54 and older works fine.
I have to a xmlhttprequest version: http://www.w3news.org/oud/

Robin says:
January 08, 10h

Here’s another great map, no flash or java:
http://www.multimap.com/map/photo.cgi?client=public&X=533258&Y=180057&width=500&height=310&gride=529090&gridn=179645&srec=0&coordsys=gb&db=pc&pc=&zm=0&scale=10000&up.x=186&up.y=3

It overlays transparent steet maps over satellite images. I didn’t check if it used xmlhttprequest though.

28
Jon Berg says:
January 09, 11h

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.

January 10, 11h

XMLHTTPRequest is fantastic. Together with more extensive use of DOM and JavaScript it will bring web-applications to the next level.

I used XMLHTTPRequest in my latest project with a CRM system. Have a look for more information:

http://sleepyhead81.blogspot.com/2005/01/web-applications-in-2005-case-study.html

January 10, 12h

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:

http://www.navarik.com/home/news/technology/making_web_applicati/jan05/

http://www.mezzoblue.com/archives/2004/05/10/self_promoti/

31
Isaac Lin says:
January 11, 07h

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.

ppk says:
January 11, 10h

Dave,

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.

http://www.quirksmode.org/blog/archives/2005/01/with_httpmapsea.html

Hope this is useful to someone.

porneL says:
January 24, 05h

I wonder why XMLHTTPRequest is needed here.
Can’t it just be a layer with set of images with src like “map?Scale=10000&Lat=12.34&Lon=56.78”?

The DHTML part of is is great (zoom and pan), but it don’t see anything that cannot be done in DHTML without XMLHTTPRequest.