At Nelen & Schuurmans, we currently build our GIS/mapping webapplications using Mapnik and GDAL to render overlays, rasters, WMS sources, polygons/shapefiles et cetera. We then let OpenLayers handle the clientside drawing and layering using the supported mapping APIs (Google, Bing, OSM).

This works well, and Mapnik/GDAL is a powerful combination of mature software projects. There’s one obvious downside though: interactivity. The serverside rendered images are static in itself. OpenLayers handles a lot of stuff, like custom tile loading, markers and boxes, but there’s a trend in other frameworks to do a lot more in terms of clientside interactivity:

Leaflet

Leaflet by CloudMade is one of them, supporting tile layers, polylines, polygons, circles, markers, popups, image overlays, WMS layers and GeoJSON. Interactive features include ‘drag panning’, ‘scroll wheel zoom’, ‘double click zoom’, ‘shift-drag zoom to bounding box’ on the Desktop, and ‘Touch-drag panning’, ‘Multi-touch zoom (iOS only)’, ‘Double tap zoom’ and ‘Panning inertia’ on mobile browsers (iOS, Android). Another interesting feature is CSS3 styling of popups.

The code is on Github: https://github.com/CloudMade/Leaflet.

Rotary Maps

Another interesting clientside Javascript/SVG mapping library is Rotary Maps. It combines RaphaelJS with the V3 Google Maps API to layer vector graphics on top of the map.

Code also on Github: https://github.com/thumbtack/rotarymaps