Browse Source

WIP - trying out new leaflet usage structure - works with popup and clusters (and cleaner code)

pull/4140/head
flisowna 2 years ago
parent
commit
6385c78db3
  1. 12
      packages/nc-gui/components/smartsheet/Map.vue

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

@ -75,14 +75,18 @@ onMounted(async () => {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(myMap)
markersClusterGroupRef.value = L.markerClusterGroup()
markersClusterGroupRef.value = L.markerClusterGroup({
iconCreateFunction(cluster) {
return L.divIcon({ html: `${cluster.getChildCount()}`, className: 'geo-map-marker-cluster' })
},
})
myMap.addLayer(markersClusterGroupRef.value)
})
</script>
<template>
<div class="flex flex-col h-full w-full nounderline">
<div id="mapContainer" ref="mapContainerRef" class="FOOBAR"></div>
<div id="mapContainer" ref="mapContainerRef"></div>
</div>
</template>
@ -93,4 +97,8 @@ onMounted(async () => {
.nounderline {
text-decoration: none;
}
:global(.geo-map-marker-cluster) {
background-color: pink;
}
</style>

Loading…
Cancel
Save