Drawing complex polygon with label

[Luca Bertoncello]

Hi list!

I'm new to the group and not really an expert in Javascript and Leaflet...
I alredy used Leaflet to display a map with some data, but now I'd like
to make something more complex...

My goal: to draw the airspaces (data as GeoJSON coming from a database),
as like as possibile to the ICAO style with the labels of the airspaces.

I already got to draw the airspaces, even not so nice, but I didn't
found any function to draw a label (for example with the frequency and
the altitudes of the airspace) on a border of the polygon.

Can someone suggest me a way to do that?
What I'd like to do is something like the interactive map of OpenFlightMaps.

Thanks a lot
Luca

[Mark Lawton]

if you know the latitude and longitude of the location where the label should go, you can place a marker there. then, when the user puts his mouse over the marker or clicks the marker, the label will popup.

lots of possibilities can be seen here on my map… www.OneWorld-Futbol.com

> --
>
> ---
> You received this message because you are subscribed to the Google Groups "Leaflet" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/c3bd9570-926e-91de-fedd-47ce8f8fa108%40lucabert.de.

[Luca Bertoncello]

Am 04.04.2022 um 21:16 schrieb Mark Lawton:

Hi Mark

> if you know the latitude and longitude of the location where the label should go, you can place a marker there. then, when the user puts his mouse over the marker or clicks the marker, the label will popup.

The coordinates of the label is the first problem...
I have the coordinates of the polygon's path... So my idea was to draw
the label on a line of this path. And this is the second problem, since
I don't know where the path is "long enough" for the label.

The user does not have to click. The map is to be exported as PDF, so
user interaction must be null.

Thanks
Luca

[Mark Lawton]

It would be hard to read the label if they are not horizontal. I suggest making all the labels horizontal. Therefore, you will not need to worry about the path length.

If you want the labels to always appear without any user interaction, you can use this…

https://github.com/yakitoritabetai/Leaflet.LabelTextCollision

It keeps the labels from getting on top of one another.

> --
>
> ---
> You received this message because you are subscribed to the Google Groups "Leaflet" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/7e7dd164-402e-09e9-8e31-53e18aef1da0%40lucabert.de.

[Luca Bertoncello]

Am 04.04.2022 um 21:34 schrieb Mark Lawton:
> It would be hard to read the label if they are not horizontal. I suggest making all the labels horizontal. Therefore, you will not need to worry about the path length.

Sorry Mark, but it _must_ be on the line.
Please have a look to the interaction map of OpenFlightMaps (zoom to see
the labels) and you will understand what I mean.
I'm trying now https://github.com/makinacorpus/Leaflet.TextPath

Regards
Luca