@mptw/skylens-ui 1.4.97 → 1.4.98

package/components/SLHeatMap.vue

@@ -4,6 +4,10 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
+import { setOptions, importLibrary } from '@googlemaps/js-api-loader';
+import { GoogleMapsOverlay } from '@deck.gl/google-maps';
+import { HeapmapLayer } from '@deck.gl/aggregation-layers';
+
 const RADIUS = 30;
 
 export default defineComponent({
@@ -24,30 +28,34 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const runtimeConfig = useRuntimeConfig();
     const { latlons, weights, isShowMarker } = toRefs(props);
 
-    const { $googlemapsLoader } = useNuxtApp();
     const mapEl = shallowRef<HTMLElement | null>(null);
 
-    let map: google.maps.Map | null = null;
-    let heatmap: google.maps.visualization.HeatmapLayer | null = null;
-    let markers: google.maps.Marker[] = [];
-
-    async function loadGoogleMapsApi() {
-      if (!$googlemapsLoader) return;
+    let LatLngBounds: any | null = null;
+    let LatLng: any | null = null;
+    let AdvancedMarkerElement: any | null = null;
+    let map: any | null = null;
+    let overlay: any | null = null;
+    let markers: any[] = [];
 
-      await $googlemapsLoader.importLibrary("core");
-      await $googlemapsLoader.importLibrary("maps");
-      await $googlemapsLoader.importLibrary("visualization");
+    async function initMap() {
+      if (!mapEl.value) return;
 
-      setupMap();
-    }
+      setOptions({
+        key: runtimeConfig.public.googleMapsApiKey,
+      });
 
-    function setupMap() {
-      if (!mapEl.value) return;
+      const { LatLng: LatLngClass, LatLngBounds: LatLngBoundsClass } = await importLibrary("core");
+      const { Map } = await importLibrary("maps");
+      const { AdvancedMarkerElement: AdvancedMarkerElementClass } = await importLibrary('marker');
+      LatLng = LatLngClass;
+      LatLngBounds = LatLngBoundsClass;
+      AdvancedMarkerElement = AdvancedMarkerElementClass;
 
       if (!map) {
-        map = new google.maps.Map(mapEl.value, {
+        map = Map(mapEl.value, {
           disableDefaultUI: true,
           styles: [
             {
@@ -63,24 +71,26 @@ export default defineComponent({
       }
 
       map.setCenter({ lat: 23.586114913594802, lng: 120.87814086119803 });
+      overlay = new GoogleMapsOverlay();
+      overlay.setMap(map);
 
       setupHeatmapData();
     }
 
     function setupMarkers() {
-      const bounds = new google.maps.LatLngBounds();
+      const bounds = new LatLngBounds();
       markers.forEach((marker) => marker.setMap(null));
       markers = [];
 
       latlons.value.forEach((latlon) => {
-        const position = new google.maps.LatLng(
+        const position = new LatLng(
           Number(latlon.lat),
           Number(latlon.lon)
         );
         bounds.extend(position);
 
         markers.push(
-          new google.maps.Marker({
+          new AdvancedMarkerElement({
             position,
             map: isShowMarker.value ? map : null,
           })
@@ -93,26 +103,29 @@ export default defineComponent({
     }
 
     function setupHeatmapData() {
-      if (!map || latlons.value.length === 0) return;
+      if (!map || latlons.value.length === 0 || !overlay) return;
 
       const heatMapData = weights.value
         .filter((weight) => weight.weight > 0)
         .map((weight) => ({
-          location: new google.maps.LatLng(
+          location: [
             Number(weight.lat),
             Number(weight.lon)
-          ),
+          ],
           weight: weight.weight,
         }));
 
-      if (!heatmap) {
-        heatmap = new google.maps.visualization.HeatmapLayer({
-          radius: RADIUS,
-        });
-        heatmap.setMap(map);
-      }
-
-      heatmap.setData(heatMapData);
+      overlay.setOptions({
+        layers: [
+          new HeatmapLayer({
+            id: 'HeatmapLayer',
+            data: heatMapData,
+            aggregation: 'SUM',
+            getPosition: (d: { location: number[], weight: number }) => d.location,
+            getWeight: (d: { location: number[], weight: number }) => d.weight,
+          }),
+        ],
+      });
     }
 
     watch(latlons, () => {
@@ -128,14 +141,10 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      loadGoogleMapsApi();
+      initMap();
     });
 
     onBeforeUnmount(() => {
-      if (heatmap) {
-        heatmap.setMap(null);
-        heatmap = null;
-      }
     });
 
     return {

package/nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineNuxtConfig({
     public: {
       defaultMobileEndDateBeforeNow: 4,
       icoUrl: 'https://skylens-mng-dev-1087511617183.asia-east1.run.app',
+      googleMapsApiKey: 'AIzaSyDFNjeGBtbW-BdLKMb78cUR4F_OtUl0tlg',
     },
   },
   components: [
@@ -22,7 +23,6 @@ export default defineNuxtConfig({
   ],
   modules: ['@nuxtjs/tailwindcss'],
   plugins: [
-    '~ui/plugins/googlemaps.ts',
     '~ui/plugins/v-calendar.ts',
   ],
   tailwindcss: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.97",
+  "version": "1.4.98",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -12,16 +12,17 @@
     "postinstall": "nuxt prepare .playground"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.10.0",
-    "eslint": "^9.38.0",
+    "@nuxt/eslint-config": "^1.12.1",
+    "eslint": "^9.39.2",
     "nuxt": "^3.20.0",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@deck.gl/core": "^8.9.35",
-    "@deck.gl/google-maps": "^8.9.35",
-    "@deck.gl/layers": "^8.9.35",
-    "@googlemaps/js-api-loader": "^1.16.10",
+    "@deck.gl/core": "^9.2.5",
+    "@deck.gl/layers": "^9.2.5",
+    "@deck.gl/aggregation-layers": "^9.2.5",
+    "@deck.gl/google-maps": "^9.2.5",
+    "@googlemaps/js-api-loader": "^2.0.2",
     "@gtm-support/vue-gtm": "^3.1.0",
     "@nuxtjs/tailwindcss": "^6.14.0",
     "@popperjs/core": "^2.11.8",
@@ -30,24 +31,24 @@
     "@types/google.maps": "^3.58.1",
     "@types/lodash-es": "^4.17.12",
     "@types/sortablejs": "^1.15.9",
-    "@vue/language-plugin-pug": "^3.1.2",
+    "@vue/language-plugin-pug": "^3.2.2",
     "commonmark": "^0.31.2",
     "date-fns": "^4.1.0",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.3.1",
     "echarts": "^5.6.0",
     "echarts-wordcloud": "^2.1.0",
     "exceljs": "^4.4.0",
-    "gsap": "^3.13.0",
+    "gsap": "^3.14.2",
     "html-to-image": "^1.11.13",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.22",
     "pug": "^3.0.3",
     "rxjs": "^7.8.2",
     "sortablejs": "^1.15.6",
     "stylus": "^0.64.0",
-    "swiper": "^11.2.10",
+    "swiper": "^12.0.3",
     "tailwindcss-textshadow": "^2.1.3",
     "v-calendar": "^3.1.2",
-    "vue": "^3.5.22",
+    "vue": "^3.5.26",
     "vue-3-slider-component": "^1.0.2",
     "vue-echarts": "^7.0.3"
   }

package/plugins/googlemaps.ts

@@ -1,17 +0,0 @@
-import { Loader } from "@googlemaps/js-api-loader";
-
-declare module '#app' {
-  interface NuxtApp {
-    $googlemapsLoader: Loader;
-  }
-}
-
-export default defineNuxtPlugin((nuxtApp) => {
-  const loader = new Loader({
-    apiKey: MAP_API_KEY,
-    version: "weekly",
-    libraries: ["core", "maps", "marker", "visualization"],
-  });
-
-  nuxtApp.provide('googlemapsLoader', loader);
-});