I want to display polygons index number on each point, using Leaflet Geoman. Can anyone help me how to do this?

[ali-mozaffari]

This image is an example of UI/UX in Figam which I should do the same in front.

I have read the existing polygons here, but I don't know how to display numbers above of each polygon break point.

[Falke-Design]

This has nothing to do with Leaflet-Geoman, this is Leaflet self.

Just create a marker for each point on the polygon:

polygon.getLatLngs().flat(999).forEach((latlng)=>{
   var marker = L.marker(latlng).addTo(map);
});

or a Tooltip:

polygon.getLatLngs().flat(999).forEach((latlng)=>{
   var tooltip = L.tooltip(latlng, {content: 'Hello world!<br />This is a nice tooltip.'}).addTo(map);
});

[ali-mozaffari]

This is my component. Could you please help me to use your code here?

const GeomanUTM = ({stringPolygan, data}) => {
  const context = useLeafletContext();

  useEffect(() => {
    const leafletContainer = context.layerContainer || context.map;

    var multipolygon = L.geoJson(
      WKT.parse(`SRID=4326;${stringPolygan}`.split(';')[1]),
    );
    multipolygon.addTo(context.map);
    context?.map.fitBounds(multipolygon.getBounds());

    leafletContainer.pm.getGeomanLayers()?.map((layer, index) => {
      layer.setStyle({
        pmIgnore: false,
        color: '#E4E4E4',
        fillColor: '#E4E4E4',
        fillOpacity: 1,
      });
    });
  }, [context]);

  return null;
};

export default GeomanUTM;

[Falke-Design]

leafletContainer.pm.getGeomanLayers()?.map((layer, index) => {
      layer.setStyle({
        pmIgnore: false,
        color: '#E4E4E4',
        fillColor: '#E4E4E4',
        fillOpacity: 1,
      });

      if(layer.getLatLngs){
        layer.getLatLngs().flat(999).forEach((latlng)=>{
           var tooltip = L.tooltip(latlng, {content: 'Hello world!<br />This is a nice tooltip.'}).addTo(map);
        });
      }
    });

[ali-mozaffari]

Thank you so much man. you helped me.