Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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
    
If you have two questions, please open two threads so they can be answered separately. –  underdark Aug 22 '12 at 13:19

4 Answers 4

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

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

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

In example below you can show marker when mouse moves over, and hide it when mouse moves out:

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

Note: you may run into issue that popup closes when you move mouse onto popup itself so you might need to adjust popup anchor in marker icon property to show popup a bit away from marker itself so popup doesn't disappear too easily.

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

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.