Offline-capable geomap, meant for storing location bookmarks
feat: add currLocation button
+34
-2
+34
-2
www/routes/map.ts
+34
-2
www/routes/map.ts
···
44
44
const container = this.querySelector<HTMLElement>('#map')
45
45
if (!container) return
46
46
47
+
const lastView = this.#getLastView()
48
+
47
49
this.#map = new maplibregl.Map({
48
50
container,
49
-
center: [20, 20],
50
-
zoom: 2,
51
+
center: lastView ? [lastView.lng, lastView.lat] : [20, 20],
52
+
zoom: lastView ? lastView.zoom : 2,
51
53
pitchWithRotate: false,
52
54
style: {
53
55
version: 8,
···
57
59
},
58
60
})
59
61
62
+
this.#map.addControl(
63
+
new maplibregl.GeolocateControl({
64
+
positionOptions: { enableHighAccuracy: true },
65
+
trackUserLocation: true,
66
+
}),
67
+
'top-right',
68
+
)
69
+
70
+
this.#map.on('moveend', () => this.#saveLastView())
71
+
60
72
this.#map.on('load', async () => {
61
73
await this.#loadWorldTiles()
62
74
await this.#loadCachedDetailTiles()
···
75
87
}
76
88
}
77
89
})
90
+
}
91
+
92
+
#getLastView(): { lat: number; lng: number; zoom: number } | null {
93
+
try {
94
+
const raw = localStorage.getItem('world-last-view')
95
+
return raw ? JSON.parse(raw) : null
96
+
} catch {
97
+
return null
98
+
}
99
+
}
100
+
101
+
#saveLastView() {
102
+
if (!this.#map) return
103
+
const { lat, lng } = this.#map.getCenter()
104
+
const zoom = this.#map.getZoom()
105
+
try {
106
+
localStorage.setItem('world-last-view', JSON.stringify({ lat, lng, zoom }))
107
+
} catch {
108
+
// storage may be unavailable
109
+
}
78
110
}
79
111
80
112
#buildPopup(name: string, lat: number, lng: number, zoom: number): maplibregl.Popup {