Offline-capable geomap, meant for storing location bookmarks
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: init search/bookmark popup on deeplink

+41 -19
+1 -1
deno.json
··· 1 1 { 2 - "version": "0.1.0", 2 + "version": "0.2.0", 3 3 "workspace": ["./data"], 4 4 "tasks": { 5 5 "data": "deno run -A ./data/cli/main.ts",
+1 -1
www/routes/bookmarks.ts
··· 76 76 77 77 #navigateTo(b: Bookmark) { 78 78 const [lng, lat] = b.geometry.coordinates 79 - setMapNav({ lat, lng, zoom: b.zoom }) 79 + setMapNav({ lat, lng, zoom: b.zoom, bookmarkId: b.id }) 80 80 location.hash = '#!/' 81 81 } 82 82
+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
··· 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
+1
www/utils/nav.ts
··· 5 5 marker?: boolean 6 6 name?: string 7 7 address?: string 8 + bookmarkId?: string 8 9 } 9 10 10 11 let pending: MapTarget | null = null