remove google maps, use OpenStreetMap instead

EVNotify · Dec 8, 2020 · 6f59f09 · 6f59f09
1 parent c439f5d
commit 6f59f09
Show file tree

Hide file tree

Showing 10 changed files with 460 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -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;
+}
diff --git a/public/index.html b/public/index.html
@@ -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>

diff --git a/src/assets/marker-finish.svg b/src/assets/marker-finish.svg
diff --git a/src/assets/marker-start.svg b/src/assets/marker-start.svg
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
@@ -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: () => ({
@@ -417,22 +418,8 @@
 
         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: {