From fd7b124687473cb8be780092b1e8c98ff24e0d01 Mon Sep 17 00:00:00 2001
From: Andrew <a.hayes18@nuigalway.ie>
Date: Thu, 23 Feb 2023 07:44:56 +0000
Subject: [PATCH] change train icon + fix icon positioning

---
 src/assets/train-solid.svg |  1 +
 src/components/Map.vue     | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/train-solid.svg

diff --git a/src/assets/train-solid.svg b/src/assets/train-solid.svg
new file mode 100644
index 0000000..a484647
--- /dev/null
+++ b/src/assets/train-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 288a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>
\ No newline at end of file
diff --git a/src/components/Map.vue b/src/components/Map.vue
index ff97cce..e48049b 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -7,7 +7,7 @@
       <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">
+          <img id = "headerImage" src="../assets/train-solid.svg" alt="Train Icon">
           <div v-on:click="this.display = false" id="xButton">X</div>
         </div>
 
@@ -30,11 +30,12 @@
     </ol-tile-layer>
 
     <template v-for="coordinate, i in coordinates" :position="inline-block">
-      <ol-overlay :position="coordinate">
+      <!-- overlay offset is the size of the image so that it is centered-->
+      <ol-overlay :position="coordinate" :positioning="center-center" :offset="[-16,-16]">
         <div class="overlay-content" @click="getSelectedTrain(i)">
-          <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="trainMapIcon">
+          <img src="../assets/train-solid.svg" class="trainMapIcon" alt="Train Icon">
         </div>
-        
+
     </ol-overlay>
     </template>
   </ol-map>
@@ -140,14 +141,14 @@ export default {
 }
 
 .trainMapIcon {
-  height: 5.5vh;
-  width: 3.5vw;
+  height: 32px;
+  width: 32px;
 }
 
 .slideLeft-enter-active, .slideLeft-leave-active {
   transition: opacity .5s;
   transition: all 0.8s;
-  
+
 }
 .slideLeft-enter-from, .slideLeft-leave-to{
   opacity: 0;
@@ -198,7 +199,7 @@ export default {
 #headerImage{
   height: 100%;
   width: auto;
-  overflow: hidden;   
+  overflow: hidden;
 }
 
 #xButton{
@@ -271,4 +272,4 @@ export default {
   left: 50%;
   z-index: 0;
 }
-</style>
\ No newline at end of file
+</style>