Skip to content

Commit

Permalink
fix: make map center effective
Browse files Browse the repository at this point in the history
  • Loading branch information
@islxyqwe
islxyqwe committed Oct 11, 2023
1 parent 81009e9 commit 171c20b
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 27 deletions.
24 changes: 11 additions & 13 deletions packages/graphic-walker/src/components/leafletRenderer/ChoroplethRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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]];
}

Expand Down Expand Up @@ -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"
Expand Down
26 changes: 12 additions & 14 deletions packages/graphic-walker/src/components/leafletRenderer/POIRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -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]];
}

Expand Down Expand Up @@ -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);
Expand All @@ -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"
Expand Down
8 changes: 8 additions & 0 deletions packages/graphic-walker/src/components/leafletRenderer/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
Expand Down Expand Up @@ -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;
}

0 comments on commit 171c20b

Please sign in to comment.