CODEWITHSUNDEEP
javascriptcssleaflet
felixo
felixo

Reputation: 1613

How do i add css to leaflet buttons?

I am trying to change the CSS on the zoom buttons in leaflet, but I am not able to add a class or id or anything to those buttons. How do I even get access to them?

Any idea?

thanks!

here I declare the map:

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoicHcxN2wwMDgiLCJhIjoiY2pua2c2OWxuMGVkOTNxbWh5MWNqajEwdyJ9.X_SuGwNGs12TwCsrsUvBxw'
}).addTo(map);

and here I include the zoom:

L.control.zoom({
    position: 'topright',
}).addTo(map);

when the page loads I see that it becomes a button with a number of leaflet classes but how can I make my out changes to them?

Upvotes: 3

Views: 3019

Answers (1)

kboul
kboul

Reputation: 14570

I guess there are other ways but in order to change the style of the zoom buttons you can access the built in css selectors as follows:

.leaflet-touch .leaflet-bar a {
  width: 50px;
  background-color: red;
}


var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
  .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
  .openPopup();
#mapid {
  height: 180px;
}

.leaflet-touch .leaflet-bar a {
  width: 50px;
  background-color: red;
}

body {
  margin: 0px;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<div id="mapid"></div>

or using js:

document.getElementsByClassName("leaflet-control-zoom-out")[0].style.setProperty('width', '50px');

document.getElementsByClassName("leaflet-control-zoom-out")[0].style.setProperty('background-color', 'red');

Upvotes: 2

Related Questions