CODEWITHSUNDEEP
cssleaflet
some_name
some_name

Reputation: 399

Styling a leaflet control as a checkbox button

I have created multiple controls in a leaflet map, that I would like to work as checkboxes styled as buttons, i.e. it is a button that is styled differently when pressed, and returns to the original styling when pressed again.

I am able to change the style on hovering by using CSS or something like this: 

var MyCustomControl = L.Control.extend({
                        options: {
                            position: 'topright'
                        },
                        onAdd: function (map) {
                          var container = L.DomUtil.create('checkbox', 'my-custom-control');
                          container.onmouseover = function(){

                               container.style.backgroundColor = 'blue'; 

                          }
                          container.onmouseout = function(){

                               container.style.backgroundColor = 'pink'; 

                          }
                          ....

But i simply can't get it to work when using onmouseclick - and I do not not how I should do it in css. My css with the hovering looks like this: 

.my-custom-control {
        padding: 1px 4px;
        background: rgba(255,255,255,0.7);
        color: black;
        font: 10px Arial, sans-serif;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        width: 55px;
        cursor: pointer;
}

.my-custom-control:hover{

        background: rgba(255,255,255,0.9);
        border: 2px solid blue;


}

.my-custom-control:empty {
        display: none;
}

Upvotes: 0

Views: 538

Answers (1)

some_name
some_name

Reputation: 399

I got it to work by using:

container.onclick = function(){ container.classList.toggle("selected_transportation"); }

Where "selected_transportation" is a css class, describing the style when pressed. And it turns out that the reason that I couldn't get this simple solution to work:

container.style.backgroundColor = 'pink';

Was because I accidentally wrote 'onmouseclick' instead of 'onclick' :)

Upvotes: 2

Related Questions