Tag Archive for 'Progressive Enhancement'

Progressive Enhancement in Web Mapping - An Example

image

image

A while ago I blogged about Static Maps and how these could be used without any JavaScript.  This means that Static Maps can be used to develop mapping applications that use ‘Progressive Enhancement’.  Basically this is a fancy way of describing applications that gradually increase their functionality only as and when required by the end user (so the application becomes progressively enhanced).

One of the disadvantages of JavaScript mapping APIs is that the browser needs to download the JavaScript library before the mapping loads.  This can take a little time.  If you use a static map it requires no download of the JavaScript library and therefore a quicker download of the page and map.  This means that you can use these together, starting with the static map, and then progressing to the JavaScript mapping API only if the end user needs advanced map navigation or searching.

Active Hotels have implemented a great example of progressive enhancement using Multimap Static Maps and the Multimap API.  It is really important that the hotel brochure pages download really quickly (so as not too lose the end user).  Active Hotels also wanted a map on the page, but perhaps only about 20% of end users ever interact with the map (e.g. dragging it to pan).  So if Active Hotels used a full Mapping API for the page it would lead to slower downloads and 80% of the end users would not use the advanced mapping functions anyway.  Instead Active Hotels used the Multimap Static Maps for the initial map on the brochure page (see image above).  If a user clicks on the static map to interact with it, only then is the Multimap API downloaded and a full rich ’slippy’ map is available (see image below).

Try it for yourself here or by searching for a hotel on Active Hotels.

image

Static Maps - Look no JavaScript!

With wordpress.com I can not use any JavaScript in my posts.  This may be for sensible reasons, but it does make it difficult for me to put a map in a post using one of the Web Mapping APIs.  However help is at hand using the Multimap Static Map API.  Using this I can easily add a map in my post with no JavaScript like this:

To do so all I need to do is insert an image and set the src to a URL with the required parameters.  In this case it is:

http://clients.multimap.com/API/map/1.2/[your_api key]?qs=Fleet%20Street&countryCode=GB

It is that simple!

You can also use Windows Live Writer to insert a Live Map into a blogpost.

Static Maps are often used for “Graceful Degradation“, where a page uses the JavaScript Multimap API and then falls back to using Static Maps if the browser has JavaScript turned off (or the browser is unsupported).  See this Documented Example for details on how to do this.

It is also possible to use Static Maps for Progressive Enhancement.  More on this later….