How to drag and drop a marker in Flutter Maps?

4 mins read

Using Flutter Maps, you can easily drag and drop a marker to any position on a map.

Step 1: Add the Syncfusion® Flutter Maps package to your dependencies in the pubspec.yaml file and initialize the Maps with necessary properties. Please refer to this documentation for initializing the tile layer with markers.

late List<MapLatLng> mapMarkers;
late MapTileLayerController mapController;
 
@override
void initState() {
  mapController = MapTileLayerController();
  mapMarkers = <MapLatLng>[
    MapLatLng(13.239945, 19.391806), // Africa
    MapLatLng(28.7041, 77.1025) // India
  ];
  super.initState();
}

Step 2: Return any widget that will be a child of gesture detector in the MapMarker using the markerBuilder callback.

Step 3: Convert the obtained global position into a local position using the markers render box in the gesture detectors onPanUpdate callback, then find the new latlng value for that point using the MapTileLayerController.pixelToLatLng() method.

Step 4: Update the current marker latitude and longitude values and pass its index in the MapTileLayerController.updateMarkers() method.

The following example explains how to drag and drop the markers in Maps.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfMaps(
      layers: [
        MapTileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          controller: mapController,
          initialMarkersCount: mapMarkers.length,
          markerBuilder: (BuildContext context, int index) {
            return MapMarker(
              longitude: mapMarkers[index].longitude,
              latitude: mapMarkers[index].latitude,
              child: GestureDetector(
                onPanUpdate: (DragUpdateDetails details) {
                  final RenderBox markerRenderBox =
                      context.findRenderObject()! as RenderBox;
                  // To obtain the maps local point, we have converted the global 
                  // point into local point using the marker render box. After that
                  // we have converted that point into latlng and updated it’s 
                  // position.
                  final MapLatLng latLng = mapController.pixelToLatLng(
                      markerRenderBox.globalToLocal(details.globalPosition));
                  mapMarkers[index] =
                      MapLatLng(latLng.latitude, latLng.longitude);
                  mapController.updateMarkers([index]);
                },
                child: Icon(
                  Icons.location_on,
                  color: Colors.red,
                  size: 30,
                ),
              ),
            );
          },
        ),
      ],
    ),
  );
}

Output

Syncfusion Flutter Maps - Drag and drop markers

Check the following links for more features in Syncfusion® Flutter Maps:

Live samples

Blogs related to Maps

Did you find this information helpful?

Yes

Comments (0)

How to drag and drop a marker in Flutter Maps?

Output

Access denied