Search code examples
leafletangular-leaflet-directive

How to remove leaflet-marker-pane in leaflet map?


I have implemented a pin pointer in my leaflet map.

function showLeaflet() {
  var map = L.map("map", {minZoom:1, maxZoom: 1}).setView([66, 384], 1);
  var imageUrl = detailResult.deck[deckFloor].deckplanLarge;
  var imageBounds = [[0, -200], [768, 1024]];
  var cord = (detailResult.deck[deckFloor].markerCordinates).split(',');
  L.imageOverlay(imageUrl, imageBounds).addTo(map);
  L.marker([cord[0], cord[1]]).addTo(map).bindPopup(detailResult.title).openPopup();
  map.setMaxBounds(imageBounds);
}

How to remove that pin pointer in the following event.

map.on('click', function(){
  //remove pointer
});

Please help me. Thanks..


Solution

  • You need to assign your marker to variable so that you can use it to remove it from the map using the removeLayer method of L.Map:

    var marker = L.marker([0, 0]).addTo(map);
    
    map.on('click', function () {
      map.removeLayer(marker);
    });
    

    Working example on Plunker: http://plnkr.co/edit/lTXtnX?p=preview and here is the reference for L.Map's layer methods: http://leafletjs.com/reference.html#map-stuff-methods