How to get Map coordinates on taping on the map

[geisterfurz007]

You can use the onTapListener callback on the map:

https://github.com/mapbox/mapbox-maps-flutter/blob/308d25dac22f2402a79292cd6fa5a37f2973643b/example/lib/gestures.dart#L128

[Shiba-Kar]

@geisterfurz007 its not giving the exact latitude and longitude of the tapped location in the map its returning the coordinates of the screen.

[geisterfurz007]

@Shiba-Kar That's what the returned class wants you to believe. If you print the values, you should see globe coordinates. If that is not the case, you can always convert between screen and map coordinates with the respective methods on MapboxMap.

[Shiba-Kar]

@Shiba-Kar That's what the returned class wants you to believe. If you print the values, you should see globe coordinates. If that is not the case, you can always convert between screen and map coordinates with the respective methods on MapboxMap.

How to convert between screen and map coordinates with the respective methods on

[geisterfurz007]

MapboxMap#coordinateForPixel MapboxMap#pixelForCoordinate

[LjubiTech-Maxko]

import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
import 'package:turf/turf.dart' as turf;

// Callback for MapWidget onTapListener
Future<void> onTapListener(ScreenCoordinate coord) async {
  // coord is actually map coordinates, and conv is converted value to actual screen coordinates.
  final ScreenCoordinate conv = await _mapboxMap!.pixelForCoordinate(
    turf.Point(
      coordinates: turf.Position(
        coord.y, coord.x,
      ),
    ).toJson(),
  );
}

[Shiba-Kar]

@geisterfurz007 @LjubiTech-Maxko thanks !!! 👍🏼

[Shiba-Kar]

1. Callback for MapWidget onTapListener

   Future _addPin(ScreenCoordinate screenCoordinate) async {
   var conv = await _mapboxMap.coordinateForPixel(screenCoordinate);
   final coordinates = conv['coordinates']! as List<Object?>;
   var x = coordinates.map((e) => e as num).toList();
   var position = Position.fromJson(x);
   
   await _positionMarker(
       "totempole", "assets/images/user_totem.png", position);
   }

2. Place the marker on the map

Future _positionMarker(
      String name, String assetName, Position position) async {
    final ByteData bytes = await rootBundle.load(assetName);
    var list = bytes.buffer.asUint8List();
    var x = await _mapboxMap.annotations.createPointAnnotationManager();
    var xx = await x.create(
      PointAnnotationOptions(
        image: list,
        geometry: Point(coordinates: position).toJson(),
      ),
    );
  }

Does not place the marker where the tap is registered it is positioned very off from the tap place !!.

[geisterfurz007]

Again: You receive map coordinates from the callback, not screen coordinates. You do not have to convert anything. The class is called ScreenCoordinate but that is not accurate. Do yourself and others in the thread a favour and print the value you get from the callback to verify this and understand how to continue to work with them.

[Shiba-Kar]

@geisterfurz007 ScreenCoordinate confused me !!. yes it works as it should .

   {x: 43.59772105745384, y: 52.233343976845674}