From 41a181f9bfe30e9fe41b142acd585b81dc1dd775 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 8 May 2024 12:00:04 +0200
Subject: [PATCH] toggle 3d button

---
 website/src/lib/components/Map.svelte  |  2 +-
 website/src/lib/components/Menu.svelte | 40 ++++++++++++++++++++++++--
 website/src/locales/en.json            |  4 ++-
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte
index 41b5652c..e5589262 100644
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -99,7 +99,7 @@
 		newMap.addControl(scaleControl);
 
 		newMap.on('style.load', toggleTerrain);
-		newMap.on('pitchstart', toggleTerrain);
+		newMap.on('pitch', toggleTerrain);
 	});
 
 	$: if ($map) {
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index da782e3b..81d9b54c 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -3,9 +3,23 @@
 	import { Button } from '$lib/components/ui/button';
 	import Logo from './Logo.svelte';
 	import Shortcut from './Shortcut.svelte';
-	import { Plus, Copy, Download, Undo2, Redo2, Trash2, Upload, Cloud, Heart } from 'lucide-svelte';
+	import {
+		Plus,
+		Copy,
+		Download,
+		Undo2,
+		Redo2,
+		Trash2,
+		Upload,
+		Cloud,
+		Heart,
+		Map,
+		Layers2,
+		Box
+	} from 'lucide-svelte';
 
 	import {
+		map,
 		selectedFiles,
 		exportAllFiles,
 		exportSelectedFiles,
@@ -55,6 +69,16 @@
 			[$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
 		}
 	}
+
+	function toggle3D() {
+		if ($map) {
+			if ($map.getPitch() === 0) {
+				$map.easeTo({ pitch: 70 });
+			} else {
+				$map.easeTo({ pitch: 0 });
+			}
+		}
+	}
 </script>
 
 <div class="absolute top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
@@ -143,10 +167,20 @@
 				<Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger>
 				<Menubar.Content class="border-none">
 					<Menubar.Item on:click={switchBasemaps}
-						>{$_('menu.switch_basemap')}<Shortcut key="F1" /></Menubar.Item
+						><Map size="16" class="mr-1" />{$_('menu.switch_basemap')}<Shortcut
+							key="F1"
+						/></Menubar.Item
 					>
 					<Menubar.Item on:click={toggleOverlays}
-						>{$_('menu.toggle_overlays')}<Shortcut key="F2" /></Menubar.Item
+						><Layers2 size="16" class="mr-1" />{$_('menu.toggle_overlays')}<Shortcut
+							key="F2"
+						/></Menubar.Item
+					>
+					<Menubar.Separator />
+					<Menubar.Item on:click={toggle3D}
+						><Box size="16" class="mr-1" />{$_('menu.toggle_3d')}<Shortcut
+							key="{$_('menu.ctrl')}+{$_('menu.drag')}"
+						/></Menubar.Item
 					>
 				</Menubar.Content>
 			</Menubar.Menu>
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index 776f2edf..42a277be 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -17,6 +17,7 @@
         "view": "View",
         "switch_basemap": "Switch to previous basemap",
         "toggle_overlays": "Toggle overlays",
+        "toggle_3d": "Toggle 3D",
         "settings": "Settings",
         "distance_units": "Distance units",
         "metric": "Metric",
@@ -34,7 +35,8 @@
         "about": "About",
         "donate": "Donate",
         "ctrl": "Ctrl",
-        "click": "Click"
+        "click": "Click",
+        "drag": "Drag"
     },
     "toolbar": {
         "routing": {