feat(map): ✨ Possibility to zoom to claim with query parameters

BuildTheEarth · Oct 17, 2023 · 0af77c1 · 0af77c1
1 parent 8778a01
commit 0af77c1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/src/components/map/ClaimDrawer.tsx b/src/components/map/ClaimDrawer.tsx
@@ -1,22 +1,11 @@
 import { Alert, Avatar, Button, Center, Drawer, Flex, Group, Loader, ScrollArea, Text } from '@mantine/core';
-import {
-	Icon123,
-	IconBuilding,
-	IconCheck,
-	IconCopy,
-	IconCrane,
-	IconDotsCircleHorizontal,
-	IconPencil,
-	IconPin,
-	IconRuler2,
-	IconUser,
-	IconUsersGroup,
-} from '@tabler/icons-react';
+import { Icon123, IconBuilding, IconCheck, IconCopy, IconCrane, IconDotsCircleHorizontal, IconPencil, IconPin, IconRuler2, IconUser, IconUsersGroup, IconZoomIn } from '@tabler/icons-react';
 
 import { StatsGrid } from '../Stats';
 import classes from '../styles/components/Card.module.css';
 import { domainToASCII } from 'url';
 import { getAreaOfPolygon } from 'geolib';
+import mapboxgl from 'mapbox-gl';
 import { showNotification } from '@mantine/notifications';
 import { useClipboard } from '@mantine/hooks';
 import useSWR from 'swr';
@@ -26,6 +15,7 @@ interface ClaimDrawerProps {
 	setOpen: (bool: boolean) => void;
 	open: boolean;
 	id: string | null;
+	map?: mapboxgl.Map;
 }
 
 export function ClaimDrawer(props: ClaimDrawerProps) {
@@ -36,15 +26,7 @@ export function ClaimDrawer(props: ClaimDrawerProps) {
 	if (props.id == null) return <></>;
 
 	return (
-		<Drawer
-			opened={props.open}
-			onClose={() => props.setOpen(false)}
-			title={`Claim Details`}
-			size="md"
-			overlayProps={{ blur: 3 }}
-			lockScroll
-			scrollAreaComponent={ScrollArea.Autosize}
-		>
+		<Drawer opened={props.open} onClose={() => props.setOpen(false)} title={`Claim Details`} size="md" overlayProps={{ blur: 3 }} lockScroll scrollAreaComponent={ScrollArea.Autosize}>
 			{isValidating || !data ? (
 				<Center h="100%" w="100%">
 					<Loader mt={'xl'} />
@@ -104,12 +86,22 @@ export function ClaimDrawer(props: ClaimDrawerProps) {
 						>
 							Copy Coordinates
 						</Button>
-						{data.owner?.id == user?.id && (
-							<Button component="a" variant="outline" leftSection={<IconPencil />} href={`/me/claims/${props.id}`}>
-								Edit Claim
+						{props.map && (
+							<Button
+								leftSection={<IconZoomIn />}
+								onClick={() => {
+									props.map?.flyTo({ center: data.center.split(', ').map(Number), zoom: 15 });
+								}}
+							>
+								Zoom to fit
 							</Button>
 						)}
 					</Group>
+					{data.owner?.id == user?.id && (
+						<Button component="a" variant="outline" leftSection={<IconPencil />} href={`/me/claims/${props.id}`} mt="md" fullWidth>
+							Edit Claim
+						</Button>
+					)}
 				</>
 			)}
 		</Drawer>

diff --git a/src/pages/map.tsx b/src/pages/map.tsx
@@ -1,23 +1,35 @@
 import Map, { mapClickEvent, mapCopyCoordinates, mapCursorHover } from '../components/map/Map';
+import { useEffect, useState } from 'react';
 
 import { ClaimDrawer } from '../components/map/ClaimDrawer';
 import { NextPage } from 'next';
 import Page from '../components/Page';
+import mapboxgl from 'mapbox-gl';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useClipboard } from '@mantine/hooks';
-import { useState } from 'react';
+import { useRouter } from 'next/router';
 
 const MapPage: NextPage = () => {
 	const clipboard = useClipboard();
 	const [opened, setOpened] = useState(false);
-	const [selected, setSelected] = useState(null);
+	const [selected, setSelected] = useState<null | string>(null);
+	const [map, setMap] = useState<mapboxgl.Map>();
+	const router = useRouter();
+
+	useEffect(() => {
+		if (/^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi.test(router.query.claim as string)) {
+			setSelected(router.query.claim as string);
+			setOpened(true);
+		}
+	}, [router.query.claim]);
 	return (
 		<Page fullWidth>
-			<ClaimDrawer open={opened} setOpen={setOpened} id={selected} />
+			<ClaimDrawer open={opened} setOpen={setOpened} id={selected} map={map} />
 			<div style={{ height: '96vh', width: '100%' }}>
 				<Map
 					src={`${process.env.NEXT_PUBLIC_API_URL}/claims/geojson`}
 					onMapLoaded={(map) => {
+						setMap(map);
 						mapCopyCoordinates(map, clipboard);
 						mapCursorHover(map, 'claims');
 						mapClickEvent(map, 'claims', (f) => {