Leaflet Tooltip – How to Turn Display of Marker Tooltips On/Off in Layer Control

leafletmarkerstooltip

I want to add tooltip which will show magnitude for each earthquake epicenter and was able to make it but I have a problem that with many epicenters in one area tooltips are overlapped.

My question is can I first hide tooltips (magnitudes) and then on control when clicked to show them?

This is my code that shows epicenters, and at the end you will see that I have added .bindTooltip.

var earthquakes = L.geoJson([], {
        onEachFeature: function (feature, layer) { 
            var props = feature.properties;
            
        },
        pointToLayer: function (feature, latlng) {
            var color,
                mag,
                radius,
                weight;
                mag = feature.properties.mag;
                label = String(mag);
            if (mag === null) {
                color = '#FF0000';
                radius = 2;
                weight = 1;
            } else {
                color = '#FF0000';
                radius = 2 * Math.max(mag, 1);
                weight = 1;
            }
            if (feature.properties.type === 'quarry blast') {
                color = '#FF00FF';
            }
            return L.circleMarker(latlng, {
                color: color,
                radius: radius,
                weight: weight
            }).bindTooltip(label, {
                permanent: true, 
                direction: 'center',
                opacity: 0.65,
                className: 'pointlabel' 
            }).openTooltip();
        }
    }).addTo(map);

At the beginning of code I have below code for controls where I can switch map and also show lines (earth faults), so can I somehow by using overlays control be able to bintooltip when checked and unbindtooltip when unchecked?

var Faults = new L.LayerGroup();
var Tooltip = new L.LayerGroup();
var Base = {
  "Arcgis map": Arcmap,
  "Google terrain": googlemap
};
var overlays = {
  "Faults": Faults,
  "Tooltip": Tooltip
};

L.control.layers(Base, overlays, {collapsed:false}).addTo(map);

In layer control I would like to have checkbox called tooltip so when checked it show tooltip and when unchecked hide it, see image below:

enter image description here

Here is complete code: https://jsfiddle.net/Tkalac/f5mqo6Lj/1/#&togetherjs=9KtCAh7Unw

Best Answer

Group layer Tooltip can be used not to actually display tooltips, bust just as a switch in layer control to trigger tooltips display on/off.

When layer Tooltip is selected in the control, it fires layer event add. In event processing function markers from earthquakesEMSC are iterated and tooltips made permanent. When layer Tooltip is deselected in the control, it fires layer event remove. In event processing function markers from earthquakesEMSC are iterated and tooltips made not permanent.

Logic of the code below is that initially tooltips are not displayed.

var earthquakesEMSC = L.geoJson([], {
  onEachFeature: function (feature, layer) { 
    var props = feature.properties;

    var datum = props.time,
    split = datum.split('T');
    var vrijeme = split[1],
    split2 = split[1].split('.'); 
    layer.bindPopup('Date: ' + split[0] + '</br>' + 'Time: ' + split2[0] + '</br>' + 'Type: ' + props.magtype + '</br>' + 'Mag: ' + props.mag + '</br>' + 'Depth: ' + props.depth + ' km' + '</br>' + 'Station: ' + props.auth + '</br>' +'source: ' + props.source_catalog);
  },
  pointToLayer: function (feature, latlng) {
    label = String(feature.properties.mag) 
    var color,
      mag,
      radius,
      weight;
      mag = feature.properties.mag;
      label = String(mag);
    if (mag === null) {
      color = '#FF0000';
      radius = 2;
      weight = 1;
    } else {
      color = '#FF0000';
      radius = 2 * Math.max(mag, 1);
      weight = 1;
    }
    if (feature.properties.type === 'quarry blast') {
      color = '#FF00FF';
    }
    return L.circleMarker(latlng, {
      color: color,
      radius: radius,
      weight: weight
    }).bindTooltip(label, {
      direction: 'center',
      opacity: 0.5,
      className: 'pointlabel'
    });
  }
}).addTo(map);

var Tooltip = new L.LayerGroup();

Tooltip.on('add', function() {
  earthquakesEMSC.eachLayer(function(marker) {
    var tooltip = marker.getTooltip();
    marker.unbindTooltip();
    tooltip.options.permanent = true;
    marker.bindTooltip(tooltip);
  });
});
Tooltip.on('remove', function() {
  earthquakesEMSC.eachLayer(function(marker) {
    var tooltip = marker.getTooltip();
    marker.unbindTooltip();
    tooltip.options.permanent = false;
    marker.bindTooltip(tooltip);
  });
});
Related Question