How to display vector tiles created by geojson-vt in a leaflet?

Question

I have a lot of GeoJSON spatial data that I want to display on the flyer map. About 35,000 GeoJSON objects.

Since the number of points can be very large, I wanted to use the geojson-vt library to tile my client-side data.

Now I have successfully broken my data using the geojson-vt library:

var geoJson = {}; // Request to get data via API call not shown here var tileOptions = { maxZoom: 18, tolerance: 5, extent: 4096, buffer: 64, debug: 0, indexMaxZoom: 0, indexMaxPoints: 100000, }; var tileIndex = geojsonvt(geoJson, tileOptions); 

How to integrate geojson-vt vector tile data into my Leaflet card?

Are there any recommended plugins or libraries that can help you?

Answer 1

Geojson-vt TileIndex.getTile() returns the JSON version of the Mapbox vector tile specifier:

I do not know any library that can display this format. Indeed, Mapbox's own demo implements rendering at a fairly low level:

 var tile = tileIndex.getTile(z, x, y); console.timeEnd('getting tile z' + z + '-' + x + '-' + y); if (!tile) { console.log('tile empty'); zoomOut(); return; } // console.log('z%d-%d-%d: %d points of %d', z, x, y, tile.numSimplified, tile.numPoints); // console.time('draw'); ctx.clearRect(0, 0, height, height); var features = tile.features; ctx.strokeStyle = 'red'; ctx.fillStyle = 'rgba(255,0,0,0.05)'; for (var i = 0; i < features.length; i++) { var feature = features[i], type = feature.type; ctx.beginPath(); for (var j = 0; j < feature.geometry.length; j++) { var geom = feature.geometry[j]; if (type === 1) { ctx.arc(geom[0] * ratio + pad, geom[1] * ratio + pad, 2, 0, 2 * Math.PI, false); continue; } for (var k = 0; k < geom.length; k++) { var p = geom[k]; if (k) ctx.lineTo(p[0] * ratio + pad, p[1] * ratio + pad); else ctx.moveTo(p[0] * ratio + pad, p[1] * ratio + pad); } } if (type === 3 || type === 1) ctx.fill('evenodd'); ctx.stroke(); } drawGrid(); 

You can use some of your codes to help you.

There are various links in README and a related blog post for Mapbox-gl-js to work based on geojson-vt, but there are no explicit instructions on how to do this. Perhaps the best approach is to just use mapbox-gl-js GeoJSONSource .

Answer 2

This example shows how to display geojson-vt on a flyer map using L.CanvasTiles .

The problem is that the Sumbera CanvasTiles extension shown in this example only works with sheet 0.7. I did not find a repo for CanvasTiles in particular, and especially not for the npm package for it.

Answer 3

This flyer plugin really helped me, it's a great start, and it works with Leaflet 1.0 and higher. I am currently using it in the application to map to the current version of Leaflet, and it works great. https://github.com/brandonxiang/leaflet-geojson-vt/tree/leaflet1.0.0