5

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!

1

2 Answers 2

16

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/

1
  • wow this is the easiest method I've seen for geojson pop-ups...!!! thank you!!! Commented Feb 16, 2017 at 22:48
1

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

layer.bindTooltip(feature.properties.popupContent, {closeButton: false, offset: L.point(0, -20)});
1
  • This method works better with big polygons, avoiding a glitch when hovering the mouse over the popup itself. Thanks!
    – DavidC
    Commented Jul 2, 2020 at 1:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.