How to implement tab, longTab on Marker?

[pamtbaau]

The app I'm working on has the following user requirements:

• User can add a Marker by clicking on the map
  • I've found this functionality in the examples.
• User can tap a marker, to get details about the marker
  • Haven't found a tap event in examples, nor in code.
• User can longTap on a marker (and be presented a menu to edit details, delete, or start a move of the marker)
  • Haven't found a longTap event in examples, nor in code.

Have I missed something in the examples/docs/code? If so, would you mind providing me some pointers?

Btw. I'm happy to see there is much more activity in this fork than in the original/official repo. Thank you for your efforts!

[josxha]

I'm happy to see there is much more activity in this fork than in the original/official repo.

It's actually not a fork but written completely from scratch. 😄 But this means that some functionality might be not implemented yet.

Haven't found a tap event in examples, nor in code

Annotations like markers have currently no gesture events or callbacks yet. In the meantime, you can listen for those events on the map and use queryLayers() for the touched point. Then, you can iterate though your markers to find the one that is closest to the touched point. It's very manual, but this interactive annotations are planned in the future for sure.

Haven't found a longTap event in examples, nor in code.

The MapEventLongClick event exists, though it's currently only supported on android. There is only little documentation here: https://flutter-maplibre.pages.dev/docs/events#available-events definitely something to improve on.

[pamtbaau]

It's actually not a fork but written completely from scratch.

Sorry for the bad assumption on my part. Even more kudos to you...

you can listen for those events on the map and use queryLayers()

I've tried that, but the MarkerLayer is never found. Only countries-fill, countries-boundary, coastline. Or is that because I add the MarkerLayer inside the map.children list?

Then, you can iterate though your markers to find the one that is closest to the touched point.

That would mean a Marker can be selected even when remotely clicked on the Map. I only want the marker to be selected when clicked on top of it. I therefor create a Polygon for the Marker and test if the mouse location is inside it using turf.booleanWithin(mouseClickPoint, polygon);

Workaround
In the meantime I've found the following verbose alternative. Using example 'Widget Layer', I adapted the onEvent as follows:

if (event case MapEventClick()) {
  final map = _mapKey.currentWidget! as MapLibreMap;
  final children = map.children;
  final widgetLayer = map.children[0] as WidgetLayer;
  final markers = widgetLayer.markers;
  final mouseClickPoint = Point(coordinates: event.point);

  // For some reason the click is detected for the full width, but not the full height of the marker icon.
  // Is icon not square?
  const verticalRatio = 1.5;

  for (final (index, marker) in markers.indexed) {
    final markerOffset = await _controller.toScreenLocation(
      marker.point,
    );

    // Create `Position` for TopLeft, TopRight etc for Marker corners and create Polygon using them
    final positionTL = await _controller.toLngLat(
      Offset(
          markerOffset.dx - 25, markerOffset.dy - 50 * verticalRatio),
    );
    final positionTR = await _controller.toLngLat(
      Offset(
          markerOffset.dx + 25, markerOffset.dy - 50 * verticalRatio),
    );
    final positionBR = await _controller.toLngLat(
      Offset(markerOffset.dx + 25, markerOffset.dy),
    );
    final positionBL = await _controller.toLngLat(
      Offset(markerOffset.dx - 25, markerOffset.dy),
    );

    final polygon = Polygon(
      coordinates: [
        [positionTL, positionTR, positionBR, positionBL, positionTL],
      ],
    );

    final isWithin = turf.booleanWithin(mouseClickPoint, polygon);
    debugPrint('Feature $index isWithin: $isWithin');
  }
}

[josxha]

I've tried that, but the MarkerLayer is never found. Only countries-fill, countries-boundary, coastline.

Interesting, that's something I need to look into.

Or is that because I add the MarkerLayer inside the map.children list?

You sure? MarkerLayer is a Layer but map.children should expect a List<Widget>.

That would mean a Marker can be selected even when remotely clicked on the Map. I only want the marker to be selected when clicked on top of it. I therefor create a Polygon for the Marker and test if the mouse location is inside it using turf.booleanWithin(mouseClickPoint, polygon);

That's a creative solution for the problem. Yep, probably the hitbox of Markers is odd... Thanks for reporting!

In the meantime I've found the following verbose alternative. Using example 'Widget Layer', I adapted the onEvent as follows:

WidgetLayer to the rescue. 😄 By the way, if you don't want to display lots and lots of markers at once, you might get away with wrapping your widget that you use in your WidgetLayer with a GestureDetector or InkWell and use that directly for gesture detection.

My apologies for the missing functionality. While the package made already good progress, it still lacks some important features ...but it's a work in progress.

[pamtbaau]

By the way, if you don't want to display lots and lots of markers at once, [..]

Not sure what you mean by that... Do you mean: "In case you have only a few widgets to show, [..]"?
How much is lots and lots?
In my case, the number is max. 100

[..] you might get away with wrapping your widget that you use in your WidgetLayer with a GestureDetector or InkWell and use that directly for gesture detection.

That's one of the first options I tried:

• Using a IconButton as child of Marker
• Using GetureDetector to wrap around the child of the Marker

In none of these options a Tap is detected because for some reason, all child widgets are wrapped in a single TranslucentPointer on Android.

I just wonder why interaction with widgets inside the WidgetLayer is supposed to be silenced? It is called a "Widget" layer which is added to the children property instead of the layers property and all Markers are painted as widgets in the Map tree. They clearly serve a different purpose.

[josxha]

In my case, the number is max. 100

Should be fine.

In none of these options a Tap is detected because for some reason, all child widgets are wrapped in a single TranslucentPointer on Android.

It's because widgets would prevent map gestures otherwise. Interactive annotations haven't been the focus so far. You can create a pull request that adds a interactive flag to the WidgetLayer if you want. If the flag is set to true, no TranslucentPointer gets used. That would solve the issue, right?

I just wonder why interaction with widgets inside the WidgetLayer is supposed to be silenced? It is called a "Widget" layer which is added to the children property instead of the layers property and all Markers are painted as widgets in the Map tree. They clearly serve a different purpose.

It was a design choice to make WidgetLayers silenced by default. I agree that interactive widgets on top of the map is a common use case. But I'm not so sure about the different purpose of the MarkerLayer and the WidgetLayer. I'd even say both solve a similar feature in different ways.

[pamtbaau]

I've added interactivity to WidgetLayer:

• Added class property final bool allowInteraction.
  For backwards compatibility, the constructor parameters is not required and has false as default value
• Wrapper TranslucentPointer is added based on value of allowInteraction. By default it is present.
• Changed how value returned by FutureBuilder is being handled.
  FutureBuilder immediately returns the previous cached value, which means in case of adding/deleting a Marker, the old list of Offsets is returned. That will cause an exception in inline function buildChild because length of Markers and Offsets is not the same.

Would you like me to create a PR?

I've also created a rough Example that allows:

• Adding a marker by longTap on Map
• Added gestures on Marker:
  • onTap to show Dialog with Marker info
  • onLongPressStart to show popupMenu
  • onPanStart, onPanUpdate, onPanEnd to move Marker

Are you interested in this Example? In that case I will polish it and create a separate PR.

[josxha]

FutureBuilder immediately returns the previous cached value, which means in case of adding/deleting a Marker, the old list of Offsets is returned. That will cause an exception in inline function buildChild because length of Markers and Offsets is not the same.

Interesting, I'd have thought that once the FutureBuilder is called with a new parameter it would use the new Future. Looking forward to your pr!

Would you like me to create a PR?

Yes, please - if you don't mind.

Are you interested in this Example? In that case I will polish it and create a separate PR.

That would be awesome! It's a nice showcase and common use case.

[pamtbaau]

Should I override the existing Widget Layer example, or create a new one with title "Interactive Widget Layer"

[josxha]

Let's create a new one. 👍

[pamtbaau]

I'd have thought that once the FutureBuilder is called with a new parameter it would use the new Future.

I didn't expected the behaviour either... But that's where connectionState comes in.

Have a look at this simple example: https://dartpad.dev/id=f24d1526506adb2bf2fa975107b90f95

FutureBuilder connectionState:

• ConnectionState.waiting returns null or the value of initialData in first call and the cached value in subsequent calls.
• ConnectionState.done returns the result of the completed future.

I tried to solve the issue using ConnectionState.done, but that silently breaks the GestureDetector.onPanUpdate without submitting a GestureDetector.onPanEnd when moving a Marker.
Solved it by testing if markers and offsets are of equal length.

[josxha]

Have a look at this simple example: https://dartpad.dev/id=f24d1526506adb2bf2fa975107b90f95

The link appears to be broken.

Maybe an alternative would be to turn WidgetLayer into a StatefulWidget and recreate the Future in the didChangeDependencies() method?