Add custom user location marker

[alex-lechner]

I've been searching for a way to add a custom user location marker but haven't found a specific solution yet.

So far I have found #477 which recommends grabbing the location independently and add the symbol to the map. But what I don't understand is: If you get the location independently from another library how does the library know about rotation and tilting within Mapbox and in which direction I am heading (so the arrow on my custom location marker is not always pointing to the north)?

The location marker on Android is different than on iOS and I'd like to have them unified and customized. The Mapbox Doc for iOS on "Customize the user location annotation" suggests using CustomUserLocationAnnotationView in Swift. And for Android I have found this documentation.

Isn't there another solution other than modifying the user location annotation in the Java and Swift files?

Thank you :)

[4F2E4A2E]

I am also very interested in this one.

[m0nac0]

Yeah, the underlying SDKs support this, but it's not currently implemented/exposed in this plugin.

[mvarendorff]

We have used flutter_compass together with a listener on the MapboxMapController. From the docs of the controller:

Change listeners are notified upon changes to any of [...] the cameraPosition property

The cameraPosition property contains a bearing field which we added to a StreamController's (mapCameraBearing) sink on each listener's update. Then we could use rxdart to combine the FlutterCompass.event stream and the stream of map updates to calculate the direction in which we look. rxdart also helps in throttling events as well as not emitting the same (or a close) value twice to not hammer mapbox with symbol updates on every move of the map:

    final headingStream = FlutterCompass.events
        .map((event) => event.heading)
        .throttleTime(Duration(milliseconds: 16));

    final bearingStream =
        mapCameraBearing.stream.throttleTime(Duration(milliseconds: 16));

    final rotationStream = CombineLatestStream.combine2<double, double, double>(
        headingStream, bearingStream, (heading, bearing) {
      return heading + ((360 - bearing) % 360);
    }).scan((double acc, double curr, _) {
      // Checks the last emitted value against a potential new value
      //  If difference is greater than 1 degree, emit the new value
      //  Otherwise emit the old value.
      const epsilon = 1;
      final diff = (acc - curr).abs();
      final isIgnored = diff < epsilon || (diff - 360).abs() < epsilon;
      return isIgnored ? acc : curr;
    }, 0.0).distinct();

Then we listen on the rotationStream to know when to turn our indicator in a new direction; when the symbol's image is facing up in the file, you can use the resulting value as the iconRotate of the Symbol used for showing the direction in which you are facing; otherwise add degrees as necessary.

You could listen for the map's tilt in the same way as is done with the bearing of it here, although I don't think Symbol exposes options to tilt an icon on the map.

The above approach works somewhat well but the rotation when turning the map always trails behind maybe half a second or so which is enough for our usecase but may not be for everyone. I agree however that this would be a great addition for mapbox in flutter because it solves a bunch of problems currently bandaided by using third party plugins.

[alex-lechner]

@geisterfurz007 Thank you for this suggestion, I very much appreciate that! It's very helpful but I will keep the default markers from Mapbox for now and try it out another time if there's still no way to handle it through the SDK.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alex-lechner]

Keep it open.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alex-lechner]

Open issue again, stale bot!

[felix-ht]

Some ideas:

Might be a good idea to add something like a LocationMarkerStyle class.
This could be passed to the MapboxMap

This might hold eg:

• Pulsing color
• Pulsing enabled
• Pulsing Radius
• Puck color
• Puck top image
• puck bearing Image
• Puck shadow Image