From f3403d14837bc2c2a8e6bf1ccc309aea03d90ac0 Mon Sep 17 00:00:00 2001
From: Jan Oopkaup <jrehwaldt@users.noreply.github.com>
Date: Sat, 19 Dec 2020 08:54:13 +0100
Subject: [PATCH] Avoid white space when resizing map on web (#474)

* Fixes null reference in fullmap example

* Avoid white space when resizing map on web

When resizing the browser screen Flutter fires several resize events.
These events are properly propagated to the containing div, but not
always by the map. It appears Mapbox misses the last resize event.
Therefore, we fire a timer that will check for mismatching width/height
between mapbox and it's container and trigger an additonal resizing.
---
 example/lib/full_map.dart                        | 13 +++++++------
 mapbox_gl_web/lib/src/mapbox_map_controller.dart | 13 +++++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/example/lib/full_map.dart b/example/lib/full_map.dart
index f1bf6a7be..f34449aac 100644
--- a/example/lib/full_map.dart
+++ b/example/lib/full_map.dart
@@ -32,11 +32,12 @@ class FullMapState extends State<FullMap> {
   Widget build(BuildContext context) {
     return new Scaffold(
         body: MapboxMap(
-          accessToken: MapsDemo.ACCESS_TOKEN,
-          onMapCreated: _onMapCreated,
-          initialCameraPosition:
-          const CameraPosition(target: LatLng(0.0, 0.0)),
-        )
-    );
+      accessToken: MapsDemo.ACCESS_TOKEN,
+      onMapCreated: _onMapCreated,
+      initialCameraPosition: const CameraPosition(target: LatLng(0.0, 0.0)),
+      onStyleLoadedCallback: onStyleLoadedCallback,
+    ));
   }
+
+  void onStyleLoadedCallback() {}
 }
diff --git a/mapbox_gl_web/lib/src/mapbox_map_controller.dart b/mapbox_gl_web/lib/src/mapbox_map_controller.dart
index 4930247ff..9eea56ce0 100644
--- a/mapbox_gl_web/lib/src/mapbox_map_controller.dart
+++ b/mapbox_gl_web/lib/src/mapbox_map_controller.dart
@@ -341,6 +341,19 @@ class MapboxMapController extends MapboxGlPlatform
     _map.on('movestart', _onCameraMoveStarted);
     _map.on('move', _onCameraMove);
     _map.on('moveend', _onCameraIdle);
+    _map.on('resize', _onMapResize);
+  }
+
+  void _onMapResize(Event e) {
+    Timer(Duration(microseconds: 10), () {
+      var container = _map.getContainer();
+      var canvas = _map.getCanvas();
+      var widthMismatch = canvas.clientWidth != container.clientWidth;
+      var heightMismatch = canvas.clientHeight != container.clientHeight;
+      if (widthMismatch || heightMismatch) {
+        _map.resize();
+      }
+    });
   }
 
   void _onMapClick(e) {