The application of modern digital technologies to mapping has led to a large ecosystem of tools and services. Geographic Information System (GIS) technologies like ESRI’s ArgGIS Online are used by local governments to maintain and visualize mapping data. Several large public web/mobile maps exist for the average consumer (e.g. Google Maps, Apple Maps). Numerous smaller companies provide mapping applications for countless outdoor activities (e.g. Gaia, TrailForks). And then companies like Mapbox provide businesses the tools necessary to make their own maps. For example, Strava uses Mapbox primarily to render activities onto maps and automotive companies use Mapbox for car navigation systems.

A broad community of free and open mapping tools and data exists on the web. At it’s core is the OpenStreetMap project that consists of a networked database of mapping data, as well as a style to render that data and the website openstreetmap.org, which hosts the rendered data.

Mapbox is a private company that provides maps for other businesses, but also develops significant open source tools inculding co-developing the iD web editor that is used by openstreemap.org. They developed TileMill, which was a desktop application for designing maps that leveraged Mapnik. It has since been deprecated in favor of a web-based solution named Mapbox Studio.

Mapnik is a set of open-source mapping tools that provide the ability to render maps based on mapping data. OpenStreetMap data can be converted into a format that Mapnik can process using osm2pgsql.

planet.openstreetmap.org provides weekly archives of all data, as well as “extracts” of regions around the globe.

The OpenStreetMap Foundation maintains numerous servers around the globe. These consist of servers that cache tiles at various zoom levels and servers that render those tiles.

Overpass API provides a web API for querying OSM data as well as language to compose queries on their website.

The USGS EarthExplorer is a bit cumbersome to use.

maptiler provides generic mapping services.

Rendering tiles

Small areas can be downloaded from openstreetmap.org using the “Export” button in the title bar. The data is exported as map.osm in OSM XML format. This is the first step in using JOSM to edit maps. The user initially needs to select an area to download before anything is rendered.

I then installed PostGIS and imported map.osm into the database.

There was a fair amount of confusion because a simple set of scripts has been replaced my more complex infrastructure. The scripts now appear to live in the mapnick-stylesheets repository. This excerpt from the PosGIS in Action textbook documents how to use these deprecated scripts. In contrast to that documentation, the mapnik-stylesheets mirror contained a script named get-coastlines.sh, but unfortunately it could not download all of the required data. The original files are accessible on trac.openstreetmap.org.

So instead, I cloned openstreetmap-carto, which generates Mapnik XML, but then there’s Kosmtik, which appears to wrap all the things. So much software!!!

Displaying data

Maps can be displayed on a website using a Slippy Map with the most common implementation being Leaflet

Geojson

Mapbox developed geojson-merge and togeojson, which are very helpful when converting data from FPX or KML and then merging the results into a single, which can be rendered using the Mapbox Javascript libraries.

Note that Geojson supports a lot of features. For example, rather than assigning a color to the Geojson features at runtime it is possible to add a color property to the Geojson data itself (see Style lines with a data-driven property).

Loading a lot of Geojson data into a map can be less effecient than generating vector tiles using Mapbox’s tippecanoe.

I initally found the relationship between source data and Mapbox styling slightly confusing.

The Mapbox GL JS examples were incredibly helpful.

Osmium Tool can convert from OSM XML to Geojson among many other functions, however I ran into a bunch of problems converting anything other than a single node. The Overpass Turbo website uses osmtogeojson internally.

Clone the Carto Github repository and navigate to the symbol directory. Then generate a PNG from a desired SVG:

inkscape -w 15 guidepost.svg -o guidepost-15.png