/L.switchBasemap

An easy leaflet plugin to switch basemap

Primary LanguageJavaScriptMIT LicenseMIT

L.switchBasemap

An easy leaflet plugin to switch basemap

image

Based and inspired on Leaflet-IconLayers


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

Events

Name Description
basemapChange Fired when user change basemap selection