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 VectorTileLayer from 'react-leaflet-vector-tile-layer';
const App = () => {
<MapContainer center={[47.5415, -122.393]} zoom={10} style={{ height: '100%' }}>
<VectorTileLayer
styleUrl="mapbox://styles/customstyles/ckpslkwor05q318mzmetjbv5z"
accessToken="XXXX"
/>
</MapContainer>
}
Maptiler
import { MapContainer } from 'react-leaflet';
import VectorTileLayer from 'react-leaflet-vector-tile-layer';
const App = () => {
<MapContainer center={position} zoom={13}>
<VectorTileLayer
styleUrl="https://api.maptiler.com/maps/outdoor/style.json?key=XXXX"
/>
</MapContainer>
}
Sponsors
shademap.app - Year-round world map of sun and shadow