Feat: Add Annotations to Markers in WidgetLayer

[pamtbaau]

In a previous discussion we discussed the use-case of adding and interacting (tap, longTap etc) on Markers. That functionality has been implemented in the meantime.

Markers without Annotations aren't that valuable and I would like to extend the Markers in the WidgetLayer with zero or more annotations. What I've build so far:

• Created class Annotation in widget_layer.dart
  Annotation:
  • Has a child widget (most likely a Text).
  • Can be aligned with Marker topLeft, topRight, bottomLeft and bottomRight.
    Would like to center align the Text to topCenter and bottomCenter of Marker, but haven't been able to figure out reliably the width of the Text widget.
  • Has an offset property to move the Annotation vertical/horizontal towards its alignment point
• Updated class WidgetLayer to add annotations to Marker
• Updated Interactive Widget Layer demo to include annotations.

Would the functionality of Annotations fit your design goals?

By the way... compared to eg. MarkerLayer, when moving the Map, the widgets are lagging behind which is not that nice. Could this be improved somehow?

[josxha]

@pamtbaau I think that's a great enhancement! Could you elaborate a bit what the characteristics of annotation are, please? I assume an annotation gets placed relatively to the marker on the map? Are annotations somewhat limited like for example text labels or would it work for other use cases like pop ups as well?

By the way... compared to eg. MarkerLayer, when moving the Map, the widgets are lagging behind which is not that nice. Could this be improved somehow?

Yes, that's probably the biggest design limitation we currently have. It's because rendering of the maplibre map and flutter render separatly.
I think web is almost seamles but android (and ios) have this delay. How would you rate the delay on web (demo here)? Is it bearable? That's pretty much the best it could currently get with platform views.

On android the delay should have improved in version 0.2.1 but the delay is still very much noticable. When the user moves the map camera, the flutter plugin gets notified (currently still via a platform channel) and updates its children widgets. We could give jni/ffi bindings another try. As far as I know their performance should improve further in the next couple of flutter releases.

To remove the delay completely, a direct integration of the mbgl renderer would be needed. See #234 for more information.

[pamtbaau]

@josxha, It took me some time to get back to this. Sorry about the delay.

I assume an annotation gets placed relatively to the marker on the map?

That's correct. In below example, I've used 'Text', and 'IconButton' as Annotation.

Annotation also has an Offset property to finetune the positioning. I've used the Offset, to center 'topCenter' and 'bottomCenter'.

Are annotations somewhat limited like for example text labels or would it work for other use cases like pop ups as well?

Currently, I've implemented the Annotation.child as a Widget so adding GestureDetector or MenuAnchor is working fine. Having said that, I cannot think of a use-case where the Annotation should allow gestures. There already is interactivity available on the Marker itself, which in turn has a List of its Annotations.
I'm also not sure if there is a use-case for the Annotation widget to be other then e.g. String/Text (or an Icon maybe).

How would you rate the delay on web (demo here)? Is it bearable?

It depends very much on the amount of data the Map has to draw. When viewing the worldmap, the lagging is quite noticable, but when zoomed in on eg. the country level the lag is noticable, but acceptable.

I do not really see a performance difference between Web and my (less then 140 Euro low end) Android phone.

[josxha]

I've used the Offset, to center 'topCenter' and 'bottomCenter'.

Having an additional Offset property is a great idea for customization. But I'm not sure if I can follow along implementation wise.

I'm also not sure if there is a use-case for the Annotation widget to be other then e.g. String/Text (or an Icon maybe).

Oh, some users will have the craziest use cases, no doubt about that. 😄 And popup would require a complete widget tree as well. So it's good to have it as open as possible.

It depends very much on the amount of data the Map has to draw. When viewing the worldmap, the lagging is quite noticable, but when zoomed in on eg. the country level the lag is noticable, but acceptable.

Alright...and there is always the option to use a SymbolLayer as well i guess.

I do not really see a performance difference between Web and my (less then 140 Euro low end) Android phone.

Interesting, thanks for testing!

[pamtbaau]

But I'm not sure if I can follow along implementation wise.

How can I help you best? A description with code snippets, or a PR with the proof of concept we can discuss? Or...

[josxha]

A PR with the proof of concept sounds nice, then we could move the discussion over there. 👍