I am working with the leaflet api.Where i have added custom control for marker.

And i have a button which tends to remove all markers.


Through wrapping, i have to remove all markers but function not working....Browser not giving any console error, so i am in dark, didn't fully understand the structure of api.


            var markers = new L.FeatureGroup();
            map.on('click', function markerPlace(e) {
                //L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
            marker = L.marker(e.latlng, { icon: markerIcon, draggable: true }).addTo(map);
                map.off('click', markerPlace);

    //onClick this button we have to remove all marker
    <button id="removeMarker">Remove Markers</button>      
    $('#removeMarker').click(function (e) {map.removeLayer(markers) });

If someone have idea about that please help or any kind of reference will be appreciated.Thanks for your time

2 Answers 2


It's hard to interpret your code since it has a few errors in it.

You created a layer (or feature group) markers that contains all your markers. You add new markers to your markers layer by calling L.marker([51.5, -0.09]).addTo(markers), and then add this layer to your map by calling markers.addTo(map).

You can then remove this layer from the map by calling map.removeLayer(markers).

Here is a working demo: http://jsfiddle.net/5g7uy6Lk/


I suggest you could use Layer Groups & Layers Control for the markers by toggling the checkbox.

For example:

//Landmark Markers
var singaporezoo = L.marker([1.40495, 103.79049]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Singapore_Zoo_-_28600609.jpg" width="280px"/>' + '<br>' + 'Singapore Zoo' + '<p>' + '80 Mandai Lake Rd, 729826').addTo(map); 
var bukittimahnaturereserve = L.marker([1.34830, 103.77754]).bindPopup('<img src="https://s3-ap-southeast-1.amazonaws.com/sla-onemap/images/zaobao/Bukit+Timah_-_Bukit_Timah_Nature_Reserve_-_28600674.jpg" width="280px"/>' + '<br>' + 'Bukit Timah Nature Reserve').addTo(map);  

//Garden Markers
var bukittimah_newCG_206 = L.marker([1.375289,103.772335], {icon: farmIcon2}).bindPopup('Garden: Block 226').addTo(map);
var bukittimah_newCG_237 = L.marker([1.3786099,103.77064], {icon: farmIcon2}).bindPopup('Garden: Block 237').addTo(map);

//Layer Group
var holland_bukittimah_landmarks = L.layerGroup([singaporezoo, bukittimahnaturereserve]);
var holland_bukittimah_newCG = L.layerGroup([bukittimah_newCG_206, bukittimah_newCG_237]);

//OverLays Selector
var overlayMaps = {
    "<img src='images/icons/marker-icon.png' width='20px'/> Landmarks": holland_bukittimah_landmarks,
    "<img src='images/icons/veggie2.png' width='20px'/> Gardens": holland_bukittimah_newCG

//TileLayer (BaseMap)
    var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')

//Add Layer to Map

//Add Overlays Control to Map
L.control.layers(null, overlayMaps).addTo(map);

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.