Web mapping is serving maps online, quickly. To make a web map, you need map data (typically organized in a database), map tiles rendered from these data with custom styles, geographic features you wanna overlay, and a mapping library that present all these online.

Figure: Technique stack of web mapping

Mapping Library

Open source libraries:

  • Leaflet: lightweight mobile-friendly interactive slippy maps.
  • D3.js makes non-slippy maps with projections other than WGS84 / Pseudo Mercator.
  • OpenLayers: complex, bulky and slow; but it seems to have a comeback.
  • Polymaps: (inactive since Jun 2011) a project by SimpleGeo (acquired by Urban Airship) and Stamen.
  • Modest Maps: (inactive since mid-2013) a project by Tom Carden, Tom MacWright, and Michal Migurski, effectively.

Commercial mapping APIs:

  • Google Maps API
  • ESRI ArcGIS API
  • Bing Maps API
  • Nokia HERE Maps API
  • Mapbox API

mapbox.js is a JavaScript API developed upon leaflet.js as Vladimir Agafonkin got employed by Mapbox. Mapbox.js uses the Mapbox web services API, which requires an API access token; limited API access is available for free. API access tokens are public tokens (pk) can be shared in places where they are easy to rotate (like inside scripts on websites). Secret tokens (sk) must be kept private and used within desktop and mobile apps, which are usually more difficult to update. Map ID will also be automatically included in your share URLs and map embed code.

WebGL is a Javascript API for rendering 2D/3D graphics in web browsers. It supports camera position (bearing, pitch) and lighting. OpenGL provides a 2D API for drawing triangles efficiently. Example visualizations: Wind power simulation by Vladimir Agafonkin;

Map Tiles

Map tiles are just raster images on the Web, which makes up the base layer. Google Maps invented the Web Mercator projection (epsg:3857, WGS84 / Pseudo Mercator) and map tiles. All other slippy maps followed Google's lead, with tiles at the base.

  1. Map tile providers: OpenStreetMap, MapBox, Stamen, MapQuest, CloudMade.
  2. Tile Server: Mapbox can host custom tiles; or you can run your own tile server with TileServer.php, TileStache, TileCache, TileStream , mbtiles-server, mod_tile.
  3. Tile Renderer: Typically, web tiles are rendered with Mapnik or GMT (Generic Mapping Tools).
  4. Tile Design: TileMill is a styling tool for map tiles; The format of styling files is CartoCSS.

Vector map tiles are map data packaged in small files for tile regions, which are rendered at client side for high resolution display and custom styling. Vector tiles are enabled by GPU and WebGL.

Map Data

OpenStreetMap is a major source of map data for many applications, with reasonably good road network topology. At 2016-09-20, OSM database dump planet.osm takes over 721.1GB in uncompressed XML, 52.8GB compressed in bz2, and 32.9GB in PBF. Initializing a traditional RDBMS such as PostgreSQL/PostGIS with all OSM data can take several days and 300-400 gigabytes of storage.

Overpass API, formerly known as OSM Server Side Scripting, is a read-only API that serves up custom selected parts of the OSM map data. Overpass API acts as a database over the web; the client sends a query to the API and gets back the data set that corresponds to the query. Overpass Turbo is a GUI for testing and developing queries for the Overpass API, which can also used for simple analysis of OSM data.

MapBox takes data directly from OSM, in style.

Geographic features for web mapping are typically shared as GML and GeoJSON files. Shapefiles can be converted to GeoJSON with OGRE, a web client of ogr2ogr.

Resources

Major Commercial Players in Web Mapping:

  1. Mapbox: iD editor; tiles (street, outdoors, light & dark) and vector tiles; custom map provider for enterprise (CartoCSS, TileMill); leaflet, and Vladimir Agafonkin; Mapbox GL.
  2. CARTO: tiles (Positron, DarkMatter); CARTO Builder (enterprise location analysis software); founded as CartoDB in Madrid in 2012 also based in NYC.
  3. Stamen Design: tiles (Toner, Watercolor).
  4. Mapzen: vector tile service; real-time WebGL maps (Tangram: Cinnabar, Tron, Terrain).

Maptime Lessons and Resources

Eric Theise - Let's Talk About Your Geostack

🏷 Category=Geographic Information System