fix map reload

airalab · May 13, 2024 · 5337a52 · 5337a52
1 parent 4c17bc7
commit 5337a52
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 113 deletions.
diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -1,11 +1,15 @@
 <template>
-  <div :class="{ inactive: store.isColored }" class="mapcontainer" id="map"></div>
+  <div
+    :class="{ inactive: store.isColored }"
+    class="mapcontainer"
+    id="map"
+  ></div>
 </template>
 
 <script>
 import { useStore } from "@/store";
 import config from "../config";
-import { init, setTheme } from "../utils/map/instance";
+import { init, removeMap, setTheme } from "../utils/map/instance";
 import { init as initMarkers } from "../utils/map/marker";
 import { getCityByPos } from "../utils/map/utils";
 import { init as initWind } from "../utils/map/wind";
@@ -16,38 +20,46 @@ export default {
   props: ["zoom", "lat", "lng", "type", "availableWind"],
   data() {
     return {
-      locale: localStorage.getItem("locale") || this.$i18n.locale || 'en',
-      theme: window?.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark',
+      locale: localStorage.getItem("locale") || this.$i18n.locale || "en",
+      theme: window?.matchMedia("(prefers-color-scheme: light)").matches
+        ? "light"
+        : "dark",
       store: useStore(),
-    }
+    };
   },
   methods: {
     listener({ matches, media }) {
       if (!matches) {
         // Not matching anymore = not interesting
-        return
+        return;
       }
 
-      if (media === '(prefers-color-scheme: dark)') {
-        this.theme = 'dark'
-      } else if (media === '(prefers-color-scheme: light)') {
-        this.theme ='light'
+      if (media === "(prefers-color-scheme: dark)") {
+        this.theme = "dark";
+      } else if (media === "(prefers-color-scheme: light)") {
+        this.theme = "light";
       }
 
-      setTheme(this.theme)
-    }
+      setTheme(this.theme);
+    },
   },
   computed: {
     route() {
-      return this.$router
-    }
+      return this.$router;
+    },
+  },
+  unmounted() {
+    removeMap();
   },
   async mounted() {
-
     /* + get user's system theme */
-    if(window.matchMedia) {
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.listener)
-      window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', this.listener)
+    if (window.matchMedia) {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", this.listener);
+      window
+        .matchMedia("(prefers-color-scheme: light)")
+        .addEventListener("change", this.listener);
     }
     /* - get user's system theme */
 
@@ -56,8 +68,9 @@ export default {
         this.$emit("city", r);
       });
     }
+
     const map = init([this.lat, this.lng], this.zoom, this.theme);
-    
+
     map.on("zoomend", (e) => {
       const pos = e.target.getCenter();
       saveMapPosiotion(
@@ -66,12 +79,13 @@ export default {
         pos.lng.toFixed(4)
       );
 
-      if(this.$router.currentRoute.value.name === 'main') {
+      if (this.$router.currentRoute.value.name === "main") {
         /* added here check for current route is map (main), as it caused problems with other pages */
         this.$router.replace({
           name: "main",
           params: {
-            provider: this.$route.params.provider || config.DEFAUL_TYPE_PROVIDER,
+            provider:
+              this.$route.params.provider || config.DEFAUL_TYPE_PROVIDER,
             type: this.$route.params.type || "pm10",
             zoom: e.target.getZoom(),
             lat: pos.lat.toFixed(4),
@@ -81,7 +95,7 @@ export default {
         });
       }
     });
-      
+
     map.on("moveend", (e) => {
       const pos = e.target.getCenter();
       const zoom = e.target.getZoom();
@@ -98,7 +112,7 @@ export default {
         pos.lng.toFixed(4)
       );
 
-      if(this.$router.currentRoute.value.name === 'main') {
+      if (this.$router.currentRoute.value.name === "main") {
         /* added here check for current route is map (main), as it caused problems with other pages */
         /* ! Here was a problem actually */
         this.$router
@@ -117,8 +131,6 @@ export default {
           .catch(() => {});
       }
     });
-  
-    
 
     initMarkers(map, this.type, (data) => {
       this.$emit("clickMarker", data);
@@ -132,95 +144,96 @@ export default {
 </script>
 
 <style>
-  /* + open source leaflet map rewritings */
-  .leaflet-control-attribution, .leaflet-container .leaflet-control-attribution {
-    font-size: calc(var(--font-size) * 0.5);
-    background: none;
-    margin: 0 !important;
-  }
-
-  .leaflet-bottom .leaflet-control-locate {
-    border: var(--app-borderwidth) solid var(--app-bordercolor);
-  }
-
-  .leaflet-bottom .leaflet-control-locate .leaflet-bar-part-single {
-    background: var(--app-inputbg);
-  }
-
-  .leaflet-right .leaflet-control {
-    margin-right: var(--gap);
-  }
-
-  .leaflet-bottom .leaflet-control {
-    margin-bottom: .3rem;
-  }
-
-  .leaflet-control-locate a .leaflet-control-locate-location-arrow,
-  .leaflet-control-locate.following a .leaflet-control-locate-location-arrow {
-    background: var(--app-bordercolor);
-  }
-
-  .leaflet-touch .leaflet-bar,
-  .leaflet-touch .leaflet-bar a, 
-  .leaflet-bar a,
-  .leaflet-bar {
-    border-radius: 50% !important;
-  }
-
-  .leaflet-touch .leaflet-bar a, .leaflet-bar a {
-    width: calc(var(--app-inputheight) - var(--app-borderwidth) *2);
-    height: calc(var(--app-inputheight) - var(--app-borderwidth) *2);
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50% !important;
-  }
-  /* - open source leaflet map rewritings */
-
-
-  .marker-cluster-circle {
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 18px;
-  }
-  .marker-cluster-circle span {
-    line-height: 27px;
-    font-weight: bold;
-  }
-  .marker-cluster-msg {
-    font-weight: bold;
-    background-size: contain;
-    color: #fff;
-    padding-top: 4px;
-    font-size: 16px;
-    width: 40px !important;
-    height: 40px !important;
-  }
-  .marker-icon-brand {
-    width: 35px !important;
-    height: 35px !important;
-    border-radius: 50%;
-  }
-  .marker-icon-msg {
-    width: 40px;
-    height: 40px;
-  }
+/* + open source leaflet map rewritings */
+.leaflet-control-attribution,
+.leaflet-container .leaflet-control-attribution {
+  font-size: calc(var(--font-size) * 0.5);
+  background: none;
+  margin: 0 !important;
+}
+
+.leaflet-bottom .leaflet-control-locate {
+  border: var(--app-borderwidth) solid var(--app-bordercolor);
+}
+
+.leaflet-bottom .leaflet-control-locate .leaflet-bar-part-single {
+  background: var(--app-inputbg);
+}
+
+.leaflet-right .leaflet-control {
+  margin-right: var(--gap);
+}
+
+.leaflet-bottom .leaflet-control {
+  margin-bottom: 0.3rem;
+}
+
+.leaflet-control-locate a .leaflet-control-locate-location-arrow,
+.leaflet-control-locate.following a .leaflet-control-locate-location-arrow {
+  background: var(--app-bordercolor);
+}
+
+.leaflet-touch .leaflet-bar,
+.leaflet-touch .leaflet-bar a,
+.leaflet-bar a,
+.leaflet-bar {
+  border-radius: 50% !important;
+}
+
+.leaflet-touch .leaflet-bar a,
+.leaflet-bar a {
+  width: calc(var(--app-inputheight) - var(--app-borderwidth) * 2);
+  height: calc(var(--app-inputheight) - var(--app-borderwidth) * 2);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50% !important;
+}
+/* - open source leaflet map rewritings */
+
+.marker-cluster-circle {
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 18px;
+}
+.marker-cluster-circle span {
+  line-height: 27px;
+  font-weight: bold;
+}
+.marker-cluster-msg {
+  font-weight: bold;
+  background-size: contain;
+  color: #fff;
+  padding-top: 4px;
+  font-size: 16px;
+  width: 40px !important;
+  height: 40px !important;
+}
+.marker-icon-brand {
+  width: 35px !important;
+  height: 35px !important;
+  border-radius: 50%;
+}
+.marker-icon-msg {
+  width: 40px;
+  height: 40px;
+}
 </style>
 
 <style scoped>
-  .mapcontainer {
-    background-color: var(--color-light-gray);
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100svh;
-    overflow: hidden;
-  }
-
-  .mapcontainer.inactive {
-    filter: grayscale(100%);
-  }
+.mapcontainer {
+  background-color: var(--color-light-gray);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100svh;
+  overflow: hidden;
+}
+
+.mapcontainer.inactive {
+  filter: grayscale(100%);
+}
 </style>
diff --git a/src/utils/map/instance.js b/src/utils/map/instance.js
@@ -44,6 +44,10 @@ export function instanceMap() {
   }
   throw new Error("Must be initialized before using the mapd.");
 }
+export function removeMap() {
+  map.remove();
+  map = undefined;
+}
 
 export function init(position, zoom, theme = "light") {
   map = L.map("map", { minZoom: 3 });