CODEWITHSUNDEEP
javascripthtmlleaflet
DiamondJoe12
DiamondJoe12

Reputation: 1809

Leaflet removing/updating a legend

I've read the posts on how to remove a legend from a leaflet map but still not having any luck. I have a legend which I'd like to link to a time-slider that is indexed by year. I'd like to have to legend display whatever year the time-slider is on. Here is my function to create the legend:

function createLegend3(map, index){


var legendControl = L.Control.extend({
    options: {
        position: 'bottomright'
    },
    onAdd: function(map){
       //create the container with a class name
        var container = L.DomUtil.create('div', 'legend-control-container');

        container.innerHTML += index
        //create temporal legend
        return container;
    }
});
// //add the legendControl to map
map.addControl(new legendControl); 
return legendControl;

};

As mentioned, I have a separate time-slider function in which user can scroll the different years with a time-slider (range-slider). My idea (not, efficient, I know), was to call the createLegend3 for each year, using the index as a parameter:

if (index == 1971) {
                createLegend3(map, index)

if (index == 1972) {
                createLegend3(map, index)

The problem is that the map simply adds a NEW legend every time instead of updating. Is there either a way to simply remove the existing legend and add another so that only one is displayed at a time? Or a more efficient way to update the legend based on the value of the index in the time slider? Thanks so much in advance.

Upvotes: 0

Views: 3935

Answers (1)

iH8
iH8

Reputation: 28648

You are only adding legends. If you want to replace it, you should remove the added legend first using L.Map's removeControl method. A better way to do it is not to do the entire remove, create, add cycle but add a method to your L.Control which simply updates the innerHTML of your container. Then you can simply call map.legend.setContent and be done with it.

L.Legend = L.Control.extend({
    'onAdd': function (map) {

        // add reference to mapinstance
        map.legend = this;

        // create container
        var container = L.DomUtil.create('div', 'legend-control-container');

        // if content provided
        if (this.options.content) {

            // set content
            container.innerHTML = this.options.content;

        }
        return container;
    },
    'onRemove': function (map) {

      // remove reference from mapinstance
      delete map.legend;

    },

    // new method for setting innerHTML
    'setContent': function(str) {
        this.getContainer().innerHTML = str;
    }
});

new L.Map('leaflet', {
    'center': [0, 0],
    'zoom': 0
}).addControl(new L.Legend({
    'position': 'topright',
    'content': new Date  
})).on('click', function (e) {

    // use reference on mapinstance
    this.legend.setContent(new Date);

}); 
body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet 1.0.3</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
  </body>
</html>

Upvotes: 2

Related Questions