@mptw/skylens-ui 1.4.98 → 1.4.100

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,19 +39,9 @@ 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, {
+        map = new $Map(mapEl.value, {
+          center: { lat: 37.77325660358167, lng: -122.41712341793448 },
           disableDefaultUI: true,
           styles: [
             {
@@ -70,27 +56,26 @@ export default defineComponent({
         });
       }
 
-      map.setCenter({ lat: 23.586114913594802, lng: 120.87814086119803 });
-      overlay = new GoogleMapsOverlay();
+      overlay = new GoogleMapsOverlay({});
       overlay.setMap(map);
 
       setupHeatmapData();
     }
 
     function setupMarkers() {
-      const bounds = new LatLngBounds();
+      const bounds = new $LatLngBounds();
       markers.forEach((marker) => marker.setMap(null));
       markers = [];
 
       latlons.value.forEach((latlon) => {
-        const position = new LatLng(
+        const position = new $LatLng(
           Number(latlon.lat),
           Number(latlon.lon)
         );
         bounds.extend(position);
 
         markers.push(
-          new AdvancedMarkerElement({
+          new $AdvancedMarkerElement({
             position,
             map: isShowMarker.value ? map : null,
           })
@@ -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,
           }),
         ],
       });
@@ -154,7 +140,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .heat-map
   @apply w-full h-full
 </style>

package/nuxt.config.ts

@@ -11,7 +11,7 @@ export default defineNuxtConfig({
     public: {
       defaultMobileEndDateBeforeNow: 4,
       icoUrl: 'https://skylens-mng-dev-1087511617183.asia-east1.run.app',
-      googleMapsApiKey: 'AIzaSyDFNjeGBtbW-BdLKMb78cUR4F_OtUl0tlg',
+      googleMapsApiKey: 'AIzaSyDMNNizDMizdxJd3oAhsbkx1kL5Gyicnns',
     },
   },
   components: [
@@ -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.100",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/pages/index.vue

@@ -0,0 +1,15 @@
+<template lang="pug">
+.container
+  SLHeatMap
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'IndexPage',
+});
+</script>
+
+<style lang="stylus" scoped>
+.container
+  @apply s('w-[600px]') s('h-[480px]')
+</style>

package/plugins/googlemap.ts

@@ -0,0 +1,29 @@
+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) => {
+  if (!import.meta.client) return;
+
+  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);
+});