In this post I give a brief summary of some core mapping concepts and demonstrate how to draw geographical points and areas using Mapbox/Leaflet.

Working with geolocation data

By now, thanks to the ubiquity of GPS on mobile devices, most people are familiar with the concept of assigning a coordinate point to a location on the surface of the Earth. This point is given by a pair of spherical angular coordinates (also referred to as geographic coordinates) (λ, φ) called longitude and latitude in a geographic coordinate system. Longitude is the east/west angle from the prime meridian, while latitude is the north/south angle from the equator.

Datums

Because the Earth is not a perfect sphere, it is necessary when doing geospatial calculations to take into account the deviations of the Earth’s ellipsoidal surface from a spherical surface. Such a model of the Earth’s surface is referred to as a datum. The predominant geographic reference system used for this is the World Geodetic System, the latest revision of which is WGS 84. Other datums one might encounter are the NAD 83 and GRS 80. Transforming between these reference models can result in slight coordinate shifts (from a few centimeters to a meter).

Projections

In order to visualize a region of the globe on the flat surface of a map, one must project the region from the ellipsoidal surface of the Earth, where a point is specified in spherical coordinates (φ, λ), to a planar surface, where a point is specified in rectangular coordinates (x, y). Such a map projection results in a distortion of one or more of the following properties: distance, area, shape, or direction. There are dozens of established projection schemes one can choose from, each optimized to solve a particular type of problem. Two of the most common types of projections are (both conformal, angle preserving): Mercator and transverse Mercator.

Coordinate systems

In order to keep track of the various coordinate systems to help simplify transforming between them, a repository was created, with unique spatial reference identifiers (SRID) assigned to each one. Each coordinate system must specify the projection and associated datum (e.g. WGS 84) upon which it is based. Here are a few common coordinate systems:

• EPSG:4326 (uses WGS 84 datum): This is the default geometric (spherical angular) coordinate system for the WGS 84 datum. It is sometimes referred to as the WGS 84 coordinate system.

• EPSG:3857 (uses WGS 84 datum): Commonly referred to as the ‘Web Mercator’ system (also known as EPSG:900913), this coordinate system is based on a Mercator projection, and is used by many mapping applications (e.g. Google maps, Bing, OpenStreetMaps, Mapbox/Leaflet, etc). This specification has a somewhat curious (and confusing) history outlined well in an article by Alastair Aitchison. In practice, when using an API based on this system, one specifies the coordinates in spherical angular coordinates (ESPG:4326), and the service then carries out the projection into the EPSG:3857 system for rendering.

• State Plane Coordinate System (SPCS) (uses NAD 83 datum): This is a collection of coordinate systems resulting from a local projection (typically either the transverse Mercator or the Lambert conformal conic projection). The St. Louis Metropolitan Police Department use this system to report their crime incidents, in particular, they use the EPSG:26996 Missouri-East SPCS. The distances (typically given in units of feet, but sometimes meters) of the coordinates are measured relative to an origin unique to that projection lying outside of the state.

Esri has a concise overview of all of these concepts that I found useful.

GeoJSON data format

GeoJSON is a commonly used specification for encoding geospatial data using the JSON data format. The specification allows for several different types of features, such as a “Point”, a “LineString” and “Polygon”. The GeoJSON spec does not require the points within a polygon to be ordered (see this thread), but many applications that import GeoJSON do require polygon points to be ordered (either clockwise or count-clockwise). The spec also allows each feature to be assigned a set of user-defined properties (such as a description or perhaps a numerical value used to assign a color).

As an example, consider the following GeoJSON data describing a point and a polygon:

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [-90.193378, 38.631263]},
      "properties": {"myProperty": "val1"}
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon",
         "coordinates": [
                [ [-90.196158, 38.62781], [-90.193031, 38.627043],
                [-90.193368, 38.626247], [-90.19641, 38.626997] ]
           ]
       },
       "properties": {
         "myProperty": "val2",
         "anotherProperty": 42
         }
       }
     ]
   }

Interactive maps with Mapbox

The GeoJSON format can be used to encode data for use in Mapbox. The Mapbox API for displaying maps is built on the Leaflet library. The Mapbox examples page shows many different use cases of loading GeoJSON data. Also, checkout this Leaflet example. Below I show an example where I draw a few features on a map for St. Louis: a polygon showing the outline of City Garden, and the old and new locations of the tech incubator T-REX.