Leaflet – How to Remove Tooltip from L.geoJSON Layer

javascriptleaflet

I'm aware that there is unbindTooltip(). But I am not sure if that will work in my case. The first problem may be the fact that I need to convert it out leaflets geojson format? The second problem is I bound the tooltips using an onEachFunction. Like this: 

const onEachFunction = function (feature, layer) {
            layer.bindTooltip(`
                  <div>
                  <span>tool Tip</span>
                 </div>
                  `, {
              permanent: false,
              direction: 'center'
            });               
          };

           const finalLayer = 
             L.geoJSON(currentLayer.data.layer, {style: (feature) => {
               return {
                 fillColor: red,
                 weight: 1,
                 opacity: 1,
                 color: 'black',
                 fillOpacity: 0.6
               };
             },
             onEachFeature: onEachFunction});

           this.currentProjectLayers.push(finalLayer);
           finalLayer.addTo(this.map);

I want to programatically remove the tooltip when the user clicks on a button. So right now I have

this.layerControlButtonService.transferLabelToggle
  .subscribe(
    (response: number) => {
      this.currentProjectLayers[response].unbindToolTip();
    }
  );

I get

'this.currentProjectLayers[response].unbindToolTip is not a function' as my error.

Just curious if the root of my problem is because it's created using L.geoJSON (this is the format it looks like)

e {options: {…}, _layers: {…}, _leaflet_id: 141, _initHooksCalled: true, _mapToAdd: e, …}

or if its because the toolTip is bound to each point in the layer instead of the layer as a whole?

Edit: The layer will get removed if I add 

this.map.removeLayer(this.currentProjectLayers[response]);

So i know its worded correctly. I can access each of the individual layers by going to

this.currentProjectLayers[response]._layers

Should I loop through those?

e {options: {…}, _layers: {…}, _leaflet_id: 59, _initHooksCalled: true, 
_mapToAdd: e, …}
options: {pointToLayer: ƒ, onEachFeature: ƒ}
_initHooksCalled: true
_layers:
58: e {options: {…}, _latlng: M, _initHooksCalled: true, editing: e, feature: {…}, …}
60: e {options: {…}, _latlng: M, _initHooksCalled: true, editing: e, feature: {…}, …}
61: e {options: {…}, _latlng: M, _initHooksCalled: true, editing: e, feature: {…}, …}
62: e {options: {…}, _latlng: M, _initHooksCalled: true, editing: e, feature: {…}, …}
63: e {options: {…}, _latlng: M, _initHooksCalled: true, editing: e, feature: {…}, …}
__proto__: Object
_leaflet_id: 59
_map: e {options: {…}, _container: div#map.leaflet-container.leaflet- 
touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-to…, 
_leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_mapToAdd: e {options: {…}, _container: div#map.leaflet-container.leaflet- 
touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-to…, 
_leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_zoomAnimated: true
__proto__: e

And a layer looks like:

58: e
defaultOptions: {icon: e}
dragging: e {_marker: e, _initHooksCalled: true}
editing: e {_marker: e, options: {…}, _initHooksCalled: true}
feature: {type: "Feature", geometry: {…}, properties: {…}}
options: {icon: e, interactive: true, keyboard: true, title: "", alt: "", …}
_eventParents: {59: e}
_events: {remove: Array(4), move: Array(2), add: Array(1), click: Array(1), 
keypress: Array(1)}
_firingCount: 0
_icon: div.leaflet-marker-icon.extra-marker-circle-purple.extra- 
marker.leaflet-zoom-animated.leaflet-interactive
_initHooksCalled: true
_latlng: M {lat: 47.689846, lng: -87.015965}
_leaflet_id: 58
_map: e {options: {…}, _container: div#map.leaflet-container.leaflet- 
touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-to…, 
_leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_mapToAdd: e {options: {…}, _container: div#map.leaflet-container.leaflet- 
touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-to…, 
_leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …}
_popup: e {options: {…}, _source: e, _initHooksCalled: true, _content: "↵                
<div style="display: flex;↵      …  </div> ↵                </div>↵                
"}
_popupHandlersAdded: true
_shadow: div.leaflet-marker-shadow.extra-marker-shadow.extra-marker.leaflet- 
zoom-animated
_tooltip: e {options: {…}, _source: e, _initHooksCalled: true, _content: "↵                      
<div style="display: flex;↵…                   </div>↵                       
", _latlng: M, …}
_tooltipHandlersAdded: true
_zIndex: 277
_zoomAnimated: true
__proto__: e

Best Answer

It seems that, since L.GeoJSON extends L.FeatureGroup, which in turns extends L.LayerGroup, it is simply a group of layers after all. Thus you can use .eachLayer on it. This other gis.SE answer got me on track.

In your case it should be

//Loops through features, which really are layers of L.GeoJSON in Leaflet
this.currentProjectLayers[response].eachLayer( feature => feature.unbindToolTip();)
Related Question