Removing initial map flickering

src/components/project.vue

@@ -44,7 +44,6 @@ export default {
 			baseMaps: {},
 			baseMap: null,
 			map: null,
-			mapReady: false,
 			hikes: {
 				colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'},
 				width: 4
@@ -56,8 +55,7 @@ export default {
 		projectClasses() {
 			return [
 				this.feedPanelOpen?'with-feed':'',
-				this.settingsPanelOpen?'with-settings':'',
+				this.settingsPanelOpen?'with-settings':''
-				this.mapReady?'map-ready':''
 			].filter(n => n).join(' ');
 		},
 		nlClasses() {
@@ -131,10 +129,8 @@ export default {
 				this.initMap()
 			]);
 
-			//Direct link or default project positioning
+			//Direct link post action
-			await this.setInitialMapPosition();
+			if(this.hash.items.length == 3) await this.findPost(this.hash.items[1], this.hash.items[2]);
-
-			this.mapReady = true;
 		},
 		quit() {
 			lightbox.end();
@@ -147,7 +143,6 @@ export default {
 			this.modeHisto = (this.currProject.mode == this.consts.modes.histo);
 			this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
 			this.posts = [];
-			this.mapReady = false;
 			//this.baseMap = null;
 			this.baseMaps = {};
 		},
@@ -188,13 +183,36 @@ export default {
 		},
 		async initMap() {
 			//Start async calls
-			const oMarkersPromise = this.api.get('markers', {id_project: this.currProject.id});
+			[
-			const oTrackPromise = this.api.get('geojson', {id_project: this.currProject.id});
+				{
+					maps: this.baseMaps,
+					markers: this.markers,
+					last_update: this.lastUpdate
+				},
+				this.track
+			] = await Promise.all([
+				this.api.get('markers', {id_project: this.currProject.id}),
+				this.api.get('geojson', {id_project: this.currProject.id})
+			]);
+
+			//Get default basemap
+			this.baseMap = this.baseMaps.find((asBM) => asBM.default_map)?.codename ?? null;
 
 			//Build Map
 			if(this.map) this.map.remove();
 			this.map = new Map({
 				container: 'map',
+				bounds: this.getInitialMapBounds(),
+				fitBoundsOptions: {
+					padding: {
+						top: 20,
+						bottom: 20,
+						left: 20,
+						right: 20 + (this.feedPanelOpen?(getOuterWidth(this.$refs.feed)):0)
+					},
+					animate: false,
+					maxZoom: 15
+				},
 				style: {
 					version: 8,
 					sources: {},
@@ -203,13 +221,6 @@ export default {
 				attributionControl: false
 			});
 
-			//Parse Map Info
-			const aoMarkers = await oMarkersPromise;
-			this.baseMaps = aoMarkers.maps;
-			this.baseMap = this.baseMaps.find((asBM) => asBM.default_map)?.codename ?? null;
-			this.markers = aoMarkers.markers;
-			this.lastUpdate = aoMarkers.last_update;
-
 			//Force wait for load event
 			await new Promise((resolve) => {
 				if(this.map.loaded()) resolve();
@@ -234,7 +245,7 @@ export default {
 			}
 			
 			//Add track
-			this.addTrack(await oTrackPromise);
+			this.addTrack(this.track);
 
 			//Add Markers
 			this.markers.forEach(oMarker => this.addMarker(oMarker));
@@ -353,48 +364,43 @@ export default {
 				this.popup.element = null;
 			}
 		},
-		async setInitialMapPosition() {
+		getInitialMapBounds() {
+			let oBounds = new LngLatBounds();
+			let oHashMarker;
+
 			if(this.hash.items.length == 3) {
-				await this.findPost(this.hash.items[1], this.hash.items[2]);
+				oHashMarker = this.markers.find((oMarker) => (
+					oMarker.type == this.hash.items[1] &&
+					oMarker.id == this.hash.items[2] &&
+					oMarker.longitude != null &&
+					oMarker.latitude != null
+				)) || null;
 			}
-			else {
-				let oBounds = new LngLatBounds();
-				if( //Blog Mode: Fit to last message
-					this.currProject.mode == this.consts.modes.blog && 
-					this.markers.length > 0
-				) {
 
-					let oLastMsg = this.markers.at(-1);
+			if(oHashMarker) { //Direct link to marker
-					oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
+				oBounds.extend(new LngLat(oHashMarker.longitude, oHashMarker.latitude));
-				}
+			}
-				else { //Pre/Histo Mode: Fit to track
+			else if( //Blog Mode: Fit to last message
-					
+				this.currProject.mode == this.consts.modes.blog &&
-					for(const iFeatureId in this.track.features) {
+				this.markers.length > 0
-						oBounds = this.track.features[iFeatureId].geometry.coordinates.reduce(
+			) {
-							(bounds, coord) => {
+				let oLastMsg = this.markers.at(-1);
-								return bounds.extend(coord);
+				oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
-							},
+			}
-							oBounds
+			else { //Pre/Histo Mode: Fit to track
-						);
+				for(const iFeatureId in this.track.features) {
-					}
+					oBounds = this.track.features[iFeatureId].geometry.coordinates.reduce(
-				}
+						(bounds, coord) => {
-
+							return bounds.extend(coord);
-				const iFeedPanelPadding = this.feedPanelOpen?(getOuterWidth(this.$refs.feed)):0;
-				await this.map.fitBounds(
-					oBounds, 
-					{
-						padding: {
-							top: 20, 
-							bottom: 20, 
-							left: 20, 
-							right: 20 + iFeedPanelPadding
 						},
-						animate: false,
+						oBounds
-						maxZoom: 15
+					);
-					}
+				}
-				);
 			}
+
+			return oBounds;
 		},
+
 		async findPost(sPostType, iPostId) {
 			let oRef = this.goToPost(sPostType, iPostId);
 			if(oRef) {

src/components/projectPost.vue

@@ -127,10 +127,10 @@
 			executeMainAction() {
 				switch(this.options.type) {
 					case 'message':
-						return this.panMapToMarker(0);
+						return this.openMarkerPopup(false);
 					case 'media':
 						this.$refs.medialink.openMedia();
-						if(this.lngLat) return this.panMapToMarker(0);
+						if(this.lngLat) return this.openMarkerPopup(false);
 					default:
 						return Promise.resolve();
 				}

src/styles/_page.project.map.scss

@@ -10,11 +10,6 @@ $thumbnail-max-size: 60px;
 	top: 0;
 	bottom: 0;
 	width: 100%;
-	visibility: hidden;
-
-	.map-ready & {
-		visibility: visible;
-	}
 
 	.maplibregl-popup {
 		max-width: 300px;