Tooltip for Polygon is not inside its bounds when using 'center' direction

• I’ve looked at the documentation to make sure the behavior is documented and expected
• I’m sure this is a Leaflet code issue, not an issue with my own code nor with the framework I’m using (Cordova, Ionic, Angular, React…)
• I’ve searched through the issues to make sure it’s not yet reported

Steps to reproduce Steps to reproduce the behavior:

• Add a U-shaped GeoJSON polygon to the map. Example GeoJSON:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              24.015595116635151,
              49.838027167808256
            ],
            [
              24.015595115971802,
              49.837969321590116
            ],
            [
              24.015604012716384,
              49.837969321547092
            ],
            [
              24.015604012758285,
              49.837972917830491
            ],
            [
              24.015609573224058,
              49.837972917803256
            ],
            [
              24.015609573181745,
              49.837969321519864
            ],
            [
              24.015621250159008,
              49.837969321461806
            ],
            [
              24.0156212501277,
              49.837966714156337
            ],
            [
              24.015867231200939,
              49.837966712659977
            ],
            [
              24.015867231249167,
              49.837969536516852
            ],
            [
              24.015886095127993,
              49.837969536380541
            ],
            [
              24.015886095415542,
              49.837985997593371
            ],
            [
              24.015857500712581,
              49.837985997798782
            ],
            [
              24.015857500730792,
              49.837987076683795
            ],
            [
              24.015781947880019,
              49.8379870771926
            ],
            [
              24.015781947863491,
              49.837985998307587
            ],
            [
              24.015655169209623,
              49.837985999050723
            ],
            [
              24.015655169666566,
              49.838021961884472
            ],
            [
              24.015719112881367,
              49.838021961526984
            ],
            [
              24.015719112755278,
              49.838012970818561
            ],
            [
              24.015735796372667,
              49.83801297071949
            ],
            [
              24.015735796501851,
              49.838021961427906
            ],
            [
              24.015781948414457,
              49.838021961141322
            ],
            [
              24.01578194839793,
              49.838020882256323
            ],
            [
              24.015853289244387,
              49.838020881777183
            ],
            [
              24.015853289262505,
              49.838021960662189
            ],
            [
              24.015886096043758,
              49.838021960427106
            ],
            [
              24.015886096358646,
              49.83803998679744
            ],
            [
              24.015621251007467,
              49.838039988430111
            ],
            [
              24.015621250853531,
              49.838027167679954
            ],
            [
              24.015595116635151,
              49.838027167808256
            ]
          ]
        ]
      },
      "properties": {
        "id": "UNIT22",
        "name": "4G120"
      }
    }
  ]
}

• Use bindTooltip in the onEachFeature when creating the layer for the feature to set a permanent tooltip for it

    if (feature.properties.name) {
        layer.bindTooltip(feature.properties.name, {
            permanent: true,
            direction: 'center'
        });
    }

Expected behavior

The tooltip is displayed inside polygon bounds.

Current behavior

The tooltip is displayed outside polygon bounds, but seems like it’s in the center of its bbox.

Environment

• Leaflet version: 1.7.1 (using "@asymmetrik/ngx-leaflet": "^8.1.0")
• Browser (with version): Chrome 89.0.4389.114
• OS/Platform (with version): Windows 10 build 19042.906

Additional context

I expected it to behave the same way as a Polyline (using centroid), but it didn’t. I also tried setting the [lat, lon] after bindTooltip with the coordinates returned by @turf/centroid with no success.

Minimal example reproducing the issue

https://plnkr.co/edit/lz2wHJmUHJ1jhsX2

• this example is as simple as possible
• this example does not rely on any third party code

[johnd0e]

See the code: https://github.com/Leaflet/Leaflet/blob/0f904a515879fcd08f69b7f51799ee7f18f23fd8/src/layer/DivOverlay.js#L176-L184

To change behavior you need to overwrite one of those methods, e.g. getCenter, using include (or see tutorial):

L.Polygon.include({
  getCenter: function () {
    // ...
  }
});

[YaroslavKormushyn]

@johnd0e Thanks for the answer! Feel free to close the issue if you need a separate one for the issue you’ve found.