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

Leave a Reply