From b9364014d93d76a9d152625f61ca8239cba1e027 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Mon, 3 Jan 2022 00:47:21 +1100
Subject: [PATCH] Persist bearing & pitch

---
 src/components/Map/index.tsx | 10 ++++++++++
 src/core/slices/mapSlice.ts  | 12 ++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
index 6f5a0d88..0f823d8e 100644
--- a/src/components/Map/index.tsx
+++ b/src/components/Map/index.tsx
@@ -8,10 +8,12 @@ import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
 import { useMapbox } from '@app/hooks/mapbox';
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import {
+  setBearing,
   setExaggeration,
   setHillShade,
   setLatLng,
   setMapStyle,
+  setPitch,
   setZoom,
 } from '@core/slices/mapSlice';
 import { Card, IconButton } from '@meshtastic/components';
@@ -32,6 +34,8 @@ export const Map = (): JSX.Element => {
   const map = useMapbox(mapRef, mapState.accessToken, {
     center: mapState.latLng,
     zoom: mapState.zoom,
+    bearing: mapState.bearing,
+    pitch: mapState.pitch,
     style: mapState.style.url,
   });
 
@@ -117,6 +121,12 @@ export const Map = (): JSX.Element => {
     map?.on('zoomend', (e) => {
       dispatch(setZoom(e.target.getZoom()));
     });
+    map?.on('rotate', (e) => {
+      dispatch(setBearing(e.target.getBearing()));
+    });
+    map?.on('pitch', (e) => {
+      dispatch(setPitch(e.target.getPitch()));
+    });
   }, [dispatch, map, updateNodes, mapState.exaggeration]);
 
   React.useEffect(() => {
diff --git a/src/core/slices/mapSlice.ts b/src/core/slices/mapSlice.ts
index 8f28df5a..4abac745 100644
--- a/src/core/slices/mapSlice.ts
+++ b/src/core/slices/mapSlice.ts
@@ -8,6 +8,8 @@ import { createSlice } from '@reduxjs/toolkit';
 interface MapState {
   latLng: mapboxgl.LngLat;
   zoom: number;
+  bearing: number;
+  pitch: number;
   accessToken: string;
   style: MapStyle;
   hillShade: boolean;
@@ -17,6 +19,8 @@ interface MapState {
 const initialState: MapState = {
   latLng: new mapboxgl.LngLat(-77.0305, 38.8868),
   zoom: 9,
+  bearing: 0,
+  pitch: 0,
   accessToken:
     'pk.eyJ1Ijoic2FjaGF3IiwiYSI6ImNrNW9meXozZjBsdW0zbHBjM2FnNnV6cmsifQ.3E4n8eFGD9ZOFo-XDVeZnQ',
   style:
@@ -37,6 +41,12 @@ export const mapSlice = createSlice({
     setZoom: (state, action: PayloadAction<number>) => {
       state.zoom = action.payload;
     },
+    setBearing: (state, action: PayloadAction<number>) => {
+      state.bearing = action.payload;
+    },
+    setPitch: (state, action: PayloadAction<number>) => {
+      state.pitch = action.payload;
+    },
     setMapStyle(state, action: PayloadAction<MapStyle>) {
       state.style = action.payload;
     },
@@ -52,6 +62,8 @@ export const mapSlice = createSlice({
 export const {
   setLatLng,
   setZoom,
+  setBearing,
+  setPitch,
   setMapStyle,
   setHillShade,
   setExaggeration,