CODEWITHSUNDEEP
eventsleafletpopuptooltipleaflet.markercluster
velocat
velocat

Reputation: 117

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.

Upvotes: 2

Views: 1911

Answers (2)

WoodrowShigeru
WoodrowShigeru

Reputation: 1594

In my case, I already had permanent: true but the tooltips disappeared, anyway. I did not explore further why that bug happens … (Too much customization?)

… But here is a fix: identify the tooltips in a bad state and simply reopen them.

let bringBackMissingPermaTooltips = (map) => {
  if ((map instanceof L.Map) === false) {
    return;
  }

  let targets = Object.values(map._targets);
  let elementsWithBrokenTooltips = targets.filter((el) => 
  el._tooltip?.options?.permanent === true && el.isTooltipOpen() === false);
  elementsWithBrokenTooltips.forEach((el) => el.openTooltip());
}

map.on('moveend', () => {
  bringBackMissingPermaTooltips(map);
});

Upvotes: 0

kboul
kboul

Reputation: 14580

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

Upvotes: 2

Related Questions