Offline-capable geomap, meant for storing location bookmarks
fix: issue where bookmarks are hard to click
+31
-9
+2
-2
www/routes/bookmarks.ts
+2
-2
www/routes/bookmarks.ts
···
251
251
this.requestUpdate()
252
252
}}"
253
253
>
254
-
+ Bookmark
254
+
New Bookmark
255
255
</button>
256
256
<button
257
257
@click="${() =>
258
258
this.renderRoot.querySelector<HTMLInputElement>('.bm-file-input')
259
259
?.click()}"
260
260
>
261
-
Import
261
+
Import Bookmarks
262
262
</button>
263
263
<input
264
264
class="bm-file-input"
+12
-3
www/routes/map.ts
+12
-3
www/routes/map.ts
···
321
321
'circle-stroke-color': '#fff',
322
322
},
323
323
})
324
-
this.#map.on('click', 'bookmarks', (e) => {
324
+
this.#map.addLayer({
325
+
id: 'bookmarks-hit',
326
+
type: 'circle',
327
+
source: 'bookmarks',
328
+
paint: {
329
+
'circle-radius': 20,
330
+
'circle-color': 'transparent',
331
+
},
332
+
})
333
+
this.#map.on('click', 'bookmarks-hit', (e) => {
325
334
if (!e.features?.length || !this.#map) return
326
335
const feature = e.features[0]
327
336
const coords = (feature.geometry as unknown as {
···
336
345
.setLngLat(coords)
337
346
.addTo(this.#map)
338
347
})
339
-
this.#map.on('mouseenter', 'bookmarks', () => {
348
+
this.#map.on('mouseenter', 'bookmarks-hit', () => {
340
349
this.#map!.getCanvas().style.cursor = 'pointer'
341
350
})
342
-
this.#map.on('mouseleave', 'bookmarks', () => {
351
+
this.#map.on('mouseleave', 'bookmarks-hit', () => {
343
352
this.#map!.getCanvas().style.cursor = ''
344
353
})
345
354
}
+17
-4
www/routes/settings-about.ts
+17
-4
www/routes/settings-about.ts
···
45
45
Built with
46
46
<a href="https://maplibre.org" rel="noopener noreferrer" target="_blank">
47
47
MapLibre GL JS
48
-
</a>
49
-
and
48
+
</a>,
50
49
<a
51
50
href="https://protomaps.com/docs/pmtiles"
52
51
rel="noopener noreferrer"
53
52
target="_blank"
54
53
>
55
-
PMTiles
56
-
</a>
54
+
PMTiles</a>, and
55
+
<a
56
+
href="https://github.com/jtbaker/pmtiles-offline"
57
+
rel="noopener noreferrer"
58
+
target="_blank"
59
+
>
60
+
pmtiles-offline</a>
57
61
for offline tile storage. Rendered as a PWA using
58
62
<a
59
63
href="https://github.com/bpev/civility"
···
62
66
>
63
67
Civility
64
68
</a>.
69
+
</p>
70
+
</section>
71
+
<section>
72
+
<p>
73
+
<a
74
+
href="https://apps.bpev.me"
75
+
rel="noopener noreferrer"
76
+
target="_blank"
77
+
>Made by Ben</a>
65
78
</p>
66
79
</section>
67
80
`