https://github.com/raruto/leaflet-transparency
Leaflet plugin that allows to add an opacity control.
https://github.com/raruto/leaflet-transparency
basemap javascript layer leaflet opacity-control overlay transparency
Last synced: 8 months ago
JSON representation
Leaflet plugin that allows to add an opacity control.
- Host: GitHub
- URL: https://github.com/raruto/leaflet-transparency
- Owner: Raruto
- License: gpl-3.0
- Created: 2019-05-22T21:11:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-09T19:05:35.000Z (about 6 years ago)
- Last Synced: 2025-06-11T11:28:43.398Z (8 months ago)
- Topics: basemap, javascript, layer, leaflet, opacity-control, overlay, transparency
- Language: JavaScript
- Homepage: https://raruto.github.io/leaflet-transparency
- Size: 499 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# leaflet-transparency.js
Leaflet plugin that allows to add an opacity control.
_For a working example see [demo](https://raruto.github.io/leaflet-transparency/examples/leaflet-transparency.html)_
---
> _Initally based on the [google-transparency](https://github.com/Raruto/google-transparency) plugin_
---
## How to use
1. **include CSS & JavaScript**
```html
...
html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; }
...
```
2. **choose the div container used for the slippy map**
```html
...
...
```
3. **create your first simple “leaflet-transparency” slippy map**
```html
var opts = {
map: {
center: [41.4583, 12.7059],
zoom: 5,
},
otmLayer: {
url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
options: {
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
maxZoom: 17,
},
},
satelliteLayer: {
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
options: {
attribution: '© <a href="http://www.esri.com/">Esri</a>',
maxZoom: 18,
},
},
opacityBaseControl: {
options: {
sliderImageUrl: "images/opacity-slider2.png",
backgroundColor: "rgba(0, 0, 0, 0.9)",
opacity: 1,
position: 'topright',
}
},
opacityOverlayControl: {
options: {
sliderImageUrl: "images/opacity-slider2.png",
backgroundColor: "rgba(229, 227, 223, 0.9)",
opacity: 0.75,
position: 'topright',
}
},
};
var map = new L.Map('map', opts.map);
var layer = new L.TileLayer(opts.otmLayer.url, opts.otmLayer.options);
var overlay = new L.TileLayer(opts.satelliteLayer.url, opts.satelliteLayer.options);
var controlBaseOpacity = new L.Control.OpacitySlider(null, opts.opacityBaseControl.options);
var controlOverlayOpacity = new L.Control.OpacitySlider(overlay, opts.opacityOverlayControl.options);
controlBaseOpacity.addTo(map);
controlOverlayOpacity.addTo(map);
layer.addTo(map);
```
---
**Compatibile with:** leaflet@1.3.2
---
**Contributors:** [Raruto](https://github.com/Raruto/leaflet-transparency)