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

first implementation of mapmarker popup

Browse Source
This commit is contained in:
Timo Volkmann 2019-06-04 21:34:53 +02:00
parent 42ee5b07ab
commit c07d6620e8
1 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,7 +116,7 @@
data-projection="EPSG:4326" :style="{ height: mapHeight+'px' }">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-feature ref="marker" v-for="cache in caches" :key="cache.id">
<vl-feature ref="marker" v-for="cache in caches" :key="cache.id" :id="cache.id">
<template>
<vl-geom-point :coordinates="[cache.stationen[0].longitude, cache.stationen[0].lattitude]"></vl-geom-point>
<vl-style-box>
@ -128,6 +128,56 @@
</template>
</vl-feature>
<vl-interaction-select :features.sync="selectedFeatures">
<template slot-scope="select">
<!-- selected feature popup -->
<vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id"
:position="pointOnSurface(feature.geometry)" :auto-pan="true" :auto-pan-animation="{ duration: 300 }" :offset="getPopupOffset()">
<template slot-scope="popup">
<q-card id="popup" style="width: 70vw">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-separator />
<q-card-actions vertical>
<q-btn flat>Action 1</q-btn>
<q-btn flat>Action 2</q-btn>
</q-card-actions>
</q-card>
<q-card >
<header class="card-header">
<p class="card-header-title">
Feature ID {{ feature.id }}
</p>
<a class="card-header-icon" title="Close"
@click="selectedFeatures = selectedFeatures.filter(f => f.id !== feature.id)">
</a>
</header>
<div class="card-content">
<div class="content">
<p>
Overlay popup content for Feature with ID <strong>{{ feature.id }}</strong>
</p>
<p>
Popup: {{ JSON.stringify(popup) }}
</p>
<p>
Feature: {{ JSON.stringify({ id: feature.id, properties: feature.properties }) }}
</p>
</div>
</div>
</q-card>
</template>
</vl-overlay>
<!--// selected popup -->
</template>
</vl-interaction-select>
<vl-geoloc @update:position="geolocPosition = $event">
<template slot-scope="geoloc">
<vl-feature v-if="geoloc.position" id="position-feature">
@ -161,6 +211,7 @@
import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader
import { createProj, addProj, findPointOnSurface, createStyle, createMultiPointGeom, loadingBBox } from 'vuelayers/lib/ol-ext'
Vue.use(VueLayers);
@ -178,6 +229,7 @@ Vue.use(VueLayers);
geolocPosition: undefined,
mapHeight: 0,
mapmarker: "",
selectedFeatures: []
}
},
mounted: function () {
@ -197,6 +249,13 @@ Vue.use(VueLayers);
},
methods: {
pointOnSurface: findPointOnSurface,
getPopupOffset() {
//let width = document.getElementById('popup').clientWidth;
let width = window.innerWidth * 0.7;
console.log(width);
return [-width/2,15];
},
matchHeight() {
// console.log("matchHeight");
const heightWindow = window.innerHeight;