Search code examples
eventsleafletpopuptooltipleaflet.markercluster

Tooltip disappears when moving leaflet map


I add markers to the map and place them in the markercluster. For markers that are not clustered, I want to show the tooltip that I attach to the marker when I create it.

var geoMarkers = L.markerClusterGroup({ removeOutsideVisibleBounds:true, chunkedLoading: true, chunkProgress: this._updateProgress });

//start loop create markers
var marker = new L.marker(latlng, { icon: icon } );
marker.bindPopup(L._("Loading.."));
marker.bindTooltip(' text ');
geoMarkers.addLayer(marker);
//end loop


map.addLayer(geoMarkers);

map.on('layeradd', function(event) {
    var layer = event.layer;

    if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
        layer.openTooltip();
    }
});

To do this, I followed advice and listen for the layeradd event. When loading the map and moving to new markers, everything works. However, at any movement of the map, on those markers where the tooltip is already open, it is closed, since the layeradd event does not affect them. There is only one way to see the hint on them again - to zoom out so that the marker "hides" in the cluster and then again increasing the scale, I see the hint again. It is desirable that it be always present when the marker is not hidden in the cluster. I ask for help or hints.


Solution

  • You can use the permanent tooltip option in order to maintain the visibility of your marker. Check here for official docs.

    ...
    var geoMarkers = L.markerClusterGroup({ removeOutsideVisibleBounds:true, chunkedLoading: true, chunkProgress: this._updateProgress });
    
    //start loop create markers
    var marker = new L.marker(latlng, { icon: icon } );
    marker.bindPopup(L._("Loading.."));
    marker.bindTooltip(' text ', { permanent: true} ); // here define it
    geoMarkers.addLayer(marker);
    //end loop