salvato.newfreeplanet/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'
import { useGlobalStore } from '@src/store/globalStore'

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 globalStore = useGlobalStore()

    const iconWidth = ref(25)
    const iconHeight = ref(40)
    const zoom = ref(8)

    const map = ref(<any>null);

    const visiblePosition = ref(false)

    const markers = ref(<any>null);

    const isTrackingLocation = ref(false)

    const currentMarker = ref<L.Marker | null>(null)

    const centerCoordinates = ref<{ lat: number; lng: number }>({ lat: 0, lng: 0 });  // 

    const mapOptions = ref(<any>{
      zoomControl: true,      
      zoomAnimation: true,
      fadeAnimation: true,
      markerZoomAnimation: false, //true      
    })

    const tileLayerOptions = {
      maxZoom: 17,
      minZoom: 3,
    }

    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 myIconPosAtt = 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 iconPosition = L.divIcon({
      className: 'custom-marker', // Classe CSS personalizzata
      html: '<span class="material-icons">location_on</span>',
      iconSize: [40, 40],
      iconAnchor: [22, 35],
      popupAnchor: [-6, -36],
    });

    const currentLocationIcon = L.divIcon({
      className: 'current-location-icon',
      iconSize: [20, 20],
      iconAnchor: [10, 10]
    });


    const arrcord = toRef(props, 'arrcord')

    watch(() => visiblePosition.value, () => {
      if (visiblePosition.value === true) {
        getCurrentPosition()
      } else {
        removeCurrentMarker()
      }
    })

    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 () => {

      initMap()

    });

    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 getIconName(myrec: any) {
      const myarrSectors = myrec.sector
      if (!myarrSectors) return 'mdi-map-marker-outline'

      let sectId = myarrSectors[0]._id
      return globalStore.getIconBySector(sectId)
    }

    function initMap() {
      if (true) {
        const getLastCoord = [tools.getCookie('last_lat', 42.71), tools.getCookie('last_lng', 12.934)]
        console.log('getLastCoord', getLastCoord)
        zoom.value = tools.getCookie('zoom', 8, true)
        console.log('getLastCoord', getLastCoord, 'zoom', zoom.value)
        const newmapopt = { ...mapOptions.value, 
          zoom: zoom.value,
          center: getLastCoord 
        }
        map.value = L.map('map', newmapopt);
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', tileLayerOptions).addTo(map.value);

        map.value.on('moveend', () => {
          const center = map.value.getCenter(); // Ottieni le coordinate centrali
          centerCoordinates.value = { lat: center.lat, lng: center.lng }; // Salva le coordinate
          const currentZoomLevel = map.value.getZoom();
          tools.setCookie('last_lat', center.lat)
          tools.setCookie('last_lng', center.lng)
          tools.setCookie('zoom', currentZoomLevel)
          // console.log('Coordinate centrali aggiornate:', centerCoordinates.value);
        });

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

        map.value.addLayer(markers.value);

        // Assicuriamoci che la mappa sia completamente caricata prima di procedere
        map.value.whenReady(() => {
          console.log('Mappa inizializzata e pronta');
          updateMap();
        });
      }
    }

    function updateMap() {
      if (!map.value || !markers.value) return;

      if (map.value) {
        markers.value.clearLayers();

        for (const rec of arrcord.value) {
          if (rec.coordinate_gps.coordinates) {
            const markerHtml = `
            <div class="marker-wrapper">
            <img src="images/marker-shadow.png" class="marker-shadow" alt="Shadow" />
            <img src="images/icon.png" class="marker-icon" alt="${name}" />

            <div class="marker-circle"></div>
            
            <!-- Aggiungi l'icona aggiuntiva al centro -->
            <div class="marker-mini-icon ${getIconName(rec)}"></div>
        </div>        `;

            const markerIcon = L.divIcon({
              className: 'custom-marker', // Classe CSS personalizzata
              html: markerHtml,
              iconSize: [40, 40],
              iconAnchor: [22, 35],
              popupAnchor: [-6, -36],
              shadowUrl: 'images/marker-shadow.png',
              shadowSize: [60, 30],
              shadowAnchor: [22, 35]
            });


            // @ts-ignore
            let each_marker = new L.marker(
              [rec.coordinate_gps.coordinates[1], rec.coordinate_gps.coordinates[0]],
              {
                icon: markerIcon

              },
            )
              .bindPopup(() => {
                let container = L.DomUtil.create('div');
                container.innerHTML = `
                <span class="fake-link">${rec.descr}</span>
                `;

                let fakeLink: any = container.querySelector('.fake-link');
                L.DomEvent.on(fakeLink, 'click', (e) => {
                  L.DomEvent.stopPropagation(e);
                  ApriScheda(rec._id);
                  each_marker.closePopup();
                });

                return container;
              }, { closeButton: false }) // Rimuove il pulsante di chiusura dal popup

              .on('click', () => {
                if (!$q.screen.lt.sm) {
                  markerClick(rec._id)
                }
              })
              .on('mouseover', () => {
                if (!$q.screen.lt.sm) {
                  each_marker.openPopup()
                }
              })
              .on('mouseout', () => {
                if (!$q.screen.lt.sm) {
                  each_marker.closePopup()
                }
              });
            markers.value.addLayer(each_marker);
          }
        }

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

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

    const getCurrentPosition = () => {
      if (navigator.geolocation) {
        isTrackingLocation.value = true; // Setta lo stato a "in tracciamento"

        navigator.geolocation.getCurrentPosition(
          position => {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;

            if (zoom.value < 12) {
              zoom.value = 12;
            }
            // Centra la mappa sulla posizione attuale
            map.value.flyTo([lat, lng], zoom.value, {
              animate: true,
              duration: 0.5
            })
            // setView([lat, lng], map.getZoom())

            if (currentMarker.value) {
              map.value.removeLayer(currentMarker.value);
            }

            // Aggiungi un marker per la posizione attuale, se desiderato
            currentMarker.value = L.marker(
              [lat, lng],
              { icon: currentLocationIcon }
            ).addTo(map.value)
              .bindPopup('Posizione attuale')
              .openPopup();

            isTrackingLocation.value = false; // Resetta lo stato di tracciamento
          },
          error => {
            console.error('Errore nel recupero della posizione:', error);
            isTrackingLocation.value = false; // Resetta lo stato di tracciamento
          }
        );
      } else {
        console.error('Geolocalizzazione non supportata dal browser.');
      }
    }

    const removeCurrentMarker = () => {
      if (currentMarker.value) {
        map.value.removeLayer(currentMarker.value); // Rimuovi il marker dalla mappa
        currentMarker.value = null; // Resetta il riferimento
      }
    }

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