Markers are now shown in different colors according to cacheaccesdefinition

labswp_2019_sose_geocaching_frontend/frontend/src/pages/Cache.vue

@@ -252,7 +252,7 @@
       },
       validateRankingPoints: function () {
         var re = new RegExp('^[0-9]+$');
-        var rps = String.valueOf(this.computedCache.rankingPoints);
+        var rps = String(this.computedCache.rankingPoints);
         return re.test(rps);
       },
       validateEverything(){

labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue

@@ -111,17 +111,17 @@
         <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="full-width full-height absolute-full">
+          <div v-if="render" class="">
             <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
-                     data-projection="EPSG:4326">
+                     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="poiItem in pois" :key="poiItem.index">
+              <vl-feature ref="marker" v-for="cache in caches" :key="cache.id">
                 <template>
 
-                    <vl-geom-point :coordinates="[poiItem.Longitude, poiItem.Latitude]"></vl-geom-point>
+                    <vl-geom-point :coordinates="[cache.stationen[0].longitude, cache.stationen[0].lattitude]"></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-icon :src="getMarkerURL(cache)" :scale="2.0" :anchor="[0.5, 1]"></vl-style-icon>
                     </vl-style-box>
                 </template>
               </vl-feature>
@@ -168,14 +168,15 @@ Vue.use(VueLayers);
         tab: 'list',
         caches: [],
         stations: [],
-        pois: [],
         features: [],
         render: false,
+        renderMarker: false,
         zoom: 15,
         center: [ 9.208858198755664, 49.14785422283188],
         rotation: 0,
         geolocPosition: undefined,
         mapHeight: 0,
+        mapmarker: "",
       }
     },
     mounted: function () {
@@ -242,6 +243,9 @@ Vue.use(VueLayers);
             return this.goToReward(cache.id);
         }
       },
+      getMarkerURL(cache) {
+        return `./statics/map-marker_${this.getColorClass(cache)}.svg`
+      },
       getCacheAccesDefinition(cache) {
         // console.log("getCacheAccessDefinition")
         // console.log(cache.hasOwnProperty('cacheAccesDefinition') ? cache.cacheAccesDefinition : -1)
@@ -255,18 +259,6 @@ Vue.use(VueLayers);
             .then((response) => {
               this.caches = response.data;
               //this.fetchMyCaches();
-              for (let cache in this.caches) {
-
-                this.stations[cache] = (this.caches[cache].stationen[0]);
-                const poiItem = {
-                  Name: this.caches[cache].name,
-                  Latitude: this.stations[cache].lattitude,
-                  Longitude: this.stations[cache].longitude
-                };
-                this.pois.push(poiItem);
-                console.log(poiItem.Name + " " + poiItem.Latitude + " " + poiItem.Longitude);
-              }
-
               resolve(true);
             }).catch((error) => {
             let msg;
@@ -309,7 +301,8 @@ Vue.use(VueLayers);
                   })
                 }
                 console.log(this.caches);
-                console.log("data processed.")
+                console.log("data processed.");
+
               }).finally(() => resolve(true))
           } else {
             resolve(true);

labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_amber.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="#ffd137"/><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="#ecbd4b"/></g></svg>

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

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#1E64F8;}
-	.st1{fill:#1C5FC5;}
-</style>
-<g transform="translate(0 -1028.4)">
-	<path class="st0" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st1" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>

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

@@ -1,18 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?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>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#509B1A;}
-	.st1{fill:#368220;}
-</style>
-<g transform="translate(0 -1028.4)">
-	<path class="st0" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st1" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>

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

@@ -1,19 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?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>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{opacity:0.75;}
-	.st1{fill:#636363;}
-	.st2{fill:#404040;}
-</style>
-<g transform="translate(0 -1028.4)" class="st0">
-	<path class="st1" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st2" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>

labswp_2019_sose_geocaching_frontend/frontend/src/statics/map-marker_primary.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="#1e64f8"/><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="#1c5fc5"/></g></svg>

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

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Ebene_1" 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#"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
-	 style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFD137;}
-	.st1{fill:#ECBD4B;}
-</style>
-<g transform="translate(0 -1028.4)">
-	<path class="st0" d="M12,1028.4c-4.4,0-8,3.6-8,8c0,1.4,0.4,2.8,1,3.9c0.1,0.2,0.2,0.4,0.3,0.6l6.6,11.5l6.6-11.5
-		c0.1-0.2,0.2-0.3,0.3-0.5l0.1-0.1c0.6-1.2,1-2.5,1-3.9C20,1032,16.4,1028.4,12,1028.4z M12,1032.4c2.2,0,4,1.8,4,4c0,2.2-1.8,4-4,4
-		c-2.2,0-4-1.8-4-4C8,1034.2,9.8,1032.4,12,1032.4z"/>
-	<path class="st1" d="M12,1031.4c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5c2.8,0,5-2.2,5-5C17,1033.6,14.8,1031.4,12,1031.4z M12,1033.4
-		c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3S10.3,1033.4,12,1033.4z"/>
-</g>
-</svg>