How to add GeoJSON points as a vector tile in Leaflet?

Question

I've read through every question on Stack Overflow I can find and every example I can find on the web for adding GeoJSON vector tiles to a leaflet map. Unfortunately I still can't manage to wrap my head around it, much less get it work on my data.

I have a GeoJSON (here) with many points. I can add it just fine as a layer in Leaflet, so I feel confident that it's a valid file with real values.

I've tried geojson-vt and leaflet vector grid.

geojson-vt keeps returning an error:
Uncaught ReferenceError: z is not defined at <anonymous>:1:30
with this code:

geoJson = {data}
var tileOptions = {
    maxZoom: 18, 
    tolerance: 5, 
    extent: 4096,
    buffer: 64, 
    debug: 0, 
    indexMaxZoom: 0, 
    indexMaxPoints: 100000, 
};
var tileIndex = geojsonvt(geoJson, tileOptions);
var tile = tileIndex.getTile(z, x, y);

I'm having a lot of trouble diagnosing this because none of the examples I've found have shown their data, but also none have referenced defining z, x, and y, and those aren't required values for a GeoJSON object. What am I missing?

From another question of mine I learned that Leaflet vector grid has an error with GeoJSON points. I managed to change some of the source code to resolve the initial error, but now get over 1,000 errors like:
Error: <path> attribute d: Expected number, "MNaN,47.5aundefin…".

from the code:
L.vectorGrid.slicer(geoJson).addTo(map)

How can I add GeoJSON points as a vector tile layer to a leaflet map? Does anyone have any simple examples with data as a reference? Any help or other directions to investigate would be appreciated.

Answer 1

I've had a look at this for a few minutes, and I've concluded there are bugs in Leaflet.VectorGrid affecting slicing points. I've opened a bug report with relevant information.

Answer 2

I was able to resolve the issue I was experiencing with Leaflet.VectorGrid.Slicer.

First I downloaded the Leaflet.VectorGrid.js source code and changed the lines indicated here (note that that corresponds to lines 1483 to 1495 from the source code available on the VectorGrid github site).

Then, after troubleshooting, I found that if I added a radius option when calling L.vectorGrid.slicer, the GeoJSON points were added to the map. This is the code that worked:

var layer = L.vectorGrid.slicer(geoJson, { 
    vectorTileLayerStyles: {
        sliced: {
            radius: 1,
        }
    }
}).addTo(map);