Fix initial map positionning

build/webpack.config.js

@@ -25,7 +25,7 @@ module.exports = (env, argv) => {
 			chunkFilename: isDev ? 'assets/[name].js' : 'assets/[name].[contenthash:8].js',
 			publicPath: './',
 			clean: isDev ? false : {
-				keep: /^(index\.php|files|geo|images\/icons)(\/.*)?$/
+				keep: /^(index\.php|files|geo|assets\/images\/icons)(\/.*)?$/
 			}
 		},
 		optimization: {

package.json

@@ -14,8 +14,8 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "dev": "webpack --config build/webpack.config.js --mode development",
+    "dev": "flock -n node_modules/.webpack-build.lock webpack --config build/webpack.config.js --mode development",
-    "prod": "webpack --config build/webpack.config.js --mode production"
+    "prod": "flock -n node_modules/.webpack-build.lock webpack --config build/webpack.config.js --mode production"
   },
   "keywords": [],
   "author": "Franzz",

src/components/project.vue

@@ -132,13 +132,8 @@ export default {
 			this.modeHisto = (this.project.mode == this.consts.modes.histo);
 
 			await this.$nextTick();
-			await Promise.all([
+			const pMapReady = this.initProjectMap();
-				this.feed.init(),
+			await this.feed.init(pMapReady);
-				this.initProjectMap()
-			]);
-
-			//Direct link post action
-			if(this.hash.items.length == 3) await this.feed.findPost(this.hash.items[1], this.hash.items[2]);
 		},
 		initLightbox() {
 			if(!this.lightbox) {
@@ -174,15 +169,7 @@ export default {
 				this.api.get('geojson', {id_project: this.project.id})
 			]);
 
-			await this.initMap({
+			await this.initMap();
-				setCamera: () => {
-					this.map.fitBounds(this.getInitialMapBounds(), {
-						padding: this.mapPadding,
-						animate: false,
-						maxZoom: 15
-					});
-				}
-			});
 		},
 		async initOverviewMap() {
 			this.baseMaps = this.consts.default_maps;
@@ -193,27 +180,9 @@ export default {
 				opacityWhenCovered: 0.3
 			}));
 
-			await this.initMap({
+			await this.initMap();
-				setCamera: () => {
-					//Center on default project
-					const oDefaultProject = this.projects.getDefaultProject();
-
-					//Get Map / Canvas size
-					const $Canvas = this.map.getCanvas();
-					const oMapBounds = this.map.getContainer().getBoundingClientRect();
-
-					//Adapt zoom to see whole planet
-					const iTargetRadius = Math.max(1, Math.min(oMapBounds.width || $Canvas.clientWidth, oMapBounds.height || $Canvas.clientHeight) / 2);
-					const iWorldSize = iTargetRadius * 2 * Math.PI * Math.cos(oDefaultProject.latitude * Math.PI / 180);
-					
-					this.map.jumpTo({
-						center: new LngLat(oDefaultProject.longitude, oDefaultProject.latitude),
-						zoom: Math.log2(iWorldSize / this.map.transform.tileSize)
-					});
-				}
-			});
 		},
-		async initMap({setCamera}) {
+		async initMap() {
 			//Build map
 			if(!this.map) this.addMap();
 			this.updateMapPadding();
@@ -225,7 +194,7 @@ export default {
 			});
 
 			this.map.resize();
-			setCamera();
+			this.setInitialProjectCamera();
 
 			//Add content: Base Maps, Tracks, Markers
 			this.addMapContent();
@@ -456,10 +425,8 @@ export default {
 				this.popup.element = null;
 			}
 		},
-		getInitialMapBounds() {
+		setInitialProjectCamera() {
-			let oBounds = new LngLatBounds();
 			let oHashMarker;
-
 			if(this.hash.items.length == 3) {
 				oHashMarker = this.markers.find((oMarker) => (
 					oMarker.type == this.hash.items[1] &&
@@ -469,27 +436,55 @@ export default {
 				)) || null;
 			}
 
+			let oLastMarker = this.markers.at(-1);
+
+			//Overview map: Center on default project
+			if(!this.project) {
+				//Center on default project
+				const oDefaultProject = this.projects.getDefaultProject();
+
+				//Get Map / Canvas size
+				const $Canvas = this.map.getCanvas();
+				const oMapBounds = this.map.getContainer().getBoundingClientRect();
+
+				//Adapt zoom to see whole planet
+				const iTargetRadius = Math.max(1, Math.min(oMapBounds.width || $Canvas.clientWidth, oMapBounds.height || $Canvas.clientHeight) / 2);
+				const iWorldSize = iTargetRadius * 2 * Math.PI * Math.cos(oDefaultProject.latitude * Math.PI / 180);
+				
+				this.map.jumpTo({
+					center: new LngLat(oDefaultProject.longitude, oDefaultProject.latitude),
+					zoom: Math.log2(iWorldSize / this.map.transform.tileSize)
+				});
+			}
 			//Direct link to marker
-			if(oHashMarker) { 
+			else if(oHashMarker) {
-				oBounds.extend(new LngLat(oHashMarker.longitude, oHashMarker.latitude));
+				this.map.jumpTo({
+					center: new LngLat(oHashMarker.longitude, oHashMarker.latitude),
+					zoom: 13
+				});
 			}
 			//Blog Mode: Fit to last marker
-			else if(this.project.mode == this.consts.modes.blog && this.markers.length > 0) {
+			else if(this.project.mode == this.consts.modes.blog && oLastMarker) {
-				let oLastMarker = this.markers.at(-1);
+				this.map.jumpTo({
-				if(oLastMarker) oBounds.extend(new LngLat(oLastMarker.longitude, oLastMarker.latitude));
+					center: new LngLat(oLastMarker.longitude, oLastMarker.latitude),
+					zoom: 15
+				});
 			}
-
 			//Pre Mode, Histo Mode, Blog Mode without markers or missing direct link marker: Fit to track
-			if(oBounds.isEmpty()) { 
+			else {
+				let oBounds = new LngLatBounds();
 				for(const iFeatureId in this.track.features) {
 					oBounds = this.track.features[iFeatureId].geometry.coordinates.reduce(
 						(bounds, coord) => bounds.extend(coord),
 						oBounds
 					);
 				}
+				this.map.fitBounds(oBounds, {
+					padding: this.mapPadding,
+					animate: false,
+					maxZoom: 15
+				});
 			}
-
-			return oBounds;
 		},
 		addNewMarkers(aoMarkers) { //FIXME Use its own marker update API
 			this.markers.push(...aoMarkers);

src/components/projectFeed.vue

@@ -29,11 +29,12 @@ export default {
 		};
 	},
 	emits: ['request-last-update', 'new-markers', 'toggle'],
-	inject: ['api', 'lang', 'consts', 'isMobile'],
+	inject: ['api', 'lang', 'consts', 'hash', 'isMobile'],
 	provide() {
 		return {
 			feed: {
-				checkNewFeed: this.checkNewFeed
+				checkNewFeed: this.checkNewFeed,
+				toggle: this.toggle
 			}
 		};
 	},
@@ -57,7 +58,7 @@ export default {
 		this.setUpdateTimer(-1);
 	},
 	methods: {
-		async init() {
+		async init(pMapIsReady) {
 			this.setUpdateTimer(-1);
 			this.loading = false;
 			this.updatable = true;
@@ -68,26 +69,31 @@ export default {
 			this.posts = [];
 			this.swipe = {x: null, y: null};
 
-			await this.$nextTick();
 			this.toggle(!this.isMobile(), 0);
 			
 			await this.getNextFeed();
 			this.getScrollElement().scrollTop = 0;
 			this.syncUpdateTimer();
+
+			//Direct link post action
+			await (this.hash.items.length == 3)
+				? this.findPost(this.hash.items[1], this.hash.items[2], pMapIsReady)
+				: Promise.resolve();
 		},
 		getScrollElement() {
 			return this.$refs.feedSimpleBar?.scrollElement;
 		},
-		async findPost(sPostType, iPostId) {
+		async findPost(sPostType, iPostId, pMapIsReady = Promise.resolve()) {
 			let vPost = await this.goToPost(sPostType, iPostId);
 			if(vPost) {
+				await pMapIsReady;
 				await vPost.executeMainAction(0);
 				return vPost;
 			}
 			else if(!this.outOfData) {
 				await this.getNextFeed();
 				await this.$nextTick();
-				return this.findPost(sPostType, iPostId);
+				return this.findPost(sPostType, iPostId, pMapIsReady);
 			}
 			else console.log('Missing element ID "'+iPostId+'" of type "'+sPostType+'"');
 			return null;