working drag

example/lib/line.dart

@@ -48,12 +48,12 @@ class LineBodyState extends State<LineBody> {
   }
 
   _onLineTapped(Line line) async {
-    await _updateSelectedLine(
-      LineOptions(lineColor: "#ff0000"),
-    );
     setState(() {
       _selectedLine = line;
     });
+    await _updateSelectedLine(
+      LineOptions(lineColor: "#ff0000"),
+    );
   }
 
   Future<void> _updateSelectedLine(LineOptions changes) {
@@ -142,7 +142,7 @@ class LineBodyState extends State<LineBody> {
             child: MapboxMap(
               accessToken: MapsDemo.ACCESS_TOKEN,
               onMapCreated: _onMapCreated,
-              onStyleLoadedCallback: _onStyleLoadedCallback,
+              onStyleLoadedCallback: onStyleLoadedCallback,
               initialCameraPosition: const CameraPosition(
                 target: LatLng(-33.852, 151.211),
                 zoom: 11.0,

lib/src/annotation.dart

@@ -5,17 +5,18 @@ abstract class _AnnotationManager<T extends Annotation> {
   final void Function(T)? onTap;
   final _idToAnnotation = <String, T>{};
   final id;
-  LatLng? _dragOrigin;
   LayerProperties get properties;
 
   T? byId(String id) => _idToAnnotation[id];
 
   _AnnotationManager(this.controller, {this.onTap}) : id = getRandomString(10) {
-    controller.addGeoJsonSource(id, buildFeatureCollection([]));
+    controller.addGeoJsonSource(id, buildFeatureCollection([]),
+        promoteId: "id");
     controller.addLayer(id, id, properties);
     if (onTap != null) {
       controller.onFeatureTapped.add(_onFeatureTapped);
     }
+    controller.onFeatureDrag.add(_onDrag);
   }
   _onFeatureTapped(dynamic id, Point<double> point, LatLng coordinates) {
     final annotation = _idToAnnotation[id];
@@ -54,29 +55,16 @@ abstract class _AnnotationManager<T extends Annotation> {
     await _setAll();
   }
 
-  // TODO this requires a new call back
-  onPointerDown(String id, LatLng position) {
-    final annotation = byId(id);
-    if (annotation != null && annotation.draggable) {
-      if (_dragOrigin == null) {
-        // TODO missing from native !!
-        //controller.lockCamera();
-        _dragOrigin = position;
-      } else {
-        final moved = annotation.translate(position - _dragOrigin!) as T;
-        set(moved);
-      }
-    }
-  }
-
-  // TODO this requires a new call back
-  onPointerUp(String id, LatLng position) {
+  _onDrag(dynamic id,
+      {required Point<double> point,
+      required LatLng origin,
+      required LatLng current,
+      required LatLng delta}) {
     final annotation = byId(id);
     if (annotation != null) {
-      final moved = annotation.translate(position - _dragOrigin!) as T;
+      final moved = annotation.translate(delta) as T;
       set(moved);
     }
-    _dragOrigin = null;
   }
 
   Future<void> set(T annoation) async {

lib/src/controller.dart

@@ -6,9 +6,15 @@ part of mapbox_gl;
 
 typedef void OnMapClickCallback(Point<double> point, LatLng coordinates);
 
-typedef void OnFeatureTappedCallback(
+typedef void OnFeatureInteractionCallback(
     dynamic id, Point<double> point, LatLng coordinates);
 
+typedef void OnFeatureDragnCallback(dynamic id,
+    {required Point<double> point,
+    required LatLng origin,
+    required LatLng current,
+    required LatLng delta});
+
 typedef void OnMapLongClickCallback(Point<double> point, LatLng coordinates);
 
 typedef void OnAttributionClickCallback();
@@ -91,11 +97,22 @@ class MapboxMapController extends ChangeNotifier {
     });
 
     _mapboxGlPlatform.onFeatureTappedPlatform.add((payload) {
-      for (final fun in List<OnFeatureTappedCallback>.from(onFeatureTapped)) {
+      for (final fun
+          in List<OnFeatureInteractionCallback>.from(onFeatureTapped)) {
         fun(payload["id"], payload["point"], payload["latLng"]);
       }
     });
 
+    _mapboxGlPlatform.onFeatureDraggedPlatform.add((payload) {
+      for (final fun in List<OnFeatureDragnCallback>.from(onFeatureDrag)) {
+        fun(payload["id"],
+            point: payload["point"],
+            origin: payload["origin"],
+            current: payload["current"],
+            delta: payload["delta"]);
+      }
+    });
+
     _mapboxGlPlatform.onCameraMoveStartedPlatform.add((_) {
       _isCameraMoving = true;
       notifyListeners();
@@ -187,7 +204,9 @@ class MapboxMapController extends ChangeNotifier {
   final ArgumentCallbacks<Fill> onFillTapped = ArgumentCallbacks<Fill>();
 
   /// Callbacks to receive tap events for features (geojson layer) placed on this map.
-  final onFeatureTapped = <OnFeatureTappedCallback>[];
+  final onFeatureTapped = <OnFeatureInteractionCallback>[];
+
+  final onFeatureDrag = <OnFeatureDragnCallback>[];
 
   /// Callbacks to receive tap events for info windows on symbols
   final ArgumentCallbacks<Symbol> onInfoWindowTapped =

mapbox_gl_platform_interface/lib/src/line.dart

@@ -38,6 +38,7 @@ class Line implements Annotation {
   Map<String, dynamic> toGeoJson() {
     final geojson = options.toGeoJson();
     geojson["id"] = id;
+    geojson["properties"]["id"] = id;
 
     return geojson;
   }
@@ -138,6 +139,7 @@ class LineOptions {
         if (lineOffset != null) "lineOffset": lineOffset,
         if (lineBlur != null) "lineBlur": lineBlur,
         if (linePattern != null) "linePattern": linePattern,
+        "draggable": draggable ?? false,
       },
       "geometry": {
         "type": "LineString",

mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart

@@ -26,6 +26,8 @@ abstract class MapboxGlPlatform {
 
   final onFeatureTappedPlatform = ArgumentCallbacks<Map<String, dynamic>>();
 
+  final onFeatureDraggedPlatform = ArgumentCallbacks<Map<String, dynamic>>();
+
   final onCameraMoveStartedPlatform = ArgumentCallbacks<void>();
 
   final onCameraMovePlatform = ArgumentCallbacks<CameraPosition>();

mapbox_gl_web/lib/src/mapbox_map_controller.dart

@@ -10,6 +10,9 @@ class MapboxMapController extends MapboxGlPlatform
   late Map<String, dynamic> _creationParams;
   late MapboxMap _map;
   bool _mapReady = false;
+  dynamic _draggedFeatureId;
+  LatLng? _dragOrigin;
+  LatLng? _dragPrevious;
 
   List<String> annotationOrder = [];
   final _featureLayerIdentifiers = Set<String>();
@@ -72,6 +75,8 @@ class MapboxMapController extends MapboxGlPlatform
       _map.on('move', _onCameraMove);
       _map.on('moveend', _onCameraIdle);
       _map.on('resize', _onMapResize);
+      _map.on('mouseup', _onMouseUp);
+      _map.on('mousemove', _onMouseMove);
     }
     Convert.interpretMapboxMapOptions(_creationParams['options'], this);
 
@@ -80,6 +85,44 @@ class MapboxMapController extends MapboxGlPlatform
     }
   }
 
+  onDrag(dynamic id, LatLng coords) {
+    print("FOOOBAR");
+  }
+
+  _onMouseDown(Event e) {
+    var isDraggable = e.features[0].properties['draggable'];
+    if (isDraggable != null && isDraggable) {
+      // Prevent the default map drag behavior.
+      e.preventDefault();
+      _draggedFeatureId = e.features[0].id;
+      _map.getCanvas().style.cursor = 'grabbing';
+      var coords = e.lngLat;
+      _dragOrigin = LatLng(coords.lat as double, coords.lng as double);
+    }
+  }
+
+  _onMouseUp(Event e) {
+    _draggedFeatureId = null;
+    _dragPrevious = null;
+    _dragOrigin = null;
+    _map.getCanvas().style.cursor = '';
+  }
+
+  _onMouseMove(Event e) {
+    if (_draggedFeatureId != null) {
+      final current = LatLng(e.lngLat.lat.toDouble(), e.lngLat.lng.toDouble());
+      final payload = {
+        'id': _draggedFeatureId,
+        'point': Point<double>(e.point.x.toDouble(), e.point.y.toDouble()),
+        'origin': _dragOrigin,
+        'current': current,
+        'delta': current - (_dragPrevious ?? _dragOrigin!),
+      };
+      _dragPrevious = current;
+      onFeatureDraggedPlatform(payload);
+    }
+  }
+
   Future<void> _addStylesheetToShadowRoot(HtmlElement e) async {
     LinkElement link = LinkElement()
       ..href = _mapboxGlCssUrl
@@ -725,6 +768,7 @@ class MapboxMapController extends MapboxGlPlatform
       _map.off('mouseenter', layerId, _onMouseEnterFeature);
       _map.off('mousemouve', layerId, _onMouseEnterFeature);
       _map.off('mouseleave', layerId, _onMouseLeaveFeature);
+      _map.off('mousedown', layerId, _onMouseDown);
     }
     _featureLayerIdentifiers.clear();
 
@@ -886,10 +930,13 @@ class MapboxMapController extends MapboxGlPlatform
       _map.on('mouseenter', layerId, _onMouseEnterFeature);
     }
     _map.on('mouseleave', layerId, _onMouseLeaveFeature);
+    _map.on('mousedown', layerId, _onMouseDown);
   }
 
   void _onMouseEnterFeature(_) {
-    _map.getCanvas().style.cursor = 'pointer';
+    if (_draggedFeatureId == null) {
+      _map.getCanvas().style.cursor = 'pointer';
+    }
   }
 
   void _onMouseLeaveFeature(_) {

mapbox_gl_web/pubspec.yaml

@@ -20,7 +20,7 @@ dependencies:
     git:
       url: https://github.com/tobrun/flutter-mapbox-gl.git
       path: mapbox_gl_platform_interface
-  mapbox_gl_dart: ^0.2.0-nullsafety
+  mapbox_gl_dart: ^0.2.1
   image: ^3.0.0
 
 dependency_overrides: