L.switchBasemap

An easy leaflet plugin to switch basemap

Based and inspired on Leaflet-IconLayers

DEMO

Requirements

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:

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 |