Offline-capable geomap, meant for storing location bookmarks
feat: init search/bookmark popup on deeplink
+41
-19
+1
-1
deno.json
+1
-1
deno.json
+1
-1
www/routes/bookmarks.ts
+1
-1
www/routes/bookmarks.ts
+37
-16
www/routes/map.ts
+37
-16
www/routes/map.ts
···
109
109
})
110
110
if (target.marker) {
111
111
this.#marker?.remove()
112
-
this.#marker = new maplibregl.Marker()
112
+
this.#marker = new maplibregl.Marker({ color: '#16a34a' })
113
113
.setLngLat([target.lng, target.lat])
114
114
.setPopup(
115
115
this.#buildPopup(
···
122
122
)
123
123
.addTo(this.#map!)
124
124
this.#marker.togglePopup()
125
+
} else if (target.bookmarkId) {
126
+
this.#showBookmarkPopup(target.bookmarkId)
125
127
}
126
128
}
127
129
})
···
251
253
}
252
254
}
253
255
256
+
#buildBookmarkPopup(name: string, id?: string): maplibregl.Popup {
257
+
const container = document.createElement('div')
258
+
container.style.cssText = 'display:flex;flex-direction:column;gap:4px'
259
+
const nameEl = document.createElement('strong')
260
+
nameEl.textContent = name
261
+
container.append(nameEl)
262
+
if (id) {
263
+
const editLink = document.createElement('a')
264
+
editLink.href = `#!/bookmarks?edit=${encodeURIComponent(id)}`
265
+
editLink.textContent = 'Edit bookmark'
266
+
editLink.style.cssText = 'font-size:0.8em'
267
+
container.append(editLink)
268
+
}
269
+
return new maplibregl.Popup({ offset: 10 }).setDOMContent(container)
270
+
}
271
+
272
+
#showBookmarkPopup(bookmarkId: string) {
273
+
if (!this.#map) return
274
+
const bookmark = app.bookmarks.find((b) => b.id === bookmarkId)
275
+
if (!bookmark) return
276
+
const [lng, lat] = bookmark.geometry.coordinates
277
+
this.#bookmarkPopup?.remove()
278
+
this.#bookmarkPopup = this.#buildBookmarkPopup(
279
+
bookmarkDisplayName(bookmark),
280
+
bookmarkId,
281
+
)
282
+
.setLngLat([lng, lat])
283
+
.addTo(this.#map)
284
+
}
285
+
254
286
#renderBookmarkMarkers() {
255
287
if (!this.#map) return
256
288
const collectionColors = new Map(
···
295
327
const coords = (feature.geometry as unknown as {
296
328
coordinates: [number, number]
297
329
}).coordinates
298
-
const name = feature.properties?._displayName as string
299
330
const id = feature.properties?._id as string | undefined
300
331
this.#bookmarkPopup?.remove()
301
-
const container = document.createElement('div')
302
-
container.style.cssText = 'display:flex;flex-direction:column;gap:4px'
303
-
const nameEl = document.createElement('strong')
304
-
nameEl.textContent = name
305
-
container.append(nameEl)
306
-
if (id) {
307
-
const editLink = document.createElement('a')
308
-
editLink.href = `#!/bookmarks?edit=${encodeURIComponent(id)}`
309
-
editLink.textContent = 'Edit bookmark'
310
-
editLink.style.cssText = 'font-size:0.8em'
311
-
container.append(editLink)
312
-
}
313
-
this.#bookmarkPopup = new maplibregl.Popup({ offset: 10 })
332
+
this.#bookmarkPopup = this.#buildBookmarkPopup(
333
+
feature.properties?._displayName as string,
334
+
id,
335
+
)
314
336
.setLngLat(coords)
315
-
.setDOMContent(container)
316
337
.addTo(this.#map)
317
338
})
318
339
this.#map.on('mouseenter', 'bookmarks', () => {
+1
-1
www/routes/search.ts
+1
-1
www/routes/search.ts
···
101
101
102
102
#handleBookmarkClick = (bookmark: Bookmark) => {
103
103
const [lng, lat] = bookmark.geometry.coordinates
104
-
setMapNav({ lat, lng, zoom: bookmark.zoom })
104
+
setMapNav({ lat, lng, zoom: bookmark.zoom, bookmarkId: bookmark.id })
105
105
location.hash = '#!/'
106
106
}
107
107