Make control buttons bigger, add pitch

src/components/project.vue

@@ -1,6 +1,6 @@
 <script>
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Map, Marker, LngLatBounds, LngLat, Popup, ScaleControl } from 'maplibre-gl';
+import { Map, Marker, LngLatBounds, LngLat, Popup, ScaleControl, NavigationControl } from 'maplibre-gl';
 import { createApp } from 'vue';
 
 import Lightbox from '@scripts/lightbox';
@@ -11,6 +11,28 @@ import ProjectPopup from '@components/projectPopup';
 import ProjectFeed from '@components/projectFeed';
 import ProjectSettings from '@components/projectSettings';
 
+class GroupedScaleControl {
+	constructor(options) {
+		this.scale = new ScaleControl(options);
+	}
+
+	onAdd(map) {
+		this.container = document.createElement('div');
+		this.container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+
+		const scaleElement = this.scale.onAdd(map);
+		scaleElement.classList.remove('maplibregl-ctrl');
+		this.container.appendChild(scaleElement);
+
+		return this.container;
+	}
+
+	onRemove() {
+		this.scale.onRemove();
+		this.container.remove();
+	}
+}
+
 export default {
 	components: {
 		SpotIcon,
@@ -222,7 +244,8 @@ export default {
 				},
 				attributionControl: false
 			});
-			this.map.addControl(new ScaleControl({unit: 'metric'}), 'bottom-right');
+			this.map.addControl(new GroupedScaleControl({unit: 'metric'}), 'bottom-right');
+			this.map.addControl(new NavigationControl({showZoom: false, visualizePitch: true}), 'bottom-right');
 		},
 		removeMap() {
 			this.removeMapContent();
@@ -453,21 +476,24 @@ export default {
 				
 				this.map.jumpTo({
 					center: new LngLat(oDefaultProject.longitude, oDefaultProject.latitude),
-					zoom: Math.log2(iWorldSize / this.map.transform.tileSize)
+					zoom: Math.log2(iWorldSize / this.map.transform.tileSize),
+					pitch: 0
 				});
 			}
 			//Direct link to marker
 			else if(oHashMarker) {
 				this.map.jumpTo({
 					center: new LngLat(oHashMarker.longitude, oHashMarker.latitude),
-					zoom: 13
+					zoom: 13,
+					pitch: 45
 				});
 			}
 			//Blog Mode: Fit to last marker
 			else if(this.project.mode == this.consts.modes.blog && oLastMarker) {
 				this.map.jumpTo({
 					center: new LngLat(oLastMarker.longitude, oLastMarker.latitude),
-					zoom: 15
+					zoom: 15,
+					pitch: 45
 				});
 			}
 			//Pre Mode, Histo Mode, Blog Mode without markers or missing direct link marker: Fit to track
@@ -482,7 +508,8 @@ export default {
 				this.map.fitBounds(oBounds, {
 					padding: this.mapPadding,
 					animate: false,
-					maxZoom: 15
+					maxZoom: 15,
+					pitch: 45
 				});
 			}
 		},