doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Maps start their engine download at setup, and the dashboard's country boundaries download beside the basemap

Browse source 
rega's load waterfall: the engine was requested only after the component tree
had rendered, and the dashboard's 384 KB country boundaries only after the whole
basemap style had loaded, so each waited on the other. The engine download now
starts when the map composable is set up, and the boundaries when the dashboard's
map panel mounts; the style handler awaits that same download.
This commit is contained in:
Doxa Maps 2026-09-28 01:11:52 +00:00
parent cdb9efc9d4
commit ae10e4b978
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
library/composables/useMapInstance.js
View file

@ -397,6 +397,10 @@ export function useMapInstance({
const autoProvider = !provider && !explicitMapProvider(_pcForProvider)
provider = provider || resolveMapProvider(_pcForProvider, { token: accessToken })
let isMaplibre = provider === 'maplibre'
// Start the engine download during setup, not when initializeMap runs after mount: rega's waterfall had
// the engine requested only after the component tree had rendered. initializeMap awaits the same script
// (ensureEngineScript is idempotent) and reports a failure there; it is swallowed here.
if (typeof document !== 'undefined') ensureEngineScript(provider).catch(() => {})
// THE READER'S LANGUAGE, for the basemap's place names (maps/localize-labels.js). ProfileLoader
// provides it as a ref ('lang'); an element without ProfileLoader falls back to its profile-config

26
plugin-designs/research-dashboard/src/components/dashboards/DashboardMapPanel.vue
View file

@ -131,6 +131,25 @@ const mapProvider = computed(() => {
// loaded with — a second inline `cfg.provider === …` test is how the two drift apart.
const isMaplibreProvider = computed(() => mapProvider.value === 'maplibre')
// The country boundaries (384 KB) are fetched as soon as the panel exists, not from the style-load
// handler: there the download waited for the whole basemap style and so ran after it, not beside it
// (rega's waterfall: requested at 10.4 s of a 12.5 s load). The handler awaits this same promise.
let boundariesPromise = null
function countryBoundaries() {
if (!boundariesPromise) {
boundariesPromise = fetch(`${resolveAssetsBase(profileConfig.value)}/boundaries/world-adm0-web.geojson`)
.then((r) => r.json())
.then((gj) => {
for (const f of gj.features || []) {
if (f.properties && f.properties.iso3) f.properties.iso_3166_1_alpha_3 = f.properties.iso3
}
return gj
})
boundariesPromise.catch(() => { boundariesPromise = null }) // a failed download is retried next time
}
return boundariesPromise
}
const { map, isMapReady, initializeMap, destroy } = useMapInstance({
containerRef: mapContainer, accessToken: unref(mapboxToken) || (mapboxToken && mapboxToken.value) || '',
// ★ ZOOMED OUT BY DEFAULT, WITH REAL ZOOM-OUT RANGE (Driver 2026-09-23: "I don't want the map
@ -841,12 +860,8 @@ function addLayers() {
// keep this layer underneath the pins (layer order is insertion order). An awaited fetch
// here would put the choropleth on TOP of every bubble.
m.addSource('rd-countries', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
fetch(`${resolveAssetsBase(profileConfig.value)}/boundaries/world-adm0-web.geojson`)
.then((r) => r.json())
countryBoundaries()
.then((gj) => {
for (const f of gj.features || []) {
if (f.properties && f.properties.iso3) f.properties.iso_3166_1_alpha_3 = f.properties.iso3
}
const src = map.value && map.value.getSource('rd-countries')
if (src) src.setData(gj)
})
@ -1215,6 +1230,7 @@ function syncScrollZoomToHost(m) {
}
onMounted(async () => {
if (isMaplibreProvider.value) countryBoundaries().catch(() => {})
await initializeMap()
const m = map.value; if (!m) return
if (m.isStyleLoaded()) addLayers(); else m.on('load', addLayers)