Removing initial map flickering
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user