Data Driven Maps using MapBox GL (choropleth with base map and fast)

Question

tl;dr version: How do we build a fast choropleth map with MapBox GL?

@RyanBaumann posted an example: See https://ryanbaumann.squarespace.com/blog/2016/1/23/mapbox-gl-create-data-driven-styles

But this example shows loading GeoJSON files directly in javascript. One question about how to handle large GeoJSON files. Let's say you have a 18M GeoJSON file. And you want to view a map and Data-Driven Styles and do it all efficiently.

For example, I have loaded a large GeoJSON file:

https://cityregister.firebaseapp.com/recentsaleslocal.geojson

in this mapbox style:

https://api.mapbox.com/styles/v1/fedex1/cijrx09ej007o90lx1g1m5b0j.html?title=true&access_token=pk.eyJ1IjoiZmVkZXgxIiwiYSI6ImNpam5jZXZvczAwZnd0b201ajhybXE0OW8ifQ.IumX7VWjU71UjEsKTN4bdw#11/40.7060/-73.9754

and it loads instantly and does not transfer the entire 18M over the network at load time.

But when I use the approach Ryan is showing, it appears that I have to load the entire 18M file over the network at load time. That is much slower especially on a slow network.

I'd like to know is there a way to have data-driven styles AND a base map from mapbox all on the same map?

Here are a few examples:

https://cityregister.firebaseapp.com/map.html (loads instantly, has base map, all resides on mapbox studio server. NO data-driven style

https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html (loads very slowly, has base map, base map on mapbox, geojson on another server. Uses data-driven style https://cityregister.firebaseapp.com/testmapboxlayerchoropleth.html (loads instantly, NO base map, seems to be all mapbox-gl generated, Uses data-driven style.

My question is how to get the speed of mapbox AND the data-driven styles AND a base map with streets, etc.

Thanks.

pictures of maps above.

fast nyc map but not data-driven

fast nyc choropleth but no base map

slow choropleth loads 18M over network

tristen tristen · Accepted Answer · 2016-01-30T15:29:53

This doesn't cover all paint & layout properties (and full fledged data driven styles are actively being worked on here: https://github.com/mapbox/mapbox-gl-js/pull/1932) but ...

If you upload your GeoJSON document to your Mapbox account it will be converted to vector tiles. You can then add this as a layer on it's own after the style.load event:

map.on('style.load', function() {
  map.addSource('SOURCENAME', {
    "type": "vector",
    "url": "mapbox://mapbox.660ui7x6"
  });
});

At this stage you have an unstyled layer you can add paint properties to in a data-driven fashion:

var layers = [
  ['#723122', 25000000],
  ['#B86B25', 5000000],
  ['#F2F12D', 0]
];

layers.forEach(function(layer, i) {
  map.addLayer({
    "id": "layer-" + i,
    "type": "fill",
    "source": "SOURCENAME",
    "source-layer": "original",
    "paint": {
      "fill-color": layer[0]
    },
    filter: i == 0 ?
      ['>=', 'population', layer[0]] :
      ['all',
        ['>=', "population", layer[0]],
        ['<', "population", layers[i - 1][0]]
    ]
  });
});

The source-layer you want to target can be found from the uploaded data page on mapbox.com/data or from it's tilejson doc:

https://a.tiles.mapbox.com/v4/mapbox.660ui7x6.json?access_token=<YOURACCESSTOKEN>

Here's an example that demonstrates this very thing https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/

Data Driven Maps using MapBox GL (choropleth with base map and fast)

2 Answers