CODEWITHSUNDEEP
javascriptleaflet
larry chambers
larry chambers

Reputation: 503

Change style in leaflet easybutton.js

I am using the leaflet plugin easybutton.js I have added 2 buttons, but I would like to change the background color of them at different points but I am can't seem to fully get there. I can change the background color when adding them but the effect only takes when clicked and I would also like to be able to change the background color at different points.

https://github.com/CliffCloud/Leaflet.EasyButton

The buttons are added like so

L.easyButton('<img src="img/myimage.jpg">', function(btn, map){
 btn.button.style.backgroundColor = 'yellow';
    var destination = [newlat, newlng];
    map.setView(destination);
}).addTo(map);

L.easyButton('<img src="img/myimage2.jpg">', function(btn, map){
    btn.button.style.backgroundColor = 'red';
    var destination = [52.450439,-1.729660];
    map.setView(destination);
}).addTo(map);

As you can see, this changes the background color but only when clicked and if I want to change any of these later how do I do it? Do I have to give them an id or something?

Upvotes: 0

Views: 1950

Answers (1)

peeebeee
peeebeee

Reputation: 2618

Save the button objects in global variables so you can use them later....

var btn1;
var btn2;    
L.easyButton('<img src="img/myimage.jpg">', function(btn, map){
 btn1 = btn;
 btn.button.style.backgroundColor = 'yellow';
    var destination = [newlat, newlng];
    map.setView(destination);
}).addTo(map);

L.easyButton('<img src="img/myimage2.jpg">', function(btn, map){
    btn2 = btn;
    btn.button.style.backgroundColor = 'red';
    var destination = [52.450439,-1.729660];
    map.setView(destination);
}).addTo(map);

Somewhere else in your code when you want to programmatically change the colours::

btn1.button.style.backgroundColor = 'blue';
btn2.button.style.backgroundColor = 'green';

Upvotes: 1

Related Questions