Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Is it possible in Leaflet that popup opens on mouse-over, not on click?

This is working for just one marker at a time, but I need it for a bigger number of markers:

marker.on('mouseover', function(e){
    marker.openPopup();
});
share|improve this question
1  
If you have two questions, please open two threads so they can be answered separately. – underdark Aug 22 '12 at 13:19

If you need to show the popup for a marker you can use markers bindPopup method.

Then you have more control and it will automatically be bound to your marker.

In the example below you can show the popup when the user mouses over, and hide it when the user mouses out:

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

Note: You may run into issues with the popups closing when you mouse onto the popup itself, so you might need to adjust the popup anchor in (see popup settings) to show your popups a bit farther away from marker itself so it doesn't disappear too easily.

share|improve this answer

This is not a Leaflet-specific problem, but rather a question of Javascript.

Store your markers in a collection, and then bind openPopup to a 'mouseover' event for all of them.

For example, with an array:

var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>

for (var i = 0; i < markers.length; i++) {
    var currentMarker = markers[i];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}
share|improve this answer
    
Opinion in a comment rather than in the answer: I think the usability of hover-opened popups on a map, where by definition your cursor wanders around a lot, is questionable. Do you really want your users to do pathfinding between markers to finally attain the one they want but always gets hidden behind popups whenever they try to move their cursor towards their target? – MattiSG Aug 23 '12 at 9:34
    
This is not my choice, unfortunately. I have markers stored like new L.MarkerClusterGroup with Leaflet MarkerCluster: var markers = new L.MarkerClusterGroup(); would that coding you wrote work for it, too? – againstflow Aug 23 '12 at 14:03
    
@againstflow Erm, you should change your question, then. You're not only asking to open markers on hover, you're asking how to iterate over markers in a L.MarkerCluster instance… My answer clearly shows how to bind a collection of popups on hover. If you want to know how to obtain a collection from a cluster, this is something else. – MattiSG Aug 24 '12 at 14:40

This will helps to show popup on marker mouseover

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});
share|improve this answer

In terms of having a solution that works "for a bigger number of markers", this is what I do for each layer of point data loaded from GeoJSON:

var layerPopup;
featureLayer.on('mouseover', function(e){
    var coordinates = e.layer.feature.geometry.coordinates;
    var swapped_coordinates = [coordinates[1], coordinates[0]];  //Swap Lat and Lng
    if (map) {
       layerPopup = L.popup()
           .setLatLng(swapped_coordinates)
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
            .openOn(map);
    }
});
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        map.closePopup(layerPopup);
        layerPopup = null;
    }
});
share|improve this answer
    
Just curious, what type of object is featureLayer? Looks like this is a great solution. – Behr Aug 25 '15 at 13:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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