[Openstreetmap] SVG, JavaScript, DOM, AJAX and web mapping

Richard Fairhurst richard at systemeD.net
Tue Jul 5 19:57:53 BST 2005


On 5 Jul 2005, at 15:20, Nick Whitelegg wrote:

> This is an interesting concept and got me wondering about how it could 
> be
> used for web mapping. An approach where...
>
> 1) User navigates the map by pressing an arrow key, e.g. moves left
> 2) Client (JavaScript ) sends server an HTTP request for data in the 
> new
> grid square
> 3) Server sends back the data in the new grid square as XML embedded 
> within
> an HTTP response
> 4) JavaScript processes the data. Map is stored client-side as an SVG
> document. JavaScript redraws the map by manipulating the Document 
> Object
> Model of the SVG.

This is very similar to what we're doing at waterscape.com, except with 
Flash rather than SVG/JavaScript.

The user opens a page containing an SWF client (non-dynamic) which 
sends the HTTP request for data in the new grid square, as per above. A 
'responder' script on the server sends back the data (in query string 
format, not XML... my feelings on XML are roughly equivalent to 
http://ex-parrot.com/~chris/sucks/trainwreck.html ).

This data comprises two things: a list of icons, each with grid 
reference, and a list of waterways. The SWF client has all the icons 
embedded in its 'symbol library', so can place these on the map 
instantly. For the waterways, which are vector data, a further call to 
the server results in a dynamically-generated SWF (courtesy of Ming, 
ming.sourceforge.net) which can be overlaid on the map.

There's a third element of the map: the raster tiles, which form the 
backdrop to all of this. These follow a consistent naming convention 
and therefore can simply be loaded in as JPEGs directly from the 
server, without any need to consult the responder.

The client<->server communication is pretty simple call-and-response 
stuff. Flash actually has a much nicer facility for opening up sockets 
and 'talking' on those, but unfortunately, most corporate firewalls 
seem to block the port range chosen by Macromedia. Since our map has to 
be accessible to the general consumer, this rules it out for us. 
(That's also why we've used Flash rather than SVG.)

cheers
Richard





More information about the talk mailing list