EVNotify
diff --git a/‎package-lock.json
Lines changed: 137 additions & 2 deletions b/‎package-lock.json
Lines changed: 137 additions & 2 deletions
diff --git a/‎package.json
Lines changed: 1 addition & 0 deletions b/‎package.json
Lines changed: 1 addition & 0 deletions
diff --git a/‎public/css/styles.css
Lines changed: 20 additions & 0 deletions b/‎public/css/styles.css
Lines changed: 20 additions & 0 deletions
diff --git a/‎public/index.html
Lines changed: 1 addition & 1 deletion b/‎public/index.html
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/assets/marker-finish.svg
Lines changed: 17 additions & 0 deletions b/‎src/assets/marker-finish.svg
Lines changed: 17 additions & 0 deletions
diff --git a/‎src/assets/marker-start.svg
Lines changed: 12 additions & 0 deletions b/‎src/assets/marker-start.svg
Lines changed: 12 additions & 0 deletions
diff --git a/‎src/components/Dashboard.vue
Lines changed: 3 additions & 22 deletions b/‎src/components/Dashboard.vue
Lines changed: 3 additions & 22 deletions
@@ -11,6 +11,7 @@
     "chart.js": "^2.8.0",
     "core-js": "^2.6.5",
     "moment": "^2.24.0",
+    "ol": "^6.4.3",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-chartjs": "^3.4.2",
 
@@ -0,0 +1,20 @@
+.map-popup {
+    background-color: white;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+    padding: 15px;
+    border-radius: 10px;
+    border: 1px solid #cccccc;
+    bottom: 12px;
+    min-width: 280px;
+}
+
+.map-popup > .map-popup-head {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #cccccc;
+    margin-bottom: 1em;
+}
+
+.map-popup > .map-popup-head > h1 {
+    font-size: 1.2em;
+}
@@ -11,7 +11,7 @@
     <link rel="preload" href="<%= BASE_URL %>css/materialicons.css" as="style">
     <link rel="stylesheet" href="<%= BASE_URL %>css/roboto.css">
     <link rel="stylesheet" href="<%= BASE_URL %>css/materialicons.css">
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKSYlV4PJBbGMju4hFYkFLZLMlscENnWQ"></script>
+    <link rel="stylesheet" href="<%= BASE_URL %>css/styles.css">
   </head>
   <body>
     <noscript>
 
@@ -259,6 +259,7 @@
   import storage from '../utils/storage';
   import cars from '../utils/cars';
   import general from '../utils/general';
+  import EvNotifyMap from "../utils/EvNotifyMap";
 
   export default {
     data: () => ({
@@ -410,29 +411,9 @@
         return `${this.$root.MomentJS(end).format('MMMM Do YYYY')} ${this.$root.MomentJS(start).format('HH:mm')}-${this.$root.MomentJS(end).format('HH:mm')}`
       },
       showLastPosition() {
-        const markerLocation = {
-          lat: this.syncData.latitude,
-          lng: this.syncData.longitude
-        };
-
         if (!this.showMap || !this.syncData.last_location || !this.syncData.latitude || !this.syncData.longitude) return;
-        // eslint-disable-next-line
-        const map = new google.maps.Map(this.$refs.map, {
-          zoom: 14,
-          center: markerLocation
-        });
-        // eslint-disable-next-line
-        const infoWindow = new google.maps.InfoWindow({
-          content: `Last location from ${this.lastLocationTimestamp}`
-        });
-        // eslint-disable-next-line
-        const marker = new google.maps.Marker({
-          position: markerLocation,
-          map,
-          title: 'Last location'
-        });
-
-        marker.addListener('click', () => infoWindow.open(map, marker));
+        new EvNotifyMap(this.$refs.map)
+            .addLastLocation([this.syncData.longitude, this.syncData.latitude], this.lastLocationTimestamp);
       }
     },
     watch: {