Labeling Polygons

[rodrigoleao]

Hello fellas, I'd like to know if anyone has ever needed to add a simple label inside a polygon (for identification purposes) using flutter_map, as is customary for any GIS application who deals with features like Polygons.

We added some polygons using PolygonLayerOptions which uses a List to show on the map. The Polygon class doesn't have an attribute like 'label', 'text' or anything like that, which would be very useful.

Our application has several polygon attributes in its internal classes like centroid, extension and others, however manually adding markers or things like that doesn't seem efficient to me. We didn't actually find any way to add labels to the vector layers of flutter_maps (Polygons, Lines etc.).

Thanks in advance for any suggestions

[JaffaKetchup]

Hi there,
Unfortunately, the built shape layers are fairly limited: for example there is no way to add a tap detector, or labels.
Therefore (for now) any such implementation would need to be done on your side. Probably the easiest way to do it would be to use markers (like you said you didn't want to), as you can fairly easily calculate the center of a latitude/longitude area (this may help? https://stackoverflow.com/a/18092215).
Hopefully this can be added in the future :)

Hope this was somewhat informative :)

[rodrigoleao]

Thank you very much for the reply @JaffaKetchup , we are indeed having to put in a lot of effort to get simple and common results. The application needs to run offline and we are analyzing the flutter_map to represent this vector data, but we are not at all happy lol.

About your proposal to use markers positioning with latitude/longitude, we have already used but tested the approach in some scenarios but we are still not convinced that it meets some use cases, such as a number of polygons of a given project that is large enough to make the application (flutter tree) quite impaired.

Once again, thank you very much.

[JaffaKetchup]

No problem, happy to help!
flutter_map has grown quite large and it appears that some simple features have been missed out along the way.

By the way, if you're looking for caching solutions, please consider my plugin https://pub.dev/packages/flutter_map_tile_caching/versions/4.0.0-dev.7 (v4 in development, mostly stable).

[ibrierley]

Not entirely sure what the main issue is (if you calculate the center as a one off), you know the point to place the label. So it may help to explain what is meant by "impaired" ? Are we talking slowdowns or difficulty or something else ?

[rodrigoleao]

@ibrierley , What I meant is that working with features (vector data) with flutter map requires a lot of effort (not just code, but mainly performance). Consider for example adding 300, 400 or even 500 polygons and to have a label/identifier you need to have 500 markers with a child Text widget, it doesn't seem right in many ways. Not to mention the difficulty of detecting the 'tap', as correctly mentioned JaffaKetchup above. Anyway, I'm already convinced that there really isn't a clean way to do this.

[ibrierley]

Here is an example I did pushing a fair amount of polys and some collision detecting labelling. https://www.youtube.com/watch?v=KTjlWrcRE-Q
Typically something needs to be compromised on for performance, that's why its hard to come up with a one case fits all solution. If you can give a minimal example that shows poor performance it may be interesting to look at.

[rodrigoleao]

@ibrierley I watched your videos on youtube and was really surprised with some demonstrations, not only with the polygon labels (which I believe you used the markers), but also with presenting them based on a zoom level, which is common for example when you use an SLD styles in geo services. I have a few questions about these labels (based on your videos), and I appreciate it if you can answer:

1- Are all labels related to vector data that appear in your videos, including roadnames, are markers with a Text Widget?

2- If so, are the labels referring to the lines (roadnames) also represented in a vector layer (Polyline tile) ? If so, are they also points with markers? (In this case it would be even more impressive lol, as a roadname could have a huge extension with several links)

3- Are these examples that appear in your videos shared in some repository or are they private? It would be very useful if you could share, even if not completely, but some code snippets, mainly those related to labels.

Thank you very much for the reply

[mp-v2]

@ibrierley FYI - your linked youtube video is catagorised as for kids, meaning people can't add it to playlists or comment on it. This is probably limiting its growth. It would be good if those demos share code snippets, they would be super useful!

[ibrierley]

Btw I changed that, it wasn't set for categorized as kids, just to ask for each video, but I've changed that, so see if it's any better.

[ibrierley]

See if this is any help...(note, everything is painted on a single customPainter canvas which I assume could have a transparent background if wanted)

1. There are 2 types of labels in that example. One is a POI/Point of Interest that comes with a vector tile, so that already includes a latlng point. The other are road labels. I create those myself by taking the polyline, find the point half way along the path and draw it there with the angle of the line (there are some methods as part of a Path object like computeMetrics if you ever need that I can provide more info).

None of them are widgets, they are are TextPainter elements painted onto a canvas. If you go down this route, it's worth bearing in mind text layout is an expensive operation, so do it once and then cache it, and try to reuse as much as possible (even for other labels). Actually the same with polygons/polylines. If drawing on a canvas, it's good to batch up all polygons into one super path (Path.addPath/addPolygon) and then do one draw call. So if you have 200 polygons (that are all the same style!), draw them in one go. There are some flaws with this, depending on how much of it is on screen. Same with the labels, which is why it's sometimes difficult to have one well optimised but general solution. Each case feels like it's a bit different.

2. I think I've covered above, but to add I tended to create my own Label object which had a number of attributes, LatLng, text, transform, type, that kind of thing.

3. The code can all be found at https://github.com/ibrierley/flutter_map_vector_tiles/tree/filters/lib (I think that was the latest branch). it's a bit messy, as it was a bit too much to maintain for one person really, more of an experiment. Probably https://github.com/ibrierley/flutter_map_vector_tiles/blob/filters/lib/vector_tile_plugin.dart is the most useful file to look at, eg line 85 is my Label object, 498 draw the labels.

Some of this though is optimised because its using Tiles which each only cover a certain area, so there's no need to calculate if a poly is on the display. I think the trickier problem is when you have a mass of polys and you have no real segregation into tiles/areas that you know are in view, but I think that's probably achievable as a first time optimisation if there's a large set of polys, but again it's possibly tricky to have one generic fits all size that could be incorporated into flutter_map.

[rodrigoleao]

Ian, thank you so much again. In fact, your answer was very informative and very precise. The application we are working on needs to deal with territorial information for regularization purposes, which needs to show references of territorial objects, which include these polygonal/lines representations (cadastral parcels, roads, addresses and so on). I'm going to analyze right now the repository mentioned by you (vector_tile_plugin.dart). Thanks a lot.