@mptw/skylens-ui 1.4.98 → 1.4.99

package/components/SLHeatMap.vue

@@ -4,9 +4,8 @@
 
 <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';
+import { HeatmapLayer } from '@deck.gl/aggregation-layers';
 
 const RADIUS = 30;
 
@@ -28,14 +27,11 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const runtimeConfig = useRuntimeConfig();
+    const { LatLngBounds, LatLng, AdvancedMarkerElement, Map } = useNuxtApp();
     const { latlons, weights, isShowMarker } = toRefs(props);
 
     const mapEl = shallowRef<HTMLElement | null>(null);
 
-    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[] = [];
@@ -43,17 +39,6 @@ export default defineComponent({
     async function initMap() {
       if (!mapEl.value) return;
 
-      setOptions({
-        key: runtimeConfig.public.googleMapsApiKey,
-      });
-
-      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 = Map(mapEl.value, {
           disableDefaultUI: true,
@@ -71,7 +56,7 @@ export default defineComponent({
       }
 
       map.setCenter({ lat: 23.586114913594802, lng: 120.87814086119803 });
-      overlay = new GoogleMapsOverlay();
+      overlay = new GoogleMapsOverlay({});
       overlay.setMap(map);
 
       setupHeatmapData();
@@ -109,8 +94,8 @@ export default defineComponent({
         .filter((weight) => weight.weight > 0)
         .map((weight) => ({
           location: [
-            Number(weight.lat),
-            Number(weight.lon)
+            Number(weight.lon).valueOf(),
+            Number(weight.lat).valueOf()
           ],
           weight: weight.weight,
         }));
@@ -123,6 +108,7 @@ export default defineComponent({
             aggregation: 'SUM',
             getPosition: (d: { location: number[], weight: number }) => d.location,
             getWeight: (d: { location: number[], weight: number }) => d.weight,
+            radius: RADIUS,
           }),
         ],
       });

package/nuxt.config.ts

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
   ],
   modules: ['@nuxtjs/tailwindcss'],
   plugins: [
+    '~ui/plugins/googlemap.ts',
     '~ui/plugins/v-calendar.ts',
   ],
   tailwindcss: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.98",
+  "version": "1.4.99",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/plugins/googlemap.ts

@@ -0,0 +1,27 @@
+import { setOptions, importLibrary } from '@googlemaps/js-api-loader';
+
+declare module '#app' {
+  interface NuxtApp {
+    LatLngBounds: google.maps.LatLngBounds;
+    LatLng: google.maps.LatLng;
+    Map: google.maps.Map;
+    AdvancedMarkerElement: google.maps.AdvancedMarkerElement;
+  }
+}
+
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const runtimeConfig = useRuntimeConfig();
+  setOptions({
+    key: runtimeConfig.public.googleMapsApiKey,
+  });
+
+  const { LatLngBounds, LatLng } = await importLibrary('core');
+  const { Map } = await importLibrary('maps');
+  const { AdvancedMarkerElement } = await importLibrary('marker');
+
+  nuxtApp.provide('LatLngBounds', LatLngBounds);
+  nuxtApp.provide('LatLng', LatLng);
+  nuxtApp.provide('Map', Map);
+  nuxtApp.provide('AdvancedMarkerElement', AdvancedMarkerElement);
+});