|
|
|
@ -2,7 +2,6 @@
|
|
|
|
|
import 'leaflet/dist/leaflet.css' |
|
|
|
|
import * as L from 'leaflet' |
|
|
|
|
import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports' |
|
|
|
|
import { rowProps } from 'ant-design-vue/lib/grid/Row' |
|
|
|
|
|
|
|
|
|
provide(IsGalleryInj, ref(false)) |
|
|
|
|
provide(IsGridInj, ref(false)) |
|
|
|
@ -19,39 +18,20 @@ onBeforeMount(async () => {
|
|
|
|
|
await loadMapData() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
watch([formattedData, mapMetaData], () => { |
|
|
|
|
markersRef.value?.clearLayers() |
|
|
|
|
|
|
|
|
|
formattedData.value?.forEach((row) => { |
|
|
|
|
const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title |
|
|
|
|
|
|
|
|
|
if (primaryGeoDataColumnTitle == null) { |
|
|
|
|
throw new Error('Cannot find primary geo data column title') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log('primaryGeoDataColumnTitle', primaryGeoDataColumnTitle) |
|
|
|
|
|
|
|
|
|
const primaryGeoDataValue = row[primaryGeoDataColumnTitle] |
|
|
|
|
console.log('primaryGeoDataValue', primaryGeoDataValue) |
|
|
|
|
|
|
|
|
|
const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat) |
|
|
|
|
|
|
|
|
|
addMarker(lat, long) |
|
|
|
|
addMarker(51, 0) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
reloadViewDataHook?.on(async () => { |
|
|
|
|
loadMapData() |
|
|
|
|
loadMapMeta() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
function addMarker(lat: number, long: number, popupContent: string) { |
|
|
|
|
L.marker([50.5, 0]).addTo(myMapRef.value) |
|
|
|
|
|
|
|
|
|
console.log('myMapRef.value', myMapRef.value) |
|
|
|
|
const markerNew = markerRef?.value?.([lat, long]) |
|
|
|
|
// markerNew.bindPopup('I am a popup').openPopup() |
|
|
|
|
|
|
|
|
|
markersRef?.value?.addLayer(markerNew) |
|
|
|
|
|
|
|
|
|
myMapRef?.value?.addLayer(markersRef.value) |
|
|
|
|
myMapRef?.value?.addLayer(markerRef.value) |
|
|
|
|
|
|
|
|
|
if (markerNew) { |
|
|
|
|
markerNew.bindPopup(popupContent) |
|
|
|
@ -59,10 +39,6 @@ function addMarker(lat: number, long: number, popupContent: string) {
|
|
|
|
|
return markerNew |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// function addPopup(marker: any) { |
|
|
|
|
// marker.bindPopup('I am a popup').openPopup() |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
watch([formattedData, mapMetaData], () => { |
|
|
|
|
markersRef.value?.clearLayers() |
|
|
|
|
|
|
|
|
@ -73,47 +49,21 @@ watch([formattedData, mapMetaData], () => {
|
|
|
|
|
throw new Error('Cannot find primary geo data column title') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log('primaryGeoDataColumnTitle', primaryGeoDataColumnTitle) |
|
|
|
|
|
|
|
|
|
const primaryGeoDataValue = row[primaryGeoDataColumnTitle] |
|
|
|
|
|
|
|
|
|
// const entries = Object.entries(row[0]) |
|
|
|
|
// const keys = Object.keys(row) |
|
|
|
|
// let text = '' |
|
|
|
|
// keys.forEach((key, index) => { |
|
|
|
|
// text += `<b>${key}</b><br>${row[key]}` |
|
|
|
|
// }) |
|
|
|
|
|
|
|
|
|
// console.log('text', text) |
|
|
|
|
// for (let i = 0; i < size; i++) { |
|
|
|
|
// return row. |
|
|
|
|
// } |
|
|
|
|
// const dataForPopup = row.toString() |
|
|
|
|
console.log('primaryGeoDataValue', primaryGeoDataValue) |
|
|
|
|
|
|
|
|
|
// const FOO = Object.keys(row) |
|
|
|
|
|
|
|
|
|
const listItems = Object.entries(row) |
|
|
|
|
.map(([key, val]) => { |
|
|
|
|
console.log('key', key) |
|
|
|
|
console.log('val', val) |
|
|
|
|
console.log('----------') |
|
|
|
|
return `<li><b>${key}</b>: ${val}</li>` |
|
|
|
|
const prettyVal = val !== null && (typeof val === 'object' || Array.isArray(val)) ? JSON.stringify(val) : val |
|
|
|
|
|
|
|
|
|
return `<li><b>${key}</b>: <br/>${prettyVal}</li>` |
|
|
|
|
}) |
|
|
|
|
.join('') |
|
|
|
|
|
|
|
|
|
const popupContent = `<ul>${listItems}</ul>` |
|
|
|
|
console.log('FOO', popupContent) |
|
|
|
|
|
|
|
|
|
const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat) |
|
|
|
|
|
|
|
|
|
console.log('lat', lat) |
|
|
|
|
console.log('long', long) |
|
|
|
|
|
|
|
|
|
addMarker(lat, long, popupContent) |
|
|
|
|
|
|
|
|
|
// const marker = addMarker(lat, long) |
|
|
|
|
// addPopup(marker) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
@ -124,19 +74,26 @@ onMounted(async () => {
|
|
|
|
|
markerRef.value = marker |
|
|
|
|
myMapRef.value = myMap |
|
|
|
|
markersRef.value = L.markerClusterGroup() |
|
|
|
|
// addMarker(52, 0, 'jdksauwdk') |
|
|
|
|
// { |
|
|
|
|
// iconCreateFunction(cluster) { |
|
|
|
|
// return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>` }) |
|
|
|
|
// // return L.divIcon({ html: `<b>${cluster.getChildCount()}</b>`, className: 'FOOBAR' }) |
|
|
|
|
// }, |
|
|
|
|
// } |
|
|
|
|
// ) |
|
|
|
|
|
|
|
|
|
tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
|
maxZoom: 5, |
|
|
|
|
maxZoom: 10, |
|
|
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', |
|
|
|
|
}).addTo(myMap) |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
{{ JSON.stringify(formattedData) }} |
|
|
|
|
<div class="flex flex-col h-full w-full"> |
|
|
|
|
<div class="flex flex-col h-full w-full nounderline"> |
|
|
|
|
<client-only placeholder="Loading..."> |
|
|
|
|
<div class="nounderline" id="map"></div> |
|
|
|
|
<div id="map"></div> |
|
|
|
|
</client-only> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
@ -145,7 +102,15 @@ onMounted(async () => {
|
|
|
|
|
#map { |
|
|
|
|
height: 100vh; |
|
|
|
|
} |
|
|
|
|
.nounderline a { |
|
|
|
|
.nounderline { |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* .marker-cluster b { |
|
|
|
|
background-color: rgba(226, 36, 36, 0.6); |
|
|
|
|
} */ |
|
|
|
|
|
|
|
|
|
/* .FOOBAR { |
|
|
|
|
background-color: pink; |
|
|
|
|
} */ |
|
|
|
|
</style> |
|
|
|
|