What I’m trying to do
I have an on click event that places a marker on a map, what I want is if the user clicks again the the old marker is deleted and the new marker is deleted
Things I have tried
marker.clearLayer();
this did not work
here is e code I used , any idea how ai can make this work.
Getting coordinates from a Leaflet map<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 800px;
width: 1200px;
max-width: 100%;
max-height: 100%;
}
.leaflet-container.crosshair-cursor-enabled {
cursor: crosshair;
}
</style>
LAT
LONG
LAT: </label>
<label for="long">
<span>LONG:</span>
<input type="text" id="longx" />
</label>
</form>
<div id="map" style="width: 1000; height: 1000;"></div>
<script>
const map = L.map('map').setView([52.1579, -106.6702], 5);
L.DomUtil.addClass(map._container, 'crosshair-cursor-enabled');
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
map.on('click', function (e) {
var popLocation = e.latlng;
var popup = L.popup()
.setLatLng(popLocation)
.setContent('<p>LAT:' + e.latlng.lat + ' <br/> LONG:' + e.latlng.lng + '</p>')
.openOn(map);
L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
document.getElementById("lat").innerHTML = e.latlng.lat;
document.getElementById("long").innerHTML = e.latlng.lng;
document.getElementById("p1").innerHTML = e.latlng.lng;
});
</script>