CODEWITHSUNDEEP
javascriptcssleaflet
PKA
PKA

Reputation: 515

Adjust leaflet map's brightness using filter css property

I am trying to adjust brightness (not the opacity) of the leaflet map by using default css property "filter: brightness(1.0);" and kind of adding slider functionality as well like below link.

Leaflet Example - Changing opacity to filter: brightness(1.0);

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);
});

Any suggestions would be helpful. Thanks!

Upvotes: 3

Views: 1304

Answers (1)

Iavor
Iavor

Reputation: 2077

Here's one way of doing it:

HTML

<body>
  <input type="range" min="0" max="200" value="0" class="slider" id="brightness-slider">
  <div id="map"></div>
</body>

JavaScript

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'
}).addTo(mymap);
tileLayer.getContainer().style.filter = 'brightness(0%)';

var slider = document.getElementById('brightness-slider');
slider.addEventListener('input', function(e) {
  var value = e.target.value;
  tileLayer.getContainer().style.filter = 'brightness(' + value + '%)';
});

Try it out in this JSBin.

Upvotes: 6

Related Questions