Showing different markers on hover

Question

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.

Answer 1

Quick and 'dirty' solution would be to simply create global var marker for saving created marker, which can then be remove upon mouse exit:

var marker;

function locOver(event) {
    var llt = event.target.dataset["lat"],
        lln = event.target.dataset["lon"];
                                    
  marker = L.marker([llt, lln]).addTo(map); 
}
                      
function locOut(event) {
  marker.remove();
}

I call this solution 'dirty' because it creates a new marker each time mouse is over the same link. Correct solution would be associate a unique id with each link and then create marker only the first time, and later retrieve created marker with the help of this id.

Solution with id would go like this:

1. When attaching event handlers to link, also add unique id to the element.
2. Create an array to save markers, where index will be id of the link.
3. When mouse gets over link, first check if marker already exists. If it exists, add it to the map. If it doesn't exist, create it, save to marker array and add it to the map.
4. When mouse leaves the link, get marker from the array of markers, using id as index, and remove marker from the map.

Code could then look something like this (ES5):

var i = 0;
loc.forEach(function(node) {
    node.addEventListener("mouseover", locOver);
    node.addEventListener("mouseout", locOut);
    node.id = i++;
});
                            
var markers = [];

function locOver(event) {
  var target = event.target;
  if (markers[target.id]) {
    markers[target.id].addTo(map);
    }
  else {
    var llt = target.dataset["lat"];
    var lln = target.dataset["lon"];
    marker = L.marker([llt, lln]).addTo(map); 
    markers[target.id] = marker;
  }
}
                      
function locOut(event) {
  markers[event.target.id].remove();
}