An easy leaflet plugin to switch basemap
Based and inspired on Leaflet-IconLayers
- Leaflet
npm i leaflet-switch-basemap
An easy way to implement control to switch between basemaps
new L.basemapsSwitcher([
{
layer: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map), //DEFAULT MAP
icon: './assets/images/img1.PNG',
name: 'Map one'
},
{
layer: L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png',{
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}),
icon: './assets/images/img2.PNG',
name: 'Map two'
},
{
layer: L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
}),
icon: './assets/images/img3.PNG',
name: 'Map three'
},
], { position: 'topright' }).addTo(map);
L.switchBasemap receives two arguments:
- The first is an array of objects that contains basemap configs
- The second is an object with control options
Property | Type | Required | Description |
---|---|---|---|
layer | Leaflet layer | true | A leaflet layer that can be used as basemap (example: L.tileLayer) |
icon | String | true | Path of the Image that will be display on the control |
name | String | true | Name of the layer |
Option | Type | Default | Description |
---|---|---|---|
position | String | 'topright' | Position of the control. Options: leaflet control positions |