cherry-pick upstream#785

https: //github.com/flutter-mapbox-gl/maps/pull/785 Co-Authored-By: Felix Horvat <24698503+felix-ht@users.noreply.github.com>
maplibre · May 19, 2022 · a7aab41 · a7aab41
1 parent 0544713
commit a7aab41
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 18 deletions.
diff --git a/lib/src/controller.dart b/lib/src/controller.dart
@@ -261,11 +261,16 @@ class MaplibreMapController extends ChangeNotifier {
   /// The json in [geojson] has to comply with the schema for FeatureCollection
   /// as specified in https://datatracker.ietf.org/doc/html/rfc7946#section-3.3
   ///
+  /// [promoteId] can be used on web to promote an id from properties to be the
+  /// id of the feature. This is useful because by default mapbox-gl-js does not
+  /// support string ids
+  ///
   /// The returned [Future] completes after the change has been made on the
   /// platform side.
-  Future<void> addGeoJsonSource(
-      String sourceId, Map<String, dynamic> geojson) async {
-    await _mapboxGlPlatform.addGeoJsonSource(sourceId, geojson);
+  Future<void> addGeoJsonSource(String sourceId, Map<String, dynamic> geojson,
+      {String? promoteId}) async {
+    await _mapboxGlPlatform.addGeoJsonSource(sourceId, geojson,
+        promoteId: promoteId);
   }
 
   /// Sets new geojson data to and existing source

diff --git a/maplibre_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart b/maplibre_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart
@@ -274,8 +274,8 @@ abstract class MapLibreGlPlatform {
         'getMetersPerPixelAtLatitude() has not been implemented.');
   }
 
-  Future<void> addGeoJsonSource(
-      String sourceId, Map<String, dynamic> geojson) async {
+  Future<void> addGeoJsonSource(String sourceId, Map<String, dynamic> geojson,
+      {String? promoteId}) async {
     throw UnimplementedError('addGeoJsonSource() has not been implemented.');
   }
 

diff --git a/maplibre_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart b/maplibre_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart
@@ -726,8 +726,8 @@ class MethodChannelMaplibreGl extends MapLibreGlPlatform {
   }
 
   @override
-  Future<void> addGeoJsonSource(
-      String sourceId, Map<String, dynamic> geojson) async {
+  Future<void> addGeoJsonSource(String sourceId, Map<String, dynamic> geojson,
+      {String? promoteId}) async {
     await _channel.invokeMethod('source#addGeoJson', <String, dynamic>{
       'sourceId': sourceId,
       'geojson': jsonEncode(geojson),

diff --git a/maplibre_gl_web/lib/src/mapbox_map_controller.dart b/maplibre_gl_web/lib/src/mapbox_map_controller.dart
@@ -10,6 +10,7 @@ class MaplibreMapController extends MapLibreGlPlatform
 
   late Map<String, dynamic> _creationParams;
   late MapboxMap _map;
+  bool _mapReady = false;
 
   List<String> annotationOrder = [];
   final _featureLayerIdentifiers = Set<String>();
@@ -62,6 +63,13 @@ class MaplibreMapController extends MapLibreGlPlatform
         ),
       );
       _map.on('load', _onStyleLoaded);
+      _map.on('click', _onMapClick);
+      // long click not available in web, so it is mapped to double click
+      _map.on('dblclick', _onMapLongClick);
+      _map.on('movestart', _onCameraMoveStarted);
+      _map.on('move', _onCameraMove);
+      _map.on('moveend', _onCameraIdle);
+      _map.on('resize', _onMapResize);
     }
     Convert.interpretMapboxMapOptions(_creationParams['options'], this);
 
@@ -407,6 +415,7 @@ class MaplibreMapController extends MapLibreGlPlatform
   }
 
   void _onStyleLoaded(_) {
+    _mapReady = true;
     for (final annotationType in annotationOrder) {
       switch (annotationType) {
         case 'AnnotationType.symbol':
@@ -428,15 +437,7 @@ class MaplibreMapController extends MapLibreGlPlatform
               "Unknown annotation type: \(annotationType), must be either 'fill', 'line', 'circle' or 'symbol'");
       }
     }
-
     onMapStyleLoadedPlatform(null);
-    _map.on('click', _onMapClick);
-    // long click not available in web, so it is mapped to double click
-    _map.on('dblclick', _onMapLongClick);
-    _map.on('movestart', _onCameraMoveStarted);
-    _map.on('move', _onCameraMove);
-    _map.on('moveend', _onCameraIdle);
-    _map.on('resize', _onMapResize);
   }
 
   void _onMapResize(Event e) {
@@ -715,7 +716,19 @@ class MaplibreMapController extends MapLibreGlPlatform
 
   @override
   void setStyleString(String? styleString) {
+    //remove old mouseenter callbacks to avoid multicalling
+    for (var layerId in _featureLayerIdentifiers) {
+      _map.off('mouseenter', layerId, _onMouseEnterFeature);
+      _map.off('mousemouve', layerId, _onMouseEnterFeature);
+      _map.off('mouseleave', layerId, _onMouseLeaveFeature);
+    }
+    _featureLayerIdentifiers.clear();
+
     _map.setStyle(styleString);
+    // catch style loaded for later style changes
+    if (_mapReady) {
+      _map.once("styledata", _onStyleLoaded);
+    }
   }
 
   @override
@@ -789,9 +802,13 @@ class MaplibreMapController extends MapLibreGlPlatform
   }
 
   @override
-  Future<void> addGeoJsonSource(
-      String sourceId, Map<String, dynamic> geojson) async {
-    _map.addSource(sourceId, {"type": 'geojson', "data": geojson});
+  Future<void> addGeoJsonSource(String sourceId, Map<String, dynamic> geojson,
+      {String? promoteId}) async {
+    _map.addSource(sourceId, {
+      "type": 'geojson',
+      "data": geojson,
+      if (promoteId != null) "promoteId": promoteId
+    });
   }
 
   @override
@@ -857,5 +874,21 @@ class MaplibreMapController extends MapLibreGlPlatform
       'layout': layout,
       'paint': paint
     }, belowLayerId);
+
+    _featureLayerIdentifiers.add(layerId);
+    if (layerType == "fill") {
+      _map.on('mousemove', layerId, _onMouseEnterFeature);
+    } else {
+      _map.on('mouseenter', layerId, _onMouseEnterFeature);
+    }
+    _map.on('mouseleave', layerId, _onMouseLeaveFeature);
+  }
+
+  void _onMouseEnterFeature(_) {
+    _map.getCanvas().style.cursor = 'pointer';
+  }
+
+  void _onMouseLeaveFeature(_) {
+    _map.getCanvas().style.cursor = '';
   }
 }