Leaflet -> Removing CircleLayer doesn't work

Question

I'm trying to remove a circle layer from the map to draw a new one.

I have tried different solutions but none worked for me.

Maybe someone could find a way.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title></title>    
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin="">
</script>
<script src="Scripts/jquery-3.4.1.min.js"></script>
<style type="text/css">
    #mapid {height: 480px; width: 480px;}
</style>
</head>
<body>
    <div id="mapid">
    </div>
    <p>Umkreis Km<select id="umkreis">
        <option value="--">--</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select></p>
    <script>
        var latitude = 0;
        var longitude = 0;
        // Creating the Map
        var mymap = L.map('mapid').setView([53.079, 8.801], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data&copy;<a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoicGVpY2tlciIsImEiOiJjazBveW9pcmQwZWV0M25vMHh4dnRkdmM3In0.JwNOtv10EsQrukcXe-Q2sQ'
        }).addTo(mymap);

        function onMapClick(e) {
            if (circles != undefined) {
                mymap.removeLayer(circles);
            }
            if (document.getElementById("umkreis").value == "--") {
                alert("nothing");
            }
            else {
                var fence = document.getElementById("umkreis").value * 100;
                alert(fence);
            }
            latitude = e.latlng.lat;
            longitude = e.latlng.lng;
            var circles = L.circle([latitude, longitude], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: fence
            }).addTo(mymap);
            //alert("Latitude: " + e.latlng.lat + " Longitude: " + e.latlng.lng);
        }
        mymap.on('click', onMapClick);
    </script>
</body>
</html>

I even tried adding a Layergroup and add a circle to it and remove it with removeLayer() and clearLayers() like someone used it here in Stack Overflow to fix the same Problem.

Answer 1

You have two variables called circle . The first is defined outside onMapClick and is never initialized. The second, with the same name is defined and initialized inside onMapClick after checking whether the former has a value. You will just need to refactor onMapClick :

    function onMapClick(e) {
        if (circles != undefined) {
            mymap.removeLayer(circles);
        }
        if (document.getElementById("umkreis").value == "--") {
            alert("nothing");
        }
        else {
            var fence = document.getElementById("umkreis").value * 100;
            alert(fence);
        }
        latitude = e.latlng.lat;
        longitude = e.latlng.lng;
        circles = L.circle([latitude, longitude], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: fence
        }).addTo(mymap);
        //alert("Latitude: " + e.latlng.lat + " Longitude: " + e.latlng.lng);
    }

Answer 2

Edited version of your fiddle which works now:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<meta charset="utf-8" />

<title></title>    

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin="">
</script>
<script src="Scripts/jquery-3.4.1.min.js"></script>
<script>

</script>
<style type="text/css">
    #mapid {height: 480px; width: 480px;}
</style>
</head>
<body>
    <div id="mapid">
    </div>
    <p>Umkreis Km<select id="umkreis">
        <option value="--">--</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select></p>
    <script>

        var latitude = 0;
        var longitude = 0;
        var circles;
        // Creating the Map
        var mymap = L.map('mapid').setView([53.079, 8.801], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data&copy;<a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoicGVpY2tlciIsImEiOiJjazBveW9pcmQwZWV0M25vMHh4dnRkdmM3In0.JwNOtv10EsQrukcXe-Q2sQ'
        }).addTo(mymap);

        function onMapClick(e) {

            //circles.remove();
            //if (mymap.hasLayer(circles)) {
            //    alert("yes");
            //}

            if (circles != undefined) {
                mymap.removeLayer(circles);
                mymap.clearLayers();
            }
            if (document.getElementById("umkreis").value == "--") {
                alert("nothing");
            }
            else {
                var fence = document.getElementById("umkreis").value * 100;
                alert(fence);
            }
            latitude = e.latlng.lat;
            longitude = e.latlng.lng;
             circles = L.circle([latitude, longitude], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: fence
            }).addTo(mymap);
            //alert("Latitude: " + e.latlng.lat + " Longitude: " + e.latlng.lng);
        }
        mymap.on('click', onMapClick);


    </script>
</body>
</html>

Leaflet -> Removing CircleLayer doesn't work

Question

2 answers

solution1
0 2019-09-19 10:38:50

solution2
0 ACCPTED 2019-09-19 12:26:18

Leaflet -> Removing CircleLayer doesn't work

Question

2 answers

solution1 0 2019-09-19 10:38:50

solution2 0 ACCPTED 2019-09-19 12:26:18

solution1
0 2019-09-19 10:38:50

solution2
0 ACCPTED 2019-09-19 12:26:18