@mptw/skylens-ui 1.4.101 → 1.4.103

package/nuxt.config.ts

@@ -11,7 +11,6 @@ export default defineNuxtConfig({
     public: {
       defaultMobileEndDateBeforeNow: 4,
       icoUrl: 'https://skylens-mng-dev-1087511617183.asia-east1.run.app',
-      googleMapsApiKey: 'AIzaSyDMNNizDMizdxJd3oAhsbkx1kL5Gyicnns',
     },
   },
   components: [
@@ -23,7 +22,6 @@ 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.101",
+  "version": "1.4.103",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -18,17 +18,11 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@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",
     "@types/commonmark": "^0.27.10",
     "@types/dompurify": "^3.2.0",
-    "@types/google.maps": "^3.58.1",
     "@types/lodash-es": "^4.17.12",
     "@types/sortablejs": "^1.15.9",
     "@vue/language-plugin-pug": "^3.2.2",

package/pages/index.vue

@@ -1,41 +1,15 @@
 <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 };
+    return {};
   },
 });
 </script>
 
 <style lang="stylus" scoped>
-.container
-  @apply s('w-[600px]') s('h-[480px]')
 </style>

package/components/SLHeatMap.vue

@@ -1,143 +0,0 @@
-<template lang="pug">
-.heat-map(ref="mapEl")
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-import { GoogleMapsOverlay } from '@deck.gl/google-maps';
-import { HeatmapLayer } from '@deck.gl/aggregation-layers';
-
-const RADIUS = 30;
-
-export default defineComponent({
-  name: "SLHeatMap",
-  components: {},
-  props: {
-    latlons: {
-      type: Array as PropType<{ lat: string; lon: string }[]>,
-      default: () => [],
-    },
-    weights: {
-      type: Array as PropType<{ lat: string; lon: string; weight: number }[]>,
-      default: () => [],
-    },
-    isShowMarker: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const { $LatLngBounds, $LatLng, $AdvancedMarkerElement, $Map } = useNuxtApp();
-    const { latlons, weights, isShowMarker } = toRefs(props);
-
-    const mapEl = shallowRef<HTMLElement | null>(null);
-
-    let map: any | null = null;
-    let overlay: any | null = null;
-    let markers: any[] = [];
-
-    async function initMap() {
-      if (!mapEl.value) return;
-
-      if (!map) {
-        map = new $Map(mapEl.value, {
-          zoom: 11,
-          mapId: '160f8be79f87792deee048cf',
-          center: { lat: 37.77325660358167, lng: -122.41712341793448 },
-          disableDefaultUI: true,
-        });
-      }
-
-      overlay = new GoogleMapsOverlay({});
-      overlay.setMap(map);
-
-      setupMarkers();
-      setupHeatmapData();
-    }
-
-    function setupMarkers() {
-      const bounds = new $LatLngBounds();
-      markers.forEach((marker) => marker.setMap(null));
-      markers = [];
-
-      latlons.value.forEach((latlon) => {
-        const position = new $LatLng(
-          Number(latlon.lat),
-          Number(latlon.lon)
-        );
-        bounds.extend(position);
-
-        markers.push(
-          new $AdvancedMarkerElement({
-            position,
-            map: isShowMarker.value ? map : null,
-          })
-        );
-      });
-
-      if (map) {
-        map.fitBounds(bounds, 0);
-      }
-    }
-
-    function setupHeatmapData() {
-      if (!map || latlons.value.length === 0 || !overlay) return;
-
-      const heatMapData = weights.value
-        .filter((weight) => weight.weight > 0)
-        .map((weight) => ({
-          location: [
-            Number(weight.lon).valueOf(),
-            Number(weight.lat).valueOf()
-          ],
-          weight: weight.weight,
-        }));
-
-      overlay.setProps({
-        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,
-            radius: RADIUS,
-          }),
-        ],
-      });
-    }
-
-    watch(latlons, () => {
-      setupMarkers();
-    });
-    watch(weights, () => {
-      setupHeatmapData();
-    });
-    watch(isShowMarker, () => {
-      markers.forEach((marker) => {
-        marker.setMap(isShowMarker.value ? map : null);
-      });
-    });
-
-    onMounted(() => {
-      initMap();
-    });
-
-    onBeforeUnmount(() => {
-      if (overlay) {
-        overlay.finalize();
-      }
-      overlay = null;
-    });
-
-    return {
-      mapEl,
-    };
-  },
-});
-</script>
-
-<style lang="stylus" scoped>
-.heat-map
-  @apply w-full h-full
-</style>

package/plugins/googlemap.ts

@@ -1,29 +0,0 @@
-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);
-});