Add onclick display of train data

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.3.1",
+        "ol": "^7.2.2",
         "vue": "^3.2.45",
         "vue3-openlayers": "^0.1.71"
       },
@@ -676,6 +677,11 @@
       "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==",
       "optional": true
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/esbuild": {
       "version": "0.16.17",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz",
@@ -781,20 +787,19 @@
       "dev": true
     },
     "node_modules/geotiff": {
-      "version": "2.0.4",
+      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz",
-      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "integrity": "sha512-FKvFTNowMU5K6lHYY2f83d4lS2rsCNdpUC28AX61x9ZzzqPNaWFElWv93xj0eJFaNyOYA63ic5OzJ88dHpoA5Q==",
       "dependencies": {
         "@petamoriken/float16": "^3.4.7",
         "lerc": "^3.0.0",
-        "lru-cache": "^6.0.0",
         "pako": "^2.0.4",
         "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.1",
         "web-worker": "^1.2.0",
         "xml-utils": "^1.0.2"
       },
       "engines": {
-        "browsers": "defaults",
         "node": ">=10.19"
       }
     },
@@ -949,12 +954,13 @@
       }
     },
     "node_modules/ol": {
-      "version": "6.15.1",
+      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.2.2.tgz",
-      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "integrity": "sha512-eqJ1hhVQQ3Ap4OhYq9DRu5pz9RMpLhmoTauDoIqpn7logVi1AJE+lXjEHrPrTSuZYjtFbMgqr07sxoLNR65nrw==",
       "dependencies": {
-        "geotiff": "2.0.4",
+        "earcut": "^2.2.3",
-        "ol-mapbox-style": "^8.0.5",
+        "geotiff": "^2.0.7",
+        "ol-mapbox-style": "^9.2.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -977,9 +983,9 @@
       }
     },
     "node_modules/ol-mapbox-style": {
-      "version": "8.2.1",
+      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.5.0.tgz",
-      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
+      "integrity": "sha512-ArYzeuZ4dOYZ6UnhXK30kNBdouZay/r6LzLsFGnvJ86lxY6ShJu2FtcKCFGCOZoJZYyoLCStHYOHcRrVLDaJ0Q==",
       "dependencies": {
         "@mapbox/mapbox-gl-style-spec": "^13.23.1",
         "mapbox-to-css-font": "^2.4.1"
@@ -1066,6 +1072,17 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/quick-lru": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.1.tgz",
+      "integrity": "sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/quickselect": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
@@ -1320,6 +1337,48 @@
         "proj4": "^2.7.5"
       }
     },
+    "node_modules/vue3-openlayers/node_modules/geotiff": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
+      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "dependencies": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "lru-cache": "^6.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      },
+      "engines": {
+        "browsers": "defaults",
+        "node": ">=10.19"
+      }
+    },
+    "node_modules/vue3-openlayers/node_modules/ol": {
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
+      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "dependencies": {
+        "geotiff": "2.0.4",
+        "ol-mapbox-style": "^8.0.5",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/vue3-openlayers/node_modules/ol-mapbox-style": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
+      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
+      "dependencies": {
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1"
+      }
+    },
     "node_modules/web-worker": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^1.3.1",
+    "ol": "^7.2.2",
     "vue": "^3.2.45",
     "vue3-openlayers": "^0.1.71"
   },

src/components/Map.vue

@@ -1,5 +1,14 @@
 <template>
-  <h1>Test</h1>
+  <div v-if="this.display">
+    <h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2>
+    <p>Date: {{ selectedDataMap["TrainDate"] }}</p>
+    <p>Status: {{ selectedDataMap["TrainStatus"] }}</p>
+    <p>Longitude: {{ selectedDataMap["TrainLongitude"] }}</p>
+    <p>Longitude: {{ selectedDataMap["TrainLatitude"] }}</p>
+    <p>Direction: {{ selectedDataMap["Direction"] }}</p>
+    <p>Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
+  </div>
+
   <button @click="getLiveTrainData">Show</button>
   <button @click="postLiveTrainData">Populate Database</button>
 
@@ -10,20 +19,12 @@
       <ol-source-osm />
     </ol-tile-layer>
 
-    <template v-for="coordinate in this.coordinates">
+    <template v-for="coordinate, i in coordinates">
-      <ol-vector-layer>
+      <ol-overlay :position="coordinate">
-        <ol-source-vector>
+        <template v-slot="slotProps">
-          <ol-feature>
+            <div class="overlay-content" @click="getSelectedTrain(i)">{{ i }}</div>
-            <ol-geom-point :coordinates="coordinate"></ol-geom-point>
+        </template>
-            <ol-style>
+    </ol-overlay>
-              <ol-style-circle :radius="radius">
-                <ol-style-fill :color="fillColor"></ol-style-fill>
-                <ol-style-stroke :color="strokeColor" :width="strokeWidth"></ol-style-stroke>
-              </ol-style-circle>
-            </ol-style>
-          </ol-feature>
-        </ol-source-vector>
-      </ol-vector-layer>
     </template>
 
   </ol-map>
@@ -35,7 +36,8 @@ import {fromLonLat, toLonLat} from 'ol/proj.js';
 import axios from 'axios';
 
 export default {
-  name: "Map",
+  name: "MapsOverlay",
+
   data() {
     const center = ref(fromLonLat([-7.5029786, 53.4494762]))
     const projection = ref('EPSG:3857')
@@ -55,10 +57,11 @@ export default {
       strokeWidth,
       strokeColor,
       fillColor,
-
       coordinates: [],
       dbLiveTrainData: [],
-      allDataMap: {}
+      allDataMap: {},
+      selectedDataMap: {},
+      display: false,
     }
   },
 
@@ -69,16 +72,29 @@ export default {
       .then((response) => {
         this.dbLiveTrainData = response.data;
 
-        // create a Hashmap with the key-values as {TrainCode: JSON}
+        // create an array of coordinates and hashmap with the key-values {index: JSON obj}
         for(var i=0; i<this.dbLiveTrainData.data.length; i++) {
-          this.allDataMap[this.dbLiveTrainData.data[i]["TrainCode"][0]] = this.dbLiveTrainData.data[i];
           this.coordinates[i] = ref(fromLonLat([this.dbLiveTrainData.data[i]["TrainLongitude"][0], this.dbLiveTrainData.data[i]["TrainLatitude"][0]]))
+          this.allDataMap[i] = this.dbLiveTrainData.data[i];
         }
       })
       .catch((error) => {
         console.log(error)
       })
     },
+
+    // assign a single train's data to the selected hashmap
+    getSelectedTrain(i) {
+      this.display = true;
+      this.selectedDataMap["TrainCode"] = this.allDataMap[i]["TrainCode"][0];
+      this.selectedDataMap["TrainDate"] = this.allDataMap[i]["TrainDate"][0];
+      this.selectedDataMap["TrainStatus"] = this.allDataMap[i]["TrainStatus"][0];
+      this.selectedDataMap["TrainLongitude"] = this.allDataMap[i]["TrainLongitude"][0];
+      this.selectedDataMap["TrainLatitude"] = this.allDataMap[i]["TrainLatitude"][0];
+      this.selectedDataMap["Direction"] = this.allDataMap[i]["Direction"][0];
+      this.selectedDataMap["PublicMessage"] = this.allDataMap[i]["PublicMessage"][0];
+    },
+
     // ---------------- TESTING ----------------
     postLiveTrainData() {
       axios.get('https://us-central1-concept-d5be1.cloudfunctions.net/postLiveTrainData')
@@ -93,3 +109,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.overlay-content {
+    background: #efefef;
+    box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
+    padding: 10px 20px;
+    font-size: 16px;
+}
+</style>