Quantcast
Channel: maps for developers - Medium
Viewing all articles
Browse latest Browse all 2230

Every feature as a dot, down to street level

$
0
0

I visualized every feature, down to street level, with dots:

I love how early European maps are shaped by the decisions of the creator more than by data. Look at the way the different "layers" work together in this map from 1682 by Sebastian Münster, of Nordgau (present day Bavaria, Germany). Roads and labels and hills and illustrations overlap, connect, and warp to make room for each other.

I want to be able to achieve a similar sense of "awareness" between my data layers. After some experimentation, I stumbled up a technique that gets me three things:

  1. Features never clip when hitting data boundaries.
  2. Features never overlap other features.
  3. Fill areas composed of fields of symbols rather than flat fills or patterns.

Technique

The main way to accomplish these effects is to rely on font symbolizers. Mapnik, the image renderer behind Mapbox Studio, is smarter about font placement than marker or polygon placement. I use a font composed of a single dot character, mapped to the letter 'b'. The basic CartoCSS for the hillshade layer looks like this:

#hillshade {
  text-face-name: 'icon Regular';
  text-name: "'b'";
  text-margin: 5;
  text-size: 15;
  text-avoid-edges: true;
  text-allow-overlap: false;
}

When applied to a complicated polygon layer, like #hillshade from Mapbox terrain this already accomplishes the three points in the list. But sometimes this technique doesn’t fill areas as densely as I’d like. To increase the density, I duplicate my layer by creating an attachment and apply an offset to double the number of markers that can be drawn from the data. Since my #hillshade layer is interacting with every other in complex manner and features are dropped almost at random, there pattern looks organic and natural:

#hillshade:more {
  text-face-name: 'icon Regular';
  text-name: "'b'";
  text-margin: 5;
  text-size: 15;
  text-avoid-edges: true;
  text-allow-overlap: false;
  text-dy: -15;
  text-dx: -5;
}

The dot map is an abstract experiment, but with more complex fonts, style rules, and custom data, a lot more is possible. See Duncan's Mario Map for a little hint of what happens when some of these techniques are put to use.


Viewing all articles
Browse latest Browse all 2230

Trending Articles