fix: move style to outer div for full-screen map rendering

yihong0618 · Oct 21, 2024 · 4529773 · 4529773
1 parent fac33dd
commit 4529773
Showing 1 changed file with 58 additions and 58 deletions.
diff --git a/src/components/RunMap/index.tsx b/src/components/RunMap/index.tsx
@@ -129,64 +129,64 @@ const RunMap = ({
   };
 
   return (
-    <Map
-      {...viewState}
-      onMove={onMove}
-      style={style}
-      mapStyle="mapbox://styles/mapbox/dark-v10"
-      ref={mapRefCallback}
-      mapboxAccessToken={MAPBOX_TOKEN}
-      onRender={(event) => event.target.resize()}
-    >
-      <RunMapButtons changeYear={changeYear} thisYear={thisYear} />
-      <Source id="data" type="geojson" data={geoData}>
-        <Layer
-          id="province"
-          type="fill"
-          paint={{
-            'fill-color': PROVINCE_FILL_COLOR,
-          }}
-          filter={filterProvinces}
-        />
-        <Layer
-          id="countries"
-          type="fill"
-          paint={{
-            'fill-color': COUNTRY_FILL_COLOR,
-            // in China, fill a bit lighter while already filled provinces
-            'fill-opacity': ["case", ["==", ["get", "name"], '中国'], 0.1, 0.5],
-          }}
-          filter={filterCountries}
-        />
-        <Layer
-          id="runs2"
-          type="line"
-          paint={{
-            'line-color':  ['get', 'color'],
-            'line-width': isBigMap && lights ? 1 : 2,
-            'line-dasharray': dash,
-            'line-opacity': isSingleRun || isBigMap || !lights ? 1 : LINE_OPACITY,
-            'line-blur': 1,
-          }}
-          layout={{
-            'line-join': 'round',
-            'line-cap': 'round',
-          }}
-        />
-      </Source>
-      {isSingleRun && (
-        <RunMarker
-          startLat={startLat}
-          startLon={startLon}
-          endLat={endLat}
-          endLon={endLon}
-        />
-      )}
-      <span className={styles.runTitle}>{title}</span>
-      <FullscreenControl style={fullscreenButton}/>
-      {!PRIVACY_MODE && <LightsControl setLights={setLights} lights={lights}/>}
-      <NavigationControl showCompass={false} position={'bottom-right'} style={{opacity: 0.3}}/>
-    </Map>
+    <div style={style}>
+      <Map
+        {...viewState}
+        onMove={onMove}
+        mapStyle="mapbox://styles/mapbox/dark-v10"
+        ref={mapRefCallback}
+        mapboxAccessToken={MAPBOX_TOKEN}
+      >
+        <RunMapButtons changeYear={changeYear} thisYear={thisYear} />
+        <Source id="data" type="geojson" data={geoData}>
+          <Layer
+            id="province"
+            type="fill"
+            paint={{
+              'fill-color': PROVINCE_FILL_COLOR,
+            }}
+            filter={filterProvinces}
+          />
+          <Layer
+            id="countries"
+            type="fill"
+            paint={{
+              'fill-color': COUNTRY_FILL_COLOR,
+              // in China, fill a bit lighter while already filled provinces
+              'fill-opacity': ["case", ["==", ["get", "name"], '中国'], 0.1, 0.5],
+            }}
+            filter={filterCountries}
+          />
+          <Layer
+            id="runs2"
+            type="line"
+            paint={{
+              'line-color':  ['get', 'color'],
+              'line-width': isBigMap && lights ? 1 : 2,
+              'line-dasharray': dash,
+              'line-opacity': isSingleRun || isBigMap || !lights ? 1 : LINE_OPACITY,
+              'line-blur': 1,
+            }}
+            layout={{
+              'line-join': 'round',
+              'line-cap': 'round',
+            }}
+          />
+        </Source>
+        {isSingleRun && (
+          <RunMarker
+            startLat={startLat}
+            startLon={startLon}
+            endLat={endLat}
+            endLon={endLon}
+          />
+        )}
+        <span className={styles.runTitle}>{title}</span>
+        <FullscreenControl style={fullscreenButton}/>
+        {!PRIVACY_MODE && <LightsControl setLights={setLights} lights={lights}/>}
+        <NavigationControl showCompass={false} position={'bottom-right'} style={{opacity: 0.3}}/>
+      </Map>
+    </div>
   );
 };