leaflet-vector-offline
Version:
Plugin for Leaflet.js that supports offline vector map tiles.
65 lines (47 loc) • 1.96 kB
Markdown
# Leaflet Vector Offline
Vector tile rendering for [Leaflet](https://github.com/Leaflet/Leaflet) with
support for offline use.
[](https://www.npmjs.com/package/leaflet-vector-offline)
## About
Based on [propmaps-leaflet](https://github.com/protomaps/protomaps-leaflet) and
[leaflet.offline](https://github.com/allartk/leaflet.offline), this packge gives
the ability to render vector tiles on a Leaflet.js map from online and offline
sources.
## Features
- Render vector tile maps with [Leaflet](https://github.com/Leaflet/Leaflet)
integration.
- Supports reading Z/X/Y tile URLs or [PMTiles format](https://github.com/protomaps/PMTiles).
- Ability to download all tiles within view port at selected zoom levels and
store them in the cache.
- Ability to choose to use on online, cache, or both tile sources.
## Dependencies
- **[leaflet](https://github.com/Leaflet/Leaflet):** ^1.9.4,
- **[protomaps-leaflet](https://github.com/protomaps/protomaps-leaflet):** ^4.0.0,
- **[pmtiles](https://github.com/protomaps/PMTiles):** ^3.0.7,
- **[leaflet.offline](https://github.com/allartk/leaflet.offline):** ^3.1.0
## How to use
To install Leaflet Vector Offline with npm, use the following command:
```cmd
npm install leaflet-vector-offline
```
or with yarn:
```cmd
yarn add leaflet-vector-offline
```
To use Leaflet Vector Offline, use the following code:
```typescript
const map: Map = L.map("map");
const url: string = "https://<YourUrlGoesHere>/{z}/{x}/{y}.mvt";
const attribution: string: "";
const vectorLayer: VectorOfflineLayer = vectorOfflineLayer(url, {
attribution,
subdomains: "abc",
minZoom: minZoom,
maxZoom: maxZoom,
theme: "light",
});
vectorLayer.addTo(map);
```
## See
- [leaflet.offline](https://github.com/allartk/leaflet.offline),
- [protomaps-leaflet](https://github.com/protomaps/protomaps-leaflet)