Browse Source

geodata: add tooltip to each marker on hover - works, WIP: show attachments, qrcode on tooltip

pull/4723/head
flisowna 2 years ago
parent
commit
94148f02f6
  1. 18
      packages/nc-gui/components/smartsheet/Map.vue

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

@ -82,7 +82,7 @@ const expandedFormOnRowIdDlg = computed({
},
})
const addMarker = (lat: number, long: number, row: RowType) => {
const addMarker = (lat: number, long: number, row: RowType, popupContent: string) => {
if (markersClusterGroupRef.value == null) {
throw new Error('Map is null')
}
@ -90,6 +90,10 @@ const addMarker = (lat: number, long: number, row: RowType) => {
expandForm(row)
})
markersClusterGroupRef.value?.addLayer(newMarker)
if (newMarker) {
newMarker.bindTooltip(popupContent)
}
}
const resetZoomAndCenterBasedOnLocalStorage = () => {
@ -178,13 +182,23 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
}
const primaryGeoDataValue = row.row[primaryGeoDataColumnTitle]
if (primaryGeoDataValue == null) {
return
}
const listItems = Object.entries(row.row)
.map(([key, val]) => {
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>`
const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
addMarker(lat, long, row)
addMarker(lat, long, row, popupContent)
})
syncCount()
})

Loading…
Cancel
Save