As the browser world gravitates towards mobile and its small but high-res screens, we've seen Drupal being at the forefront with the rest of the world with various new solutions like responsive and adaptive designs. Can we equally expect a more mobile-friendly user experience for maps without having to resort to hybrid technologies like Drupal 7 map app example for iPhone & iPad? What's the state of the nation in maps?
What modules and libraries do we have at our disposal in Drupal these days to achieve things like:
o location retrieval through GPS etc., aka "HTML5 location" -- bye-bye IP address-based lookups!
o CPU and bandwidth friendly techniques
o attractive styling, possibly with animation through CSS3
A survey of the various mapping-related modules in Drupal reveals that the architectures tend to have three layers:
1) a layer to allow locations to be entered and stored, usually by latitude, longitude coordinates
2) some means of collating location records (nodes, users), often taking advantage of the Views module to filter by taxonomy, distance/proximity or other criteria
3) a map rendering engine, such as Google Maps, OpenLayers or Leaflet
This Comparison of mapping modules puts in one handy table the various combinations of location storage, location collation and map renderers available in Drupal.
Today, it seems that few solutions take full advantage of what is now possible and widely supported in HTML5. Apart from IP Geolocation Views and Maps no module allows you to superimpose the visitor's current position marker amongst the other location markers and many modules cannot centre the map on a moving target. The latter is an essential part of location-based services as found in apps like http://foursquare.com or http://yelp.com that show what's around us at any time, wherever we may be.
As for CSS3... Leaflet has on its home page a "pretty CSS3 popup" with rounded corners, but as an example that's hardly pushing today's limits is it?
In terms of the underlying technologies used, maps don't do mobiles any particular favours, either. As far as we can tell, regardless of the device type and screen size, maps are assembled from fixed-size tiles prepared on remote third-party servers, usually as 256x256 px images. Here's an example of an OSM Mapnik tile, living on an OpenStreetMap server ready to be picked up by Leaflet or OpenLayers. And here's a Google tile on a Google server covering roughly the same area. After downloading and laying out these tiles, the javascript that comes with the map rendering engine you chose, then completes the map by superimposing marker images, zoom & pan controls, scale, legend etc.
With your average map built from 15 tiles or so, varying between 10k and 35k in size, depending on the level of geographic detail, it is clear that the total size of both the tiles (~ 150k to 400k) and the downloaded javascript code may take something away from a smooth user experience, if CPU capacity and bandwidth are limited. With many requests involved in rendering a single map there's also some blocking and waiting time to be added.
While certainly not the only contributor to speed, or lack of it, especially when cached after first view, it is worth noting the size of the major javascript files downloaded by the "big three" and a "modest" new-comer (for Drupal at least):
Google: [common,map,util,marker].js (122k), [controls,stats].js (58 k)
OpenLayers: OpenLayers.js 2.11 (957k)
Leaflet: leaflet.js (103k)
Modest Maps: modest.maps.min.js (35k)
"Being designed from the ground up with mobile in mind" Leaflet does seem to have the edge with a slightly smaller foot print and, as we experienced through informal tests, a slightly shorter render time compared to Google or OpenLayers for similar maps on the same device. Also snappy is Modest Maps, a very lean package that does away with pretty much all mapping frills, including out-of-the-box markers, although the base version does allow you to pan and double-click to zoom. At the time of writing there did not seem to be a Drupal interface module for Modest Maps.
All in all, while Drupal now offers more modules to do more with maps than a year ago, there's little new under the sun when it comes to maps on mobile devices specifically.