Duplicated map (#22427)

* Text alignment and margins updated for map modal

* Misc

* Default onRenderError

* Misc

* Overflow hidden added for map container

* Remove map duplicates

* Removed map animation

* .full-width class added for naming consistency

* Misc

* Loading position updated

frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx

@@ -274,7 +274,7 @@ const GeoJsonPropertySelect = ({ value, onChange, geoJson }) => {
       {Object.entries(options).map(([name, values]) => (
         <Option key={name} value={name}>
           <div>
-            <div>{name}</div>
+            <div style={{ textAlign: "left" }}>{name}</div>
             <div
               className="mt1 h6"
               style={{
@@ -377,11 +377,15 @@ const EditMap = ({
           </SettingContainer>
         </div>
       </div>
-      <div className="flex-auto ml4 relative bordered rounded flex my4">
+      <div className="flex-auto ml4 relative bordered rounded flex my4 overflow-hidden">
         {geoJson || geoJsonLoading || geoJsonError ? (
-          <LoadingAndErrorWrapper loading={geoJsonLoading} error={geoJsonError}>
+          <LoadingAndErrorWrapper
+            className="flex full-height full-width"
+            loading={geoJsonLoading}
+            error={geoJsonError}
+          >
             {() => (
-              <div className="m4 spread relative">
+              <div className="spread relative">
                 <ChoroplethPreview geoJson={geoJson} />
               </div>
             )}

frontend/src/metabase/css/core/layout.css

@@ -67,7 +67,9 @@
 }
 
 .full,
-:local(.full) {
+.full-width,
+:local(.full),
+:local(.full-width) {
   width: 100%;
 }
 .half {

frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx

@@ -5,20 +5,19 @@ import { color } from "metabase/lib/colors";
 
 import CardRenderer from "./CardRenderer";
 
-// import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import L from "leaflet";
 
 import { computeMinimalBounds } from "metabase/visualizations/lib/mapping";
 
 const LeafletChoropleth = ({
-  series,
+  series = [],
   geoJson,
   minimalBounds = computeMinimalBounds(geoJson.features || [geoJson]),
   getColor = () => color("brand"),
   onHoverFeature = () => {},
   onClickFeature = () => {},
-  onRenderError,
+  onRenderError = () => {},
 }) => (
   <CardRenderer
     card={{ display: "map" }}
@@ -29,9 +28,13 @@ const LeafletChoropleth = ({
       element.style.backgroundColor = "transparent";
 
       const map = L.map(element, {
-        zoomSnap: 0,
-        worldCopyJump: true,
         attributionControl: false,
+        fadeAnimation: false,
+        markerZoomAnimation: false,
+        trackResize: true,
+        worldCopyJump: true,
+        zoomAnimation: false,
+        zoomSnap: 0,
 
         // disable zoom controls
         dragging: false,
@@ -56,7 +59,7 @@ const LeafletChoropleth = ({
         layer.on({
           mousemove: e => {
             onHoverFeature({
-              feature: feature,
+              feature,
               event: e.originalEvent,
             });
           },
@@ -65,7 +68,7 @@ const LeafletChoropleth = ({
           },
           click: e => {
             onClickFeature({
-              feature: feature,
+              feature,
               event: e.originalEvent,
             });
           },
@@ -75,29 +78,29 @@ const LeafletChoropleth = ({
       // main layer
       L.featureGroup([
         L.geoJson(geoJson, {
-          style: style,
-          onEachFeature: onEachFeature,
+          style,
+          onEachFeature,
         }),
       ]).addTo(map);
 
-      // left and right duplicates so we can pan a bit
-      L.featureGroup([
-        L.geoJson(geoJson, {
-          style: style,
-          onEachFeature: onEachFeature,
-          coordsToLatLng: ([longitude, latitude]) =>
-            L.latLng(latitude, longitude - 360),
-        }),
-        L.geoJson(geoJson, {
-          style: style,
-          onEachFeature: onEachFeature,
-          coordsToLatLng: ([longitude, latitude]) =>
-            L.latLng(latitude, longitude + 360),
-        }),
-      ]).addTo(map);
+      // // left and right duplicates so we can pan a bit
+      // L.featureGroup([
+      //   L.geoJson(geoJson, {
+      //     style,
+      //     onEachFeature,
+      //     coordsToLatLng: ([longitude, latitude]) =>
+      //       L.latLng(latitude, longitude - 360),
+      //   }),
+      //   L.geoJson(geoJson, {
+      //     style,
+      //     onEachFeature,
+      //     coordsToLatLng: ([longitude, latitude]) =>
+      //       L.latLng(latitude, longitude + 360),
+      //   }),
+      // ]).addTo(map);
 
       map.fitBounds(minimalBounds);
-      // map.fitBounds(geoFeatureGroup.getBounds());
+      map.panTo([0, 0], { animate: false });
 
       return () => {
         map.remove();