From 9ce25e73f04fd7a9196c3a3339cf7efc42b4181a Mon Sep 17 00:00:00 2001 From: Franzz Date: Mon, 1 Jun 2026 23:41:16 +0200 Subject: [PATCH] Fix initial map positionning --- build/webpack.config.js | 2 +- package.json | 4 +- src/components/project.vue | 93 ++++++++++++++++------------------ src/components/projectFeed.vue | 18 ++++--- 4 files changed, 59 insertions(+), 58 deletions(-) diff --git a/build/webpack.config.js b/build/webpack.config.js index 2e434f5..ad274c7 100644 --- a/build/webpack.config.js +++ b/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: { diff --git a/package.json b/package.json index 661582c..004e050 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "main": "index.js", "private": true, "scripts": { - "dev": "webpack --config build/webpack.config.js --mode development", - "prod": "webpack --config build/webpack.config.js --mode production" + "dev": "flock -n node_modules/.webpack-build.lock webpack --config build/webpack.config.js --mode development", + "prod": "flock -n node_modules/.webpack-build.lock webpack --config build/webpack.config.js --mode production" }, "keywords": [], "author": "Franzz", diff --git a/src/components/project.vue b/src/components/project.vue index 6d15492..2cf2da2 100644 --- a/src/components/project.vue +++ b/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([ - this.feed.init(), - this.initProjectMap() - ]); - - //Direct link post action - if(this.hash.items.length == 3) await this.feed.findPost(this.hash.items[1], this.hash.items[2]); + const pMapReady = this.initProjectMap(); + await this.feed.init(pMapReady); }, initLightbox() { if(!this.lightbox) { @@ -174,15 +169,7 @@ export default { this.api.get('geojson', {id_project: this.project.id}) ]); - await this.initMap({ - setCamera: () => { - this.map.fitBounds(this.getInitialMapBounds(), { - padding: this.mapPadding, - animate: false, - maxZoom: 15 - }); - } - }); + await this.initMap(); }, async initOverviewMap() { this.baseMaps = this.consts.default_maps; @@ -193,27 +180,9 @@ export default { opacityWhenCovered: 0.3 })); - 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) - }); - } - }); + await this.initMap(); }, - 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() { - let oBounds = new LngLatBounds(); + setInitialProjectCamera() { 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) { - oBounds.extend(new LngLat(oHashMarker.longitude, oHashMarker.latitude)); + else if(oHashMarker) { + 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) { - let oLastMarker = this.markers.at(-1); - if(oLastMarker) oBounds.extend(new LngLat(oLastMarker.longitude, oLastMarker.latitude)); + else if(this.project.mode == this.consts.modes.blog && oLastMarker) { + this.map.jumpTo({ + 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); diff --git a/src/components/projectFeed.vue b/src/components/projectFeed.vue index fd8b99a..f1ed26c 100644 --- a/src/components/projectFeed.vue +++ b/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;