Added new markers

labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue

@@ -168,7 +168,6 @@ Vue.use(VueLayers);
         tab: 'list',
         caches: [],
         stations: [],
-        features: [],
         render: false,
         renderMarker: false,
         zoom: 15,

labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue

@@ -2,19 +2,29 @@
   <div>
     <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
              data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
-      <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-geoloc @update:position="geolocPosition = $event">
+             <vl-feature ref="marker" v-for="station in cache.stationen" :key="station.id">
-        <template slot-scope="geoloc">
+               <template>
-          <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-geom-point :coordinates="[station.longitude, station.lattitude]"></vl-geom-point>
-        <vl-source-osm></vl-source-osm>
+                   <vl-style-box>
-      </vl-layer-tile>
+                     <vl-style-icon :src="getMarkerURL(station)" :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">
+                   <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>
@@ -47,6 +57,7 @@ Vue.use(VueLayers);
           stationen: [],
         },
         station: {},
+        markercolor: "red",
         cameraActive: false,
         result: null,
         zoom: 15,
@@ -109,6 +120,11 @@ Vue.use(VueLayers);
           })
       },
 
+      getMarkerURL(station) {
+        console.log(station);
+        return `./statics/map-marker_${this.markercolor}.svg`
+      },
+
       updateResult(event) {
         console.log("updateResult()");
         console.log(event);

labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_green.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><path d="m12 1028.4c-4.4 0-8 3.6-8 8 0 1.4.4 2.8 1 3.9l.3.6 6.6 11.5 6.6-11.5c.1-.2.2-.3.3-.5l.1-.1c.6-1.2 1-2.5 1-3.9.1-4.4-3.5-8-7.9-8zm0 4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" fill="#509b1a"/><path d="m12 1031.4c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z" fill="#368220"/></g></svg>

labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_grey.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g opacity=".75" transform="translate(0 -1028.4)"><path d="m12 1028.4c-4.4 0-8 3.6-8 8 0 1.4.4 2.8 1 3.9l.3.6 6.6 11.5 6.6-11.5c.1-.2.2-.3.3-.5l.1-.1c.6-1.2 1-2.5 1-3.9.1-4.4-3.5-8-7.9-8zm0 4c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z" fill="#636363"/><path d="m12 1031.4c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z" fill="#404040"/></g></svg>