Show/hide all tooltips at once in Leaflet

Question

I use a for loop to add tooltips to my Leaflet map by reading the lat and lon coordinates from a .txt file.

 for (var i = 0; i < lines.length; i++) {
   ...

   L.tooltip({
             permanent: true,
             direction: 'auto',
             className: 'my-label'
           })
         .setContent("Hello")
         .setLatLng([lat,lon])
         .addTo(map);
    ...
    })

I would like to put the tooltips on their own layer in order to make them visible or invisible by clicking on the layer check box in the layers panel (see L.control.layers)

How can I put all tooltips on a specific layer?

Answer 1

Simply create a layer group and instead of adding tooltips directly to the map, add them to the layer group. You can then add this layer group to layer control as an overlay.

var tooltipLayer = L.layerGroup();

for (var i = 0; i < lines.length; i++) {
  ...
  L.tooltip({
    permanent: true,
    direction: 'auto',
    className: 'my-label'
  })
  .setContent("Hello")
  .setLatLng([lat,lon])
  .addTo(tooltipLayer);
  ...
});