Fix globe center

src/components/project.vue

@@ -5,7 +5,6 @@ import { createApp } from 'vue';
 import Simplebar from 'simplebar-vue';
 
 import Lightbox from '@scripts/lightbox';
-import { getOuterWidth } from '@scripts/common';
 
 import SpotIcon from '@components/spotIcon';
 import SpotIconStack from '@components/spotIconStack';
@@ -181,26 +180,27 @@ export default {
 			if(this.map) this.map.remove();
 			this.map = new Map({
 				container: 'map',
-				bounds: this.getInitialMapBounds(),
 				aroundCenter: true,
-				fitBoundsOptions: {
-					padding: {
-						top: 20,
-						bottom: 20,
-						left: 20,
-						right: 20 + (this.feedPanelOpen?(getOuterWidth(this.$refs.feed)):0)
-					},
-					animate: false,
-					maxZoom: 15
-				},
 				style: {
 					version: 8,
 					projection: {type: 'globe'},
+					sky: {
+						'sky-color': '#000000',
+						'horizon-color': '#ffffff',
+						'sky-horizon-blend': 0.35,
+						'atmosphere-blend': 0.8
+					},
 					sources: {},
 					layers: []
 				},
 				attributionControl: false
 			});
+			this.updateMapPadding();
+			this.map.fitBounds(this.getInitialMapBounds(), {
+				padding: 20,
+				animate: false,
+				maxZoom: 15
+			});
 			this.map.addControl(new ScaleControl({unit: 'metric'}), 'bottom-right');
 
 			//Get default basemap
@@ -299,7 +299,7 @@ export default {
 			const $Marker = document.createElement('div');
 			createApp(SpotIconStack, this.markerProps[oMarker.subtype]).mount($Marker);
 
-			new Marker({element: $Marker, anchor: 'bottom'})
+			new Marker({element: $Marker, anchor: 'bottom', opacityWhenCovered: 0})
 				.setLngLat([oMarker.longitude, oMarker.latitude])
 				.addTo(this.map)
 				.getElement()
@@ -472,8 +472,6 @@ export default {
 			this.setFeedUpdateTimer(this.refreshRate);
 		},
 		panToBetweenPanels(oLngLat, iZoom, iAnimDuration=500) {
-			const iXOffset = (this.settingsPanelOpen?getOuterWidth(this.$refs.settings):0) - (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0);
-
 			return new Promise((resolve) => {
 				if(!this.map) {
 					resolve();
@@ -483,11 +481,25 @@ export default {
 				this.map.easeTo({
 					center: oLngLat,
 					zoom: iZoom,
-					offset: [iXOffset / 2, 0],
+					padding: this.getMapPadding(),
 					duration: iAnimDuration
 				});
 			});
 		},
+		getMapPadding() {
+			let bIsMobile = this.isMobile();
+			return {
+				top: 0,
+				bottom: 0,
+				left: (!bIsMobile && this.settingsPanelOpen)?this.$refs.settings.getBoundingClientRect().width:0,
+				right: (!bIsMobile && this.feedPanelOpen)?this.$refs.feed.getBoundingClientRect().width:0
+			};
+		},
+		updateMapPadding(iDuration=0) {
+			const asPadding = this.getMapPadding();
+			if(iDuration > 0) this.map.easeTo({padding: asPadding, duration: iDuration});
+			else this.map.jumpTo({padding: asPadding});
+		},
 		isMarkerVisible(oLngLat){
 			return !!this.map && this.map.getBounds().contains(oLngLat);
 		},
@@ -503,19 +515,17 @@ export default {
 			let bOldValue = this.feedPanelOpen;
 			this.feedPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
 
-			if(bOldValue != this.feedPanelOpen && !this.isMobile()) {
+			if(bOldValue != this.feedPanelOpen && !this.isMobile() && this.map) {
 				sMapAction = sMapAction || 'panTo';
 				switch(sMapAction) {
 					case 'none': 
+						this.updateMapPadding();
 						break;
 					case 'panTo':
-						this.map.panBy(
+						this.updateMapPadding(500);
-							[(this.feedPanelOpen?1:-1) * getOuterWidth(this.$refs.feed) / 2, 0],
-							{duration: 500}
-						);
 						break;
 					case 'panToInstant':
-						this.map.panBy([(this.feedPanelOpen?1:-1) * getOuterWidth(this.$refs.feed) / 2, 0]);
+						this.updateMapPadding();
 						break;
 				}
 			}
@@ -524,19 +534,17 @@ export default {
 			let bOldValue = this.settingsPanelOpen;
 			this.settingsPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.settingsPanelOpen):bShow;
 			
-			if(bOldValue != this.settingsPanelOpen && !this.isMobile()) {
+			if(bOldValue != this.settingsPanelOpen && !this.isMobile() && this.map) {
 				sMapAction = sMapAction || 'panTo';
 				switch(sMapAction) {
 					case 'none':
+						this.updateMapPadding();
 						break;
 					case 'panTo':
-						this.map.panBy(
+						this.updateMapPadding(500);
-							[(this.settingsPanelOpen?-1:1) * getOuterWidth(this.$refs.settings) / 2, 0],
-							{duration: 500}
-						);
 						break;
 					case 'panToInstant':
-						this.map.panBy([(this.settingsPanelOpen?-1:1) * getOuterWidth(this.$refs.settings) /2, 0]);
+						this.updateMapPadding();
 						break;
 				}
 			}

src/scripts/common.js

@@ -31,17 +31,3 @@ export function copyTextToClipboard(text) {
 		}
 	);
 }
-
-export function getOuterWidth(element) {
-	var style = getComputedStyle(element);
-	var width = element.offsetWidth; // Width without padding and border
-	width += parseInt(style.marginLeft) + parseInt(style.marginRight); // Add margins
-
-	// Check if the box-sizing is border-box (includes padding and border in the width)
-	if (style.boxSizing === 'border-box') {
-		width += parseInt(style.paddingLeft) + parseInt(style.paddingRight); // Add padding
-		width += parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth); // Add border
-	}
-  
-	return width;
-}

src/styles/_page.project.map.scss

@@ -11,6 +11,10 @@ $thumbnail-max-size: 60px;
 	bottom: 0;
 	width: 100%;
 
+	.maplibregl-marker-covered {
+		pointer-events: none;
+	}
+
 	.maplibregl-popup {
 		max-width: 300px;
 	}