myprojplanet_vite/src/components/CMapByTable/CMapByTable.ts

import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { PropType, defineComponent, onMounted, ref, computed, toRef, watch } from 'vue'

import 'leaflet/dist/leaflet.css'
// @ts-ignore
import * as L from 'leaflet'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'

import { useUserStore } from '@src/store/UserStore'

export default defineComponent({
  name: 'CMapByTable',
  props: {
    mytable: {
      type: String,
      required: true,
    },
    arrcord: {
      type: Array as PropType<any[]>,
      required: false,
      default: () => { return [] }
    }
  },
  setup(props, { emit }) {
    const $q = useQuasar()
    const userStore = useUserStore()

    const iconWidth = ref(25)
    const iconHeight = ref(40)
    const map = ref(<any>null)
    const zoom = ref(6)

    const initialMap = ref(<any>null);

    const markers = ref(<any>null);

    const myIcon = L.icon({
      iconUrl: 'images/icon.png',
      iconSize: [30, 30],
      iconAnchor: [22, 35],
      popupAnchor: [-6, -36],
      shadowUrl: 'images/marker-shadow.png',
      shadowSize: [60, 30],
      shadowAnchor: [22, 35]
    });

    const arrcord = toRef(props, 'arrcord')

    function mywidth() {
      return tools.getwidth($q) - 20
    }

    function myheight() {
      return $q.screen.height - 150
    }

    const iconUrl = computed(() => {
      return `https://placekitten.com/${iconWidth.value}/${iconHeight.value}`;
    })

    const iconSize = computed(() => {
      return [iconWidth.value, iconHeight.value];
    })

    function changeIcon() {
      iconWidth.value += 2;
      if (iconWidth.value > iconHeight.value) {
        iconWidth.value = Math.floor(iconHeight.value / 2);
      }
    }

    function getColor(d: any) {
      return d > 1000 ? '#800026' :
        d > 500 ? '#BD0026' :
          d > 200 ? '#E31A1C' :
            d > 100 ? '#FC4E2A' :
              d > 50 ? '#FD8D3C' :
                d > 20 ? '#FEB24C' :
                  d > 10 ? '#FED976' :
                    '#FFEDA0';
    }

    function style(feature: any) {
      return {
        fillColor: getColor(feature.properties.density),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
      };
    }

    watch(arrcord, () => {
      updateMap()
    })

    onMounted(async () => {
      // Ottengo la lista degli utenti con i lat e long
      // arrcord.value = await userStore.getProvincesForMap()

      // @ts-ignore
      markers.value = L.markerClusterGroup()

      initialMap.value = L.map('map',
        {
          zoomControl: true, zoom: zoom.value, zoomAnimation: true,
          fadeAnimation: true, markerZoomAnimation: true,
          center: [42.71, 12.934],
        }
      );
      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 15,
        attribution: ''
      }).addTo(initialMap.value);

      updateMap()

      // @ts-ignore
    });

    function log(str: string) {
      console.log(str)
    }

    function getCoordinates(e: any) {
      // Ottieni la latitudine e la longitudine dal click
      const lat = e.latlng.lat
      const lng = e.latlng.lng

      // Fai qualcosa con le coordinate, ad esempio stamparle in console
      console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
    }

    function updateMap() {
      if (initialMap.value) {
        markers.value.clearLayers();

        for (const rec of arrcord.value) {
          if (rec.coordinate_gps.coordinates) {
            // @ts-ignore
            let each_marker = new L.marker(
              [rec.coordinate_gps.coordinates[1], rec.coordinate_gps.coordinates[0]], { icon: myIcon })
              .bindPopup(`<strong>${rec.descr}</strong>`)
              .on('click', () => markerClick(rec._id)); // Collega il click al bottone
            markers.value.addLayer(each_marker);
          }
        }

        // Aggiungi il gruppo di marker cluster alla mappa
        initialMap.value.addLayer(markers.value);
      }
    }

    function markerClick(id: any) {
      emit('clickMarker', id)
    }

    return {
      mywidth,
      myheight,
      map,
      iconWidth,
      iconHeight,
      iconUrl,
      iconSize,
      changeIcon,
      zoom,
      log,
      getCoordinates,
      arrcord,
    }
  }
})