Leaflet Marker Mouseover Popup

Question

I've tried to make a MouseOver Markers Popup since a couple of days, I'm using Leaflet. I know some solutions I've read in many forums, but I wanna make it work with GeoJSON-Points and I haven't found a solution yet.

Here is a working example, for click popups only:

$('#map').each(function () {
    // map initialization
    map = new L.map('map');

    var gjsonMarker = [{
        "type": "Feature",
        "properties": {
            "name": "start",
            "popupContent": "Portoferraio"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10.3163552, 42.8072368, 0.0]
        }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Marciana Marina" },
        "geometry": { "type": "Point", "coordinates": [10.1970935, 42.8069535, 0.0] }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Bastia" },
        "geometry": { "type": "Point", "coordinates": [9.4520402, 42.6943563, 0.0] }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Campoloro" },
        "geometry": { "type": "Point", "coordinates": [9.5417333, 42.3393521, 0.0] }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Cavo" },
        "geometry": { "type": "Point", "coordinates": [10.422377586, 42.859476028, 0.0] }
    }];

    gpsMarker = new L.geoJson(gjsonMarker, {
        onEachFeature: function(feature, layer) {
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent, {closeButton: false});
            }
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng);
        }
    });

    map.addLayer(gpsMarker);
    map.fitBounds(gpsMarker.getBounds(), {padding: [0, 0]});
});

Any ideas how to make the Popup with MouseOver effect, and when I leave the point the popup must be hidden again.

Greets!

possible duplicate of How to show a popup on mouse-over, not on click? — Tangnar, Jan 27 '15 at 14:28

score 16 · Answer 1 · answered Jan 29 '15 at 18:37

You just have to add 'mouseover' and 'mouseout' event listeners to your newly created layer.

You will also want to change the offset of the popup to make it higher. If not, you will have annoying mouseout when the mouse comes near the arrow of the popup, causing the disappearance of the popup.

gpsMarker = new L.geoJson(gjsonMarker, {
        onEachFeature: function(feature, layer) {
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent, {closeButton: false, offset: L.point(0, -20)});
                layer.on('mouseover', function() { layer.openPopup(); });
                layer.on('mouseout', function() { layer.closePopup(); });
            }
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng);
        }
    });

http://jsfiddle.net/FranceImage/ov2ufL8b/

wow this is the easiest method I've seen for geojson pop-ups...!!! thank you!!! — DPSSpatial_BoycottingGISSE, Feb 16 '17 at 22:48

score 1 · Answer 2 · answered Oct 04 '17 at 11:22

1

You can save 2 lines of code by using the .bindTooltip

layer.bindTooltip(feature.properties.popupContent, {closeButton: false, offset: L.point(0, -20)});

answered Oct 04 '17 at 11:22

pq1

11
1

This method works better with big polygons, avoiding a glitch when hovering the mouse over the popup itself. Thanks! – DavidC Jul 02 '20 at 01:47

Leaflet Marker Mouseover Popup

2 Answers2

Linked