diff --git a/src/components/project.vue b/src/components/project.vue index 89f20bf..8cd3dbb 100644 --- a/src/components/project.vue +++ b/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.mapReady?'map-ready':'' + this.settingsPanelOpen?'with-settings':'' ].filter(n => n).join(' '); }, nlClasses() { @@ -131,10 +129,8 @@ export default { this.initMap() ]); - //Direct link or default project positioning - await this.setInitialMapPosition(); - - this.mapReady = true; + //Direct link post action + if(this.hash.items.length == 3) await this.findPost(this.hash.items[1], this.hash.items[2]); }, 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() { - if(this.hash.items.length == 3) { - await this.findPost(this.hash.items[1], this.hash.items[2]); - } - 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); - oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude)); - } - 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); - }, - oBounds - ); - } - } + getInitialMapBounds() { + let oBounds = new LngLatBounds(); + let oHashMarker; - 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, - maxZoom: 15 - } - ); + if(this.hash.items.length == 3) { + oHashMarker = this.markers.find((oMarker) => ( + oMarker.type == this.hash.items[1] && + oMarker.id == this.hash.items[2] && + oMarker.longitude != null && + oMarker.latitude != null + )) || null; } + + if(oHashMarker) { //Direct link to marker + oBounds.extend(new LngLat(oHashMarker.longitude, oHashMarker.latitude)); + } + else if( //Blog Mode: Fit to last message + this.currProject.mode == this.consts.modes.blog && + this.markers.length > 0 + ) { + let oLastMsg = this.markers.at(-1); + oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude)); + } + 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); + }, + oBounds + ); + } + } + + return oBounds; }, + async findPost(sPostType, iPostId) { let oRef = this.goToPost(sPostType, iPostId); if(oRef) { diff --git a/src/components/projectPost.vue b/src/components/projectPost.vue index bd7d041..ced141c 100644 --- a/src/components/projectPost.vue +++ b/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(); } diff --git a/src/styles/_page.project.map.scss b/src/styles/_page.project.map.scss index 6fd021d..80998fd 100644 --- a/src/styles/_page.project.map.scss +++ b/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;