https://github.com/as-shiddiq/leaflet-bmswitcher
Leaflet Control BaseMap Switcher
https://github.com/as-shiddiq/leaflet-bmswitcher
leaflet leaflet-basemap leaflet-control leaflet-responsive
Last synced: 5 months ago
JSON representation
Leaflet Control BaseMap Switcher
- Host: GitHub
- URL: https://github.com/as-shiddiq/leaflet-bmswitcher
- Owner: as-shiddiq
- License: mit
- Created: 2023-06-02T08:41:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-09T03:30:09.000Z (about 3 years ago)
- Last Synced: 2025-11-06T07:16:20.236Z (8 months ago)
- Topics: leaflet, leaflet-basemap, leaflet-control, leaflet-responsive
- Language: JavaScript
- Homepage: https://as-shiddiq.github.io/leaflet-bmswitcher/example/index.html
- Size: 517 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leaflet BaseMap Switcher
a simple plugins to make it easier to create a basemap control to make it look more attractive, besides that it is also responsive for mobile displays.
Based and inspired on [L.switchBasemap](https://github.com/clavijojuan/L.switchBasemap)
## Example
See the [example](https://as-shiddiq.github.io/leaflet-bmswitcher/example/index.html)
## How to usage?
```
npm i leaflet-bmswitcher
```
or download this repository direcly and save to your project.
and then include the `leaflet-bmswitcher.js` and don't forget also load `leaflet-bmswitcher.css` file from the `src/` dir, and then create an object and continue like the example below :
```js
const map = L.map('map').setView([-3.8420201, 114.727848], 13);
const bmList = [
{
layer : L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png",{attribution:"Map data © OpenStreetMap contributors"}).addTo(map),
name : "ArcGIS Online",
icon : "assets/arcgis-online.png"
},
{
layer : L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:"© OpenStreetMap contributors"}),
name : "OpenStreetMap",
icon : "assets/osm.png"
},
{
layer : L.tileLayer("http://mt0.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",{attribution:"Map data © OpenStreetMap contributors"}),
name : "Google Street",
icon : "assets/google.png"
},
{
layer : L.tileLayer("http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",{attribution:"Map data © OpenStreetMap contributors"}),
name : "Google Satelite",
icon : "assets/google-satelit.png"
},
{
layer : L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.png",{attribution:"Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors"}),
name : "Stemen Toner",
icon : "assets/stemen-toner.png"
}
];
new L.bmSwitcher(bmList).addTo(map);
```