github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

geodata: add popup to markers

pull/4140/head
flisowna 2 years ago
parent
5b28c5eb78
commit
a017bb0dac
2 changed files with 72 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 178
      packages/nc-gui/components/smartsheet/Map.vue
  2. 69
      packages/nc-gui/composables/useMapViewDataStore.ts

178
packages/nc-gui/components/smartsheet/Map.vue
Unescape View File

@ -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(';')
console.log('lat, long', lat, long)
const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
addMarker(lat, long)
// 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)
addMarker(51, 0)
})
})
@ -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) }}
<!-- {{ 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> -->
<div class="flex flex-col h-full w-full">
<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>

69
packages/nc-gui/composables/useMapViewDataStore.ts
Unescape View File

@ -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)
// }
// }

Write Preview
Loading…
Cancel
Save