101 add on select alternate icon (#107)

* Updated markers with new icons
Reworked scale and anchor

* Removed marker dot for anchor positioning

* Updated markers to new icons
Moved vl-interaction into map component

components/VueLayerMap.vue

@@ -7,14 +7,23 @@
       <vl-layer-tile id="osm">
         <vl-source-osm />
       </vl-layer-tile>
+      <vl-interaction-select @select="onSelect" @unselect="onDeselect">
+        <vl-style>
+          <vl-style-icon
+            :src="selectIconSrc"
+            :scale="scale"
+            :anchor="anchor"
+          />
+        </vl-style>
+      </vl-interaction-select>
     </vl-map>
   </client-only>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import View from "ol/View";
-import { fromLonLat } from "ol/proj";
+import { fromLonLat, toLonLat } from "ol/proj";
 import { eventBus } from "~/plugins/utils";
 
 export default defineComponent({
@@ -31,20 +40,71 @@ export default defineComponent({
         initialRotation: {
             type: Number,
             default: 0
+        },
+        selectSrc: {
+            type: String,
+            default: "/marker-selected.png"
+        },
+        scale: {
+          type: Number,
+          default: 0.15
+        },
+        anchor: {
+          type: Array,
+          default: () => [0.5, 0.75]
         }
     },
     data () {
         return {
             zoom: this.initialZoom,
             center: this.initialCenter,
-            rotation: this.initialRotation
+            rotation: this.initialRotation,
+            selectIconSrc: this.selectSrc
         };
     },
-    created () {
+    mounted () {
         eventBus.$on("centerMapOnTrackedAsset", (position: number[]) => {
             const view: View = (this.$refs.vlview as any).$view;
             view.animate({ center: fromLonLat(position), zoom: 18 });
         });
+    },
+    methods: {
+        /**
+         * gets called upon selecting any marker
+         * @param e - the 'event' sent, it looks like {type:string, feature: Feature } where feature is a VueLayers feature
+         */
+      onSelect (e : any) {
+        // TODO - properly document in our docs
+        /*
+         * WARNING: the object that calls the event is NOT necesarily the correct component for the marker we clicked on
+         * due to this behaviour, we cannot just pass this.details. We use the properties stored in the vl-feature of the component
+         * that was clicked, and extract the details needed. This might also need updating in the future.
+         *
+         * We blame this behaviour on VueLayers being quirky.
+         */
+        const f = e.feature.getProperties();
+        /*
+         * set the selectIcon - slower than the onselect triggering, so we see the 'wrong' icon for a 0.5s (+-until zoomed in)
+         * TODO - try to figure out a way to hide the selected style until this onselect function is triggered to update the icon
+         */
+        f.id.includes("sp_") ? this.selectIconSrc = "/phone-selected.png" : this.selectIconSrc = "/marker-selected.png";
+        // convert timestamp to readable format
+        const timestamp : Date = new Date(f.timestamp * 1000);
+        const tsString : string = timestamp.toLocaleString();
+        /*
+         * WARNING: the needed coordinates are regular long/lat (°N °E)
+         * BE SURE TO CONVERT
+         */
+        const markerCoords : Array<number> = e.feature.getGeometry().getCoordinates();
+        const lonlat = toLonLat(markerCoords);
+        const details = { id: f.id, longitude: f.longitude, latitude: f.latitude, timestamp: tsString };
+        // smooth zoom into tracker location
+        eventBus.$emit("centerMapOnTrackedAsset", lonlat);
+        this.$root.$emit("popup-toggled", lonlat, details);
+      },
+      onDeselect () {
+        this.$root.$emit("popup-hide");
+      }
     }
 });
 </script>

components/VueLayerMarker.vue

@@ -1,27 +1,12 @@
 <template>
   <div>
-    <vl-interaction-select @select="onSelect" @unselect="onDeselect">
-      <vl-style>
-        <vl-style-icon
-          id="marker"
-          :src="selectIconSrc"
-          :scale="scale"
-          :anchor="anchor"
-          :anchor-y-units="anchorYMode"
-          :anchor-x-mode="anchorXMode"
-        />
-      </vl-style>
-    </vl-interaction-select>
     <vl-feature :properties="details">
       <vl-geom-point :coordinates="coordinates" />
       <vl-style>
         <vl-style-icon
-          id="marker"
           :src="iconSrc"
           :scale="scale"
           :anchor="anchor"
-          :anchor-y-units="anchorYMode"
-          :anchor-x-mode="anchorXMode"
         />
       </vl-style>
     </vl-feature>
@@ -30,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { toLonLat } from "ol/proj";
 
 export default defineComponent({
     name: "VueLayerMarker",
@@ -49,19 +33,7 @@ export default defineComponent({
         },
         anchor: {
           type: Array,
-          default: () => [0.5, 1]
-        },
-        anchorYMode: {
-          type: String,
-          default: "fraction"
-        },
-        anchorXMode: {
-          type: String,
-          default: "fraction"
-        },
-        selectSrc: {
-            type: String,
-            default: "/marker.png"
+          default: () => [0.5, 0.75]
         },
         details: { // ToDo - define positionData object like index.vue (or re-use that one by referencing it, somehow)
           type: Object,
@@ -71,40 +43,8 @@ export default defineComponent({
     emits: ["popup-toggled"],
     data () {
       return {
-        iconSrc: this.src,
-        selectIconSrc: this.selectSrc
+        iconSrc: this.src
       };
-    },
-    methods: {
-      /**
-       * gets called upon selecting any marker
-       * @param e - the 'event' sent, it looks like {type:string, feature: Feature } where feature is a VueLayers feature
-       */
-      onSelect (e : any) {
-        /*
-         * WARNING: the needed coordinates are regular long/lat (°N °E)
-         * BE SURE TO CONVERT
-         */
-        const markerCoords : Array<number> = e.feature.getGeometry().getCoordinates();
-        const lonlat = toLonLat(markerCoords);
-        // TODO - properly document in our docs
-        /*
-         * WARNING: the object that calls the event is NOT necesarily the correct component for the marker we clicked on
-         * due to this behaviour, we cannot just pass this.details. We use the properties stored in the vl-feature of the component
-         * that was clicked, and extract the details needed. This might also need updating in the future.
-         *
-         * We blame this behaviour on VueLayers being quirky.
-         */
-        const f = e.feature.getProperties();
-        // convert timestamp to readable format
-        const timestamp : Date = new Date(f.timestamp * 1000);
-        const tsString : string = timestamp.toLocaleString();
-        const details = { id: f.id, longitude: f.longitude, latitude: f.latitude, timestamp: tsString };
-        this.$root.$emit("popup-toggled", lonlat, details);
-      },
-      onDeselect () {
-        this.$root.$emit("popup-hide");
-      }
     }
 });
 </script>

pages/index.vue

@@ -26,10 +26,10 @@
           :key="pos.id"
           :details="pos"
           :coordinates="[pos.longitude, pos.latitude]"
-          :src="pos.id.includes('sp_') ? '/sp_marker.png' : '/teltonika_marker.png'"
-          :scale="0.1"
-          :anchor="pos.id.includes('sp_') ? [0.5, 0.5] : [0.5, 450]"
-          :anchor-y-mode="pos.id.includes('sp_') ? 'fraction' : 'pixels'"
+          :src="pos.id.includes('sp_') ? '/phone.png' : '/marker.png'"
+          :select-src="pos.id.includes('sp_') ? '/phone-selected.png' : '/marker-selected.png'"
+          :scale="0.15"
+          :anchor="pos.id.includes('sp_') ? [0.5, 0.75] : [0.5, 0.75]"
         />
         <VueLayerMarkerPopup />
       </template>