From a6dafabae5b092d4e4b1a4a38139fb22cee14fdb Mon Sep 17 00:00:00 2001
From: Conor McNamara <conormcnamara245@gmail.com>
Date: Thu, 9 Feb 2023 20:36:39 +0000
Subject: [PATCH] Add map icons

---
 src/components/Map.vue | 205 +++++++++++++++++++++--------------------
 1 file changed, 103 insertions(+), 102 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 436fc66..0e70844 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -1,38 +1,42 @@
 <template>
-
-
   <button @click="getLiveTrainData">Show</button>
   <button @click="postLiveTrainData">Populate Database</button>
+
   <!--Sidebar, fades out on click of X button-->
     <transition id="sidebar" name="slideLeft">
       <div v-if="this.display" id= "sidebarDiv">
-      <div id = "sidebarHeader"><img id = "headerImage" src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png"> <div v-on:click="this.display = false" id="xButton">X</div></div>
-      <div id= "sidebarDiv">
-        <h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2>
-        <p>Date: {{ selectedDataMap["TrainDate"] }}</p>
-        <p>Status: {{ selectedDataMap["TrainStatus"] }}</p>
-        <p>Longitude: {{ selectedDataMap["TrainLongitude"] }}</p>
-        <p>Latitude: {{ selectedDataMap["TrainLatitude"] }}</p>
-        <p>Direction: {{ selectedDataMap["Direction"] }}</p>
-        <p>Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
+
+        <div id = "sidebarHeader">
+          <img id = "headerImage" src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png">
+          <div v-on:click="this.display = false" id="xButton">X</div>
+        </div>
+
+        <div id= "sidebarDiv">
+          <h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2>
+          <p>Date: {{ selectedDataMap["TrainDate"] }}</p>
+          <p>Status: {{ selectedDataMap["TrainStatus"] }}</p>
+          <p>Longitude: {{ selectedDataMap["TrainLongitude"] }}</p>
+          <p>Latitude: {{ selectedDataMap["TrainLatitude"] }}</p>
+          <p>Direction: {{ selectedDataMap["Direction"] }}</p>
+          <p>Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
+        </div>
       </div>
-      </div>
-    </transition> 
+    </transition>
+
   <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height: 1000px">
     <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" />
-
     <ol-tile-layer>
       <ol-source-osm />
     </ol-tile-layer>
 
-    <template v-for="coordinate, i in coordinates">
+    <template v-for="coordinate, i in coordinates" :position="inline-block">
       <ol-overlay :position="coordinate">
-        <template v-slot="slotProps">
-            <div class="overlay-content" @click="getSelectedTrain(i)">{{ i }}</div>
-        </template>
+        <div class="overlay-content" @click="getSelectedTrain(i)">
+          <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="trainMapIcon">
+        </div>
+        
     </ol-overlay>
     </template>
-
   </ol-map>
 </template>
 
@@ -118,10 +122,12 @@ export default {
 
 <style scoped>
 .overlay-content {
-    background: #efefef;
-    box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
-    padding: 10px 20px;
-    font-size: 16px;
+  width: 1%;
+}
+
+.trainMapIcon {
+  height: 5.5vh;
+  width: 3.5vw;
 }
 
 .slideLeft-enter-active, .slideLeft-leave-active {
@@ -135,30 +141,29 @@ export default {
 }
 
 @keyframes gradient {
-0% {
-background-position: 0% 50%;
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+    100% {
+  background-position: 0% 50%;
+  }
 }
-50% {
-background-position: 100% 50%;
-}
-100% {
-background-position: 0% 50%;
-}
-}
-
 
 #sidebar{
-position: absolute;
-height: 85%;
-width: 20%;
-left: 2%;
-top: 12%;
-z-index: 2;
-text-align: center;
-animation: gradient 15s ease infinite;
-background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
-background-size: 400%, 400%;
-box-shadow: 0 0 4px 2px #333333;
+  position: absolute;
+  height: 85%;
+  width: 20%;
+  left: 2%;
+  top: 12%;
+  z-index: 2;
+  text-align: center;
+  animation: gradient 15s ease infinite;
+  background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
+  background-size: 400%, 400%;
+  box-shadow: 0 0 4px 2px #333333;
 }
 
 #sidebarDiv{
@@ -169,91 +174,87 @@ box-shadow: 0 0 4px 2px #333333;
 }
 
 #sidebarHeader{
-position: relative;
-top:0%;
-height: 10%;
-width: 100%;
-overflow: hidden;
+  position: relative;
+  top:0%;
+  height: 10%;
+  width: 100%;
+  overflow: hidden;
 }
 
 #headerImage{
-height: 100%;
-width: auto;
-overflow: hidden;   
+  height: 100%;
+  width: auto;
+  overflow: hidden;   
 }
 
 #xButton{
-font-size: 80%;
-font-family: Georgia;
-color: white;
-position: absolute;
-top:10px;
-right:10px;
+  font-size: 80%;
+  font-family: Georgia;
+  color: white;
+  position: absolute;
+  top:10px;
+  right:10px;
 }
 
 #xButton:hover{
-color:red;
+  color:red;
 }
+
 #sidebarFooter{
-position: relative;
-bottom:0%;
-height:10%;
-text-align: center;
-color: azure;
+  position: relative;
+  bottom:0%;
+  height:10%;
+  text-align: center;
+  color: azure;
 }
 
 #sidebarMain{
-position: relative;
-height:80%;
-width:100%;
-overflow: hidden;
-
+  position: relative;
+  height:80%;
+  width:100%;
+  overflow: hidden;
 }
+
 #sidebarContent{
-position: relative;
-size: 6px;
-color: white;
-overflow-wrap: break-word;
-font-family: Georgia, 'Times New Roman', Times, serif ;
-}
-
-body{
-background-color: #b7deff;
+  position: relative;
+  size: 6px;
+  color: white;
+  overflow-wrap: break-word;
+  font-family: Georgia, 'Times New Roman', Times, serif ;
 }
 
 #mapDiv{
-background-color: black;
-position: absolute;
-float: right;
-right: 0%;
-top: 0%;
-width:100%;
-overflow: hidden;
-height: 100%;
+  background-color: black;
+  position: absolute;
+  float: right;
+  right: 0%;
+  top: 0%;
+  width:100%;
+  overflow: hidden;
+  height: 100%;
 }
 
 #mapIFrame{
-position: relative;
-height: 100%;
-width: 100%;
-top: 0%;
-z-index: 0;
-
+  position: relative;
+  height: 100%;
+  width: 100%;
+  top: 0%;
+  z-index: 0;
 }
 
 #buttonDiv{
-position: absolute;
-float: right;
-right: 10%;
-top: 0%;
-width:10%;
-height:10px;
+  position: absolute;
+  float: right;
+  right: 10%;
+  top: 0%;
+  width:10%;
+  height:10px;
 }
 
 #buttonElement{
-position: relative;
-top: 50%;
-left: 50%;
-z-index: 0;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  z-index: 0;
 }
 </style>