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
 				});
 			}
 		},

src/components/projectFeed.vue

@@ -215,8 +215,10 @@ export default {
 				<ProjectPost :options="{type: 'loading', headerless: true}" />
 			</div>
 		</Simplebar>
-		<div v-if="project" :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
-			<SpotIcon :icon="isOpen?'next':'post'" />
+		<div v-if="project" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
+			<div class="panel-control-elem panel-control-icon">
+				<SpotIcon :icon="isOpen?'next':'post'" />
+			</div>
 		</div>
 	</div>
 </template>

src/components/projectSettings.vue

@@ -134,17 +134,21 @@ export default {
 				<span>&nbsp;{{ lang.get('credits.license') }}</span>
 			</div>
 		</div>
-		<div :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
-			<SpotIcon :icon="isOpen?'prev':'menu'" />
+		<div :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
+			<div class="panel-control-elem panel-control-icon" @click="toggle">
+				<SpotIcon :icon="isOpen?'prev':'menu'" />
+			</div>
 		</div>
 		<div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
-			<div v-for="(color, hikeType) in hikes.colors" class="track">
-				<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
-				<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
+			<div class="panel-control-elem">
+				<div v-for="(color, hikeType) in hikes.colors" class="track">
+					<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
+					<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
+				</div>
 			</div>
 		</div>
 		<div v-if="project?.id" id="title" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
-			<span>{{ project.name }}</span>
+			<div class="panel-control-elem"><span>{{ project.name }}</span></div>
 		</div>
 	</div>
 </template>