tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Markers on cache overview map are displayed

Browse Source
This commit is contained in:
Katharina Will 2019-06-01 10:28:35 +02:00
parent cb73232522
commit 988ca223c8
1 changed files with 14 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
View File

@ -111,11 +111,21 @@
<q-tab-panel name="map" class="q-pa-none"> <q-tab-panel name="map" class="q-pa-none">
<!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">--> <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
<!--</div>--> <!--</div>-->
<div v-if="render" class=""> <div v-if="render" class="full-width full-height absolute-full">
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
data-projection="EPSG:4326" :style="{ height: mapHeight+'px' }"> data-projection="EPSG:4326">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view> <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-feature ref="marker" v-for="poiItem in pois" :key="poiItem.index">
<template>
<vl-geom-point :coordinates="[poiItem.Longitude, poiItem.Latitude]"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./statics/map-marker.svg" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</template>
</vl-feature>
<vl-geoloc @update:position="geolocPosition = $event"> <vl-geoloc @update:position="geolocPosition = $event">
<template slot-scope="geoloc"> <template slot-scope="geoloc">
<vl-feature v-if="geoloc.position" id="position-feature"> <vl-feature v-if="geoloc.position" id="position-feature">
@ -128,12 +138,6 @@
<vl-source-osm></vl-source-osm> <vl-source-osm></vl-source-osm>
</vl-layer-tile> </vl-layer-tile>
<vl-layer-vector>
<vl-source-vector :features.sync="features"></vl-source-vector>
<vl-style-box>
<vl-style-icon src="./statics/map-marker.svg" :scale="3.0" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</vl-layer-vector>
</vl-map> </vl-map>
</div> </div>
</q-tab-panel> </q-tab-panel>
@ -175,9 +179,6 @@ Vue.use(VueLayers);
} }
}, },
mounted: function () { mounted: function () {
this.initMap().then(features => {
this.features = features.map(Object.freeze)
});
}, },
destroyed() { destroyed() {
window.removeEventListener('resize', this.matchHeight) window.removeEventListener('resize', this.matchHeight)
@ -259,13 +260,13 @@ Vue.use(VueLayers);
this.stations[cache] = (this.caches[cache].stationen[0]); this.stations[cache] = (this.caches[cache].stationen[0]);
const poiItem = { const poiItem = {
Name: this.caches[cache].name, Name: this.caches[cache].name,
CategoryID: 3,
Latitude: this.stations[cache].lattitude, Latitude: this.stations[cache].lattitude,
Longitude: this.stations[cache].longitude Longitude: this.stations[cache].longitude
}; };
this.pois.push(poiItem); this.pois.push(poiItem);
console.log(poiItem.Name + " " + poiItem.Latitude + " " + poiItem.Longitude);
} }
this.initMap();
resolve(true); resolve(true);
}).catch((error) => { }).catch((error) => {
let msg; let msg;
@ -338,28 +339,6 @@ Vue.use(VueLayers);
editCache(cacheID) { editCache(cacheID) {
this.$router.push({path: `/cache/${cacheID}`}) this.$router.push({path: `/cache/${cacheID}`})
}, },
initMap() {
return new Promise(resolve => {
setTimeout(() => {
// generate GeoJSON random features
resolve([
{
type: "Feature",
id: 'fakerator.misc.uuid()',
geometry: {
type: "Point",
coordinates: [
9.2111024, 49.1219732
],
},
properties: {
},
},
])
}, 5000)
})
},
deleteCache(id) { deleteCache(id) {
console.log('delete cache: ' + id); console.log('delete cache: ' + id);
this.$axios.delete('/api/deleteCache', {params: {cacheID: id}}) this.$axios.delete('/api/deleteCache', {params: {cacheID: id}})