-1

I am using Turf.js along with OpenStreetMap to perform the following tasks, my remove layer function is not working as expected. Following piece of code is applied to different buttons created using HTML over the web once the button is clicked a specific function either buffer is performed on a location after taking radius from the user, or intersection or union is performed on two polygons. After the button is clicked the function is performed and a layer is added to the leaflet map but when it comes to removing the button it's working to remove the buffer layer but it's not removing the other layers.

var map = L.map('map').setView([30.3894, 69.3532], 5);
var basemap = 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}{r}.{ext}';

var TerrainBackground = L.tileLayer(basemap, {
                            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            subdomains: 'abcd',
                            minZoom: 0,
                            maxZoom: 18,
                            ext: 'png'
}).addTo(map);

// Allow only numeric values
function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
}

var marker = L.marker([33.65551, 73.07375]).addTo(map);

var buffer_layer = L.geoJSON()

$(document).ready(function(){
    $("#buffer").click(function(){
        
        var radius = $("#inputRadius").val();
        var unit
        
        $('#inputUnits li').on('click', function(){
            unit= $(this).text().toLowerCase()
        });
        
        var point = turf.point([73.07375, 33.65551]);
        var buffered = turf.buffer(point, radius, {units: unit});
        buffer_layer.addData(buffered)
        buffer_layer.addTo(map)
        

    });
    
});
L.geoJSON(polygon1).addTo(map);
//L.geoJSON(polygon2).addTo(map);
$(document).ready(function(){
    $("#intersection").click(function(){    
        L.geoJSON(polygon1,{
            onEachFeature: function(feature,layer){
                var poly1=feature.geometry;
                L.geoJSON(polygon2,{
                    onEachFeature: function(feature,layer){
                        var poly2=feature.geometry;
                        
                        var intersection = turf.intersect(poly1,poly2);
                        L.geoJSON(intersection).addTo(map)
                    }   
                })
            }
        })
    }); 
});
$(document).ready(function(){
    $("#union").click(function(){   
        L.geoJSON(polygon1,{
            onEachFeature: function(feature,layer){
                var poly1=feature.geometry;
                L.geoJSON(polygon2,{
                    onEachFeature: function(feature,layer){
                        var poly2=feature.geometry;
                        
                        var union = turf.union(poly1, poly2);
                        L.geoJSON(union).addTo(map)
                    }   
                })
            }
        })
    }); 
});

$("#LayerRemover").click(function(){
    map.removeLayer(buffer_layer)
    map.removeLayer(L.geoJSON(intersection))
    map.removeLayer(union)
    //jsonLayer.clearLayers()
});
0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.