How to get Map coordinates on taping on the map about mapbox-maps-flutter HOT 10 CLOSED

You can use the onTapListener callback on the map:

from mapbox-maps-flutter.

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

from mapbox-maps-flutter.

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.

from mapbox-maps-flutter.

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

from mapbox-maps-flutter.

@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.

from mapbox-maps-flutter.

@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

from mapbox-maps-flutter.

MapboxMap#coordinateForPixel
MapboxMap#pixelForCoordinate

from mapbox-maps-flutter.

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(),
  );
}

from mapbox-maps-flutter.

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 !!.

from mapbox-maps-flutter.

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

   {x: 43.59772105745384, y: 52.233343976845674}

from mapbox-maps-flutter.