Vector Maps

Unlike Raster Tiles which are generated server side for every zoom level, Vector Tiles can be rendered at various chunks of zoom levels with a single network request. For example, vector data received for zoom level 14 can be used until zoom levels 20 (last zoom-in level) without the need to send multiple network requests. This is a massive win! If the servers can speak, it will literally thank us.

Furthermore, Raster Tiles are cartographers rendition of what a particular tile should look like. Which basically means; if you plan to customize properties of labels or buildings, you are out of luck. On the other hand, with Vector tiles, you can extend off a base map and knock yourself with customization. Another win!

The first time I implemented a choropleth map by overlaying colored layers on top of raster tiles, I was not impressed. The tiles were choppy, color layers seemed to hug the tiles ensuing the squint eye phenomenon. With Vector Maps, overlaid colors do not cannibalize map details as they harmoniously co-exist; you may now open your eyes.

With Vector tiles, we can also transpose our humble 2D pane into 3D. For all those you grieving raster tiles, not to worry — you can convert vectors into raster tiles.

Now that we have established what Vector tiles can do for us, let’s talk about what it’s made of: Each tile conforms to a schema, which are metadata such as layer name, features, and attributes. As of early late 2017, there is no standard for vector tiles. However, there are few popular schemas — OpenMapTiles (BSD license) and Mapbox’s vector-tile-spec. Of these, Mapbox’s standard “vector-tile-spec” is getting all the compatibility love from GIS vendors and libraries. If you plan to build custom maps, OpenMapTiles and Mapbox are your best options at the moment.

This post will introduce OpenMapTiles, an open source project to create vector maps and Mapbox, a revolutionary platform which provides building blocks to create immersive and extraordinary maps. Before jumping into implementation details, it’s important that we understand the bigger picture:

• Both these platform use dataset from OpenStreetMap.
• Popular choices of hosting the vector tile server are using Docker, Node, PHP and Hosted.
• Popular JS based libraries are Mapbox GL JS, Open Layers, Leaflet, and Tangram. Appropriate plugins are consumed to enhance display and interactions.

For comparison purposes, let’s use readily available hosted servers to consume vector tiles.

OpenMapTiles

OpenMapTiles provides a free hosted server through a service Tile Hosting. Out of the box, Tile Hosting provides various styles such as Basic, Bright, Positron, Dark Matter, Satellite and KlokanTech Streets. These default styles can be customized with their online editor — Maputnik

Vector tiles can also be hosted locally with Docker, Node or PHP. Once a backend service is up and running serving vector tiles, the next step is to handle client-side rendering. Enter JavaScript libraries — OpenLayers, Leaflet, Tangram, Mapbox.js, Mapbox GL JS. Since we are consuming OpenMapTiles, let’s be loyal and render the map with OpenLayers.

let tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 14});
let layer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
        attributions: '© <a href="https://openmaptiles.org/">OpenMapTiles</a> ' +
        '© <a href="http://www.openstreetmap.org/copyright">' +
        'OpenStreetMap contributors</a>',
        format: new ol.format.MVT(),
        tileGrid: tilegrid,
        tilePixelRatio: 8,
        url: 'https://free-0.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=' + apiKey
    })
});

Mapbox

Similar to Openmaptiles, Mapbox provides free servers as well as an online editor. Mapbox however with its superior offerings (iOS SDK, Android, SDK, Navigation SDK, Unity SDK, Qt SDK, GL JS) stand out as a clear winner. But of course, if you or the business you work for cannot afford to lock in with a specific vendor, Openmaptiles is a better alternative.

For client-side rendering, Mapbox offers Mapbox.js and Mapbox GL JS.

• Mapbox.js extends leaflet.js providing more features and tightly integrates with Mapbox toolchain.
• Mapbox GL JS uses WebGL for rendering. Since the library uses WebGL, it delivers immersive interaction and animations without any jank.

Let’s use Mapbox GL JS! Yes, it is a no-brainer!

Fun fact — Leaflet Creator Vladimir Agafonkin Joins MapBox

let map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [0,0],
    zoom: 1
});

map.on('load', function() {
    map.addLayer({
        id: 'terrain-data',
        type: 'line',
        source: {
            type: 'vector',
            url: 'mapbox://mapbox.mapbox-terrain-v2'
        },
        'source-layer': 'contour'
    });
});

References:
Overview of Vector Tiles https://www.youtube.com/watch?v=savQWL0kq_g
Vector Tiles And The Future Of Web Maps https://www.youtube.com/watch?v=P0PFBmweONk
HOT Community Webinar: Intro to Mapbox Studio https://www.youtube.com/watch?v=yvzqS0NaD2I

Originally published at javascriptstore.com on November 19, 2017.