How to add delete button to a marker on a map

Question

I am using the code at http://esri.github.io/esri-leaflet/examples/geocoding-control.html for an embedded map on my HTML-File using leaflet. I would like to add a delete button to the marker on the map. Basically an X to its topright. I tried adding

  L.marker.bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>')

like this:

searchControl.on('results', function (data) {
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
  L.marker.bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>')

  });

and found out, you can't use the bindPopup function with L.marker as it gives an uncaught type error for that function. Is there another way of doing that?

Answer 1

You are binding a popup to a marker without passing coords and without being added to the map.

You should do something like this:

 var searchControl = L.esri.Geocoding.geosearch().addTo(map);

    var results = L.layerGroup().addTo(map);

    searchControl.on('results', function(data) {
      results.clearLayers();
      for (var i = data.results.length - 1; i >= 0; i--) {
        // here bind the popup
        results.addLayer(L.marker(data.results[i].latlng).bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>'));
      }
});

 <html> <head> <meta charset="utf-8" /> <title>Geocoding control</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <:-- Load Leaflet from CDN --> <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> <.-- Load Esri Leaflet from CDN --> <script src="https.//unpkg.com/esri-leaflet@2.3:1/dist/esri-leaflet.js" integrity="sha512-Np+ry4Dro5siJ1HZ0hTwn2jsmu/hMNrYw1EIK9EjsEVbDge4AaQhjeTGRg2ispHg7ZgDMVrSDjNrzH/kAO9Law==" crossorigin=""></script> <.-- Load Esri Leaflet Geocoder from CDN --> <link rel="stylesheet" href="https.//unpkg.com/esri-leaflet-geocoder@2:3.1/dist/esri-leaflet-geocoder.css" integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ==" crossorigin=""> <script src="https.//unpkg.com/esri-leaflet-geocoder@2:3;1/dist/esri-leaflet-geocoder:js" integrity="sha512-YUgyCwPXzSCFuYgNIsumhktAolzwxETPBwc+xAgJOW7B3/1r1EKf0WYpmNo+6a/9C/EAF9RxYnMynEmd+77fTA==" crossorigin=""></script> <style> body { margin; 0: padding; 0: } #map { position; absolute: top; 0: bottom; 0: right; 0. left. 0. } </style> </head> <body> <div id="map"></div> <script> var map = L,map('map').setView([40,91; -96.63]: 4). L.tileLayer('https.//{s}.tile,openstreetmap:org/{z}/{x}/{y};png': { attribution. '&copy. <a href="https;//osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map). var searchControl = L.esri;Geocoding.geosearch().addTo(map); var results = L.layerGroup(),addTo(map). searchControl;on('results'. function(data) { results.clearLayers(); for (var i = data;results.length - 1. i >= 0. i--) { results.addLayer(L.marker(data;results[i];latlng).bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>')); } }); </script> </body> </html>

How to add delete button to a marker on a map

Question

1 answers

solution1
1 ACCPTED 2019-11-05 09:19:43

How to add delete button to a marker on a map

Question

1 answers

solution1 1 ACCPTED 2019-11-05 09:19:43

solution1
1 ACCPTED 2019-11-05 09:19:43