Mapbox GL JS Large Sources

readme.md

Large geojson sources with Mapbox GL JS

Best Practices

• In general, cluster very dense point data sources at low zoom levels. This makes tiles smaller, tiles faster to load, layers faster to render, and data easier to understand.
• Set buffer option on geojson source to 0 if all geometries are type point and using smaller circle layer types.
  • Buffers create heavier tiles to help with rendering of features across tile boundaries. With points rendered completely inside one tile, this isn't needed.
  • If you see rendering bugs around tile boundaries, increase the buffer setting to a value between 0 and 128 (default for a GL JS geojson source). Smaller buffers are faster.
  • Result - Reduce memory overhead on client, smaller vector tiles.
• Set maxzoom option on geojson source to a value less than the default of 18.
  • This setting will increase map performance while panning and zooming past the specified maxzoom level.
  • For most point sources, a value of 12 is a good balance between precision and speed.
• In general, always minify geojson sources before adding a source to the map.
  • Prune out any data properties that are not necessary for a visualization.
  • Use a maximum of 6-decimal precision for coordinate values.
• Load geojson from a data URL, if possible, instead of holding it in a javascript object and passing to a Mapbox GL Geojson Source.
  • Reduces client memory overhead.
• If you need to create an un-clustered map from a geojson source:
  • Set the minzoom layer property on the layer referencing the geojson source to a value greater than 0.
  • The minzoom layer setting prevents the map from trying to load and render tiles at low zoom levels
  • Seeing every feature isn't useful because there are not enough pixels on the screen.
  • Result: Much faster map load and render performance at low zoom levels.
• For unclustered symbol layers on geojson sources, use the layer layout property icon-allow-overlap: true.
  • This improves render speed while panning and zooming for really dense point data sets.
  • Result: Much faster layer render and interaction time.

Even bigger data

If your source data starts to get really large (over 100k data points, for example), there are other techniques you can use to improve speed.

1. Source splitting.
   • You can split your geojson source into two or three parts, effectively doubling or tripling your ability to load and render more data.
   • This scales up the volume of points you can handle with for a laptop browser.
   • Doesn't help as much for mobile web browsers (less web worker threads available).
2. Tile on the server. This scales to much, much larger worldwide data sets. The easiest way to do this is to upload the data to Mapbox via the Uploads API.
   • You can also cut tiles locally on your using Mapbox tools, if you choose, using a tool like node-mapnik or Tippecanoe.