Style-optimized vector tiles in react-leaflet v3?

Question

did recently anyone try to render Style-optimized vector tiles in react-leaflet v3?

I tried following the good examples found here in an old post , but they worked only in v2.

With v3 I get

Attempted import error: 'GridLayer' is not exported from 'react-leaflet'.

And GridLayer is no more there indeed. Any idea?

Thanks

Luca

Answer 1

I solved like that

I created this custom component "StyleLayer"

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import {} from "mapbox-gl-leaflet";

export default function StyleLayer({ styleUrl }) {
  const map = useMap();

  useEffect(() => {
    L.mapboxGL({
      style: `${styleUrl}`,
    }).addTo(map);
  });

  return null;
}

And then I used it inside my "Map" component

<MapContainer center={coordinates} zoom={zoom} scrollWheelZoom={scroll}>
  <StyleLayer styleUrl="https://myStyleCloudEndpoint.com"></StyleLayer>
</MapContainer>

The main differences with the old examples linked above hence are:

• functional component instead of class (and "useEffect" hook)
• "useMap" hook by react-leaflet v3, which gives direct access to the map

Answer 2

I made an NPM package for this: https://www.npmjs.com/package/react-leaflet-vector-tile-layer

It exposes a <VectorTileLayer> component which can also be embedded inside the react-leaflet <LayersControl>