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

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()
 })