Afficher un popup au survol de la souris, pas au clic en utilisant Leaflet?

Est-il possible dans Leaflet que la fenêtre contextuelle s'ouvre au survol de la souris et non au clic?

Cela ne fonctionne que pour un marqueur à la fois, mais j'en ai besoin pour un plus grand nombre de marqueurs:

marker.on('mouseover', function(e){
    marker.openPopup();
});

Si vous devez afficher la fenêtre contextuelle d'un marqueur, vous pouvez utiliser la méthode bindPopup des marqueurs.

Ensuite, vous avez plus de contrôle et il sera automatiquement lié à votre marqueur.

Dans l'exemple ci-dessous, vous pouvez afficher la fenêtre contextuelle lorsque l'utilisateur passe la souris sur la souris et la masquer lorsque l'utilisateur la moque:

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

Remarque: vous pouvez rencontrer des problèmes avec la fermeture des popups lorsque vous passez la souris sur le popup lui-même. Vous devrez donc peut-être ajuster l'ancre du popup dans (voir Paramètres du popup) pour afficher vos popups un peu plus loin du marqueur lui-même. disparaître trop facilement.

Cela aidera à afficher une fenêtre contextuelle sur le curseur de la souris

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

Ce n'est pas un problème spécifique à Leaflet, mais plutôt une question de Javascript.

Stockez vos marqueurs dans une collection, puis liez-les openPopupà un 'mouseover'événement.

Par exemple, avec un tableau:

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));
}

Si vous utilisez Leaflet 1.3.x, la liaison d'infobulle est une méthode intégrée.

http://leafletjs.com/reference-1.3.0.html#tooltip

var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");

Pour ce qui est d'avoir une solution qui fonctionne "pour un plus grand nombre de marqueurs", voici ce que je fais pour chaque couche de données ponctuelles chargées depuis 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;
    }
});