Browse Source

WIP (currently works flaky)

pull/4140/head
flisowna 2 years ago
parent
commit
48efeace11
  1. 34
      packages/nc-gui/components/smartsheet/Map.vue

34
packages/nc-gui/components/smartsheet/Map.vue

@ -24,14 +24,11 @@ reloadViewDataHook?.on(async () => {
})
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])
markersRef?.value?.addLayer(markerNew)
myMapRef?.value?.addLayer(markerRef.value)
myMapRef?.value?.addLayer(markersRef.value)
if (markerNew) {
markerNew.bindPopup(popupContent)
@ -73,15 +70,12 @@ onMounted(async () => {
const myMap = map('map').setView([51.505, -0.09], 13)
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' })
// },
// }
// )
markersRef.value = L.markerClusterGroup({
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: 10,
@ -91,9 +85,9 @@ onMounted(async () => {
</script>
<template>
<div class="flex flex-col h-full w-full nounderline">
<div class="flex flex-col h-full w-full">
<client-only placeholder="Loading...">
<div id="map"></div>
<div class="nounderline" id="map"></div>
</client-only>
</div>
</template>
@ -102,15 +96,15 @@ onMounted(async () => {
#map {
height: 100vh;
}
.nounderline {
.nounderline a {
text-decoration: none;
}
/* .marker-cluster b {
.marker-cluster b {
background-color: rgba(226, 36, 36, 0.6);
} */
}
/* .FOOBAR {
.FOOBAR {
background-color: pink;
} */
}
</style>

Loading…
Cancel
Save