Skip to content

Instantly share code, notes, and snippets.

@perliedman
Created June 18, 2013 10:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save perliedman/5804288 to your computer and use it in GitHub Desktop.
Save perliedman/5804288 to your computer and use it in GitHub Desktop.
Map Design Crash Course

Map Design Crash Course

Overview

  • Spatial "raw" data is usually in vector form.
  • Nodes (sometimes called coordinates or vertices), sometimes connected to form lines, linestrings or polygons.

Some concepts in spatial geometry

  • A point is a node
  • A line to two connected nodes
  • A linestring is two or more lines connected to each other
  • A linear ring is a linestring where start and end share the same coordinate
  • A polygon is the surface enclosed by a linear ring

Features

A point, line or polygon is can all be referred to as a feature.

A feature consists of a its geometry and a set of attributes.

An attribute means a number or a string of text.

For example, a city can be a feature with a point as its geometry, and two attributes:

  • Name (string)
  • Population (integer number)

Features are commonly grouped depending on the type of attributes. This makes it easy to store them as a table in a relational database.

Projections

The earth is (more or less) round, but maps are flat.

There are very many ways to translate earth's sphere to flat maps.

  • A point on earth's sphere is usually defined by its latitude and longitude
  • Latitude is how far north or south the point is (from the equator)
  • Longitude is how far east or west the point is (from Greenwich's meridian)
  • Latitude and longitude coordinates are often called WGS84 or GPS coordinates
  • GIS people call lats and longs EPSG:4326
  • The Mercator projection is a way to turn latitudes and longitudes into flat maps
  • Spherical Mercator is the most common way to make maps on internet
  • Spherical Mercator aka Google Mercator, EPSG:900913, EPSG:3785 and EPSG:3857

Tiles

Map images usually get large or very, very large.

To avoid loading images larger than your memory, we split map images into tiles

This works fairly well, but can sometimes give artifacts such as cut off texts

Turning spatial vector data into images

              projection + styling
Vector data ------------------------> bitmap image
  • Styling is usually done in some declarative language
  • The styling language is interpreted by a renderer
  • The renderer turns uses the styling rules to render bitmap images from the vector data
  • A common map styling language is SLD, which is an XML format
  • A less common, but more powerful language is CartoCSS, used by TileMill
  • CartoCSS is converted by TileMill into an XML format that resembles SLD
  • The XML is consumed by TileMill's renderer, Mapnik.

Software

  • TileMill - map design studio
  • PostgreSQL - Relational database
  • PostGIS - Spatial extensions for PostgreSQL
  • QGIS - GIS toolkit as desktop app
  • GDAL/OGR - command line tools for spatial data
  • Mapnik - map image renderer used by TileMill

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment