diff --git a/package.json b/package.json
index 38c72ee65..f68f2af8e 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
"@mapbox/geojson-area": "0.2.2",
"@mapbox/geojson-rewind": "0.5.1",
"@types/jest": "27.0.2",
- "@types/leaflet": "1.7.5",
+ "@types/leaflet": "1.7.6",
"@types/leaflet.markercluster": "1.4.5",
"@types/lodash": "4.14.175",
"@types/node": "16.10.9",
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index c18e9c667..fa357286c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -11,7 +11,7 @@ import Logo from '../Logo';
import MainMenu from './MainMenu';
-const Header = ({ mapCenter, children }) => {
+const Header = ({ children }) => {
const [isMenuVisible, setIsMenuVisible] = useState(false);
return (
@@ -48,17 +48,14 @@ const Header = ({ mapCenter, children }) => {
- setIsMenuVisible(false)}
- >
+ setIsMenuVisible(false)}>
{children}
- {children}
+ {children}
diff --git a/src/components/Header/MainMenu.tsx b/src/components/Header/MainMenu.tsx
index ae3a3637f..7e3eb1271 100644
--- a/src/components/Header/MainMenu.tsx
+++ b/src/components/Header/MainMenu.tsx
@@ -5,6 +5,7 @@ import Box from '../Box';
import Text from '../Text';
import { Media } from '../Media';
import { useUser } from '@auth0/nextjs-auth0';
+import { useMapState } from '../MapState';
const StyledNavLink = styled(Link)<
LinkProps & {
@@ -29,6 +30,7 @@ interface IMainMenu {
// Todo: Contact link
const MainMenu = ({ mapCenter, onMenuItemClick, children }: IMainMenu) => {
const { user } = useUser();
+ const [mapState] = useMapState();
return (
{
diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx
index 96dc71bd4..7562b3bdf 100644
--- a/src/components/LooMap/LooMap.tsx
+++ b/src/components/LooMap/LooMap.tsx
@@ -1,4 +1,10 @@
-import { MapContainer, TileLayer, ZoomControl } from 'react-leaflet';
+import { useMapState } from '../MapState';
+import {
+ MapContainer,
+ TileLayer,
+ ZoomControl,
+ useMapEvents,
+} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { css } from '@emotion/react';
import Box from '../Box';
@@ -6,6 +12,20 @@ import { Media } from '../Media';
import Markers from './Markers';
import CurrentLooMarker from './CurrentLooMarker';
import { Loo } from '../../api-client/graphql';
+
+const MapTracker = () => {
+ const [, setMapState] = useMapState();
+ const map = useMapEvents({
+ moveend: () => {
+ setMapState({ center: map.getCenter() });
+ },
+ zoomend: () => {
+ setMapState({ zoom: map.getZoom() });
+ },
+ });
+ return null;
+};
+
interface Props {
focus?: Loo;
center: { lat: number; lng: number };
@@ -13,7 +33,6 @@ interface Props {
minZoom?: number;
maxZoom?: number;
staticMap?: boolean;
- onViewportChanged?: () => void;
controlsOffset?: number;
showCrosshair?: boolean;
withAccessibilityOverlays?: boolean;
@@ -122,6 +141,7 @@ const LooMap: React.FC = ({
{/* */}
+
);
diff --git a/src/components/MapState.tsx b/src/components/MapState.tsx
index 45c9482f2..f18ec2a97 100644
--- a/src/components/MapState.tsx
+++ b/src/components/MapState.tsx
@@ -11,9 +11,6 @@ interface MapState {
lng: number;
};
zoom?: number;
- radius?: number;
- geolocation?: any;
- loos?: Loo[];
filters?: Filter[];
}
@@ -34,9 +31,6 @@ export const MapStateProvider = ({ children, loos = [] }) => {
const [state, setState] = React.useReducer(reducer, {
center: config.fallbackLocation,
zoom: 16,
- radius: 1000,
- geolocation: null,
- loos: loos,
filters: initialFilterState,
});
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 55a2ee089..e743c0399 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -20,14 +20,14 @@ interface IPageLayout {
children: React.ReactNode;
}
-const PageLayout = ({ mapCenter, layoutMode, children }: IPageLayout) => {
+const PageLayout = ({ layoutMode, children }: IPageLayout) => {
return (
{globalStyles}
-
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ef97cd28d..7d59ac0f9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -45,7 +45,6 @@ const HomePage = () => {
diff --git a/src/pages/loos/[id]/index.tsx b/src/pages/loos/[id]/index.tsx
index 0f54f436c..c77ee71af 100644
--- a/src/pages/loos/[id]/index.tsx
+++ b/src/pages/loos/[id]/index.tsx
@@ -57,7 +57,6 @@ const LooPage: PageFindLooByIdComp = (props) => {
diff --git a/src/pages/loos/add.tsx b/src/pages/loos/add.tsx
index b45b1d8fa..4bf408fdc 100644
--- a/src/pages/loos/add.tsx
+++ b/src/pages/loos/add.tsx
@@ -35,7 +35,7 @@ const LooMap = dynamic(() => import('../../components/LooMap'), {
ssr: false,
});
-const AddPage = (props) => {
+const AddPage = () => {
const { user, error, isLoading } = useUser();
const [mapState, setMapState] = useMapState();
@@ -48,8 +48,8 @@ const AddPage = (props) => {
if (lat && lng) {
setMapState({
center: {
- lat: parseFloat(lat),
- lng: parseFloat(lng),
+ lat: parseFloat(lat as string),
+ lng: parseFloat(lng as string),
},
});
}
@@ -102,7 +102,6 @@ const AddPage = (props) => {
showCrosshair
controlsOffset={20}
withAccessibilityOverlays={false}
- onViewportChanged={setMapState}
/>
diff --git a/yarn.lock b/yarn.lock
index c3c1e0fb1..e0afb6165 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2314,13 +2314,20 @@
dependencies:
"@types/leaflet" "*"
-"@types/leaflet@*", "@types/leaflet@1.7.5":
+"@types/leaflet@*":
version "1.7.5"
resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.5.tgz#7b2bcf1271fb7b8c305e3c468eaad65b6dbac472"
integrity sha512-+Myo00Yb5OuvUyrH+vUwn9DRgOaBJsF/etIMdMcNhWGBMo58Mo1cxLInvCd0ZpvItju/AeDYFB/Od2pLiHB3VA==
dependencies:
"@types/geojson" "*"
+"@types/leaflet@1.7.6":
+ version "1.7.6"
+ resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.6.tgz#6580f4babb648972c5af3abc3d66866753fa9311"
+ integrity sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==
+ dependencies:
+ "@types/geojson" "*"
+
"@types/lodash@4.14.175":
version "4.14.175"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"