Markers on cache overview map are displayed

labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue

@@ -111,11 +111,21 @@
         <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>-->
-          <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"
-                     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-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">
                 <template slot-scope="geoloc">
                   <vl-feature v-if="geoloc.position" id="position-feature">
@@ -128,12 +138,6 @@
                 <vl-source-osm></vl-source-osm>
               </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>
           </div>
         </q-tab-panel>
@@ -175,9 +179,6 @@ Vue.use(VueLayers);
       }
     },
     mounted: function () {
-      this.initMap().then(features => {
-        this.features = features.map(Object.freeze)
-      });
     },
     destroyed() {
       window.removeEventListener('resize', this.matchHeight)
@@ -259,13 +260,13 @@ Vue.use(VueLayers);
                 this.stations[cache] = (this.caches[cache].stationen[0]);
                 const poiItem = {
                   Name: this.caches[cache].name,
-                  CategoryID: 3,
                   Latitude: this.stations[cache].lattitude,
                   Longitude: this.stations[cache].longitude
                 };
                 this.pois.push(poiItem);
+                console.log(poiItem.Name + " " + poiItem.Latitude + " " + poiItem.Longitude);
               }
-              this.initMap();
+
               resolve(true);
             }).catch((error) => {
             let msg;
@@ -338,28 +339,6 @@ Vue.use(VueLayers);
       editCache(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) {
         console.log('delete cache: ' + id);
         this.$axios.delete('/api/deleteCache', {params: {cacheID: id}})