I have a list of links and withing the links I have data attributes for lat and lon.
<a href="#" data-lat="23.232322" data-lon="-97.2466634">
<a href="#" data-lat="23.333452" data-lon="-97.2234234">
When I hover over the links I would like to show marker on the map.
let loc = document.querySelectorAll("a[data-lat]");
loc.forEach(node => {
node.addEventListener("mouseover", locOver);
node.addEventListener("mouseout", locOut);
})
function locOver(event) {
var llt = event.target.dataset["lat"],
lln = event.target.dataset["lon"];
L.marker([llt, lln]).addTo(map);
}
function locOut(event) {
//remove markers associated with the links
}
This seems to work partially but I need to figure out how to resolve a few issues: Currently every time I hover over the same link it keeps adding more and more markers. I was thinking of removing the marker on mouseout event but later I found a function (setLatLng) that probably is more efficient and instead of adding and removing just uses the same marker to just change it's coordinates.
Also, when I am no longer hovering over links I'd like to remove the last link's marker. I do have a marker of my current position that I'd like to keep on the map.
I've tried it in many different ways but always get JS errors in console and all my solutions seem to be over-complicating the issue. I'm certain I'm pretty close, just stuck.