feat(map): allow to zoom and move map

hello-nrfcloud · Jun 30, 2023 · 7738680 · 7738680
1 parent 8da2287
commit 7738680
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 19 deletions.
diff --git a/src/components/ConnectDK.tsx b/src/components/ConnectDK.tsx
@@ -33,6 +33,10 @@ export const ConnectDK = () => {
 					</li>
 					<li>
 						<WaitingForData />
+						<br />
+						<small class="text-muted">
+							Your device should send data to the cloud every 60 seconds.
+						</small>
 					</li>
 					<li>
 						<HelpCircle />

diff --git a/src/map/Map.css b/src/map/Map.css
@@ -23,3 +23,52 @@ div.noLocation {
   align-items: center;
   justify-content: center;
 }
+
+.mapZoom {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-nordic-light-grey);
+  border: 1px solid var(--color-nordic-middle-grey);
+  border-radius: 5px;
+}
+
+.mapZoom button {
+  border: 0;
+  padding: 0.5rem;
+  background-color: transparent;
+}
+
+.mapZoom button + button {
+  border-top: 1px solid var(--color-nordic-middle-grey);
+}
+
+.dragCatcher {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.dragCatcher span {
+  color: var(--color-nordic-light-grey);
+  font-size: 125%;
+  background-color: #00000080;
+  padding: 1rem;
+  border-radius: 1rem;
+  margin-bottom: 4rem;
+}
+
+.dragCatcher button {
+  border: 0;
+  background-color: transparent;
+  color: var(--color-nordic-light-grey);
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/map/Map.tsx b/src/map/Map.tsx
@@ -1,4 +1,10 @@
-import { MapPinOff } from 'lucide-preact'
+import {
+	LockIcon,
+	MapPinOff,
+	MinusIcon,
+	PlusIcon,
+	UnlockIcon,
+} from 'lucide-preact'
 // Needed for SSR build, named exports don't work
 import { CountryFlag } from '#components/CountryFlag.js'
 import { LoadingIndicator } from '#components/ValueLoading.js'
@@ -49,24 +55,26 @@ export const Map = () => {
 	useEffect(() => {
 		if (containerRef.current === null) return
 		onParameters(({ region, mapName }) => {
-			setMap(
-				new maplibregl.Map({
-					container: 'map',
-					style: mapStyle({
-						region,
-						mapName,
-					}),
-					center: [10.437581513483195, 63.42148461054351],
-					zoom: 12,
-					transformRequest: transformRequest(credentials, region),
-					refreshExpiredTiles: false,
-					trackResize: true,
-					keyboard: false,
-					renderWorldCopies: false,
-					// Static map, no mouse interaction at all
-					interactive: false,
+			const map = new maplibregl.Map({
+				container: 'map',
+				style: mapStyle({
+					region,
+					mapName,
 				}),
-			)
+				center: [10.437581513483195, 63.42148461054351],
+				zoom: 12,
+				transformRequest: transformRequest(credentials, region),
+				refreshExpiredTiles: false,
+				trackResize: true,
+				keyboard: false,
+				renderWorldCopies: false,
+			})
+
+			map.dragRotate.disable()
+			map.scrollZoom.disable()
+			map.dragPan.disable()
+
+			setMap(map)
 		})
 
 		return () => {
@@ -87,7 +95,7 @@ export const Map = () => {
 		const centerSource = map.getSource(centerSourceId)
 		map.flyTo({
 			center: location,
-			zoom: 12,
+			zoom: map.getZoom(),
 		})
 
 		if (centerSource === undefined) {
@@ -178,6 +186,7 @@ export const Map = () => {
 						location
 					</div>
 				)}
+				{location !== undefined && map !== undefined && <MapZoom map={map} />}
 			</section>
 			<div
 				style={{
@@ -262,3 +271,62 @@ const NetworkLocation = () => {
 		</>
 	)
 }
+
+const MapZoom = ({ map }: { map: maplibregl.Map }) => {
+	const [locked, setLocked] = useState<boolean>(true)
+
+	useEffect(() => {
+		if (locked) {
+			map.dragPan.disable()
+		} else {
+			map.dragPan.enable()
+		}
+	}, [locked])
+
+	return (
+		<>
+			{locked && (
+				<div class="dragCatcher">
+					<span>
+						Click the{' '}
+						<button
+							type="button"
+							onClick={() => {
+								setLocked(false)
+							}}
+						>
+							<UnlockIcon />
+						</button>{' '}
+						to enable the map.
+					</span>
+				</div>
+			)}
+			<div class="mapZoom">
+				<button
+					type="button"
+					onClick={() => {
+						map.setZoom(map.getZoom() + 1)
+					}}
+				>
+					<PlusIcon />
+				</button>
+				<button
+					type="button"
+					onClick={() => {
+						map.setZoom(map.getZoom() - 1)
+					}}
+				>
+					<MinusIcon />
+				</button>
+				<button
+					type="button"
+					onClick={() => {
+						setLocked((locked) => !locked)
+					}}
+				>
+					{locked ? <UnlockIcon /> : <LockIcon />}
+				</button>
+			</div>
+		</>
+	)
+}