Add onclick display of train data

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">
-      <ol-vector-layer>
-        <ol-source-vector>
-          <ol-feature>
-            <ol-geom-point :coordinates="coordinate"></ol-geom-point>
-            <ol-style>
-              <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 v-for="coordinate, i in coordinates">
+      <ol-overlay :position="coordinate">
+        <template v-slot="slotProps">
+            <div class="overlay-content" @click="getSelectedTrain(i)">{{ i }}</div>
+        </template>
+    </ol-overlay>
     </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')
@@ -92,4 +108,13 @@ export default {
     // ---------------- TESTING ----------------
   }
 }
-</script>
+</script>
+
+<style scoped>
+.overlay-content {
+    background: #efefef;
+    box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
+    padding: 10px 20px;
+    font-size: 16px;
+}
+</style>