Nosferatu's Pace Maker

    leaflet-switch-basemap

    1.0.4 • Public • Published

    L.switchBasemap

    An easy leaflet plugin to switch basemap

    image

    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

    Install

    npm i leaflet-switch-basemap

    DownloadsWeekly Downloads

    28

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    8.42 kB

    Total Files

    5

    Last publish

    Collaborators

    • clavijojuan