SINTEF-9012 / PruneCluster

Fast and realtime marker clustering for Leaflet
MIT License
551 stars 132 forks source link

Where/How do i add a tooltip to a marker? #169

Closed BobbyBabes closed 6 years ago

BobbyBabes commented 6 years ago

I have this line of JS code, which works as it should. : leafletView.RegisterMarker(new PruneCluster.Marker(serverDetails.server[i].location.lat, serverDetails.server[i].location.long, {title: popupContent}, serverCategory));.

I then tried adding a test tooltip to each marker for when it's is hovered : leafletView.RegisterMarker(new PruneCluster.Marker(serverDetails.server[i].location.lat, serverDetails.server[i].location.long, {title: popupContent}, serverCategory).bindTooltip("tooltip for marker " + i));.

I received the following error message in the console. So I guess that I'm too early. Uncaught TypeError: (intermediate value).bindTooltip is not a function at main.js:199.

BobbyBabes commented 6 years ago

I just had a quick peek at PruneCluster.js. I had to add the content for each tooltip to the data object (in the loop where the markers are created and clustered). Then bind the relevant tooltip to each visible marker with the content from data (in the rewritten PrepareLeafletMarker method). Now a tooltip pops onmouseover and onmouseout. And a big massive info window on click. Eeeeexcelent!

for (var i = 0, l = serverDetails.server.length; i < l; ++i) {
  .....
  .....
  var tooltipContent = "tooltip for marker " + i;
  leafletView.RegisterMarker(new PruneCluster.Marker(serverDetails.server[i].location.lat, 
serverDetails.server[i].location.long, {title: popupContent, tooltip: tooltipContent}, serverCategory));
}

leafletView.PrepareLeafletMarker = function (marker, data, category) {
  if (marker.getPopup()) {
    .....
  } else {
    .....
    marker.bindTooltip(data.tooltip);
  }
};