- Creazione "AbitareGliIblei"

- Mappa Interattiva con i markers

src/components/CMapByTable/CMapByTable.ts

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