Making Tiled Maps Come Alive:
Leaflet Underneath

I think most of us have grown used to making a sharp distinction between "background map" and "overlays".

In a normal tiled map in Leaflet, the background map is static. You can add vector data on top of a tiled map, and you can interact with it by clicking etc, but the background map is more or less a dead image.

Here's a good example: lots of stores, restaurants etc, but I can't know anything about them except for sometimes their names.

Still, that image is generated from one of the most impressive geographic databases we have, the OpenStreetMap database. What is shown in those images is just one side of all the information that is stored in the database.

  <node id="2699835935" lat="40.4205411" lon="-3.7060451">
    <tag k="addr:city" v="Madrid"/>
    <tag k="addr:housenumber" v="46"/>
    <tag k="addr:postcode" v="28013"/>
    <tag k="addr:street" v="Gran Vía"/>
    <tag k="amenity" v="fast_food"/>
    <tag k="cuisine" v="pizza"/>
    <tag k="name" v="Papizza"/>
    <tag k="website" v="http://www.papizza.es/"/>
  </node>

OpenStreetMap node #2699835935

For example, here's the full OpenStreetMap data for one of the restaurants in that map.

On the tiled map, what you can see are these parts [highlight name and geometry] But as you can see, these are just a part of all the information actually stored. We have address, opening hours, website and lots of other interesting information.

When I say making the tiled map "come alive", I mean making those dead, static images explorable, and making this information accessible.

Prior Art

Tiles are awesome for background layers, because they divide the problem of global map coverage into millions and millions of tiny images.

What's not so awesome is that they are, ehrm, images. Raster images. They contain colour information, and the only "meaning" in them is the interpretation made by our brains, putting together the pixels.

There's nothing to extract for further exploration here, and we need another data source.

Overpass API

Query

[out:json];
node
    [amenity=bar]
    (57.7,11.9,57.8,12.0);
out;

Result

{
  ...
  "elements": [{
      "type": "node",
      "id": 2318390720,
      "lat": 57.7064417,
      "lon": 11.9643378,
      "tags": {
        "access": "private",
        "amenity": "bar",
        "name": "Göteborgs vinkällare",
        "website": "http://www.gbgvin.se"
      }
  },
...

UTFGrid

I also thought about using UTFGrid, which is a technology to add interactivity to tiled maps. Its more or less raster tiles, where the "pixels" are not colour values, but indexes into an array of features.

Since mouse clicks and finger taps are imprecise, UTFGrid tiles can be lower resolution than raster tiles, saving bandwidth.

UTFGrid seems to have gone out of style, and even though a lot of tools support it, I'm not aware of any UTFGrid source of POIs with global coverage.

Potentially, UTFGrid could be a solution, but it would involve setting up your own UTFGrid tiles, which makes it just too much work (for me).

Look it up though if you haven't, it's a simple and fascinating technology!

Vector Tiles

Something that does feel 2016 is Vector Tiles. So yeah, let's try vector tiles!

Compared to UTFGrid, you can get easy access (Mapbox), good tooling if you want to roll your own.

So, vector tiles, like you might have guessed from the name, contains vector data, but the data is split up into tiles, just like raster tiles, which makes it efficient to fetch data for just the area you're interested in.

As you can see in this messy picture, vector tiles usually contain a bit more information than you would normally render on a map. That's to give the cartographer a bit of freedom in choosing what to render, but it also suits us well, since we can access more information than is shown on the map.

Leaflet Underneath

So, lets examine what vector tiles can do. This is the same map as in my first example, but when I click it, I load the vector tile for that location, and examine the poi_label layer for nearby features.

Leaflet Underneath

https://github.com/perliedman/leaflet-underneath

var pois = L.tileLayer.underneath('http://...', {
        layers: ['poi_label'],
        lazy: true,
        zoomIn: 0
    })
    .addTo(map);

map.on('click', function(e) {
    pois.query(e.latlng, function(err, results) {
        ...
    });
});

Making Tiled Maps Come Alive:
Leaflet Underneath

Prior Art

Overpass API

Query

Result

UTFGrid

Vector Tiles

Leaflet Underneath

Leaflet Underneath

Leaflet Underneath

Mission Accomplished...?

Thank you!

http://www.liedman.net/geoinquietos-leaflet-underneath/

Making Tiled Maps Come Alive:Leaflet Underneath

Prior Art

Overpass API

Query

Result

UTFGrid

Vector Tiles

Leaflet Underneath

Leaflet Underneath

Leaflet Underneath

Mission Accomplished...?

Thank you!

http://www.liedman.net/geoinquietos-leaflet-underneath/

Making Tiled Maps Come Alive:
Leaflet Underneath