146 lines
3.7 KiB
TypeScript
Executable File
146 lines
3.7 KiB
TypeScript
Executable File
import { tools } from '@store/Modules/tools'
|
|
import { useQuasar } from 'quasar'
|
|
import { PropType, defineComponent, onMounted, ref, computed } from 'vue'
|
|
|
|
import 'leaflet/dist/leaflet.css'
|
|
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: 'CMapUsers',
|
|
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 arrprovince = ref(<any>[])
|
|
|
|
const initialMap = 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]
|
|
});
|
|
|
|
|
|
function mywidth() {
|
|
return tools.getwidth($q) - 20
|
|
}
|
|
|
|
function myheight() {
|
|
return $q.screen.height - 50
|
|
}
|
|
|
|
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
|
|
};
|
|
}
|
|
|
|
onMounted(async () => {
|
|
// Ottengo la lista degli utenti con i lat e long
|
|
arrprovince.value = await userStore.getProvincesForMap()
|
|
|
|
initialMap.value = L.map('map',
|
|
{
|
|
zoomControl: true, zoom: zoom.value, zoomAnimation: false,
|
|
fadeAnimation: true, markerZoomAnimation: true,
|
|
center: [42.71, 12.934],
|
|
}
|
|
);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 13,
|
|
attribution: ''
|
|
}).addTo(initialMap.value);
|
|
|
|
// @ts-ignore
|
|
const markers = L.markerClusterGroup();
|
|
|
|
for (const provincia of arrprovince.value) {
|
|
if (provincia.lat && provincia.long && provincia.userCount > 1) {
|
|
// @ts-ignore
|
|
let each_marker = new L.marker(
|
|
[provincia.lat, provincia.long], { icon: myIcon })
|
|
.bindPopup(`<strong> ${provincia.descr}:
|
|
${provincia.userCount} utenti </strong>`);
|
|
markers.addLayer(each_marker);
|
|
}
|
|
}
|
|
|
|
initialMap.value.addLayer(markers);
|
|
|
|
});
|
|
|
|
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}`)
|
|
}
|
|
|
|
return {
|
|
mywidth,
|
|
myheight,
|
|
map,
|
|
iconWidth,
|
|
iconHeight,
|
|
iconUrl,
|
|
iconSize,
|
|
changeIcon,
|
|
zoom,
|
|
log,
|
|
getCoordinates,
|
|
arrprovince,
|
|
}
|
|
}
|
|
})
|