maplibre-basemaps
v0.0.5
Published
Maplibre plugin to add basemaps layer switcher
Downloads
223
Readme
maplibre-basemaps
Maplibre plugin to add basemaps layer switcher
Check the demo here Link
Install
npm install maplibre-gl maplibre-basemaps
or
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/[email protected]/dist/maplibre-basemaps.js"></script>
Usage
import Maplibre from 'maplibre-gl';
import BasemapControl from 'maplibre-basemaps';
Example usage
Check docs/index.html for example implementation.
const osm = {
name: "Open Street Map",
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
maxzoom: 18,
attribution: 'osm'
}
const osmHot = {
name: "OSM HOT",
tiles: ['https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'],
}
const osmCycle = {
name: "OSM Cycle",
tiles: ['https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'],
}
const esriTerrain = {
name: "Esri Terrain",
tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'],
maxzoom: 13,
attribution: 'Tiles © Esri — Source: USGS, Esri, TANA, DeLorme, and NPS',
}
const baseLayers = {
osm,
osmHot,
osmCycle,
esriTerrain,
}
const basemapControl = new BasemapControl({ basemaps: baseLayers, initialBasemap: "osmHot" });
map.addControl(basemapControl, 'top-right');
Remove
map.removeControl(basemapControl);
Options for use
basemaps
- BaseLayerConfig, base layers objects, requiredinitialBasemap
- string, basemap key to visualize, default: first basemapwidth
- string, width for basemaps layers container, default: '150px'height
- string, height for basemaps layers container, default: '100px'
Layer Configuration
name
- string, name to visualize layer in container, requiredtiles
- string[], urls of basemap layer, requiredattribution
- string, attribution for basemap layer, optionalminZoom
- number, min zoom to display the grid, default: 0maxZoom
- number, max zoom to display the grid , default: 20