Improved map resizing (#1061)

* Improved map resizing * Added functionality to trigger the map resize event from outside the package * Fixed pipeline
flutter-mapbox-gl · May 30, 2022 · b1479f4 · b1479f4
1 parent 734b707
commit b1479f4
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 18 deletions.
diff --git a/.github/workflows/flutter_ci.yml b/.github/workflows/flutter_ci.yml
@@ -63,7 +63,9 @@ jobs:
     - uses: actions/setup-java@v1
       with:
         java-version: '12.x'
-    - uses: subosito/flutter-action@v1
+    - uses: subosito/flutter-action@v2
+      with:
+        flutter-version: '2.10.5'
     - run: flutter pub get
     - name: Build example APK
       run: cd example && flutter build apk
@@ -80,7 +82,9 @@ jobs:
       - uses: actions/setup-java@v1
         with:
           java-version: '12.x'
-      - uses: subosito/flutter-action@v1
+      - uses: subosito/flutter-action@v2
+        with:
+          flutter-version: '2.10.5'
       - run: flutter pub get
       - name: build iOS package
         run: |

diff --git a/README.md b/README.md
@@ -70,8 +70,16 @@ curl: (22) The requested URL returned error: 401 Unauthorized
 Include the JavaScript and CSS files in the `<head>` of your `index.html` file:
 
 ```
-<script src='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js'></script>
-<link href='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
+<script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
+<link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
+
+<style>
+   .mapboxgl-map {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+</style>
 ```
 
 *Note: Look for latest version in [Mapbox GL JS documentation](https://docs.mapbox.com/mapbox-gl-js/guides/).*

diff --git a/example/web/index.html b/example/web/index.html
@@ -15,7 +15,7 @@
   <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 
   <!-- Mapbox -->
-  <script src='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js'></script>
+  <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
 
   <title>example</title>
   <link rel="manifest" href="/manifest.json">

diff --git a/lib/src/controller.dart b/lib/src/controller.dart
@@ -257,6 +257,21 @@ class MapboxMapController extends ChangeNotifier {
     notifyListeners();
   }
 
+  /// Triggers a resize event for the map on web (ignored on Android or iOS).
+  ///
+  /// Checks first if a resize is required or if it looks like it is already correctly resized.
+  /// If it looks good, the resize call will be skipped.
+  ///
+  /// To force resize map (without any checks) have a look at forceResizeWebMap()
+  void resizeWebMap() {
+    _mapboxGlPlatform.resizeWebMap();
+  }
+
+  /// Triggers a hard map resize event on web and does not check if it is required or not.
+  void forceResizeWebMap() {
+    _mapboxGlPlatform.forceResizeWebMap();
+  }
+
   /// Starts an animated change of the map camera position.
   ///
   /// The returned [Future] completes after the change has been started on the

diff --git a/mapbox_gl_platform_interface/lib/mapbox_gl_platform_interface.dart b/mapbox_gl_platform_interface/lib/mapbox_gl_platform_interface.dart
@@ -9,7 +9,6 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
-import 'package:meta/meta.dart' show visibleForTesting;
 
 part 'src/annotation.dart';
 part 'src/callbacks.dart';

diff --git a/mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart b/mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart
@@ -58,6 +58,9 @@ abstract class MapboxGlPlatform {
 
   Future<void> matchMapLanguageWithDeviceDefault();
 
+  void resizeWebMap();
+  void forceResizeWebMap();
+
   Future<void> updateContentInsets(EdgeInsets insets, bool animated);
   Future<void> setMapLanguage(String language);
   Future<void> setTelemetryEnabled(bool enabled);

diff --git a/mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart b/mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart
@@ -678,4 +678,10 @@ class MethodChannelMapboxGl extends MapboxGlPlatform {
       'geojsonFeature': jsonEncode(geojsonFeature)
     });
   }
+
+  @override
+  void forceResizeWebMap() {}
+
+  @override
+  void resizeWebMap() {}
 }
diff --git a/mapbox_gl_web/lib/mapbox_gl_web.dart b/mapbox_gl_web/lib/mapbox_gl_web.dart
@@ -13,7 +13,7 @@ import 'package:flutter/services.dart';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' hide Element;
 
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
 import 'package:mapbox_gl_platform_interface/mapbox_gl_platform_interface.dart';

diff --git a/mapbox_gl_web/lib/src/mapbox_web_gl_platform.dart b/mapbox_gl_web/lib/src/mapbox_web_gl_platform.dart
@@ -24,6 +24,7 @@ class MapboxWebGlPlatform extends MapboxGlPlatform
 
   String? _navigationControlPosition;
   NavigationControl? _navigationControl;
+  Timer? lastResizeObserverTimer;
 
   @override
   Widget buildView(
@@ -47,8 +48,10 @@ class MapboxWebGlPlatform extends MapboxGlPlatform
     ui.platformViewRegistry.registerViewFactory(
         'plugins.flutter.io/mapbox_gl_$identifier', (int viewId) {
       _mapElement = DivElement()
-        ..style.width = '100%'
-        ..style.height = '100%';
+        ..style.position = 'absolute'
+        ..style.top = '0'
+        ..style.bottom = '0'
+        ..style.width = '100%';
       callback(viewId);
       return _mapElement;
     });
@@ -59,7 +62,6 @@ class MapboxWebGlPlatform extends MapboxGlPlatform
     await _addStylesheetToShadowRoot(_mapElement);
     if (_creationParams.containsKey('initialCameraPosition')) {
       var camera = _creationParams['initialCameraPosition'];
-
       _dragEnabled = _creationParams['dragEnabled'] ?? true;
 
       if (_creationParams.containsKey('accessToken')) {
@@ -82,16 +84,31 @@ class MapboxWebGlPlatform extends MapboxGlPlatform
       _map.on('movestart', _onCameraMoveStarted);
       _map.on('move', _onCameraMove);
       _map.on('moveend', _onCameraIdle);
-      _map.on('resize', _onMapResize);
+      _map.on('resize', (_) => _onMapResize());
       _map.on('styleimagemissing', _loadFromAssets);
       if (_dragEnabled) {
         _map.on('mouseup', _onMouseUp);
         _map.on('mousemove', _onMouseMove);
       }
+
+      _initResizeObserver();
     }
     Convert.interpretMapboxMapOptions(_creationParams['options'], this);
   }
 
+  void _initResizeObserver() {
+    final resizeObserver = ResizeObserver((entries, observer) {
+      // The resize observer might be called a lot of times when the user resizes the browser window with the mouse for example.
+      // Due to the fact that the resize call is quite expensive it should not be called for every triggered event but only the last one, like "onMoveEnd".
+      // But because there is no event type for the end, there is only the option to spawn timers and cancel the previous ones if they get overwritten by a new event.
+      lastResizeObserverTimer?.cancel();
+      lastResizeObserverTimer = Timer(Duration(milliseconds: 50), () {
+        _onMapResize();
+      });
+    });
+    resizeObserver.observe(document.body as Element);
+  }
+
   void _loadFromAssets(Event event) async {
     final imagePath = event.id;
     final ByteData bytes = await rootBundle.load(imagePath);
@@ -340,12 +357,12 @@ class MapboxWebGlPlatform extends MapboxGlPlatform
 
   void _onStyleLoaded(_) {
     _mapReady = true;
-    _map.resize();
+    _onMapResize();
     onMapStyleLoadedPlatform(null);
   }
 
-  void _onMapResize(Event e) {
-    Timer(Duration(microseconds: 10), () {
+  void _onMapResize() {
+    Timer(Duration(), () {
       var container = _map.getContainer();
       var canvas = _map.getCanvas();
       var widthMismatch = canvas.clientWidth != container.clientWidth;
@@ -949,4 +966,14 @@ class MapboxWebGlPlatform extends MapboxGlPlatform
       }
     }
   }
+
+  @override
+  void resizeWebMap() {
+    _onMapResize();
+  }
+
+  @override
+  void forceResizeWebMap() {
+    _map.resize();
+  }
 }
diff --git a/pubspec.lock b/pubspec.lock
@@ -16,7 +16,7 @@ packages:
     source: hosted
     version: "1.2.0"
   collection:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: collection
       url: "https://pub.dartlang.org"
@@ -59,21 +59,28 @@ packages:
       name: mapbox_gl_dart
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.0-nullsafety.0"
+    version: "0.2.1"
   mapbox_gl_platform_interface:
     dependency: "direct main"
     description:
       path: mapbox_gl_platform_interface
       relative: true
     source: path
-    version: "0.14.0"
+    version: "0.16.1"
   mapbox_gl_web:
     dependency: "direct main"
     description:
       path: mapbox_gl_web
       relative: true
     source: path
-    version: "0.14.0"
+    version: "0.16.1"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description: