@mptw/skylens-ui 1.4.99 → 1.4.101

package/components/SLHeatMap.vue

@@ -27,7 +27,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { LatLngBounds, LatLng, AdvancedMarkerElement, Map } = useNuxtApp();
+    const { $LatLngBounds, $LatLng, $AdvancedMarkerElement, $Map } = useNuxtApp();
     const { latlons, weights, isShowMarker } = toRefs(props);
 
     const mapEl = shallowRef<HTMLElement | null>(null);
@@ -40,42 +40,35 @@ export default defineComponent({
       if (!mapEl.value) return;
 
       if (!map) {
-        map = Map(mapEl.value, {
+        map = new $Map(mapEl.value, {
+          zoom: 11,
+          mapId: '160f8be79f87792deee048cf',
+          center: { lat: 37.77325660358167, lng: -122.41712341793448 },
           disableDefaultUI: true,
-          styles: [
-            {
-              featureType: "poi",
-              stylers: [{ visibility: "off" }],
-            },
-            {
-              featureType: "transit",
-              stylers: [{ visibility: "off" }],
-            },
-          ],
         });
       }
 
-      map.setCenter({ lat: 23.586114913594802, lng: 120.87814086119803 });
       overlay = new GoogleMapsOverlay({});
       overlay.setMap(map);
 
+      setupMarkers();
       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,
           })
@@ -100,7 +93,7 @@ export default defineComponent({
           weight: weight.weight,
         }));
 
-      overlay.setOptions({
+      overlay.setProps({
         layers: [
           new HeatmapLayer({
             id: 'HeatmapLayer',
@@ -131,6 +124,10 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
+      if (overlay) {
+        overlay.finalize();
+      }
+      overlay = null;
     });
 
     return {
@@ -140,7 +137,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: [

package/package.json

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

package/pages/index.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+.main
+  a(href='javascript:;', @click='onClickedToggle') toggle
+  .container
+    SLHeatMap(:latlons="latlons", :weights="latlons", :is-show-marker="isShowMarker")
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'IndexPage',
+  setup() {
+    const isShowMarker = ref(false);
+    const latlons = computed(() => {
+      return [
+        { weight: 4, lon: -122.42177834, lat: 37.78346622 },
+        { weight: 2, lon: -122.414411, lat: 37.774458 },
+        { weight: 2, lon: -122.438887, lat: 37.772737 },
+        { weight: 2, lon: -122.42019976, lat: 37.75087429 },
+        { weight: 2, lon: -122.392606, lat: 37.779369 },
+        { weight: 2, lon: -122.43065953, lat: 37.77185018 },
+        { weight: 2, lon: -122.43065953, lat: 37.77185018 },
+        { weight: 4, lon: -122.418974, lat: 37.754029 },
+        { weight: 14, lon: -122.419014, lat: 37.780519 },
+        { weight: 2, lon: -122.404719, lat: 37.770128 },
+        { weight: 2, lon: -122.390466, lat: 37.780226 },
+      ];
+    });
+
+    function onClickedToggle() {
+      isShowMarker.value = !isShowMarker.value;
+    }
+
+    return { latlons, isShowMarker, onClickedToggle };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.container
+  @apply s('w-[600px]') s('h-[480px]')
+</style>

package/plugins/googlemap.ts

@@ -2,15 +2,17 @@ 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;
+    $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,