2

I add polygon data on the Leaflet map by selecting parameters: travel_mode and travel_time from the form control and clicking a button "btnGenerate". This button click function is working as expected: it adds as many polygons as it is clicked. Say I click the button 3 times, with 3 different parameters of travel_mode and travel_time, it adds 3 different polygons on the map. Now when I click another button which invokes the function "removeTraveltime", it only removes the last added polygons. First 2 polygons are still on the map. My aim is to remove all 3 added polygons from the map with one click of the remove button. I am not sure how to implement that. My code is as below:

var ttPoly;
$("#btnGenerate").click(function(){
    $.ajax({
            url: 'php/traveltime.php',
            type: 'POST',
            data:{eno:enos,
                  travel_mode: $("#travelmode").val(),
                  travel_time: $("#traveltime").val()                            
            },
            success: callbackTT
    });
    
        function callbackTT(response){                
                ttPoly = L.geoJSON(JSON.parse(response), {forEach:function(ttPoly){
                         var poly =L.polygon(ttPoly.geometry.coordinates);
                }}); 
        
                ttPoly.setStyle({
                    color:'purple',
                    fillOpacity:0.4
                });
                $("#dlgTravelTime").hide();
                ttPoly.addTo(mymap);   
        };               
});
    
function removeTraveltime(enos){
        if(ttPoly){
             mymap.removeLayer(ttPoly);                        
        } 
}
0

2 Answers 2

2

I managed to do it this way. Posting here as an alternative.

var ttPoly;
var ttLayerGroup = new L.LayerGroup();
$("#btnGenerate").click(function(){
    $.ajax({
            url: 'php/traveltime.php',
            type: 'POST',
            data:{eno:enos,
                  travel_mode: $("#travelmode").val(),
                  travel_time: $("#traveltime").val()                            
            },
            success: callbackTT
    });
    
        function callbackTT(response){                
                ttPoly = L.geoJSON(JSON.parse(response), {forEach:function(ttPoly){
                         var poly =L.polygon(ttPoly.geometry.coordinates);
                }}); 
        
                ttPoly.setStyle({
                    color:'purple',
                    fillOpacity:0.4
                });
                $("#dlgTravelTime").hide();
                ttLayerGroup.addLayer(ttPoly);
                ttLayerGroup.addTo(mymap); 
            
        };               
});
    
function removeTraveltime(enos){
    ttLayerGroup.clearLayers();
}
1

You have only one var ttPoly for all your created polygons, so at any given moment it points only to the last created polygon.

One way of resolve this problem is to have array var ttPolyActive = [] to which you add every created poly and iterate through it when you want to remove them.

Your code could then look something like this:

var ttPolyActive = [];
$("#btnGenerate").click(function() {
  $.ajax({
    url: 'php/traveltime.php',
    type: 'POST',
    data:{eno:enos,
      travel_mode: $("#travelmode").val(),
      travel_time: $("#traveltime").val()                            
    },
    success: callbackTT
  });
  
  function callbackTT(response) {                
    var ttPoly = L.geoJSON(JSON.parse(response), {forEach:function(ttPoly){
       var poly =L.polygon(ttPoly.geometry.coordinates);
    }}); 

    ttPoly.setStyle({
      color:'purple',
      fillOpacity:0.4
    });
    $("#dlgTravelTime").hide();
    ttPoly.addTo(mymap);
    ttPolyActive.push(ttPoly);
  };               
});
    
function removeTraveltime(enos) {
  ttPolyActive.forEach(function(ttPoly) {
    mymap.removeLayer(ttPoly);                        
  });
  ttPolyActive = [];
}
1
  • Thanks it works perfect. While I was playing with the code, I also managed to get the desired result with the use of layergroup. I will post my answer. Commented May 18, 2023 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.