In which we play at being cartographers
Righto, so you’ve got some data and need to provide a map for your users to view and interact with all of your lovely new data. Good news, you’re spoilt for choice! (Are you detecting a theme here?)
Web mapping loosely falls into two categories:
- JavaScript libraries that will let you build and customise the map interface (2D and/or 3D) to your heart’s content, but require you to host the data, or plug it into other people’s web mapping services.
- Software as a Service platforms that provide simple and powerful GUIs for the creation of maps and support hosting of all sorts of different data formats.
And, of course, there’s some grey area between the two – with many libraries supporting standard web mapping protocols like WMS, WMTS, and WFS – and with several of the SaaS platforms providing their own JavaScript client libraries to allow users to craft their own map interfaces.
These days a lot of the modern libraries and platforms have been optimised to work well on mobile devices, and in some cases have separate libraries for developing native apps on iOS and Android.
Oh, and if you’re completely new to web mapping check out mapschool: a free introduction to geo to get yourself up to speed on the concepts behind web mapping. The New York Public Library also has a great, and pretty exhaustive runthrough, of making your first web map: From Paper Maps to the Web: A DIY Digital Maps Primer.
MaaS (Maps as a Service)
At present there are two main players in the SaaS mapping space: CartoDB and MapBox.
They both do a great job of covering the basics of map building with quick and easy tools for uploading data and push-button interfaces that abstract away a lot of the more complex spatial side of spatial data. They both also have generous free usage tiers.
CartoDB tends to focus more on the “make really pretty vector maps” side of the equation, with great visualisation tools like Torque (beautiful animations with time series data), powerful and simple push-button visualisation of data, and a wonderful SQL API for interacting directly with their PostGIS backend from the client. Oh – and they also have some support for 3D and can handle huge datasets, like colouring every river in the US.
And lastly, CartoDB comes with a powerful point-and-click map building GUI or, if you need more control, the CartoDB.js library exposes all of the same functionality. Oh, and did we mention that it’s open source and you can run your own CartoDB instance?
MapBox focuses slightly more on the traditionally geospatial side of things, with a powerful desktop map designer, MapBox Studio (which can process raster as well as vector data), some great work on tools for processing satellite imagery, developing the vector tiling standard, and pushing the boundaries of web mapping with MapBox GL. On top of all of that they also maintain iOS and Android SDKs, the Mapbox.js library; and APIs for surface heights, geocoding, and directions.
And a couple of honorary mentions:
GeoServer is an open source spatial data server that may be worth a look if you’re having to deal with larger or more complex datasets that CartoDB/MapBox can’t handle – or can’t handle without charging you for the pleasure. GeoServer also has support for more advanced functionality like WCS and WPS for extracting raw data from rasters on-the-fly, or writing processes to perform geospatial analysis on-the-fly. You can run GeoServer on its own, or in combination with other packages via the OpenGeo Suite or GeoNode.
Esri provides a free ArcGIS Developer subscription. This provides you hosting of geospatial content, access to a range of content from Australian government providers, geocode service using G-NAF data, and a range of analysis services.
NationalMap (aka TerriaJS)
And finally, a most honourary mention to the NationalMap project out of the Department of Prime Minister and Cabinet and developed by CSIRO Data61. NationalMap runs on a powerful little open source stack comprised of Cesium and Leaflet. While NationalMap, being primarily a client-side viewing framework, isn’t a true “Maps as a Service” platform it does have a nifty hidden feature – you can control what it displays by passing it URL parameters or by embedding it in an iframe and sending it cross-window messages. Especially check out the handy features for creating choropleth maps from a simple CSV file.
Ta-da! Instant map ?
You can also use TerriaJS as a library to build your own custom mapping application. See the
TerriaJS documentation to learn how to get started.
JavaScript mapping libraries
These past few years have seen an explosion in the numbers of JavaScript libraries for creating rich web mapping interfaces.
OpenLayers is probably the most mature player on the stage, and has recently undergone a ground-up rewrite of the library to simplify the API and leverage modern web technologies like WebGL, Canvas, and the full capabilities of HTML5 and CSS3. It even has support for true 3D web mapping via its OL3-Cesium plugin which seamlessly integrates the Cesium WebGL 3D globe library.
Leaflet, the relatively new kid on the block, started as a protest against other web mapping libraries that required a fair amount of knowledge of geospatial data to use effectively. As such, it is a super simple API and a more limited range of features than the likes of OpenLayers (but has a large library of community-developed plugins that can help address that gap).
ModestMaps is an even simpler library again than Leaflet, with a simple API and a focus on the core functionality of producing interactive maps easily.
Turf has been developed by the MapBox team and bills itself as “GIS for web maps” with support for common geospatial operations like buffering, contours, hex binning, et cetera performed all in the client. Turf also integrates easily with Leaflet and MapBox.js.
SVG-powered mapping data visualisations
If you’re looking at maps as more of a data visualisation tool then the subcategory of web mapping libraries that play in the SVG space are probably more appropriate for your needs.
Well we couldn’t not mention D3.js in talking about data visualisation. Michael Bowman’s Designing Beautiful Maps with D3.js talk is worth a look to familiarise yourself with the topic, and then head on over to this truly exhaustive list of examples of using D3 for maps on bl.ocksplorer.org.
The team behind the graphing library Highcharts have a separate Highmaps library that makes creating mapping data visualisations a breeze.
Lastly Polymaps is a bit of a hybrid library in that it provides image and vector-tiled maps via SVG, so you can mix up your choice of basemap (OpenStreetMap, Bing, et cetera) with your image and vector data easily.
Web mapping frameworks
The last sub-category of web mapping libraries worth a mention are the rich web mapping frameworks that exist to provide a whole UI framework around the map itself (i.e. map toolbars, layer trees and controls, advanced data query UIs, et cetera).
First and foremost is the beautiful, modern, and AngularJS-based framework map.geo.admin.ch that the Swiss Federal Office of Topography has open sourced for all to use – check out a demo.
If you’re a Sencha fan the GeoExt library is worth a look – though note that there are different versions for ExtJS 3 and ExtJS 4/5. In a similar vein you’ll find both GeoMOOSE and MapBender.
And lastly, MapFish, a lighter framework than its cousins, and based on the older version of OpenLayers, but with a standalone Java library for printing web maps in MapFish Print.