CODEWITHSUNDEEP
javascripthtmljqueryleaflet
Deocx
Deocx

Reputation: 31

How to reset a leaflet map after a case in JS

Hi, i have the following problem: I have a map in leaflet linked to a change function in jquery, depending on the ID that I receive in the "select" of the previous query, the case is entered below in JS:

//First the map
var map = L.map('map').setView([XXXX, XXXXX], 12);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    minZoom: 12,
    maxZoom: 100
}).addTo(map);

function popup(feature, layer) {
    if (feature.properties && feature.properties.COMUNA)
    {
        layer.bindPopup( "<strong>" + "INF.EX: " + "</strong>" + feature.properties.INF);
    }
};
//Finish the map
//Start the CASE
    $("body").on("change", "[name=EXAMPLE]", function ()
    {
        var NUM = $('#EXAMPLE').val();
        switch (NUM) {
            case '1':
                map.setView([XXXX, XXXX], 15,{
                    animate: true
                });

                var examplemap= L.geoJson(EXAMPLE_01, {
                    onEachFeature: popup
                });

                L.geoJson(EXAMPLE01).addTo(map);
                examplemap.addTo(map);
            break;
            case '2':
                map.setView([XXXX, XXXX], 15,{
                    animate: true
                });

                var examplemap= L.geoJson(EXAMPLE_02, {
                    onEachFeature: popup
                });

                L.geoJson(EXAMPLE02).addTo(map);
                examplemap.addTo(map);
            break;
}});

At the moment of choosing another case (Stored in a select in HTML ) the data that the first case that I have chosen gave me is still stored in the map, how could I get these data that are in the map to be deleted so that Does the other case apply?

If there is a need for another part of the code or if there is any inconsistency, you can tell me, thanks!

Upvotes: 0

Views: 1297

Answers (1)

Lapskaus
Lapskaus

Reputation: 1721

To reset everything on your map you can use the eachLayer method of your map, to remove all layers previously added:

map.eachLayer((layer) => {
  layer.remove();
});

[EDIT] To only delete a specific layer, you need to keep track of it:

var map = L.map('map').setView([XXXX, XXXXX], 12);
var myLayer = new L.LayerGroup();
myLayer.addTo( map );
[...]
$("body").on("change", "[name=EXAMPLE]", function () {
[...]
switch (NUM) {
   case '1':
      [...]
      // remove everything from your layer (you should move this to a function)
      myLayer.eachLayer((layer) => {
        layer.remove();
      });
      // and then instead of adding to your map, add the layer to your    myLayer
      examplemap.addTo(myLayer);
      break;
      [...]
    // Same thing in the other case(s)
[...]

Upvotes: 1

Related Questions