Fix direct link to post

src/components/project.vue

@@ -125,12 +125,18 @@ export default {
 		this.quit();
 	},
 	methods: {
-		init() {
+		async init() {
 			let bFirstLoad = (typeof this.currProject.codename == 'undefined');
 			this.initProject();
 			if(bFirstLoad) this.initLightbox();
-			this.initFeed();
+
-			this.initMap();
+			await Promise.all([
+				this.initFeed(),
+				this.initMap()
+			]);
+
+			//Direct link: Scroll to post
+			if(this.$parent.hash.items.length == 3) this.findPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
 		},
 		quit() {
 			lightbox.end();
@@ -176,9 +182,6 @@ export default {
 			await this.getNextFeed();
 			this.$refs.feedSimpleBar.scrollElement.scrollTop = 0;
 
-			//Scroll to post
-			if(this.$parent.hash.items.length == 3) this.findPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
-		
 			//Start auto-update
 			if(!this.modeHisto) this.setFeedUpdateTimer(this.refreshRate);
 		},
@@ -223,104 +226,109 @@ export default {
 				attributionControl: false
 			});
 
-			this.map.once('load', async () => {
+			//Force wait for load event
-				//Default Basemap
+			await new Promise((resolve) => {
-				this.baseMap = this.baseMaps.filter((asBM) => asBM.default_map)[0].codename;
+				if(this.map.loaded()) resolve();
-				
+				else this.map.once('load', resolve);
-				//Get track
-				const oTrack = await this.spot.get2('geojson', {id_project: this.currProject.id});
-				this.map.addSource('track', {
-					'type': 'geojson',
-					'data': oTrack
-				});
-
-				//Color mapping
-				let asColorMapping = ['match', ['get', 'type']];
-				for(const sHikeType in this.hikes.colors) {
-					asColorMapping.push(sHikeType);
-					asColorMapping.push(this.hikes.colors[sHikeType]);
-				}
-				asColorMapping.push('black'); //fallback value
-
-				//Track layer
-				this.map.addLayer({
-					'id': 'track',
-					'type': 'line',
-					'source': 'track',
-					'layout': {
-						'line-join': 'round',
-						'line-cap': 'round'
-					},
-					'paint': {
-						'line-color': asColorMapping,
-						'line-width': this.hikes.width
-					}
-				});
-
-				//Markers
-				this.map.addImage('markerIcon', (await this.map.loadImage('images/footprint_mapbox.png')).data);
-				this.map.addSource('markers', {
-					type:'geojson',
-					data: {
-						type: 'FeatureCollection',
-						features: this.convertMsgToFeatures(this.messages)
-					}
-				});
-				this.map.addLayer({
-					'id': 'markers',
-					'type': 'symbol',
-					'source': 'markers',
-					'layout': {'icon-image': 'markerIcon'}
-				});
-				this.map.on('click', 'markers', (e) => {
-					this.openMarkerPopup(e.features[0]);
-				});
-
-				//Centering map
-				let bOpenFeedPanel = !this.mobile;
-				let oBounds = new LngLatBounds();
-				if(
-					this.currProject.mode == this.spot.consts.modes.blog && 
-					this.messages.length > 0 &&
-					this.$parent.hash.items[2] != 'message'
-				) {
-					//Fit to last message
-					let oLastMsg = this.messages[this.messages.length - 1];
-					oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
-				}
-				else {
-					//Fit to track
-					for(const iFeatureId in oTrack.features) {
-						oBounds = oTrack.features[iFeatureId].geometry.coordinates.reduce(
-							(bounds, coord) => {
-								return bounds.extend(coord);
-							},
-							oBounds
-						);
-					}
-				}
-				const iFeedPanelPadding = bOpenFeedPanel?(getOuterWidth(this.$refs.feed)/2):0;
-				await this.map.fitBounds(
-					oBounds, 
-					{
-						padding: {
-							top: 20, 
-							bottom: 20, 
-							left: (20 + iFeedPanelPadding), 
-							right: (20 + iFeedPanelPadding)
-						},
-						animate: false,
-						maxZoom: 15
-					}
-				);
-
-				//Toggle only when map is ready, for the tilt effet
-				this.toggleFeedPanel(bOpenFeedPanel);
 			});
 
-			this.map.on('idle', () => {	});
+			//Default Basemap
+			this.baseMap = this.baseMaps.filter((asBM) => asBM.default_map)[0].codename;
 			
-			//Legend
+			//Get track
+			const oTrack = await this.spot.get2('geojson', {id_project: this.currProject.id});
+			this.map.addSource('track', {
+				'type': 'geojson',
+				'data': oTrack
+			});
+
+			//Color mapping
+			let asColorMapping = ['match', ['get', 'type']];
+			for(const sHikeType in this.hikes.colors) {
+				asColorMapping.push(sHikeType);
+				asColorMapping.push(this.hikes.colors[sHikeType]);
+			}
+			asColorMapping.push('black'); //fallback value
+
+			//Track layer
+			this.map.addLayer({
+				'id': 'track',
+				'type': 'line',
+				'source': 'track',
+				'layout': {
+					'line-join': 'round',
+					'line-cap': 'round'
+				},
+				'paint': {
+					'line-color': asColorMapping,
+					'line-width': this.hikes.width
+				}
+			});
+
+			//Markers
+			this.map.addImage('markerIcon', (await this.map.loadImage('images/footprint_mapbox.png')).data);
+			this.map.addSource('markers', {
+				type:'geojson',
+				data: {
+					type: 'FeatureCollection',
+					features: this.convertMsgToFeatures(this.messages)
+				}
+			});
+			this.map.addLayer({
+				'id': 'markers',
+				'type': 'symbol',
+				'source': 'markers',
+				'layout': {'icon-image': 'markerIcon'}
+			});
+			this.map.on('click', 'markers', (e) => {
+				this.openMarkerPopup(e.features[0]);
+			});
+
+			//Centering map
+			let bOpenFeedPanel = !this.mobile;
+			let oBounds = new LngLatBounds();
+			if(
+				this.currProject.mode == this.spot.consts.modes.blog && 
+				this.messages.length > 0 &&
+				this.$parent.hash.items[2] != 'message'
+			) {
+				//Fit to last message
+				let oLastMsg = this.messages[this.messages.length - 1];
+				oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
+			}
+			else {
+				//Fit to track
+				for(const iFeatureId in oTrack.features) {
+					oBounds = oTrack.features[iFeatureId].geometry.coordinates.reduce(
+						(bounds, coord) => {
+							return bounds.extend(coord);
+						},
+						oBounds
+					);
+				}
+			}
+			const iFeedPanelPadding = bOpenFeedPanel?(getOuterWidth(this.$refs.feed)/2):0;
+			await this.map.fitBounds(
+				oBounds, 
+				{
+					padding: {
+						top: 20, 
+						bottom: 20, 
+						left: (20 + iFeedPanelPadding), 
+						right: (20 + iFeedPanelPadding)
+					},
+					animate: false,
+					maxZoom: 15
+				}
+			);
+
+			//Toggle only when map is ready, for the tilt effet
+			this.toggleFeedPanel(bOpenFeedPanel);
+
+			//Force wait for idle event
+			await new Promise((resolve) => {
+				this.map.once('idle', resolve);
+			});
 		},
 		convertMsgToFeatures(oMsg) {
 			return oMsg.map(oMsg => ({
@@ -453,13 +461,14 @@ export default {
 		},
 		panToBetweenPanels(oLngLat, iZoom, fCallback) {
 			const iXOffset = (this.settingsPanelOpen?getOuterWidth(this.$refs.settings):0) - (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0);
+
+			this.map.once('moveend', fCallback);
 			this.map.easeTo({
 				center: oLngLat,
 				zoom: iZoom,
 				offset: [iXOffset / 2, 0],
 				duration: 500
 			});
-			setTimeout(fCallback, 500);
 		},
 		isMarkerVisible(oLngLat){
 			return this.map.getBounds().contains(oLngLat);
@@ -561,7 +570,7 @@ export default {
 					- parseFloat(getComputedStyle(this.$refs.feedSimpleBar.$el).paddingTop)
 				);
 				aoRefs[0].executeMainAction();
-				this.spot.flushHash(['post', 'message']);
+				//this.spot.flushHash(['post', 'message']);
 				bFound = true;
 			}