From 171c20bc8b12aa1fa97a186fa9a06fcff54d052b Mon Sep 17 00:00:00 2001
From: islxyqwe <islxyqwe123@gmail.com>
Date: Wed, 11 Oct 2023 15:21:51 +0800
Subject: [PATCH] fix: make map center effective

---
 .../leafletRenderer/ChoroplethRenderer.tsx    | 24 ++++++++---------
 .../leafletRenderer/POIRenderer.tsx           | 26 +++++++++----------
 .../src/components/leafletRenderer/utils.ts   |  8 ++++++
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/graphic-walker/src/components/leafletRenderer/ChoroplethRenderer.tsx b/packages/graphic-walker/src/components/leafletRenderer/ChoroplethRenderer.tsx
index ba27c4643..2c0c15f44 100644
--- a/packages/graphic-walker/src/components/leafletRenderer/ChoroplethRenderer.tsx
+++ b/packages/graphic-walker/src/components/leafletRenderer/ChoroplethRenderer.tsx
@@ -10,6 +10,7 @@ import { TooltipContent } from "./tooltip";
 import { useAppRootContext } from "../appRoot";
 import { useGeoJSON } from "../../hooks/service";
 import { useTranslation } from "react-i18next";
+import { ChangeView } from "./utils";
 
 
 export interface IChoroplethRendererProps {
@@ -145,20 +146,20 @@ const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendere
         const allLngLat = lngLat.flat(2);
         if (allLngLat.length > 0) {
             const [bounds, coords] = allLngLat.reduce<[bounds: [[w: number, n: number], [e: number, s: number]], center: [lat: number, lng: number]]>(([bounds, acc], [lat, lng]) => {
-                if (lng < bounds[0][0]) {
-                    bounds[0][0] = lng;
+                if (lat < bounds[0][0]) {
+                    bounds[0][0] = lat;
                 }
-                if (lng > bounds[1][0]) {
-                    bounds[1][0] = lng;
+                if (lat > bounds[1][0]) {
+                    bounds[1][0] = lat;
                 }
-                if (lat < bounds[0][1]) {
-                    bounds[0][1] = lat;
+                if (lng < bounds[0][1]) {
+                    bounds[0][1] = lng;
                 }
-                if (lat > bounds[1][1]) {
-                    bounds[1][1] = lat;
+                if (lng > bounds[1][1]) {
+                    bounds[1][1] = lng;
                 }
                 return [bounds, [acc[0] + lng, acc[1] + lat]];
-            }, [[[-180, -90], [180, 90]], [0, 0]]);
+            }, [[[...allLngLat[0]] ,[...allLngLat[0]]], [0, 0]]);
             return [bounds, [coords[0] / lngLat.length, coords[1] / lngLat.length] as [number, number]];
         }
                 
@@ -215,16 +216,13 @@ const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendere
         }
     }, []);
 
-    useEffect(() => {
-        mapRef.current?.flyToBounds(bounds);
-    }, [`${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`]);
-
     if (!features && (localFeatures || featuresUrl)) {
         return <div className="flex items-center justify-center w-full h-full">{t('main.tabpanel.settings.geography_settings.loading')}</div>
     }
 
     return (
         <MapContainer attributionControl={false} center={center} ref={mapRef} zoom={5} bounds={bounds} style={{ width: '100%', height: '100%', zIndex: 1 }}>
+            <ChangeView bounds={bounds} />
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
diff --git a/packages/graphic-walker/src/components/leafletRenderer/POIRenderer.tsx b/packages/graphic-walker/src/components/leafletRenderer/POIRenderer.tsx
index c70f95513..e41374857 100644
--- a/packages/graphic-walker/src/components/leafletRenderer/POIRenderer.tsx
+++ b/packages/graphic-walker/src/components/leafletRenderer/POIRenderer.tsx
@@ -6,6 +6,7 @@ import { getMeaAggKey } from "../../utils";
 import { useColorScale, useOpacityScale, useSizeScale } from "./encodings";
 import { TooltipContent } from "./tooltip";
 import { useAppRootContext } from "../appRoot";
+import { ChangeView } from "./utils";
 
 export interface IPOIRendererProps {
     name?: string;
@@ -38,7 +39,7 @@ const formatCoerceLatLng = (latRaw: unknown, lngRaw: unknown) => {
 };
 
 const debugMaxLen = 20;
-
+  
 const POIRenderer = forwardRef<IPOIRendererRef, IPOIRendererProps>(function POIRenderer (props, ref) {
     const { name, data, allFields, latitude, longitude, color, opacity, size, details, defaultAggregated, vegaConfig } = props;
     
@@ -52,20 +53,20 @@ const POIRenderer = forwardRef<IPOIRendererRef, IPOIRendererProps>(function POIR
     const [bounds, center] = useMemo<[bounds: [[n: number, w: number], [s: number, e: number]], center: [lng: number, lat: number]]>(() => {
         if (lngLat.length > 0) {
             const [bounds, coords] = lngLat.reduce<[bounds: [[w: number, n: number], [e: number, s: number]], center: [lat: number, lng: number]]>(([bounds, acc], [lat, lng]) => {
-                if (lng < bounds[0][0]) {
-                    bounds[0][0] = lng;
+                if (lat < bounds[0][0]) {
+                    bounds[0][0] = lat;
                 }
-                if (lng > bounds[1][0]) {
-                    bounds[1][0] = lng;
+                if (lat > bounds[1][0]) {
+                    bounds[1][0] = lat;
                 }
-                if (lat < bounds[0][1]) {
-                    bounds[0][1] = lat;
+                if (lng < bounds[0][1]) {
+                    bounds[0][1] = lng;
                 }
-                if (lat > bounds[1][1]) {
-                    bounds[1][1] = lat;
+                if (lng > bounds[1][1]) {
+                    bounds[1][1] = lng;
                 }
                 return [bounds, [acc[0] + lng, acc[1] + lat]];
-            }, [[[-180, -90], [180, 90]], [0, 0]]);
+            }, [[[...lngLat[0]] ,[...lngLat[0]]], [0, 0]]);
             return [bounds, [coords[0] / lngLat.length, coords[1] / lngLat.length] as [number, number]];
         }
                 
@@ -118,10 +119,6 @@ const POIRenderer = forwardRef<IPOIRendererRef, IPOIRendererProps>(function POIR
         }
     }, []);
 
-    useEffect(() => {
-        mapRef.current?.flyToBounds(bounds);
-    }, [`${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`]);
-
     const sizeScale = useSizeScale(data, size, defaultAggregated);
     const opacityScale = useOpacityScale(data, opacity, defaultAggregated);
     const colorScale = useColorScale(data, color, defaultAggregated, vegaConfig);
@@ -137,6 +134,7 @@ const POIRenderer = forwardRef<IPOIRendererRef, IPOIRendererProps>(function POIR
     
     return (
         <MapContainer attributionControl={false} center={center} ref={mapRef} zoom={5} bounds={bounds} style={{ width: '100%', height: '100%', zIndex: 1 }}>
+            <ChangeView bounds={bounds} />
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
diff --git a/packages/graphic-walker/src/components/leafletRenderer/utils.ts b/packages/graphic-walker/src/components/leafletRenderer/utils.ts
index 48ff332e1..c4042e569 100644
--- a/packages/graphic-walker/src/components/leafletRenderer/utils.ts
+++ b/packages/graphic-walker/src/components/leafletRenderer/utils.ts
@@ -3,6 +3,7 @@ import { timeFormat as tFormat } from "d3-time-format";
 import { format } from "d3-format";
 import type { Config as VlConfig } from 'vega-lite';
 import type { ISemanticType, VegaGlobalConfig } from "../../interfaces";
+import { useMap } from "react-leaflet";
 
 
 const defaultFormatter = (value: unknown): string => `${value}`;
@@ -50,3 +51,10 @@ export const useDisplayValueFormatter = (semanticType: ISemanticType, vegaConfig
     }, [semanticType, numberFormatter, timeFormatter]);
     return formatter;
 };
+
+export function ChangeView({ bounds }) {
+    const map = useMap();
+    console.log(bounds);
+    map.flyToBounds(bounds);
+    return null;
+}
\ No newline at end of file