My popups are set to open on mouseover
, and the icons on my map are very large. Right now, when the cursor travels over the icon, the popup remains static in the middle of the icon. Is it possible to have the popup travel with the cursor's movements while the cursor is inside the relevant icon?
I'm trying to achieve an effect like this example from the NYT, but with Leaflet and the markerCluster plugin.
Relevant code:
var markers = L.markerClusterGroup( {
....
iconCreateFunction: function (cluster) {
cluster.bindPopup(stateBlurb, {offset: new L.Point(0, -15)});
cluster.on('mouseover', function (e) {
this.openPopup();
});
cluster.on('click', function (e) {
this.openPopup();
});
cluster.on('clickout', function (e) {
this.closePopup();
});
return L.divIcon({
html: '<div><span>' + stateName + '</span></div>',
className: `cluster ${classNameSize} ${classNameColor}`,
iconSize: null,
});
},
});
There are a few approaches to this; one of them would be to rely on the
openPopup(latlng)
method together with thelatlng
property of Leaflet-decorated mouse events and themousemove
event, e.g.:This has the disadvantage that, if/when the user moves the pointer to over the popup itself, that fires a
mouseout
event, effectively flickering the popup. This can be worked around by leveraging thepointer-events
CSS property, e.g.:See a working example.