geodata: add popup to markers

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

@@ -1,98 +1,28 @@
 <script lang="ts" setup>
 import 'leaflet/dist/leaflet.css'
 import * as L from 'leaflet'
-// import { ViewTypes } from '~~/../nocodb-sdk/build/main'
-// import { ViewTypes } from 'nocodb-sdk'
-// import { IsFormInj, IsGalleryInj, IsGridInj, IsMapInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports'
 import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
-import type { Row } from '~/lib'
+import { rowProps } from 'ant-design-vue/lib/grid/Row'
 
-// const { isUIAllowed } = useUIPermission()
-
-// provide(IsFormInj, ref(false))
 provide(IsGalleryInj, ref(false))
 provide(IsGridInj, ref(false))
 provide(IsMapInj, ref(true))
-// provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
-
-// const meta = inject(MetaInj, ref())
-// const view = inject(ActiveViewInj, ref())
-
-// const view = inject(ActiveViewInj, ref())
-// const meta = inject(MetaInj, ref())
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
-
-// const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
 const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
-// const {
-//   showSystemFields,
-//   // sortedAndFilteredFields,
-//   fields,
-//   filteredFieldList,
-//   // filterQuery,
-//   showAll,
-//   // hideAll,
-//   // saveOrUpdate,
-//   // metaColumnById,
-// } = useViewColumns(view, meta)
-
-// console.log('fields.value', fields.value)
-// console.log('showSystemFields.value', showSystemFields.value)
-// console.log('filteredFieldList.value', filteredFieldList.value)
-// console.log('showAll.value', showAll.value)
-// console.log('fields.value', fields.value)
 
 const markerRef = ref()
 const myMapRef = ref()
-// const latitude = formattedData.value
-// const longitude = ref()
 const markersRef = ref<L.MarkerClusterGroup | undefined>()
 
-// watch(view, async (nextView) => {
-//   if (nextView?.type === ViewTypes.MAP) {
-//     // loadData()
-//     console.log('change')
-//     alert('JO')
-//   }
-// })
-
-// const { isUIAllowed } = useUIPermission()
-
 onBeforeMount(async () => {
-  // console.log('onBeforeMount')
   await loadMapMeta()
   await loadMapData()
-  // console.log('IN BEFOREMOUNT: geoDataFieldColumn.value.title', geoDataFieldColumn?.value?.title)
-  // console.log('on mapview formatted', formattedData)
-  // const geodata = data.value[0].row.geo.split(';')
 })
 
-// const geoDataColumn: any = $(
-//   computed(() =>
-//     meta.value?.columnsById
-//       ? meta.value.columnsById[mapData?.value?.fk_geo_data_col_id as keyof typeof meta.value.columnsById]
-//       : {},
-//   ),
-// )
-
-const { fk_geo_data_col_id } = mapMetaData.value
-
-console.log('fk_geo_data_col_id', fk_geo_data_col_id)
-
 watch([formattedData, mapMetaData], () => {
-  // console.log('WATCH CALL FOR formattedData')
   markersRef.value?.clearLayers()
-  // formattedData.get()
-  // const rows = Array.from(formattedData.value.values())
-  // console.log('rows', rows)
-
-  // console.log('IN WATCHER: geoDataFieldColumn.value', geoDataFieldColumn?.value)
 
   formattedData.value?.forEach((row) => {
-    // const [lat, long] =
-    // console.log('meta', meta?.value?.columns)
-    console.log('row', row)
-
     const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title
 
     if (primaryGeoDataColumnTitle == null) {
@@ -104,23 +34,10 @@ watch([formattedData, mapMetaData], () => {
     const primaryGeoDataValue = row[primaryGeoDataColumnTitle]
     console.log('primaryGeoDataValue', primaryGeoDataValue)
 
-    const [lat, long] = primaryGeoDataValue.split(';')
+    const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
-
-    console.log('lat, long', lat, long)
 
     addMarker(lat, long)
-
+    addMarker(51, 0)
-    // if (geoDataFieldColumn?.value?.title === null) return
-
-    // const [lat, long] = row?.split(';').map(parseFloat)
-    // if (lat == null || long == null) {
-    //   return
-    // }
-    // console.log('lat', lat)
-    // addMarker(lat, long)
-
-    // const selected = row?.rowMeta?.selected
-    // console.log(selected)
   })
 })
 
@@ -128,47 +45,96 @@ reloadViewDataHook?.on(async () => {
   loadMapData()
 })
 
-function addMarker(lat: number, long: number) {
+function addMarker(lat: number, long: number, popupContent: string) {
   const markerNew = markerRef?.value?.([lat, long])
-  // console.log(markersRef.value)
+  // markerNew.bindPopup('I am a popup').openPopup()
+
   markersRef?.value?.addLayer(markerNew)
 
   myMapRef?.value?.addLayer(markersRef.value)
+
+  if (markerNew) {
+    markerNew.bindPopup(popupContent)
+  }
+  return markerNew
 }
 
+// function addPopup(marker: any) {
+//   marker.bindPopup('I am a popup').openPopup()
+// }
+
+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]
+
+    // 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>`
+      })
+      .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)
+  })
+})
+
 onMounted(async () => {
   const { map, tileLayer, marker } = await import('leaflet')
   await import('leaflet.markercluster')
   const myMap = map('map').setView([51.505, -0.09], 13)
   markerRef.value = marker
   myMapRef.value = myMap
-  // console.log('markerClusterGroup', L.markerClusterGroup)
   markersRef.value = L.markerClusterGroup()
 
   tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
+    maxZoom: 5,
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(myMap)
-
-  // addMarker(52, 0)
 })
-
-// const geodata = data.value[0].row.geo.split(';')
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full">
   {{ JSON.stringify(formattedData) }}
-    {{ JSON.stringify(geoDataFieldColumn?.title) }}
+  <div class="flex flex-col h-full w-full">
-    <!-- {{ JSON.stringify(selected) }} -->
-    <!-- {{ JSON.stringify(meta?.columns) }} -->
-    <!-- <div class="flex m-4 gap-4">
-      <label :for="latitude">latitude</label>
-      <input v-model="latitude" />
-      <label :for="longitude">longitude</label>
-      <input v-model="longitude" />
-      <button class="bg-blue" @click="addMarker">Submit</button>
-    </div> -->
     <client-only placeholder="Loading...">
       <div class="nounderline" id="map"></div>
     </client-only>
@@ -179,7 +145,7 @@ onMounted(async () => {
 #map {
   height: 100vh;
 }
-.nounderline {
+.nounderline a {
   text-decoration: none;
 }
 </style>

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -12,13 +12,10 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
     const { api } = useApi()
     const { project } = useProject()
-    // const { $e, $api } = useNuxtApp()
     const { $api } = useNuxtApp()
 
     const mapMetaData = ref<MapType>({})
 
-    // const geoDataField = ref<string>('')
-
     const geoDataFieldColumn = ref<ColumnType | undefined>()
 
     async function loadMapMeta() {
@@ -31,47 +28,11 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
     async function loadMapData() {
       if (!viewMeta?.value?.id || !meta?.value?.columns) return
 
-      //   formattedData.value = []
-
       const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!)
 
       console.log('in useMapViewDataStore - res.list: ', res.list)
 
       formattedData.value = res.list
-
-      //   for (const data of res) {
-      //     const key = data.key
-      //     formattedData.value.set(key, data.value.list)
-      //   }
-
-      // //   geoDataFieldColumn.value =
-      // //     (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
-
-      //   geoDataField.value = geoDataFieldColumn!.value!.title!
-
-      // //   const { fk_geo_data_col_id, meta: geo_meta } = mapMetaData.value
-
-      // //   const geoMetaObj: any.value = geo_meta ? JSON.parse(geo_meta as string) : {}
-
-      // //   console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id])
-      //   // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
-
-      //   // reset formattedData & countByStack to avoid storing previous data after changing grouping field
-
-      //   //   alert('in loadMapData')
-      //   //   debugger
-
-      //   console.log('res in mapviewdatastore', res)
-
-      //   for (const data of res.list) {
-      //     formattedData.value = data.value
-      //     formattedData.value = res.list
-      //   }
-
-      // for (const data of res) {
-      //     const key = data.key
-      //     formattedData.value.set(key, formatData(data.value.list))
-      //   }
     }
 
     return {
@@ -93,33 +54,3 @@ export function useMapViewStoreOrThrow() {
 
   return mapViewStore
 }
-
-// async function loadMapData() {
-//     if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
-
-//     // reset formattedData & countByStack to avoid storing previous data after changing grouping field
-//     formattedData.value = new Map<string | null, Row[]>()
-//     countByStack.value = new Map<string | null, number>()
-
-//     let res
-
-//     if (isPublic.value) {
-//       res = await fetchSharedViewGroupedData(groupingFieldColumn!.value!.id!)
-//     } else {
-//       res = await api.dbViewRow.groupedDataList(
-//         'noco',
-//         project.value.id!,
-//         meta.value!.id!,
-//         viewMeta.value!.id!,
-//         groupingFieldColumn!.value!.id!,
-//         {},
-//         {},
-//       )
-//     }
-
-//     for (const data of res) {
-//       const key = data.key
-//       formattedData.value.set(key, formatData(data.value.list))
-//       countByStack.value.set(key, data.value.pageInfo.totalRows || 0)
-//     }
-//   }