Render vector tiles with text label in Leaflet

Question

I’m trying to leaflet to render about 30K points with their names. The text label should avoid overlapping, and important points should always be rendered firstly.

My strategy is:

1. Use tippecanoe to make mbtiles file from geojson. (To make sure important points be rendered firstly, I have specified tippecanoe's minzoom and maxzoom for each point. )
2. Use tileserver-gl to serve vector tile.
3. Use VectorGrid plugin to render the vector tiles in leaflet.

I trying to use maputnik to make a style.json file, which seems very nice dealing with text label overlapping. However, I sadly find out leaflet VectorGrid plugin does not support style.json file. https://github.com/Leaflet/Leaflet.VectorGrid/issues/196

Now I'm stuck. What is my alternative to rendering those points with names?

Answer 1

Thanks for the inspiration from @TomazicM, I came up with this workaround with getFeatureId option of vectorGrid and leaflet layerGroup.collision plugin.

Firstly, add coordinates as properties for each point before making mbtiles file.

For each point render by tileserver-gl, using getFeatureId to get each point's coordinates and name properties, then make it to divIcon. Add each divIcon as marker to collisionLayer to avoid overlapping. github.com/MazeMap/Leaflet.LayerGroup.Collision

Finally, set style to transparent for the default rendering by VectorGrid.

My code is something like this, very clumsy, but doable. Please let me you if you have other solution.

 const vectorTileOptions = {
  getFeatureId: function (e) {
    const latlngs = [e.properties.lat, e.properties.lng];
    const stationName = e.properties.name;
    const marker = L.marker(latlngs, {
      icon: L.divIcon({
        html: `<img src=${redpointIcon} height="10" width="10" ><span class=labelName>${stationName}</span>`,
        iconAnchor: [5, 10],
      }),
    });
    collisionLayer.addLayer(marker);
  },
  vectorTileLayerStyles: {
    point: { color: "transparent" },
  },
};
L.vectorGrid.protobuf("http://[::]:8080/data/point/{z}/{x}/{y}.pbf", vectorTileOptions).addTo(map);
collisionLayer.addTo(map);