aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add map icons

Browse Source
This commit is contained in:
Conor McNamara
2023-02-09 20:36:39 +00:00
parent e34c05ddc9
commit a6dafabae5
1 changed files with 103 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Map.vue
View File

@ -1,12 +1,16 @@
<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 = "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>
@ -18,21 +22,21 @@
</div>
</div>
</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 {
@ -146,7 +152,6 @@ background-position: 0% 50%;
}
}
#sidebar{
position: absolute;
height: 85%;
@ -194,6 +199,7 @@ right:10px;
#xButton:hover{
color:red;
}
#sidebarFooter{
position: relative;
bottom:0%;
@ -207,8 +213,8 @@ position: relative;
height:80%;
width:100%;
overflow: hidden;
}
#sidebarContent{
position: relative;
size: 6px;
@ -217,10 +223,6 @@ overflow-wrap: break-word;
font-family: Georgia, 'Times New Roman', Times, serif ;
}
body{
background-color: #b7deff;
}
#mapDiv{
background-color: black;
position: absolute;
@ -238,7 +240,6 @@ height: 100%;
width: 100%;
top: 0%;
z-index: 0;
}
#buttonDiv{