Added maps to necessary pages

frontend/src/boot/map.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import VueLayers from 'vuelayers'
+import 'vuelayers/lib/style.css' // needs css-loader
+
+export default async ({ Vue }) => {
+  Vue.use(VueLayers);
+}

frontend/src/components/map.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mymap',
+  data () {
+    return {
+      zoom: 15,
+      center: [ 9.208858198755664, 49.14785422283188],
+      rotation: 0,
+      geolocPosition: undefined,
+    }
+  }
+}
+</script>
+
+<style>
+</style>

frontend/src/pages/CacheStart.vue

@@ -1,11 +1,21 @@
 <template>
   <div>
-    <iframe transition="fade"
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-           class="q-mb-md "
+             data-projection="EPSG:4326" style="height: 200px" >
-           height= "200px"
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
-           width= "100%"
+
-           v-if="!cameraActive"
+      <vl-geoloc @update:position="geolocPosition = $event">
-           :src= "iFrameURL" frameborder="0"></iframe>
+        <template slot-scope="geoloc">
+          <vl-feature v-if="geoloc.position" id="position-feature">
+            <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
+          </vl-feature>
+        </template>
+      </vl-geoloc>
+
+      <vl-layer-tile id="osm">
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+    </vl-map>
     <div v-if="!cameraActive" class="q-ma-md">
       <p class="text-h4">{{ cacheName }}</p>
       <p>{{ instruction }}</p>
@@ -16,6 +26,11 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import VueLayers from 'vuelayers'
+import 'vuelayers/lib/style.css' // needs css-loader
+
+Vue.use(VueLayers);
   import qrscanner from "../components/qrscanner";
   export default {
     name: "CacheStart",
@@ -40,8 +55,11 @@
         lon: "",
         lat: "",
         stationID: [],
-        iFrameURL: ""
+        iFrameURL: "",
-
+        zoom: 15,
+        center: [ 9.208858198755664, 49.14785422283188],
+        rotation: 0,
+        geolocPosition: undefined,
       }
     },
     created() {

frontend/src/pages/Overview.vue

@@ -79,13 +79,32 @@
         <q-tab-panel name="map" class="q-pa-none fit">
           <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
           <!--</div>-->
-          <q-img
+          <div class="full-width full-height absolute-full">
-            src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+            <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-            transition="fade" class="absolute-full">
+                     data-projection="EPSG:4326">
-            <template v-slot:loading>
+              <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
-              <q-spinner-puff color="cyan-14" size="4em"/>
+
-            </template>
+              <vl-geoloc @update:position="geolocPosition = $event">
-          </q-img>
+                <template slot-scope="geoloc">
+                  <vl-feature v-if="geoloc.position" id="position-feature">
+                    <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
+                  </vl-feature>
+                </template>
+              </vl-geoloc>
+
+              <vl-layer-tile id="osm">
+                <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-stroke color="green" :width="3"></vl-style-stroke>
+                  <vl-style-fill color="rgba(255,255,255,0.5)"></vl-style-fill>
+                </vl-style-box>
+              </vl-layer-vector>
+            </vl-map>
+          </div>
         </q-tab-panel>
 
       </q-tab-panels>
@@ -102,6 +121,12 @@
   */
 </style>
 <script>
+import Vue from 'vue'
+import VueLayers from 'vuelayers'
+import 'vuelayers/lib/style.css' // needs css-loader
+
+Vue.use(VueLayers);
+
   export default {
     data() {
       return {
@@ -109,10 +134,18 @@
         caches: [],
         stations: [],
         pois: [],
-        render: false
+        features: [],
+        render: false,
+        zoom: 15,
+        center: [ 9.208858198755664, 49.14785422283188],
+        rotation: 0,
+        geolocPosition: undefined,
       }
     },
     mounted: function () {
+      this.initMap().then(features => {
+        this.features = features.map(Object.freeze)
+      })
     },
     computed: {
       hasAdminState() {
@@ -237,17 +270,33 @@
         this.$router.push({path: `/cache/${cacheID}`})
       },
       initMap() {
-        console.log("Signalwort: " + this.pois);
+        return new Promise(resolve => {
-        //   this.$axios.post('http://seserver.se.hs-heilbronn.de:3000/api/map', {
+          setTimeout(() => {
-        //     body: this.pois
+            // generate GeoJSON random features
-        //   }).then((response)=>{
+            resolve([
-        //     console.log(response)
+
-        //   })
+              {
-        // },
+                type: "Feature",
-        this.$axios.get('http://www.se.hs-heilbronn.de:3000/api/map/lon=9&lat=49', {
+                id: 'fakerator.misc.uuid()',
-          body: this.pois
+                geometry: {
-        }).then((response) => {
+                  type: "LineString",
-          console.log(response)
+                  coordinates: [
+                    [
+                      44.47265625,
+                      -1.7575368113083125,
+                    ],
+                      [
+                        44.47265625,
+                        -1.7575368113083125,
+                      ],
+
+                  ],
+                },
+                properties: {
+                },
+              },
+            ])
+          }, 5000)
         })
       },
       deleteCache(id) {

frontend/src/pages/StationEdit.vue

@@ -15,11 +15,22 @@
     <!--type="textarea"-->
     <!--/>-->
     <p class="text-h6 q-mt-md">Location</p>
-    <q-img transition="fade"
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-           class="q-mb-md "
+             data-projection="EPSG:4326">
-           :ratio="16/9"
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
-           src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+
-    ></q-img>
+      <vl-geoloc @update:position="geolocPosition = $event">
+        <template slot-scope="geoloc">
+          <vl-feature v-if="geoloc.position" id="position-feature">
+            <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
+          </vl-feature>
+        </template>
+      </vl-geoloc>
+
+      <vl-layer-tile id="osm">
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+    </vl-map>
     <div class="row q-col-gutter-md">
       <q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang"
                label="Breitengrad/Längengrad"/>

frontend/src/pages/StationView.vue

@@ -1,11 +1,21 @@
 <template>
   <div>
-    <q-img transition="fade"
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-           class="q-mb-md "
+             data-projection="EPSG:4326" style="height: 200px" >
-           :ratio="16/9"
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
-           src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+
-           v-if="!cameraActive"
+      <vl-geoloc @update:position="geolocPosition = $event">
-    ></q-img>
+        <template slot-scope="geoloc">
+          <vl-feature v-if="geoloc.position" id="position-feature">
+            <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
+          </vl-feature>
+        </template>
+      </vl-geoloc>
+
+      <vl-layer-tile id="osm">
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+    </vl-map>
     <div class="q-ma-md" v-if="!cameraActive">
       <p class="text-h4">{{ cache.name }}</p>
       <p class="text-h5">Station {{ showCacheProgress }}</p>
@@ -18,7 +28,13 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import VueLayers from 'vuelayers'
+import 'vuelayers/lib/style.css' // needs css-loader
+
+Vue.use(VueLayers);
   import qrscanner from "../components/qrscanner";
+
   export default {
     name: "Station",
     components: { qrscanner },
@@ -33,6 +49,10 @@
         station: {},
         cameraActive: false,
         result: null,
+        zoom: 15,
+        center: [ 9.208858198755664, 49.14785422283188],
+        rotation: 0,
+        geolocPosition: undefined,
       }
     },
     beforeRouteUpdate(to, from, next) {

package-lock.json

@@ -0,0 +1,245 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@babel/runtime-corejs2": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.4.4.tgz",
+      "integrity": "sha512-hE7oVwVsRws84u5/nkaWWdN2J4SXEGuXKjrAsP0E4nkYImjSbpdHfGTS2nvFc82aDGIuG6OzhAQMpIzTHuZeKA==",
+      "requires": {
+        "core-js": "^2.6.5",
+        "regenerator-runtime": "^0.13.2"
+      }
+    },
+    "@turf/bbox": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-5.1.5.tgz",
+      "integrity": "sha1-MFHfUUrUxQ9KT5uKLRX9i2hA7aM=",
+      "requires": {
+        "@turf/helpers": "^5.1.5",
+        "@turf/meta": "^5.1.5"
+      }
+    },
+    "@turf/boolean-point-in-polygon": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-5.1.5.tgz",
+      "integrity": "sha1-8BzBlNHgMKVIv9qYHLpDz9YpQbc=",
+      "requires": {
+        "@turf/helpers": "^5.1.5",
+        "@turf/invariant": "^5.1.5"
+      }
+    },
+    "@turf/center": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/center/-/center-5.1.5.tgz",
+      "integrity": "sha1-RKss2VT2PA03dX9xWKmcPvURS4A=",
+      "requires": {
+        "@turf/bbox": "^5.1.5",
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "@turf/clone": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-5.1.5.tgz",
+      "integrity": "sha1-JT6NNUdxgZduM636tQoPAqfw42c=",
+      "requires": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "@turf/distance": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-5.1.5.tgz",
+      "integrity": "sha1-Oc8YIEu/h1h9cH5gmmARiQkVZAk=",
+      "requires": {
+        "@turf/helpers": "^5.1.5",
+        "@turf/invariant": "^5.1.5"
+      }
+    },
+    "@turf/explode": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/explode/-/explode-5.1.5.tgz",
+      "integrity": "sha1-sSsvd0AEobSPYrqVsgocZVo94Rg=",
+      "requires": {
+        "@turf/helpers": "^5.1.5",
+        "@turf/meta": "^5.1.5"
+      }
+    },
+    "@turf/helpers": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz",
+      "integrity": "sha1-FTQFInq5M9AEpbuWQantmZ/L4M8="
+    },
+    "@turf/invariant": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-5.2.0.tgz",
+      "integrity": "sha1-8BUP9ykLOFd7c9CIt5MsHuCqkKc=",
+      "requires": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "@turf/meta": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-5.2.0.tgz",
+      "integrity": "sha1-OxrUhe4MOwsXdRMqMsOE1T5LpT0=",
+      "requires": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "@turf/nearest-point": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/nearest-point/-/nearest-point-5.1.5.tgz",
+      "integrity": "sha1-EgUN5Bw5hEMiTHl43g9iE5ANNPs=",
+      "requires": {
+        "@turf/clone": "^5.1.5",
+        "@turf/distance": "^5.1.5",
+        "@turf/helpers": "^5.1.5",
+        "@turf/meta": "^5.1.5"
+      }
+    },
+    "@turf/point-on-feature": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/point-on-feature/-/point-on-feature-5.1.5.tgz",
+      "integrity": "sha1-MMfwMkMCd8ZBjZbSieRba/shP+c=",
+      "requires": {
+        "@turf/boolean-point-in-polygon": "^5.1.5",
+        "@turf/center": "^5.1.5",
+        "@turf/explode": "^5.1.5",
+        "@turf/helpers": "^5.1.5",
+        "@turf/nearest-point": "^5.1.5"
+      }
+    },
+    "color-convert": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+      "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+    },
+    "core-js": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+      "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
+    },
+    "debounce-promise": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
+      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
+    },
+    "ieee754": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
+      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "ol": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.2.tgz",
+      "integrity": "sha512-PfS8Fe1iy4YNJ7P+TvebKME+8gp5NBfQuIldAHfBCkc7agmTezscQrsJWggz5B6Sprm/M/4YBtbyQtw4pIC65w==",
+      "requires": {
+        "pbf": "3.1.0",
+        "pixelworks": "1.1.0",
+        "rbush": "2.0.2"
+      }
+    },
+    "ol-tilecache": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/ol-tilecache/-/ol-tilecache-3.0.2.tgz",
+      "integrity": "sha512-oA+UM8juw775gVm0ZgH5WIV9DnDhfLYWnY7zxkpIR8FDZaoFiPa0idG+GFRdRokeCqMoeoNMSD8aRguFbDE9XA=="
+    },
+    "parse-color": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-color/-/parse-color-1.0.0.tgz",
+      "integrity": "sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=",
+      "requires": {
+        "color-convert": "~0.5.0"
+      }
+    },
+    "pbf": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
+      "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+      "requires": {
+        "ieee754": "^1.1.6",
+        "resolve-protobuf-schema": "^2.0.0"
+      }
+    },
+    "pixelworks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
+      "integrity": "sha1-Hwla1I3Ki/ihyCWOAJIDGkTyLKU="
+    },
+    "protocol-buffers-schema": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz",
+      "integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
+    },
+    "quickselect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
+      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+    },
+    "rbush": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
+      "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+      "requires": {
+        "quickselect": "^1.0.1"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+    },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
+    "rxjs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
+      "integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "tslib": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+    },
+    "uuid": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+    },
+    "vuelayers": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/vuelayers/-/vuelayers-0.11.4.tgz",
+      "integrity": "sha512-6asCq2vDCPM4mS60NGeEBGKiVVJZ/GACYtu7UUVPkhtdmvI7bSzKjKuv0cTQkwcgh6YRtqzAIzML0l9fwb4AQw==",
+      "requires": {
+        "@babel/runtime-corejs2": "^7.1.2",
+        "@turf/point-on-feature": "^5.1.5",
+        "debounce-promise": "^3.1.0",
+        "merge-descriptors": "^1.0.1",
+        "ol": "^5.3.1",
+        "ol-tilecache": "^3.0.1",
+        "parse-color": "^1.0.0",
+        "rxjs": "^6.3.3",
+        "uuid": "^3.3.2",
+        "whatwg-fetch": "^3.0.0"
+      }
+    },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    }
+  }
+}