react-leaflet-vector-tile-layer
v0.3.2
Published
React Leaflet V3 layer for displaying vector tiles
Downloads
3,708
Maintainers
Readme
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 (
<MapContainer center={[50.5, 30.5]} zoom={3} style={{ height: "100vh" }}>
<VectorTileLayer
styleUrl="mapbox://styles/customstyles/ckpslkwor05q318mzmetjbv5z"
accessToken="XXXX"
/>
</MapContainer>
);
}
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 (
<MapContainer center={[50.5, 30.5]} zoom={3} style={{ height: "100vh" }}>
<VectorTileLayer
styleUrl="https://demotiles.maplibre.org/style.json"
/>
</MapContainer>
);
}
export default App;
Sponsors
shademap.app - Year-round world map of sun and shadow