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: show zoom-level

+14 -10
+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
··· 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 {