I want the last circleMarker to be deleted when a new one is made which happens when the user clicks.

        app.initialize();

        var count = 0;

        var location;
        map.on('click', function(e){
            if (count == 1){
                map.removeLayer(location);
            }else{
                count = 1;
            }
            var cords = String(e.latlng);
            cords = cords.match(/\(([^)]+)\)/)[1];
            lat = cords.substring(0, cords.search(","));
            lng = cords.substring(cords.search(",")+1);
            location = new L.circleMarker([lat, lng], {radius:100,});
            map.addLayer(location);


        });

That's the code I have so far but whenever I click I get ERR_FILE_NOT_FOUND.

Thanks in advance, Ed.

I want the last circleMarker to be deleted when a new one is made which happens when the user clicks.

        app.initialize();

        var count = 0;

        var location;
        map.on('click', function(e){
            if (count == 1){
                map.removeLayer(location);
            }else{
                count = 1;
            }
            var cords = String(e.latlng);
            cords = cords.match(/\(([^)]+)\)/)[1];
            lat = cords.substring(0, cords.search(","));
            lng = cords.substring(cords.search(",")+1);
            location = new L.circleMarker([lat, lng], {radius:100,});
            map.addLayer(location);


        });

That's the code I have so far but whenever I click I get ERR_FILE_NOT_FOUND.

Thanks in advance, Ed.

• javascript
• html
• leaflet

• ERR_FILE_NOT_FOUND. have you tried removing everything and alert just text message on map click ? Or is it working on other than this code ? – Kirankumar Dafda Commented Oct 1, 2016 at 9:50
• The ERR_FILE_NOT_FOUND seems to happen when I take location out of the map.on function. If it's inside then I can make one circleMarker but on the second the removeLayer() makes an error as is can't find the marker. – Ed Lynch Commented Oct 1, 2016 at 9:53

3 Answers 3

If I understand well what you want to do, I think you may have overplicated the code. It is enough to write the following code:

 var location = new L.circleMarker();

 map.on('click', function(e) {
        map.removeLayer(location);
        location = new L.circleMarker(e.latlng, {radius:10,});
    map.addLayer(location);
 });

Please look at the fiddle to see if this is what you wanted: https://jsfiddle/vaillant/ch4qb28x/

I got it working so here's what I did if anybody else has this problem:

 app.initialize();
        var mark = L.layerGroup();

        map.on('click', function(e){
            if (map.hasLayer(mark)){
                map.removeLayer(mark);
                mark.clearLayers();
            }

            addMarker(e);

        });

        function addMarker(e){
            var cords = String(e.latlng);
            cords = cords.match(/\(([^)]+)\)/)[1];
            lat = cords.substring(0, cords.search(","));
            lng = cords.substring(cords.search(",")+1);
            mark.addLayer(new L.circleMarker([lat, lng], {radius:100,}));
            map.addLayer(mark);
        }

This works perfectly for me (using jquery):

var myFeatureGroup = L.featureGroup().addTo(map);//creating a circlemarkers group      
$('.addcircle').click(function (oEvt) {
oEvt.preventDefault();
myFeatureGroup.clearLayers();//deleting the previous circle marker
var LatLng = $(this).data('coords');
var circlemark = L.circleMarker(LatLng, {radius: 50,color:"#ff0000"}).addTo(myFeatureGroup);
});