leaflet popup on mouseover removes click event

Question

I have a number of points plotted on my map using geoJSON. When you click a point, the map zooms to the point and pulls up some info in another div. When I put a popup on a mouseover event, my click function no longer works.

Here is my click function:

function fillInfo(e) {
        var layer = e.target; 

        document.getElementById('infoBox').innerHTML = '<h2>' + layer.feature.properties.name + '</h2>' + '<h3>' +  layer.feature.properties.address + '</h3></p>'
        }
        //Variable to set zoom level on click
        var southLat = layer.feature.geometry.coordinates[0] + .022438;
        var southLong = layer.feature.geometry.coordinates[1] - .003235;

        var northLat = layer.feature.geometry.coordinates[0] - .022438;
        var northLong = layer.feature.geometry.coordinates[1] + .003235;

        map.fitBounds([[southLong, southLat], [northLong, northLat]]);


    }

Here is my mouseover function:

        function highlightFeature(e) {
        var layer = e.target; 

        layer.bindPopup(layer.feature.properties.name)
            .openPopup();


        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });



        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }

    }

And here I call them:

    function onEachFeature(feature, layer) {
        layer.on({
            click: fillInfo,
            mouseover: highlightFeature,
            mouseout: resetHighlight
        });
    }

This gets the popup working fine on rollover, but the point no longer responds to the click event.

Dr.Molle Dr.Molle · Accepted Answer · 2013-01-03T19:45:22

There is a offset-property for a popup, the default is set to [0,6] , therefore the popup covers the point (the node that contains the white downwards arrow is larger than the arrow), and you'll not be able to click on the point.

Set the offset-option of the popup:

layer.bindPopup(layer.feature.properties.name,{offset:new L.Point(0,0)})
 .openPopup();

The second argument provided to L.Point is the important y-coordinate, decrease this argument to move the popup upwards.

leaflet popup on mouseover removes click event

1 Answers