Nikolay Tatarinov
db0b48774a
- Introduced MapErrorBoundary component to handle map loading errors gracefully. - Enhanced MapView with a reconnection status indicator for live updates. - Added tile freshness animation to indicate updated tiles visually. - Preloaded marker icon images to improve rendering performance. - Updated various pages to utilize the new MapErrorBoundary for better user experience.
123 lines
3.7 KiB
TypeScript
123 lines
3.7 KiB
TypeScript
import type L from 'leaflet'
|
|
import { GridCoordLayer, HnHCRS, HnHMaxZoom, HnHMinZoom, TileSize } from '~/lib/LeafletCustomTypes'
|
|
import type { GridCoordLayerOptions } from '~/lib/LeafletCustomTypes'
|
|
import { SmartTileLayer } from '~/lib/SmartTileLayer'
|
|
import type { MapInfo } from '~/types/api'
|
|
|
|
type SmartTileLayerInstance = InstanceType<typeof SmartTileLayer>
|
|
|
|
/** Known marker icon paths (without .png) to preload so markers render without broken images. */
|
|
const MARKER_ICON_PATHS = [
|
|
'gfx/terobjs/mm/custom',
|
|
'gfx/terobjs/mm/tower',
|
|
'gfx/terobjs/mm/village',
|
|
'gfx/terobjs/mm/dungeon',
|
|
'gfx/terobjs/mm/cave',
|
|
'gfx/terobjs/mm/settlement',
|
|
'gfx/invobjs/small/bush',
|
|
'gfx/invobjs/small/bumling',
|
|
]
|
|
|
|
/**
|
|
* Preloads marker icon images so they are in the browser cache before markers render.
|
|
* Call from client only. resolvePath should produce absolute URLs for static assets.
|
|
*/
|
|
export function preloadMarkerIcons(resolvePath: (path: string) => string): void {
|
|
if (import.meta.server) return
|
|
for (const base of MARKER_ICON_PATHS) {
|
|
const url = resolvePath(`${base}.png`)
|
|
const img = new Image()
|
|
img.src = url
|
|
}
|
|
}
|
|
|
|
export interface MapInitResult {
|
|
map: L.Map
|
|
layer: SmartTileLayerInstance
|
|
overlayLayer: SmartTileLayerInstance
|
|
coordLayer: L.GridLayer
|
|
markerLayer: L.LayerGroup
|
|
backendBase: string
|
|
}
|
|
|
|
export async function initLeafletMap(
|
|
element: HTMLElement,
|
|
mapsList: MapInfo[],
|
|
initialMapId: number
|
|
): Promise<MapInitResult> {
|
|
const L = (await import('leaflet')).default
|
|
|
|
const map = L.map(element, {
|
|
minZoom: HnHMinZoom,
|
|
maxZoom: HnHMaxZoom,
|
|
crs: HnHCRS,
|
|
attributionControl: false,
|
|
zoomControl: false,
|
|
inertia: true,
|
|
zoomAnimation: true,
|
|
fadeAnimation: true,
|
|
markerZoomAnimation: true,
|
|
})
|
|
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const apiBase = (runtimeConfig.public.apiBase as string) ?? '/map/api'
|
|
const backendBase = apiBase.replace(/\/api\/?$/, '') || '/map'
|
|
const tileUrl = `${backendBase}/grids/{map}/{z}/{x}_{y}.png?{cache}`
|
|
|
|
const layer = new SmartTileLayer(tileUrl, {
|
|
minZoom: 1,
|
|
maxZoom: 6,
|
|
zoomOffset: 0,
|
|
zoomReverse: true,
|
|
tileSize: TileSize,
|
|
updateWhenIdle: true,
|
|
keepBuffer: 2,
|
|
})
|
|
layer.map = initialMapId
|
|
layer.invalidTile =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII='
|
|
layer.addTo(map)
|
|
|
|
const overlayLayer = new SmartTileLayer(tileUrl, {
|
|
minZoom: 1,
|
|
maxZoom: 6,
|
|
zoomOffset: 0,
|
|
zoomReverse: true,
|
|
tileSize: TileSize,
|
|
opacity: 0.5,
|
|
updateWhenIdle: true,
|
|
keepBuffer: 2,
|
|
})
|
|
overlayLayer.map = -1
|
|
overlayLayer.invalidTile =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
|
|
overlayLayer.addTo(map)
|
|
|
|
const coordLayer = new GridCoordLayer({
|
|
tileSize: TileSize,
|
|
minZoom: HnHMinZoom,
|
|
maxZoom: HnHMaxZoom,
|
|
opacity: 0,
|
|
visible: false,
|
|
pane: 'tilePane',
|
|
} as GridCoordLayerOptions)
|
|
coordLayer.addTo(map)
|
|
coordLayer.setZIndex(500)
|
|
|
|
const markerLayer = L.layerGroup()
|
|
markerLayer.addTo(map)
|
|
markerLayer.setZIndex(600)
|
|
|
|
const baseURL = useRuntimeConfig().app.baseURL ?? '/'
|
|
const markerIconPath = baseURL.endsWith('/') ? baseURL : baseURL + '/'
|
|
L.Icon.Default.imagePath = markerIconPath
|
|
|
|
const resolvePath = (path: string) => {
|
|
const p = path.startsWith('/') ? path : `/${path}`
|
|
return baseURL === '/' ? p : `${baseURL.replace(/\/$/, '')}${p}`
|
|
}
|
|
preloadMarkerIcons(resolvePath)
|
|
|
|
return { map, layer, overlayLayer, coordLayer, markerLayer, backendBase }
|
|
}
|