[GIS] Leaflet Custom Control – changing background colour of existing control

leaflet

I have a Leaflet map with two custom controls on it (coverage1000Control and coverage2500Control).

coverage1000Control is defined thus:

coverage1000Control =  L.Control.extend({

  options: {
    position: 'bottomleft'
  },

  onAdd: function (map) {
    container = L.DomUtil.create('input');
    container.type = "button";
    container.title = "1,000 ft";
    container.value = "1,000 ft";
    container.style.backgroundColor = "red";
    container.style.backgroundSize = "100px 30px";
    container.style.width = "80px";
    container.style.height = "30px";

    container.onclick = function(){
      clearMap();
      setHeight(1000);
    }
    return container;
  }
});

Coverage2500Control is defined in exactly the same way with the only difference is that container.style.backgroundColor = "white";.

I'd like to change the background color of each button when the user clicks on it to indicate which button was last clicked. In other words, when the map loads the coverage1000Control button is red as it's the default. When the user clicks on the coverage2500Control button, coverage1000Control goes white and coverage2500Control goes red.

I've tried putting coverage1000Control.container.style.backgroundColor = "white" in the container.onclick but it doesn't work.

Is it possible to change the background color of an exising Leaflet control and if so, how?

Best Answer

In the end I figured out that I could add a unique 'id' to my container definitions and then use:

document.getElementById("1000").style.backgroundColor = "white";

to change them. Sometimes the simplest solution can elude you until you go away, walk the dog and then come back and look at it afresh !

Related Question