Making Tiled Maps Come Alive:Leaflet Underneath

• Per Liedman
•  per.liedman@dotnetmentor.se
•  @liedman
•  perliedman

Hi, I'm Per Liedman, and I'm here to talk a bit about background maps and the wonders of OpenStreetMap.

What do I mean by "come alive"?

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

So, I must confess I didn't come up with this idea entirely by myself. There's some prior art, let's look at out favourite competitor Google Maps.

As you can see, Google Maps actually shows points of interest on the map more or less as links, you can hover and you can click them. Clicking brings up a lot of information similar to what I showed you before.

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"
      }
  },
...
                    

My first thought was to use OpenStreetMap's Overpass API, which is a fantastic way to query the OpenStreetMap database.

It's versatile, but perhaps not aimed for quick client interaction. It's surprisingly fast, but can still take a couple of seconds to execute a query.

Something about sending an arbitrary query in a specialised query language to a server just doesn't sit right with me, it doesn't feel entirely 2016.

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

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) {
        ...
    });
});

And just to be clear, this plugin is about querying a location for features in the vicinity. It doesn't have any UI - the UI is just part of the demo. So, you can use this plugin for other purposes as well.

Good, but you might have noticed we're only half way there: we can still only see type of feature, and its name. To save bandwidth, vector tiles leave out most of OSM's tags.

Leaflet Underneath

Mission Accomplished...?

• Interpreting and displaying OSM data is hard, especially opening hours, and especially if you require I18N. Please help!
• Leaflet Underneath currently assumes everything is points. Please help!
• This is still sort of an experiment. Please help!

Thank you!

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

• Per Liedman
•  per.liedman@dotnetmentor.se
•  @liedman
•  perliedman