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
  • Do you have one tooltip for the layer or one tooltip for each feature of the layer? For example, if your GeoJSON contains 100 features, there would be 100 tooltips bound to your layer. On the other hand, if you want to bind a tooltil to the layer simply write L.GeoJSON(...).bindTooltip(...) and it will be easy to remove it afterwards. – Stefan Dec 4 at 19:14
  • I'm pretty sure its the latter.. As I use it to display each point's data. I'm trying to find a way to loop through the leaflet layer now. – Petey Dec 4 at 19:17
up vote 1 down vote accepted

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();)
  • Nevermind this works! – Petey Dec 4 at 19:52

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.