react-leaflet-vector-tile-layer

Vector tile layer for React Leaflet V3. This is a wrapper around @maplibre/maplibre-gl-leaflet. Tested with both Mapbox, Maptiler and self hosted vector tiles.

Vector tile layer can be nested inside React Leaflet Layers Control.

Mapbox

``
import { MapContainer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import VectorTileLayer from "react-leaflet-vector-tile-layer";

function App() {
return (

styleUrl="mapbox://styles/customstyles/ckpslkwor05q318mzmetjbv5z"
accessToken="XXXX"
/>

);
}

export default App;
`

Maptiler

`
import { MapContainer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import VectorTileLayer from "react-leaflet-vector-tile-layer";

function App() {
return (

styleUrl="https://demotiles.maplibre.org/style.json"
/>

);
}

export default App;
``

Sponsors

shademap.app - Year-round world map of sun and shadow