Marker layer alternative
This commit is contained in:
@@ -10,6 +10,7 @@ import waitforimages from 'jquery.waitforimages';
|
||||
import lightbox from '../scripts/lightbox.js';
|
||||
|
||||
import SpotIcon from './spotIcon.vue';
|
||||
import SpotIconStack from './spotIconStack.vue';
|
||||
import SpotButton from './spotButton.vue';
|
||||
import ProjectPost from './projectPost.vue';
|
||||
import ProjectPopup from './projectPopup.vue';
|
||||
@@ -19,7 +20,6 @@ export default {
|
||||
SpotIcon,
|
||||
SpotButton,
|
||||
ProjectPost,
|
||||
ProjectPopup,
|
||||
Simplebar
|
||||
},
|
||||
data() {
|
||||
@@ -30,6 +30,7 @@ export default {
|
||||
lastUpdate: { unix_time: 0, relative_time: '', formatted_time: ''},
|
||||
feedPanelOpen: false,
|
||||
settingsPanelOpen: false,
|
||||
markers: {messages: null, medias: null},
|
||||
markerSize: {width: 32, height: 32},
|
||||
currProject: {},
|
||||
modeHisto: false,
|
||||
@@ -38,7 +39,6 @@ export default {
|
||||
nlLoading: false,
|
||||
baseMaps: {},
|
||||
baseMap: null,
|
||||
messages: null,
|
||||
map: null,
|
||||
hikes: {
|
||||
colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'},
|
||||
@@ -190,7 +190,8 @@ export default {
|
||||
const aoMarkers = await this.spot.get2('markers', {id_project: this.currProject.id});
|
||||
this.baseMap = null;
|
||||
this.baseMaps = aoMarkers.maps;
|
||||
this.messages = aoMarkers.messages;
|
||||
this.markers.messages = aoMarkers.messages;
|
||||
this.markers.medias = aoMarkers.medias;
|
||||
this.lastUpdate = aoMarkers.last_update;
|
||||
|
||||
//console.log(this.baseMaps);
|
||||
@@ -271,7 +272,7 @@ export default {
|
||||
type:'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: this.convertMsgToFeatures(this.messages)
|
||||
features: this.convertMsgToFeatures(this.markers.messages)
|
||||
}
|
||||
});
|
||||
this.map.addLayer({
|
||||
@@ -284,16 +285,60 @@ export default {
|
||||
this.openMarkerPopup(e.features[0]);
|
||||
});
|
||||
|
||||
/*
|
||||
this.markers.messages.forEach(msg => {
|
||||
const el = document.createElement('div');
|
||||
|
||||
const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'message-in', iconSubClasses:'fa-rotate-270'});
|
||||
app.mount(el);
|
||||
|
||||
new Marker({element: el, anchor: 'bottom'})
|
||||
.setLngLat([msg.longitude, msg.latitude])
|
||||
.addTo(this.map);
|
||||
});
|
||||
*/
|
||||
|
||||
//Medias
|
||||
this.markers.medias.forEach(msg => {
|
||||
const $Marker = document.createElement('div');
|
||||
const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'image'});
|
||||
app.mount($Marker);
|
||||
|
||||
const $Popup = document.createElement('div');
|
||||
const popupElement = new Popup({
|
||||
anchor: 'bottom',
|
||||
offset: [0, this.markerSize.height * -1],
|
||||
closeButton: false
|
||||
})
|
||||
.setDOMContent($Popup)
|
||||
.setLngLat([msg.longitude, msg.latitude])
|
||||
.setMaxWidth(300)
|
||||
.addTo(this.map)
|
||||
;
|
||||
console.log(msg);
|
||||
const popupContent = createApp(ProjectPopup, {
|
||||
options: msg,
|
||||
medias: [msg],
|
||||
project: this.currProject
|
||||
});
|
||||
popupContent.provide('spot', this.spot).mount($Popup);
|
||||
|
||||
new Marker({element: $Marker, anchor: 'bottom'})
|
||||
.setLngLat([msg.longitude, msg.latitude])
|
||||
.setPopup(popupElement)
|
||||
.addTo(this.map);
|
||||
});
|
||||
|
||||
//Centering map
|
||||
let bOpenFeedPanel = !this.mobile;
|
||||
let oBounds = new LngLatBounds();
|
||||
if(
|
||||
this.currProject.mode == this.spot.consts.modes.blog &&
|
||||
this.messages.length > 0 &&
|
||||
this.markers.messages.length > 0 &&
|
||||
this.$parent.hash.items[2] != 'message'
|
||||
) {
|
||||
//Fit to last message
|
||||
let oLastMsg = this.messages[this.messages.length - 1];
|
||||
let oLastMsg = this.markers.messages[this.markers.messages.length - 1];
|
||||
oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
|
||||
}
|
||||
else {
|
||||
@@ -343,6 +388,50 @@ export default {
|
||||
}
|
||||
}));
|
||||
},
|
||||
openMarkerPopup(oFeature) {
|
||||
this.closeMarkerPopup();
|
||||
|
||||
//Convert ID Message to feature
|
||||
if(typeof oFeature == 'number') {
|
||||
const oMatchingFeatures = this.map.querySourceFeatures('markers', {
|
||||
filter: ['==', ['get', 'id_message'], oFeature]
|
||||
});
|
||||
|
||||
if(!oMatchingFeatures.length) {
|
||||
console.warn('Marker not found: ', oFeature);
|
||||
return;
|
||||
}
|
||||
else oFeature = oMatchingFeatures[0];
|
||||
}
|
||||
|
||||
const $Popup = document.createElement('div');
|
||||
this.popup.element = new Popup({
|
||||
anchor: 'bottom',
|
||||
offset: [0, this.markerSize.height * -1],
|
||||
closeButton: false
|
||||
})
|
||||
.setDOMContent($Popup)
|
||||
.setLngLat(oFeature.geometry.coordinates)
|
||||
.setMaxWidth(300)
|
||||
.addTo(this.map);
|
||||
|
||||
this.popup.content = createApp(ProjectPopup, {
|
||||
options: oFeature.properties,
|
||||
medias: JSON.parse(oFeature.properties.medias || '[]'),
|
||||
project: this.currProject
|
||||
});
|
||||
this.popup.content.provide('spot', this.spot).mount($Popup);
|
||||
},
|
||||
closeMarkerPopup() {
|
||||
if(this.popup.content) {
|
||||
this.popup.content.unmount();
|
||||
this.popup.content = null;
|
||||
}
|
||||
if(this.popup.element) {
|
||||
this.popup.element.remove();
|
||||
this.popup.element = null;
|
||||
}
|
||||
},
|
||||
async getNextFeed() {
|
||||
if(!this.feed.outOfData && !this.feed.loading) {
|
||||
//Get next chunk
|
||||
@@ -396,69 +485,14 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
//TODO medias
|
||||
|
||||
//Message Last Update
|
||||
this.lastUpdate = aoData.last_update;
|
||||
|
||||
//Reschedule
|
||||
this.setFeedUpdateTimer(this.refreshRate);
|
||||
},
|
||||
openMarkerPopup(oFeature) {
|
||||
this.closeMarkerPopup();
|
||||
|
||||
//Convert ID Message to feature
|
||||
if(typeof oFeature == 'number') {
|
||||
const oMatchingFeatures = this.map.querySourceFeatures('markers', {
|
||||
filter: ['==', ['get', 'id_message'], oFeature]
|
||||
});
|
||||
|
||||
if(!oMatchingFeatures.length) {
|
||||
console.warn('Marker not found: ', oFeature);
|
||||
return;
|
||||
}
|
||||
else oFeature = oMatchingFeatures[0];
|
||||
}
|
||||
|
||||
const $Popup = document.createElement('div');
|
||||
this.popup.element = new Popup({
|
||||
anchor: 'bottom',
|
||||
offset: [0, this.markerSize.height * -1],
|
||||
closeButton: false
|
||||
})
|
||||
.setDOMContent($Popup)
|
||||
.setLngLat(oFeature.geometry.coordinates)
|
||||
.setMaxWidth(300)
|
||||
.addTo(this.map);
|
||||
|
||||
const rProp = ref(oFeature.properties);
|
||||
|
||||
const vPopup = defineComponent({
|
||||
extends: ProjectPopup,
|
||||
setup: () => {
|
||||
provide('spot', this.spot);
|
||||
return {
|
||||
options: rProp.value,
|
||||
medias: JSON.parse(rProp.value.medias || '""'),
|
||||
spot: this.spot,
|
||||
project: this.currProject
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
this.popup.content = createApp(vPopup);
|
||||
this.popup.content.mount($Popup);
|
||||
});
|
||||
},
|
||||
closeMarkerPopup() {
|
||||
if(this.popup.content) {
|
||||
this.popup.content.unmount();
|
||||
this.popup.content = null;
|
||||
}
|
||||
if(this.popup.element) {
|
||||
this.popup.element.remove();
|
||||
this.popup.element = null;
|
||||
}
|
||||
},
|
||||
panToBetweenPanels(oLngLat, iZoom, fCallback) {
|
||||
const iXOffset = (this.settingsPanelOpen?getOuterWidth(this.$refs.settings):0) - (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user