Keep map updates independent of tile loading

backend/tests/test_sprint186_map_first_geographic_explorer.py

@@ -48,6 +48,7 @@ def test_map_rectangle_drag_is_wired_to_automatic_analysis() -> None:
     assert "resizeObserver.observe(containerRef.current)" in geomap
     assert "fitDataOnChangeRef.current" in geomap
     assert geomap.count("map.fitBounds(bounds, { padding: 40, duration: 0 })") == 3
+    assert "isStyleLoaded()" not in geomap
     assert "const activeCollection = areaData ?? (fitDataOnChange ? data : null)" in geomap
     assert "data && fitDataOnChange && !areaData" in geomap
     assert "resizeObserver.disconnect()" in geomap

frontend/src/components/GeoMap.tsx

@@ -230,7 +230,7 @@ function GeoMap({
       const fitCollection = areaDataRef.current
         ?? (fitDataOnChangeRef.current ? dataRef.current : null)
       const bounds = fitCollection ? collectCoordinates(fitCollection) : null
-      if (bounds && map.isStyleLoaded()) {
+      if (bounds) {
         map.fitBounds(bounds, { padding: 40, duration: 0 })
       }
     })
@@ -344,7 +344,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
     for (const overlayId of [...imageOverlayIdsRef.current].reverse()) {
@@ -382,7 +382,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
 
@@ -434,7 +434,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
     if (map.getLayer('dataset-fill')) {
@@ -447,7 +447,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
 
@@ -504,7 +504,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
     const visibility = visible ? 'visible' : 'none'
@@ -520,7 +520,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
     const visibility = areaVisible ? 'visible' : 'none'
@@ -536,7 +536,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
 
@@ -586,7 +586,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
 
@@ -619,7 +619,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }
 
@@ -666,7 +666,7 @@ function GeoMap({
 
   useEffect(() => {
     const map = mapRef.current
-    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+    if (!map || !mapStyleReady) {
       return
     }