Fix web issues (#785)

* fix issues with style loaded only beeing called once
* move to mapbox-gl-js v2.6.1

* fixed issue with feature tap not working (web)

* added promoteId to web
added support changing if it enters a feature

* fixed pointer change issue with fills

* moved to non tiles mapbox api url

example/web/index.html

@@ -15,7 +15,7 @@
   <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 
   <!-- Mapbox -->
-  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
+  <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
 
   <title>example</title>
   <link rel="manifest" href="/manifest.json">

lib/src/controller.dart

@@ -271,11 +271,16 @@ class MapboxMapController 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

mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart

@@ -276,9 +276,9 @@ abstract class MapboxGlPlatform {
     throw UnimplementedError(
         '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.');
   }
 
@@ -314,8 +314,6 @@ abstract class MapboxGlPlatform {
       {String? belowLayerId}) async {
     throw UnimplementedError('addFillLayer() has not been implemented.');
   }
-
-  void dispose() {
-
-  }
-}
+
+  void dispose() {}
+}

mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart

@@ -729,8 +729,8 @@ class MethodChannelMapboxGl extends MapboxGlPlatform {
   }
 
   @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),
@@ -797,10 +797,10 @@ class MethodChannelMapboxGl extends MapboxGlPlatform {
           .map((key, value) => MapEntry<String, String>(key, jsonEncode(value)))
     });
   }
-  
+
   @override
   void dispose() {
     super.dispose();
     _channel.setMethodCallHandler(null);
   }
-}
+}

mapbox_gl_web/lib/src/mapbox_map_controller.dart

@@ -1,14 +1,15 @@
 part of mapbox_gl_web;
 
 const _mapboxGlCssUrl =
-    'https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css';
+    'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css';
 
 class MapboxMapController extends MapboxGlPlatform
     implements MapboxMapOptionsSink {
   late DivElement _mapElement;
 
   late Map<String, dynamic> _creationParams;
   late MapboxMap _map;
+  bool _mapReady = false;
 
   List<String> annotationOrder = [];
   final _featureLayerIdentifiers = Set<String>();
@@ -64,6 +65,13 @@ class MapboxMapController extends MapboxGlPlatform
         ),
       );
       _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);
 
@@ -409,6 +417,7 @@ class MapboxMapController extends MapboxGlPlatform
   }
 
   void _onStyleLoaded(_) {
+    _mapReady = true;
     for (final annotationType in annotationOrder) {
       switch (annotationType) {
         case 'AnnotationType.symbol':
@@ -430,15 +439,7 @@ class MapboxMapController extends MapboxGlPlatform
               "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) {
@@ -717,7 +718,19 @@ class MapboxMapController extends MapboxGlPlatform
 
   @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
@@ -791,9 +804,13 @@ class MapboxMapController extends MapboxGlPlatform
   }
 
   @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
@@ -859,5 +876,21 @@ class MapboxMapController extends MapboxGlPlatform
       '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 = '';
   }
 }

pubspec.lock

@@ -66,14 +66,14 @@ packages:
       path: mapbox_gl_platform_interface
       relative: true
     source: path
-    version: "0.12.0"
+    version: "0.14.0"
   mapbox_gl_web:
     dependency: "direct main"
     description:
       path: mapbox_gl_web
       relative: true
     source: path
-    version: "0.12.0"
+    version: "0.14.0"
   meta:
     dependency: transitive
     description: