Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
  <meta name="description" content="Leaflet Opacity">
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>
​
<body>
  <input type="range" min="0" max="100" value="0" class="slider" id="opacity-slider">
  <div id="map"></div>
​
</body>
​
</html>
 
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 90%;
  background: black;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* background: black; */
}
​
.slider {
  width: 250px;
}
 
var mymap = L.map('map').setView([51.505, -0.09], 13);
​
var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  opacity: 0
}).addTo(mymap);
​
var slider = document.getElementById('opacity-slider');
slider.addEventListener('input', function(e) {
  var value = Number(e.target.value);
  var opacity = value / 100;
  tileLayer.setOpacity(opacity);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ivdekovpro
0viewers