diff --git a/.changeset/empty-yaks-dream.md b/.changeset/empty-yaks-dream.md
new file mode 100644
index 0000000..56d26f5
--- /dev/null
+++ b/.changeset/empty-yaks-dream.md
@@ -0,0 +1,5 @@
+---
+"forager": minor
+---
+
+Users can now create landmarks
diff --git a/src/components/ItemDetails.vue b/src/components/ItemDetails.vue
index 37d4bae..bd2caa7 100644
--- a/src/components/ItemDetails.vue
+++ b/src/components/ItemDetails.vue
@@ -3,14 +3,14 @@ import { usePocketBase } from '@/pocketbase'
import { useMapbox } from '@/mapbox'
const mapboxStore = useMapbox()
-const { selectedItem } = storeToRefs(mapboxStore)
+const { selectedItem, selectedCollection } = storeToRefs(mapboxStore)
const pocketbaseStore = usePocketBase()
const { selectedItemPocketbase } = storeToRefs(pocketbaseStore)
watch(() => selectedItem.value, () => {
if (selectedItem.value !== undefined)
- pocketbaseStore.getSelectedItem(selectedItem.value)
+ pocketbaseStore.getSelectedItem(selectedItem.value, selectedCollection.value)
})
function clearSelected() {
@@ -51,7 +51,7 @@ const previewImg = computed(() => {
-
+
Last Foraged: {{ selectedItemPocketbase.lastForaged ? new Date(selectedItemPocketbase.lastForaged!).toDateString() : 'Never' }}
Start Month: {{ selectedItemPocketbase.startMonth || 'Not Set' }}
End Month: {{ selectedItemPocketbase.endMonth || 'Not Set' }}
@@ -60,7 +60,7 @@ const previewImg = computed(() => {
Delete
-
+
Forage Now
diff --git a/src/mapbox.ts b/src/mapbox.ts
index 6537aea..fc378dc 100644
--- a/src/mapbox.ts
+++ b/src/mapbox.ts
@@ -16,6 +16,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
const lat = ref(0)
const markerUIHidden = ref(true)
const selectedItem = ref(undefined)
+ const selectedCollection = ref('')
const detailsHidden = ref(true)
const items = ref(null)
const landmarks = ref([])
@@ -203,6 +204,7 @@ export const useMapbox = defineStore('mapbox-store', () => {
markerUIHidden.value = true
detailsHidden.value = false
selectedItem.value = e.features![0].properties!.id
+ selectedCollection.value = 'items'
})
// Change the cursor to a pointer when the mouse is over the places layer.
@@ -216,6 +218,22 @@ export const useMapbox = defineStore('mapbox-store', () => {
if (map)
map.getCanvas().style.cursor = ''
})
+
+ map.on('click', 'landmark', async (e) => {
+ markerUIHidden.value = true
+ detailsHidden.value = false
+ selectedItem.value = e.features![0].properties!.id
+ selectedCollection.value = 'landmarks'
+ })
+ map.on('mouseenter', 'landmark', () => {
+ if (map)
+ map.getCanvas().style.cursor = 'pointer'
+ })
+
+ map.on('mouseleave', 'landmark', () => {
+ if (map)
+ map.getCanvas().style.cursor = ''
+ })
}
const addLandmark = async (landmark: Omit) => {
@@ -281,24 +299,43 @@ export const useMapbox = defineStore('mapbox-store', () => {
}
const deleteMarker = async (id: string) => {
- const { getItems, deleteItem } = usePocketBase()
+ const { getItems, getLandmarks, deleteItem } = usePocketBase()
- await deleteItem(id)
+ await deleteItem(id, selectedCollection.value)
- items.value = await getItems()
+ if (selectedCollection.value === 'items') {
- const itemLayer = ref([])
+ items.value = await getItems()
- // Get the GeoJSON source by ID
- const source = map?.getSource('items') as mapboxgl.GeoJSONSource
+ const itemLayer = ref([])
- if (items.value)
- itemLayer.value = translateItemToLayerItem(items.value)
+ // Get the GeoJSON source by ID
+ const source = map?.getSource(selectedCollection.value) as mapboxgl.GeoJSONSource
- source.setData({
- type: 'FeatureCollection',
- features: itemLayer.value,
- })
+ if (items.value)
+ itemLayer.value = translateItemToLayerItem(items.value)
+
+ source.setData({
+ type: 'FeatureCollection',
+ features: itemLayer.value,
+ })
+ }
+ if (selectedCollection.value === 'landmarks') {
+ landmarks.value = await getLandmarks()
+
+ const itemLayer = ref([])
+
+ // Get the GeoJSON source by ID
+ const source = map?.getSource(selectedCollection.value) as mapboxgl.GeoJSONSource
+
+ if (landmarks.value)
+ itemLayer.value = translateItemToLayerItem(landmarks.value)
+
+ source.setData({
+ type: 'FeatureCollection',
+ features: itemLayer.value,
+ })
+ }
}
const updateMarkerLayer = async () => {
@@ -338,5 +375,6 @@ export const useMapbox = defineStore('mapbox-store', () => {
items,
updateMarkerLayer,
addLandmark,
+ selectedCollection,
}
})
diff --git a/src/mapbox/layers.ts b/src/mapbox/layers.ts
index 0ceeac7..15b6b47 100644
--- a/src/mapbox/layers.ts
+++ b/src/mapbox/layers.ts
@@ -109,7 +109,7 @@ export function createLayers(map: mapboxgl.Map) {
export function createLandmarks(map: mapboxgl.Map) {
map.addLayer({
- id: 'unclustered-landmark',
+ id: 'landmark',
type: 'symbol',
source: 'landmarks',
minzoom: 14,
diff --git a/src/pocketbase.ts b/src/pocketbase.ts
index e1c9c62..4ac168d 100644
--- a/src/pocketbase.ts
+++ b/src/pocketbase.ts
@@ -162,10 +162,10 @@ export const usePocketBase = defineStore('pocketbase-store', () => {
return response
}
- const getSelectedItem = async (id: string) => {
+ const getSelectedItem = async (id: string, collection: string) => {
try {
// or fetch only the first record that matches the specified filter
- selectedItemPocketbase.value = await pb.collection('items').getOne(id)
+ selectedItemPocketbase.value = await pb.collection(collection).getOne(id)
}
catch (error: unknown) {
if (isError(error))
@@ -203,9 +203,9 @@ export const usePocketBase = defineStore('pocketbase-store', () => {
}
}
- const deleteItem = async (id: string) => {
+ const deleteItem = async (id: string, collection: string) => {
try {
- await pb.collection('items').delete(id)
+ await pb.collection(collection).delete(id)
await getItems()
}
catch (error: unknown) {