Leaflet - How to find existing markers and delete markers

Question

I have started using leaflet as an open source map  http   leaflet cloudmade com   The following jQuery code will enable the creation of markers on the map on map click    map on  click   onMapClick   function onMapClick e            var marker   new L Marker e latlng   draggable true            map addLayer marker           marker bindPopup   lt b gt Hello world  lt  b gt  lt br   gt I am a popup    openPopup         But there is currently no way for me  in my code  to delete existing markers  or find all the markers i ve created on a map and put them into an array  Can anyone help me understand how to do this  Leaflet documentation is available here   http   leaflet cloudmade com reference html

User · Answer

When you save the reverence to the marker in the adding function the marker can remove it self  No need for arrays   function addPump       var pump   L marker cords  icon  truckPump   addTo map  bindPopup     lt a href     class  speciallink  gt Remove ME lt  a gt    click function                 map removeLayer pump                0

User · Answer

Here is the code and demo for Adding the marker  deleting any of the marker and also getting all the present added markers    Here is the entire JSFiddle code   Also here is the full page demo   Adding the marker       Script for adding marker on map click map on  click   onMapClick    function onMapClick e         var geojsonFeature               type    Feature            properties                geometry                      type    Point                    coordinates    e latlng lat  e latlng lng                       var marker       L geoJson geojsonFeature             pointToLayer  function feature  latlng                marker   L marker e latlng                     title   Resource Location                   alt   Resource Location                   riseOnHover  true                  draggable  true                  bindPopup   lt input type  button  value  Delete this marker  class  marker-delete-button   gt                  marker on  popupopen   onPopupOpen                return marker                   addTo map         Deleting the Marker       Function to handle delete as well as other events on marker popup open  function onPopupOpen          var tempMarker   this          To remove marker on click of delete button in the popup of marker         marker-delete-button visible   click function              map removeLayer tempMarker                 Getting all the markers in the map       getting all the markers at once function getAllMarkers          var allMarkersObjArray          for marker objects     var allMarkersGeoJsonArray          for readable geoJson markers        each map  layers  function  ml             if  map  layers ml  feature                 allMarkersObjArray push this              allMarkersGeoJsonArray push JSON stringify this toGeoJSON                           console log allMarkersObjArray         any html element such as button  div to call the function       get-markers   on  click   getAllMarkers

User · Answer

Have you tried layerGroup yet   Docs here https   leafletjs com reference-1 2 0 html layergroup  Just create a layer  add all marker to this layer  then you can find and destroy marker easily   var markers   L layerGroup   const marker   L marker         markers addLayer marker

User · Answer

you have to put your  var marker  out of the function  Then later you can access it    var marker  function onMapClick e            marker   new L Marker e latlng   draggable true            map addLayer marker           marker bindPopup   lt b gt Hello world  lt  b gt  lt br   gt I am a popup    openPopup         then later     map removeLayer marker    But you can only have the latest marker that way  because each time  the var marker is erased by the latest  So one way to go is to create a global array of marker  and you add your marker in the global array

User · Answer

Here s a jsFiddle that lets you to create markers using your onMapClick method  then delete them by clicking a link    The process is similar to undefined s - add each new marker to a markers array so you can access a specific marker when you want to interact with it later

User · Answer

1  add layer group and array to hold layers and reference to layers as global variables     var search group   new L LayerGroup     var clickArr   new Array      2  add map   3  Add group layer to map  map addLayer search group     4  the add to map function  with a popup that contains a link  which when clicked will have a remove option   This link will have  as its id the lat long of the point  This id will then be compared to when you click on one of your created markers and you want to delete it      map on  click   function e            var clickPositionMarker   L marker  e latlng lat e latlng lng   icon  idMarker            clickArr push clickPositionMarker           mapLat   e latlng lat          mapLon   e latlng lng          clickPositionMarker addTo search group  bindPopup   lt a name  removeClickM  id   e latlng lat     e latlng lng   gt Remove Me lt  a gt                     openPopup                             clickPositionMarker on  click   function e                      markerDelAgain                                     5  The remove function  compare the marker lat long to the id fired in the remove     document  on  click   a name  removeClickM     function  e              Stop form from submitting normally     e preventDefault         for i 0 i lt clickArr length i           if search group hasLayer clickArr i                  if clickArr i   latlng lat     clickArr i   latlng lng    this  attr  id                                  hideLayer search group clickArr i                    clickArr splice clickArr indexOf clickArr i    1

User · Answer

What I did to remove marker was this create a button who allow me do it Hope i can help someone     x000D   x000D    Button who active deleteBool const button   document getElementById  btn      Boolean who let me delete marker let deleteBool   false    Button function to enable boolean button addEventListener  click      gt     deleteBool   true        Function to delete marker  const deleteMarker    e    gt        if  deleteBool            e target removeFrom map          deleteBooly   false            Initiate map var map   L map  map   setView  51 505  -0 09   13      Create one marker let marker   L marker  51 5  -0 09   addTo map    Add Marker Function marker on  click   deleteMarker  x000D  body     display  flex    flex-direction  column      map    width  500px    height  500px    margin  auto      btn    width  50px    height  50px    margin  2em auto     x000D   lt  DOCTYPE html gt   lt html lang  en  gt    lt head gt       lt meta charset  UTF-8    gt       lt meta name  viewport  content  width device-width  initial-scale 1 0    gt       lt link rel  stylesheet  href  style css    gt       lt link rel  stylesheet  href  https   unpkg com leaflet 1 7 1 dist leaflet css  integrity  sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6 keqq sMZMZ19scR4PsZChSR7A    crossorigin      gt       lt title gt MovieCenter lt  title gt   lt  head gt    lt body gt       lt div id  map  gt  lt  div gt       lt button id  btn  gt Click me  lt  button gt       lt script script  script  src  https   unpkg com leaflet 1 7 1 dist leaflet js  integrity  sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA    crossorigin    gt  lt  script gt       lt script src  script js  gt  lt  script gt   lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

You can also push markers into an array  See code example  this works for me     create array    var marker   new Array       Some Coordinates  here simulating somehow json string    var items      lat   51 000   lon   13 000     lat   52 000   lon   13 010     lat   52 000   lon   13 020        pushing items into array each by each and then add markers   function itemWrap     for i 0 i lt items length i         var LamMarker   new L marker  items i  lat  items i  lon        marker push LamMarker       map addLayer marker i               Going through these marker-items again removing them   function markerDelAgain     for i 0 i lt marker length i          map removeLayer marker i

User · Answer

In my case  I have various layer groups so that users can show hide clusters of like type markers   But  in any case you delete an individual marker by looping over your layer groups to find and delete it   While looping  search for a marker with a custom attribute  in my case a  key   added when the marker was added to the layer group   Add your  key  just like adding a title attribute   Later this is gotten an a layer option   When you find that match  you  removeLayer   and it gets rid of that particular marker   Hope that helps you out   eventsLayerGroup addLayer L marker  tag latitude  tag longitude   title tag title  layer tag layer  timestamp tag timestamp  key tag key  bounceOnAdd  true  icon  L AwesomeMarkers icon  icon   vignette   markerColor   blue   prefix      iconColor   white       bindPopup customPopup tag  customOptions  on  click   markerClick      function removeMarker id       var layerGroupsArray    eventsLayerGroup landmarksLayerGroup travelerLayerGroup marketplaceLayerGroup myLayerGroup         each layerGroupsArray  function  key  value            value eachLayer function  layer                if typeof value      undefined                    if  layer options layer                       console log layer options key                       console log id                       if  id     layer options key                           value removeLayer layer

[jquery] Leaflet - How to find existing markers, and delete markers?

Examples related to jquery

Examples related to leaflet