diff --git a/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx b/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx index 7b2552f347af24ca2ffcdd88f75da01f9d538954..1b5e54e6ff523417f0ceb5abb4d2dd51bae78240 100644 --- a/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx +++ b/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> )} diff --git a/frontend/src/metabase/css/core/layout.css b/frontend/src/metabase/css/core/layout.css index 5721a7efcaee9dd768446c893c6e3a63e39eaa91..c20a0f36364764bc2394f31b679b486be4d03627 100644 --- a/frontend/src/metabase/css/core/layout.css +++ b/frontend/src/metabase/css/core/layout.css @@ -67,7 +67,9 @@ } .full, -:local(.full) { +.full-width, +:local(.full), +:local(.full-width) { width: 100%; } .half { diff --git a/frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx b/frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx index 2f5cb191ca26715178e4b8a00ab2c8f3866ea797..e6a0d3981bef9ece1772021331e6973e508d847d 100644 --- a/frontend/src/metabase/visualizations/components/LeafletChoropleth.jsx +++ b/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();