Add setting to toggle maps

2 files changed, 39 insertions, 1 deletions

diff --git a/gui/src/renderer/components/Map.tsx b/gui/src/renderer/components/Map.tsx
index 3ccc794008..859328daba 100644
--- a/gui/src/renderer/components/Map.tsx
+++ b/gui/src/renderer/components/Map.tsx
@@ -26,6 +26,7 @@ type AnimationFrameCallback = (now: number, newParams?: MapParams) => void;
 
 export default function Map() {
   const connection = useSelector((state) => state.connection);
+  const animateMap = useSelector((state) => state.settings.guiSettings.animateMap);
 
   const hasLocationValue = hasLocation(connection);
   const location = useMemo<Coordinate | undefined>(() => {
@@ -35,7 +36,7 @@ export default function Map() {
   const connectionState = getConnectionState(hasLocationValue, connection.status.state);
 
   const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  const animate = !reduceMotion;
+  const animate = !reduceMotion && animateMap;
 
   return (
     <MapInner
diff --git a/gui/src/renderer/components/UserInterfaceSettings.tsx b/gui/src/renderer/components/UserInterfaceSettings.tsx
index 315c3ad06c..9c3415d90d 100644
--- a/gui/src/renderer/components/UserInterfaceSettings.tsx
+++ b/gui/src/renderer/components/UserInterfaceSettings.tsx
@@ -30,6 +30,12 @@ const StyledCellIcon = styled(Cell.UntintedIcon)({
   marginRight: '8px',
 });
 
+const StyledAnimateMapSettingsGroup = styled(Cell.Group)({
+  '@media (prefers-reduced-motion: reduce)': {
+    display: 'none',
+  },
+});
+
 export default function UserInterfaceSettings() {
   const { pop } = useHistory();
   const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
@@ -81,6 +87,10 @@ export default function UserInterfaceSettings() {
                     <StartMinimizedSetting />
                   </Cell.Group>
                 )}
+
+                <StyledAnimateMapSettingsGroup>
+                  <AnimateMapSetting />
+                </StyledAnimateMapSettingsGroup>
               </StyledContent>
             </NavigationScrollbars>
           </NavigationContainer>
@@ -212,6 +222,33 @@ function StartMinimizedSetting() {
   );
 }
 
+function AnimateMapSetting() {
+  const animateMap = useSelector((state) => state.settings.guiSettings.animateMap);
+  const { setAnimateMap } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('user-interface-settings-view', 'Animate map')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={animateMap} onChange={setAnimateMap} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {messages.pgettext('user-interface-settings-view', 'Animate map movements.')}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
+
 function LanguageButton() {
   const history = useHistory();
   const { getPreferredLocaleDisplayName } = useAppContext();