For many of the tile services listed in Part 3, the purveyors of the tiles provide their own fully functional API that allows you to build on their map and make it available to clients. However, some of them—like MapBox, Stamen, and OpenStreetMap—just provide you with the basemap (and in OSM’s case, the data), and you get to figure out how to access it. The same decision is necessary if you create and serve your own tile sets (see Parts 5-7).
How to know which base library to start off with? While researching, I stumbled upon a forum with the below quote from Tom Carden, a developer of Modest Maps and Polymaps. Here is his expert advice:
“+1 on OpenLayers, the swiss army knife of open source mapping. Don’t overlook Google Maps if you want plug-and-play. Choose Modest Maps or Leaflet if you want a minimal foundation and tight control over behaviors. Choose Polymaps if you want API harmony with D3 and especially if you love SVG.”12
3. Modest Maps: If Leaflet is light, Modest Maps is, well, modest. A joint project of Stamen, Map Box, and Bloom, it provides bare-bones functionality for loading tile layers and handling map events, without even providing visible interface controls. It is meant to be built on top of, so may be a good option for crack programmers who want a lot of flexibility to build their own thing from near-scratch. For others, the Wax library (covered below) adds quite a bit more out-of-the-box functionality.
4. Polymaps: Claiming their place at the cutting-edge, Stamen and SimpleGeo (since purchased by Urban Airship) put together a whole different animal from the first three libraries. While it can deal with raster tilesets, it is built to layer vector data in SVG format (for more on SVG, see Part 5). The library takes in GeoJSON objects and renders their data as SVG graphics, rendering only the features that are within the bounds of the requested tiles. Styles are applied to the features through CSS rules. Instead of constructor functions, the library uses jQuery-style chaining of factory methods to add layers to the map, with each layer turned into its own dynamic SVG. Maps are non-interactive by default, with interaction and controls added by separate function calls. Nicely-styled zoom buttons are provided, but because it doesn’t rely on the dimensions of fixed-size raster tiles for the map scale, using a mouse wheel gives you an almost infinite number of zoom levels. Each feature on the map can be dynamically restyled, making it a powerful engine for interaction, animation, and thematic mapping. Despite all of this dynamic rendering, the vector-tile approach makes it relatively fast. The downsides are a lack of support for non-Web Mercator projections, and the reliance on SVG means that it won’t work in many older browsers.
5. ka-Map: Last updated in 2007, this library can officially be considered old school. It was primarily designed as a web GIS interface for maps served with MapServer. It looks the part, with an ArcView-style toolbar and legend panel. It uses tile services and can overlay some vectors. Documentation is spotty at best.
jQuery extension libraries:
8. jump: A very lightweight jQuery extension map library, jump relies on OSM tiles as a default. The zoom/pan interface is crudely drawn and doesn’t even style the mouse pointer appropriately. There are four demos on the site and no other documentation; the methods shown just include adding markers and events and custom code for using a different tile server.
9. Mapstraction: An API wrapper, Mapstraction translates base libraries into a universal syntax, allowing for quick switching between tile map providers. It currently supports Google, Bing, MapQuest, Leaflet, OpenLayers, and some deprecated and foreign APIs. Their sandbox application is a useful tool for working with examples, and the documentation seems relatively complete. The trade-off for simplified coding is that it may not have the full functionality of its clients, and given that virtually any API can draw basemaps from multiple sources nowadays, it may be more useful simply to learn the ins and outs of one base library and stick with it.
10. MapQuery: This wrapper for OpenLayers translates it into jQuery syntax and adds some of its own widgets, including different zoom buttons/slider, mouse position listener, pop-ups, layer controls, and windows. It requires jQuery to be included. There isn’t much for tutorials on the website, but the documentation is thorough.
11. Wax: Designed by MapBox to work with Modest Maps, this extension library takes advantage of layering functions in a host API (Modest Maps, Leaflet, OpenLayers, Polymaps, Google, or ESRI) and builds on them with custom interface tools, widgets, and interactions. It also allows you to access tilesets stored on the MapBox server through its TileJSON process, whereby generic script is stored in a JSON file that accesses the tiles.
12. GeoExt: An extension for OpenLayers based on the Ext JS library, GeoExt provides useful methods for info panels, windows, pop-ups, forms, and other interface widgets. It is particularly useful for displaying layer trees and feature attributes. It also has some methods for interactive map printing, though the examples of this on the website don’t seem to be working at present. It requires including Ext JS 4 and OpenLayers to function.
13. ReadyMap: This library from Pelican Mapping renders 2D and 3D imagery on a WebGL globe surface. It pulls in data using WMS and TMS, and can interface nicely with OpenLayers and Leaflet to reproject web maps built with them. There’s not a lot of options here yet other than what you build into OpenLayers and Leaflet, but plans for add-ons appear to be in the works. The interface does allow you to zoom, pan, and rotate the scene smoothly and efficiently. Documentation is sparse, consisting of 20 or so examples that you can “view source” from and a user forum.
14. Timemap.js: This aptly-named library designed to plug into Google, Bing, or OpenLayers renders temporal datasets in GeoJSON, KML, or GeoRSS simultaneously on a map and an interactive timeline, using code developed through MIT’s SIMILE project. Features appear on the map only when they are visible on the timeline, and disappear when not; they can also be animated using the timeline as a controller, with tweening methods available to make the animation smooth.
15. Cartographer.js: Still in alpha, this library extends the Google Maps API to easily add nice-looking choropleth, proportional symbol, and pie chart layers using the Raphaël library to draw features as SVGs. It comes with pre-encoded polygons for U.S. states and counties to render as choropleth features. The proportional symbol method supports multiple resolutions, clustering point data at smaller scales and creating more separate symbols at larger scales.
Useful non-map-specific libraries:
17. D3: Dubbed as shorthand for “Data-Driven Documents,” this library cooked up by programmer Michael Bostock is designed to dynamically render and style HTML DOM objects from datasets. Its d3.geo.path function projects GeoJSON files as SVGs, making it a potential tool for thematic vector-based mapping, but without tiling embedded. There is a custom tiler available in the examples section of the documentation, and D3 also integrates well with Polymaps, the SVG-based tile mapping library. It includes four built-in projections, and can read in any other projection equation. It’s pretty too, with support for animation and smooth transitions.
18. Raphaël: A lightweight vector drawing library developed by Dmitry Baranovskiy, Raphaël uses XML-based VML to create SVG graphics and embed them as interaction-ready DOM objects in the web page. Maps can be fully created from vector files transformed into XML, and vector layers created with Raphaël can be layered onto existing tile maps using a tile mapping library. The documentation is pretty light and there aren’t any tutorials, so look around for examples to get you started.
11Carillo, German. 2012. Web Mapping Client Comparison v.6. Accessed July 20, 2012. <http://geotux.tuxfamily.org/index.php/en/geo-blogs/item/291-comparacion-clientes-web-v6>
12Carden, Tom. 2011. Re: d3 and map libraries. Accessed July 23, 2012. <https://groups.google.com/forum/?fromgroups&pli=1#!topic/d3-js/4CQ7tmpDi-E>
13Schütze, Emmanuel. 2007. Smart Map Browsing (thesis). Bremen, Germany: BremenUniversity of Applied Sciences.
14File:GeoServer GeoNetwork with web app.svg. 2010. Accessed July 23, 2012. <http://commons.wikimedia.org/wiki/File:GeoServer_GeoNetwork_with_web_app.svg>