Offline-capable geomap, meant for storing location bookmarks
feat: show zoom-level
+14
-10
+5
www/components/m-map.ts
+5
www/components/m-map.ts
···
52
52
#confirmedCached = new Set<string>()
53
53
#lastBookmarkValues: ReadonlyMap<string, unknown> | undefined = undefined
54
54
#lastCollectionValues: ReadonlyMap<string, unknown> | undefined = undefined
55
+
#currentZoom = 0
55
56
56
57
protected override createRenderRoot() {
57
58
return this
···
71
72
#onMoveEnd = debounce(() => {
72
73
this.#saveLastView()
73
74
this.#checkAvailableTile()
75
+
this.#currentZoom = this.#map?.getZoom() ?? 0
76
+
this.requestUpdate()
74
77
}, 150)
75
78
76
79
#onAppUpdate = () => {
···
132
135
this.#map.on('drag', () => this.#clearLongPress())
133
136
134
137
this.#map.on('load', async () => {
138
+
this.#currentZoom = this.#map!.getZoom()
135
139
await this.#loadWorldTiles()
136
140
await this.#loadCachedDetailTiles()
137
141
this.#renderBookmarkMarkers()
···
580
584
override render(): TemplateResult {
581
585
return html`
582
586
<div id="map"></div>
587
+
<div class="zoom-display">Zoom: ${this.#currentZoom.toFixed(1)}</div>
583
588
${this.#availableTile
584
589
? html`
585
590
<button
+9
-10
www/static/styles/theme.css
+9
-10
www/static/styles/theme.css
···
59
59
overflow: hidden;
60
60
}
61
61
62
-
body:has(r-home)>main {
62
+
body:has(r-home) > main {
63
63
overflow: hidden;
64
64
}
65
65
···
99
99
z-index: 100;
100
100
}
101
101
102
-
m-map>.download-btn {
102
+
m-map > .download-btn {
103
103
z-index: 10;
104
104
}
105
105
···
232
232
margin-bottom: var(--s3);
233
233
}
234
234
235
-
r-settings section>p,
236
-
r-settings-downloads section>p,
237
-
r-settings-about section>p {
235
+
r-settings section > p,
236
+
r-settings-downloads section > p,
237
+
r-settings-about section > p {
238
238
opacity: 0.6;
239
239
margin-bottom: var(--s3);
240
240
font-size: var(--f5);
···
424
424
transform: none;
425
425
}
426
426
427
-
.search-history-item>span {
427
+
.search-history-item > span {
428
428
flex: 1;
429
429
min-width: 0;
430
430
overflow: hidden;
···
432
432
white-space: nowrap;
433
433
}
434
434
435
-
.search-history-item>img {
435
+
.search-history-item > img {
436
436
flex-shrink: 0;
437
437
opacity: 0.35;
438
438
}
···
754
754
border-radius: var(--br-base);
755
755
}
756
756
757
-
.bm-import-group+.bm-import-group {
757
+
.bm-import-group + .bm-import-group {
758
758
border-top: 1px solid currentColor;
759
759
}
760
760
···
775
775
gap: 1px;
776
776
}
777
777
778
-
.bm-import-item+.bm-import-item {
778
+
.bm-import-item + .bm-import-item {
779
779
border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
780
780
}
781
781
···
792
792
}
793
793
794
794
@media (max-width: 768px) {
795
-
796
795
input,
797
796
textarea,
798
797
select {