first implementation of mapmarker popup

labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue

@@ -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;