# leaflet-switch-basemap

> An easy leaflet plugin to switch basemap

Latest version **1.0.6** (published 2023-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install leaflet-switch-basemap
pnpm add leaflet-switch-basemap
yarn add leaflet-switch-basemap
bun add leaflet-switch-basemap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-04-19 |
| First published | 2022-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | Juan Camilo Clavijo Sandoval |
| Maintainers | clavijojuan |
| Keywords | leaflet, basemaps, control, leaflet-switch-basemap, map, javascript, webgis, webmapping, leaflet-control |

## Links

- npm: https://www.npmjs.com/package/leaflet-switch-basemap
- Repository: https://github.com/clavijojuan/L.switchBasemap
- Homepage: https://github.com/clavijojuan/L.switchBasemap#readme
- Issues: https://github.com/clavijojuan/L.switchBasemap/issues
- npm.io page: https://npm.io/package/leaflet-switch-basemap

## Recent versions

- 1.0.6 (latest) — 2023-04-19
- 1.0.5 — 2023-04-19
- 1.0.4 — 2022-01-27
- 1.0.3 — 2022-01-27
- 1.0.2 — 2022-01-27
- 1.0.1 — 2022-01-27
- 1.0.0 — 2022-01-27

## README

# L.switchBasemap
An easy leaflet plugin to switch basemap

![image](https://user-images.githubusercontent.com/57905996/151420799-7781dae6-0692-4010-af5d-4b1c0eef3628.png)

Based and inspired on [Leaflet-IconLayers](https://github.com/ScanEx/Leaflet-IconLayers)

### [DEMO](https://elegant-meninsky-515912.netlify.app)

-----------------------------------------------------------------------------------
## Requirements

<ul>
  <li>Leaflet</li>
</ul>

## Install

### NPM

```
npm i leaflet-switch-basemap
```  

## Usage Example

An easy way to implement control to switch between basemaps

```javascript
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:
<ul>
  <li>The first is an array of objects that contains basemap configs</li>
  <li>The second is an object with control options</li>
</ul>

### 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](https://docs.eegeo.com/eegeo.js/v0.1.665/docs/leaflet/L.Control/#control-positions) |

---
_Source: https://npm.io/package/leaflet-switch-basemap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._