From 5c816e7172384446c31d9595b08ae2c0f8c241cf Mon Sep 17 00:00:00 2001 From: menachem95 Date: Thu, 9 May 2024 12:51:57 +0300 Subject: [PATCH 01/14] create MapContent component --- .../components/map-related/MapContent.tsx | 101 ++++++++++++++++++ .../map-related/MapWithLocationsAndPath.tsx | 15 ++- 2 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 src/pages/components/map-related/MapContent.tsx diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx new file mode 100644 index 00000000..32c0974f --- /dev/null +++ b/src/pages/components/map-related/MapContent.tsx @@ -0,0 +1,101 @@ +import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet' +import { Icon, IconOptions, LatLngTuple } from 'leaflet' +import { useAgencyList } from 'src/api/agencyList' +import { Point } from 'src/pages/timeBasedMap' +import { busIcon, busIconPath } from '../utils/BusIcon' +import { BusToolTip } from './MapLayers/BusToolTip' +import { VehicleLocation } from 'src/model/vehicleLocation' +import { useCallback, useEffect, useState } from 'react' +import { Button } from 'antd' +import { ExpandAltOutlined } from '@ant-design/icons' +import { BusStop } from 'src/model/busStop' +import { t } from 'i18next' +import '../../Map.scss' +import { MapIndex, MapProps, RecenterOnDataChange, position } from './MapWithLocationsAndPath' + + + +export function MapContent({ positions, plannedRouteStops }: MapProps) { + const agencyList = useAgencyList() + // const [isExpanded, setIsExpanded] = useState(false) + // const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), []) + + const getIcon = (path: string, width: number = 10, height: number = 10): Icon => { + return new Icon({ + iconUrl: path, + iconSize: [width, height], + }) + } + // configs for planned & actual routes - line color & marker icon + const actualRouteStopMarkerPath = '/marker-dot.png' + const plannedRouteStopMarkerPath = '/marker-bus-stop.png' + const actualRouteLineColor = 'orange' + const plannedRouteLineColor = 'black' + const actualRouteStopMarker = getIcon(actualRouteStopMarkerPath, 20, 20) + const plannedRouteStopMarker = getIcon(plannedRouteStopMarkerPath, 20, 25) + + return ( + + +
+ + +
+ {positions.map((pos, i) => { + const icon = + i === 0 + ? busIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator) + ?.agency_name, + }) + : actualRouteStopMarker + return ( + + + + + + ) + })} + + {plannedRouteStops?.length && ( + [ + stop.location.latitude, + stop.location.longitude, + ])} + /> + )} + {plannedRouteStops?.length && + plannedRouteStops.map((stop) => { + const { latitude, longitude } = stop.location + return ( + + ) + })} + {positions.length && ( + position.loc)} + /> + )} + + + ) +} diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index 0eb049ff..443e1731 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -4,6 +4,7 @@ import { useAgencyList } from 'src/api/agencyList' import { Point } from 'src/pages/timeBasedMap' import { busIcon, busIconPath } from '../utils/BusIcon' import { BusToolTip } from './MapLayers/BusToolTip' +import { MapContent } from './MapContent' import { VehicleLocation } from 'src/model/vehicleLocation' import { useCallback, useEffect, useState } from 'react' import { Button } from 'antd' @@ -12,7 +13,7 @@ import { BusStop } from 'src/model/busStop' import { t } from 'i18next' import '../../Map.scss' -const position: Point = { +export const position: Point = { loc: [32.3057988, 34.85478613], // arbitrary default value... Netanya - best city to live & die in color: 0, } @@ -24,7 +25,7 @@ export interface Path { vehicleRef: number } -interface MapProps { +export interface MapProps { positions: Point[] plannedRouteStops: BusStop[] } @@ -57,7 +58,11 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro onClick={toggleExpanded} icon={} /> - + + {/* + )} - + */} ) } @@ -147,7 +152,7 @@ export function MapIndex({ ) } -function RecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { +export function RecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { const map = useMap() useEffect(() => { From 2d98093e47610ba1ce94738a76b9ce9e40e0fe55 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Thu, 9 May 2024 13:01:43 +0300 Subject: [PATCH 02/14] create MapContent component --- .../components/map-related/MapContent.tsx | 14 +-- .../map-related/MapWithLocationsAndPath.tsx | 88 +------------------ 2 files changed, 4 insertions(+), 98 deletions(-) diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index 32c0974f..149b83a3 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -1,24 +1,14 @@ -import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet' -import { Icon, IconOptions, LatLngTuple } from 'leaflet' +import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet' +import { Icon, IconOptions } from 'leaflet' import { useAgencyList } from 'src/api/agencyList' -import { Point } from 'src/pages/timeBasedMap' import { busIcon, busIconPath } from '../utils/BusIcon' import { BusToolTip } from './MapLayers/BusToolTip' -import { VehicleLocation } from 'src/model/vehicleLocation' -import { useCallback, useEffect, useState } from 'react' -import { Button } from 'antd' -import { ExpandAltOutlined } from '@ant-design/icons' -import { BusStop } from 'src/model/busStop' import { t } from 'i18next' import '../../Map.scss' import { MapIndex, MapProps, RecenterOnDataChange, position } from './MapWithLocationsAndPath' - - export function MapContent({ positions, plannedRouteStops }: MapProps) { const agencyList = useAgencyList() - // const [isExpanded, setIsExpanded] = useState(false) - // const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), []) const getIcon = (path: string, width: number = 10, height: number = 10): Icon => { return new Icon({ diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index 443e1731..48a6d2ea 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -1,16 +1,12 @@ -import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet' -import { Icon, IconOptions, LatLngTuple } from 'leaflet' -import { useAgencyList } from 'src/api/agencyList' +import { useMap } from 'react-leaflet' +import { LatLngTuple } from 'leaflet' import { Point } from 'src/pages/timeBasedMap' -import { busIcon, busIconPath } from '../utils/BusIcon' -import { BusToolTip } from './MapLayers/BusToolTip' import { MapContent } from './MapContent' import { VehicleLocation } from 'src/model/vehicleLocation' import { useCallback, useEffect, useState } from 'react' import { Button } from 'antd' import { ExpandAltOutlined } from '@ant-design/icons' import { BusStop } from 'src/model/busStop' -import { t } from 'i18next' import '../../Map.scss' export const position: Point = { @@ -31,24 +27,9 @@ export interface MapProps { } export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapProps) { - const agencyList = useAgencyList() const [isExpanded, setIsExpanded] = useState(false) const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), []) - const getIcon = (path: string, width: number = 10, height: number = 10): Icon => { - return new Icon({ - iconUrl: path, - iconSize: [width, height], - }) - } - // configs for planned & actual routes - line color & marker icon - const actualRouteStopMarkerPath = '/marker-dot.png' - const plannedRouteStopMarkerPath = '/marker-bus-stop.png' - const actualRouteLineColor = 'orange' - const plannedRouteLineColor = 'black' - const actualRouteStopMarker = getIcon(actualRouteStopMarkerPath, 20, 20) - const plannedRouteStopMarker = getIcon(plannedRouteStopMarkerPath, 20, 25) - return (
) } From 3f048671ada92244356ec071284282c60d559447 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Thu, 9 May 2024 15:29:09 +0300 Subject: [PATCH 03/14] useRecenterOnDataChange --- .../components/map-related/MapContent.tsx | 12 ++++++----- .../map-related/MapWithLocationsAndPath.tsx | 7 +++++-- .../map-related/useRecenterOnDataChange.ts | 21 +++++++++++++++++++ 3 files changed, 33 insertions(+), 7 deletions(-) create mode 100644 src/pages/components/map-related/useRecenterOnDataChange.ts diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index 149b83a3..f7cc6883 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -1,13 +1,16 @@ -import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet' +import { Marker, Polyline, Popup, TileLayer } from 'react-leaflet' import { Icon, IconOptions } from 'leaflet' import { useAgencyList } from 'src/api/agencyList' import { busIcon, busIconPath } from '../utils/BusIcon' import { BusToolTip } from './MapLayers/BusToolTip' import { t } from 'i18next' import '../../Map.scss' -import { MapIndex, MapProps, RecenterOnDataChange, position } from './MapWithLocationsAndPath' +import { MapIndex, MapProps } from './MapWithLocationsAndPath' +import { useRecenterOnDataChange } from './useRecenterOnDataChange' export function MapContent({ positions, plannedRouteStops }: MapProps) { + useRecenterOnDataChange({ positions, plannedRouteStops }) + const agencyList = useAgencyList() const getIcon = (path: string, width: number = 10, height: number = 10): Icon => { @@ -25,7 +28,7 @@ export function MapContent({ positions, plannedRouteStops }: MapProps) { const plannedRouteStopMarker = getIcon(plannedRouteStopMarkerPath, 20, 25) return ( - + <> position.loc)} /> )} - - + ) } diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index 48a6d2ea..f820cc03 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -1,7 +1,8 @@ -import { useMap } from 'react-leaflet' +import { MapContainer, useMap } from 'react-leaflet' import { LatLngTuple } from 'leaflet' import { Point } from 'src/pages/timeBasedMap' import { MapContent } from './MapContent' + import { VehicleLocation } from 'src/model/vehicleLocation' import { useCallback, useEffect, useState } from 'react' import { Button } from 'antd' @@ -39,7 +40,9 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro onClick={toggleExpanded} icon={} /> - + + + ) } diff --git a/src/pages/components/map-related/useRecenterOnDataChange.ts b/src/pages/components/map-related/useRecenterOnDataChange.ts new file mode 100644 index 00000000..b3cf8c5b --- /dev/null +++ b/src/pages/components/map-related/useRecenterOnDataChange.ts @@ -0,0 +1,21 @@ +import { useEffect } from 'react' +import { LatLngTuple } from 'leaflet' +import { useMap } from 'react-leaflet' +import { MapProps, position } from './MapWithLocationsAndPath' + +export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { + const map = useMap() + + useEffect(() => { + const positionsSum = positions.reduce( + (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], + [0, 0], + ) + const mean: LatLngTuple = [ + positionsSum[0] / positions.length || position.loc[0], + positionsSum[1] / positions.length || position.loc[1], + ] + + map.setView(mean, map.getZoom(), { animate: true }) + }, [positions, plannedRouteStops]) +} From 4f71c2197dd1042c82830763e108db7eef446ad3 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Sun, 12 May 2024 09:52:38 +0300 Subject: [PATCH 04/14] test --- .../components/map-related/MapContent.tsx | 3 +- src/pages/components/map-related/MapIndex.tsx | 23 ++++++++ .../map-related/MapWithLocationsAndPath.tsx | 59 ++++++------------- .../map-related/useRecenterOnDataChange.ts | 25 +++++--- 4 files changed, 58 insertions(+), 52 deletions(-) create mode 100644 src/pages/components/map-related/MapIndex.tsx diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index f7cc6883..50ed4a96 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -5,8 +5,9 @@ import { busIcon, busIconPath } from '../utils/BusIcon' import { BusToolTip } from './MapLayers/BusToolTip' import { t } from 'i18next' import '../../Map.scss' -import { MapIndex, MapProps } from './MapWithLocationsAndPath' +import { MapProps } from './MapWithLocationsAndPath' import { useRecenterOnDataChange } from './useRecenterOnDataChange' +import { MapIndex } from './MapIndex' export function MapContent({ positions, plannedRouteStops }: MapProps) { useRecenterOnDataChange({ positions, plannedRouteStops }) diff --git a/src/pages/components/map-related/MapIndex.tsx b/src/pages/components/map-related/MapIndex.tsx new file mode 100644 index 00000000..d5f7bd72 --- /dev/null +++ b/src/pages/components/map-related/MapIndex.tsx @@ -0,0 +1,23 @@ +export function MapIndex({ + lineColor, + imgSrc, + title, +}: { + lineColor: string + imgSrc: string + title: string +}) { + return ( +
+
+

+

+ {/* planned route stop icon */} +

+
+
+

{title}

+
+
+ ) +} diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index f820cc03..7f4d3272 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -1,10 +1,9 @@ -import { MapContainer, useMap } from 'react-leaflet' -import { LatLngTuple } from 'leaflet' +import { MapContainer } from 'react-leaflet' import { Point } from 'src/pages/timeBasedMap' import { MapContent } from './MapContent' import { VehicleLocation } from 'src/model/vehicleLocation' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useState } from 'react' import { Button } from 'antd' import { ExpandAltOutlined } from '@ant-design/icons' import { BusStop } from 'src/model/busStop' @@ -47,45 +46,21 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro ) } -export function MapIndex({ - lineColor, - imgSrc, - title, -}: { - lineColor: string - imgSrc: string - title: string -}) { - return ( -
-
-

-

- {/* planned route stop icon */} -

-
-
-

{title}

-
-
- ) -} - -export function RecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { - const map = useMap() +// export function RecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { +// const map = useMap() - useEffect(() => { - const positionsSum = positions.reduce( - (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], - [0, 0], - ) - const mean: LatLngTuple = [ - positionsSum[0] / positions.length || position.loc[0], - positionsSum[1] / positions.length || position.loc[1], - ] +// useEffect(() => { +// const positionsSum = positions.reduce( +// (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], +// [0, 0], +// ) +// const mean: LatLngTuple = [ +// positionsSum[0] / positions.length || position.loc[0], +// positionsSum[1] / positions.length || position.loc[1], +// ] - map.setView(mean, map.getZoom(), { animate: true }) - }, [positions, plannedRouteStops]) +// map.setView(mean, map.getZoom(), { animate: true }) +// }, [positions, plannedRouteStops]) - return null -} +// return null +// } diff --git a/src/pages/components/map-related/useRecenterOnDataChange.ts b/src/pages/components/map-related/useRecenterOnDataChange.ts index b3cf8c5b..f0a239ff 100644 --- a/src/pages/components/map-related/useRecenterOnDataChange.ts +++ b/src/pages/components/map-related/useRecenterOnDataChange.ts @@ -5,16 +5,23 @@ import { MapProps, position } from './MapWithLocationsAndPath' export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { const map = useMap() - + const positionsSum = positions.reduce( + (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], + [0, 0], + ) + const mean: LatLngTuple = [ + positionsSum[0] / positions.length || position.loc[0], + positionsSum[1] / positions.length || position.loc[1], + ] useEffect(() => { - const positionsSum = positions.reduce( - (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], - [0, 0], - ) - const mean: LatLngTuple = [ - positionsSum[0] / positions.length || position.loc[0], - positionsSum[1] / positions.length || position.loc[1], - ] + // const positionsSum = positions.reduce( + // (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], + // [0, 0], + // ) + // const mean: LatLngTuple = [ + // positionsSum[0] / positions.length || position.loc[0], + // positionsSum[1] / positions.length || position.loc[1], + // ] map.setView(mean, map.getZoom(), { animate: true }) }, [positions, plannedRouteStops]) From 1d441e1ec079fb4aae5a2a1074b59224b4aa4092 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Sun, 12 May 2024 14:32:05 +0300 Subject: [PATCH 05/14] create map-types file --- .../components/map-related/MapContent.tsx | 2 +- .../map-related/MapWithLocationsAndPath.tsx | 35 +------------------ src/pages/components/map-related/map-types.ts | 15 ++++++++ .../map-related/useRecenterOnDataChange.ts | 13 ++----- 4 files changed, 20 insertions(+), 45 deletions(-) create mode 100644 src/pages/components/map-related/map-types.ts diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index 50ed4a96..04bf9397 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -5,7 +5,7 @@ import { busIcon, busIconPath } from '../utils/BusIcon' import { BusToolTip } from './MapLayers/BusToolTip' import { t } from 'i18next' import '../../Map.scss' -import { MapProps } from './MapWithLocationsAndPath' +import { MapProps } from './map-types' import { useRecenterOnDataChange } from './useRecenterOnDataChange' import { MapIndex } from './MapIndex' diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index 7f4d3272..f2863f82 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -1,12 +1,10 @@ import { MapContainer } from 'react-leaflet' import { Point } from 'src/pages/timeBasedMap' import { MapContent } from './MapContent' - -import { VehicleLocation } from 'src/model/vehicleLocation' +import { MapProps } from './map-types' import { useCallback, useState } from 'react' import { Button } from 'antd' import { ExpandAltOutlined } from '@ant-design/icons' -import { BusStop } from 'src/model/busStop' import '../../Map.scss' export const position: Point = { @@ -14,18 +12,6 @@ export const position: Point = { color: 0, } -export interface Path { - locations: VehicleLocation[] - lineRef: number - operator: number - vehicleRef: number -} - -export interface MapProps { - positions: Point[] - plannedRouteStops: BusStop[] -} - export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapProps) { const [isExpanded, setIsExpanded] = useState(false) const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), []) @@ -45,22 +31,3 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro ) } - -// export function RecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { -// const map = useMap() - -// useEffect(() => { -// const positionsSum = positions.reduce( -// (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], -// [0, 0], -// ) -// const mean: LatLngTuple = [ -// positionsSum[0] / positions.length || position.loc[0], -// positionsSum[1] / positions.length || position.loc[1], -// ] - -// map.setView(mean, map.getZoom(), { animate: true }) -// }, [positions, plannedRouteStops]) - -// return null -// } diff --git a/src/pages/components/map-related/map-types.ts b/src/pages/components/map-related/map-types.ts new file mode 100644 index 00000000..9ac8e679 --- /dev/null +++ b/src/pages/components/map-related/map-types.ts @@ -0,0 +1,15 @@ +import { Point } from 'src/pages/timeBasedMap' +import { BusStop } from 'src/model/busStop' +import { VehicleLocation } from 'src/model/vehicleLocation' + +export interface Path { + locations: VehicleLocation[] + lineRef: number + operator: number + vehicleRef: number +} + +export interface MapProps { + positions: Point[] + plannedRouteStops: BusStop[] +} diff --git a/src/pages/components/map-related/useRecenterOnDataChange.ts b/src/pages/components/map-related/useRecenterOnDataChange.ts index f0a239ff..23e32069 100644 --- a/src/pages/components/map-related/useRecenterOnDataChange.ts +++ b/src/pages/components/map-related/useRecenterOnDataChange.ts @@ -1,7 +1,8 @@ import { useEffect } from 'react' import { LatLngTuple } from 'leaflet' import { useMap } from 'react-leaflet' -import { MapProps, position } from './MapWithLocationsAndPath' +import { position } from './MapWithLocationsAndPath' +import { MapProps } from './map-types' export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { const map = useMap() @@ -13,16 +14,8 @@ export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapPro positionsSum[0] / positions.length || position.loc[0], positionsSum[1] / positions.length || position.loc[1], ] + console.log('mean: ', mean) useEffect(() => { - // const positionsSum = positions.reduce( - // (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], - // [0, 0], - // ) - // const mean: LatLngTuple = [ - // positionsSum[0] / positions.length || position.loc[0], - // positionsSum[1] / positions.length || position.loc[1], - // ] - map.setView(mean, map.getZoom(), { animate: true }) }, [positions, plannedRouteStops]) } From 5cda4c116e30197ceafa78c175f43f4b2a209102 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Wed, 15 May 2024 11:02:06 +0300 Subject: [PATCH 06/14] delete circular dependency --- src/pages/components/map-related/MapContent.tsx | 4 ++-- .../components/map-related/MapWithLocationsAndPath.tsx | 8 ++++++-- src/pages/components/map-related/map-types.ts | 1 + .../components/map-related/useRecenterOnDataChange.ts | 7 ++++--- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index 04bf9397..f1726ead 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -9,8 +9,8 @@ import { MapProps } from './map-types' import { useRecenterOnDataChange } from './useRecenterOnDataChange' import { MapIndex } from './MapIndex' -export function MapContent({ positions, plannedRouteStops }: MapProps) { - useRecenterOnDataChange({ positions, plannedRouteStops }) +export function MapContent({ positions, plannedRouteStops, position }: MapProps) { + useRecenterOnDataChange({ positions, plannedRouteStops, position }) const agencyList = useAgencyList() diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index f2863f82..d2cd80de 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -7,7 +7,7 @@ import { Button } from 'antd' import { ExpandAltOutlined } from '@ant-design/icons' import '../../Map.scss' -export const position: Point = { +const position: Point = { loc: [32.3057988, 34.85478613], // arbitrary default value... Netanya - best city to live & die in color: 0, } @@ -26,7 +26,11 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro icon={} /> - + ) diff --git a/src/pages/components/map-related/map-types.ts b/src/pages/components/map-related/map-types.ts index 9ac8e679..1f467c22 100644 --- a/src/pages/components/map-related/map-types.ts +++ b/src/pages/components/map-related/map-types.ts @@ -12,4 +12,5 @@ export interface Path { export interface MapProps { positions: Point[] plannedRouteStops: BusStop[] + position: Point } diff --git a/src/pages/components/map-related/useRecenterOnDataChange.ts b/src/pages/components/map-related/useRecenterOnDataChange.ts index 23e32069..4e1e3a40 100644 --- a/src/pages/components/map-related/useRecenterOnDataChange.ts +++ b/src/pages/components/map-related/useRecenterOnDataChange.ts @@ -1,10 +1,9 @@ import { useEffect } from 'react' import { LatLngTuple } from 'leaflet' import { useMap } from 'react-leaflet' -import { position } from './MapWithLocationsAndPath' import { MapProps } from './map-types' -export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { +export function useRecenterOnDataChange({ positions, plannedRouteStops, position }: MapProps) { const map = useMap() const positionsSum = positions.reduce( (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], @@ -16,6 +15,8 @@ export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapPro ] console.log('mean: ', mean) useEffect(() => { - map.setView(mean, map.getZoom(), { animate: true }) + if (mean[0] || mean[1]) { + map.setView(mean, map.getZoom(), { animate: true }) + } }, [positions, plannedRouteStops]) } From 93fcfabe5ad920fc60f8df03ba2b34ebedda0c10 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Thu, 16 May 2024 22:53:10 +0300 Subject: [PATCH 07/14] . --- src/pages/components/map-related/MapContent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index f1726ead..a719bbd1 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -9,6 +9,7 @@ import { MapProps } from './map-types' import { useRecenterOnDataChange } from './useRecenterOnDataChange' import { MapIndex } from './MapIndex' + export function MapContent({ positions, plannedRouteStops, position }: MapProps) { useRecenterOnDataChange({ positions, plannedRouteStops, position }) From 1874267e49b2bc8342bfd31aec13847a7af8f8e9 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Thu, 16 May 2024 22:55:14 +0300 Subject: [PATCH 08/14] . --- src/pages/components/map-related/MapContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index a719bbd1..f1726ead 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -9,7 +9,6 @@ import { MapProps } from './map-types' import { useRecenterOnDataChange } from './useRecenterOnDataChange' import { MapIndex } from './MapIndex' - export function MapContent({ positions, plannedRouteStops, position }: MapProps) { useRecenterOnDataChange({ positions, plannedRouteStops, position }) From a7abd6eaaa2eff35af9f63913859c926683cfe23 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Thu, 16 May 2024 23:03:19 +0300 Subject: [PATCH 09/14] . --- src/pages/components/map-related/MapContent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index f1726ead..a9821545 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -92,3 +92,4 @@ export function MapContent({ positions, plannedRouteStops, position }: MapProps) ) } + From 69b22504e0101c2a2928af5002619d2a1eaaad9e Mon Sep 17 00:00:00 2001 From: menachem95 Date: Thu, 16 May 2024 23:05:43 +0300 Subject: [PATCH 10/14] . --- src/pages/components/map-related/MapContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index a9821545..f1726ead 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -92,4 +92,3 @@ export function MapContent({ positions, plannedRouteStops, position }: MapProps) ) } - From 6057c37e08254a6b87667a68817869362c955be8 Mon Sep 17 00:00:00 2001 From: menachem95 Date: Sun, 19 May 2024 20:42:14 +0300 Subject: [PATCH 11/14] test --- src/pages/components/map-related/MapContent.tsx | 4 ++-- .../components/map-related/MapWithLocationsAndPath.tsx | 6 +----- src/pages/components/map-related/map-types.ts | 1 - .../components/map-related/useRecenterOnDataChange.ts | 7 ++----- 4 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/pages/components/map-related/MapContent.tsx b/src/pages/components/map-related/MapContent.tsx index f1726ead..04bf9397 100644 --- a/src/pages/components/map-related/MapContent.tsx +++ b/src/pages/components/map-related/MapContent.tsx @@ -9,8 +9,8 @@ import { MapProps } from './map-types' import { useRecenterOnDataChange } from './useRecenterOnDataChange' import { MapIndex } from './MapIndex' -export function MapContent({ positions, plannedRouteStops, position }: MapProps) { - useRecenterOnDataChange({ positions, plannedRouteStops, position }) +export function MapContent({ positions, plannedRouteStops }: MapProps) { + useRecenterOnDataChange({ positions, plannedRouteStops }) const agencyList = useAgencyList() diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index d2cd80de..6e8b3f56 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -26,11 +26,7 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro icon={} /> - + ) diff --git a/src/pages/components/map-related/map-types.ts b/src/pages/components/map-related/map-types.ts index 1f467c22..9ac8e679 100644 --- a/src/pages/components/map-related/map-types.ts +++ b/src/pages/components/map-related/map-types.ts @@ -12,5 +12,4 @@ export interface Path { export interface MapProps { positions: Point[] plannedRouteStops: BusStop[] - position: Point } diff --git a/src/pages/components/map-related/useRecenterOnDataChange.ts b/src/pages/components/map-related/useRecenterOnDataChange.ts index 4e1e3a40..bdaf9211 100644 --- a/src/pages/components/map-related/useRecenterOnDataChange.ts +++ b/src/pages/components/map-related/useRecenterOnDataChange.ts @@ -3,16 +3,13 @@ import { LatLngTuple } from 'leaflet' import { useMap } from 'react-leaflet' import { MapProps } from './map-types' -export function useRecenterOnDataChange({ positions, plannedRouteStops, position }: MapProps) { +export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { const map = useMap() const positionsSum = positions.reduce( (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], [0, 0], ) - const mean: LatLngTuple = [ - positionsSum[0] / positions.length || position.loc[0], - positionsSum[1] / positions.length || position.loc[1], - ] + const mean: LatLngTuple = [positionsSum[0] / positions.length, positionsSum[1] / positions.length] console.log('mean: ', mean) useEffect(() => { if (mean[0] || mean[1]) { From d7de5723a96c4ab4b44047ab5bb8f78e7a7985cb Mon Sep 17 00:00:00 2001 From: menachem95 Date: Mon, 20 May 2024 14:12:22 +0300 Subject: [PATCH 12/14] Change dependency on useEffect in useRecenterOnDataChange hook --- src/pages/components/map-related/useRecenterOnDataChange.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/components/map-related/useRecenterOnDataChange.ts b/src/pages/components/map-related/useRecenterOnDataChange.ts index bdaf9211..f6ca9579 100644 --- a/src/pages/components/map-related/useRecenterOnDataChange.ts +++ b/src/pages/components/map-related/useRecenterOnDataChange.ts @@ -3,7 +3,7 @@ import { LatLngTuple } from 'leaflet' import { useMap } from 'react-leaflet' import { MapProps } from './map-types' -export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapProps) { +export function useRecenterOnDataChange({ positions }: MapProps) { const map = useMap() const positionsSum = positions.reduce( (acc, { loc }) => [acc[0] + loc[0], acc[1] + loc[1]], @@ -15,5 +15,5 @@ export function useRecenterOnDataChange({ positions, plannedRouteStops }: MapPro if (mean[0] || mean[1]) { map.setView(mean, map.getZoom(), { animate: true }) } - }, [positions, plannedRouteStops]) + }, [mean]) } From 2173a6b3f7f91cce4a6156601d051f7dc8d538ed Mon Sep 17 00:00:00 2001 From: menachem95 Date: Tue, 28 May 2024 10:22:30 +0300 Subject: [PATCH 13/14] test --- src/pages/components/map-related/MapWithLocationsAndPath.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index 6e8b3f56..913c795e 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -12,6 +12,7 @@ const position: Point = { color: 0, } + export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapProps) { const [isExpanded, setIsExpanded] = useState(false) const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), []) From a360e02b231c03fed0fe8dd858c80204d4aca19d Mon Sep 17 00:00:00 2001 From: menachem95 Date: Tue, 28 May 2024 10:27:08 +0300 Subject: [PATCH 14/14] . --- .../components/map-related/MapWithLocationsAndPath.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/pages/components/map-related/MapWithLocationsAndPath.tsx b/src/pages/components/map-related/MapWithLocationsAndPath.tsx index d2afcc02..e8001b0e 100644 --- a/src/pages/components/map-related/MapWithLocationsAndPath.tsx +++ b/src/pages/components/map-related/MapWithLocationsAndPath.tsx @@ -1,24 +1,18 @@ import { MapContainer } from 'react-leaflet' import { Point } from 'src/pages/timeBasedMap' -import { MapContent } from './MapContent' import { MapProps } from './map-types' import { useCallback, useState } from 'react' import { Button } from 'antd' import { ExpandAltOutlined } from '@ant-design/icons' import '../../Map.scss' -import { useTheme } from 'src/layout/ThemeContext' -import cn from 'classnames' +import { MapContent } from './MapContent' const position: Point = { loc: [32.3057988, 34.85478613], // arbitrary default value... Netanya - best city to live & die in color: 0, } - export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapProps) { - - const { isDarkTheme } = useTheme() - const [isExpanded, setIsExpanded] = useState(false) const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), []) @@ -32,6 +26,7 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro icon={} /> + )