diff --git a/src/components/project.vue b/src/components/project.vue index 973d93e..78517df 100644 --- a/src/components/project.vue +++ b/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 () => { - //Default Basemap - this.baseMap = this.baseMaps.filter((asBM) => asBM.default_map)[0].codename; - - //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 load event + await new Promise((resolve) => { + if(this.map.loaded()) resolve(); + else this.map.once('load', resolve); }); - this.map.on('idle', () => { }); + //Default Basemap + this.baseMap = this.baseMaps.filter((asBM) => asBM.default_map)[0].codename; + + //Get track + const oTrack = await this.spot.get2('geojson', {id_project: this.currProject.id}); + this.map.addSource('track', { + 'type': 'geojson', + 'data': oTrack + }); - //Legend + //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; }