leaflet-switch-basemap

L.switchBasemap

An easy leaflet plugin to switch basemap

Based and inspired on Leaflet-IconLayers

DEMO

---

Requirements

• Leaflet

Install

NPM

npm i leaflet-switch-basemap

Usage Example

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: '&copy; <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: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <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: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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

Basemap config

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

Options

Option	Type	Default	Description
position	String	'topright'	Position of the control. Options: leaflet control positions