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

Cities with Internet: the map's stylesheet reaches its shadow root

Browse source 
connectivity-map builds its map raw (new gl.Map), not through useMapInstance, so
nothing injected the engine stylesheet into its shadow root. A document-level
<link> never reaches it. Mapbox's own CSS canary reported "missing CSS
declarations", and controls and markers had no rules to position them.

useMapInstance's ensureEngineCSS is now exported, and connectivity-map calls it
with engineStylesheetUrl(provider) before new gl.Map, re-checking afterwards that
the pane is still mounted. Maps that already use useMapInstance are unchanged.
gospel-resources/resources-map has the same raw-map shape and can make the same
call; that is its owner's change.

Measured with verify-map-paint on a served built tree: main failed both leaves
(canary not salmon, "missing CSS declarations"). This build passes
connectivity-map (live GL, engine CSS applied, 0 unclassified errors).
resources-map still fails, as expected until it adds the call.
This commit is contained in:
doxa-maps-88655c70 2026-09-25 14:28:42 +00:00
parent e1a3cf36d9
commit b0427efcd4
9 changed files with 50 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
library/composables/useMapInstance.js
View file

@ -161,7 +161,12 @@ export async function ensureEngineScript(provider) {
* - Skips if the CSS link is already present and loaded (idempotent).
* - Always resolves — never hangs (2 s timeout fallback).
*/
async function ensureEngineCSS(element, cssUrl) {
// EXPORTED (2026-09-25) for the profiles that build their map RAW (new gl.Map) instead of through
// useMapInstance: cities-internet/connectivity-map and gospel-resources/resources-map. They never
// injected the engine stylesheet into their shadow root, so Mapbox's CSS canary reported "missing
// CSS declarations" (verify-map-paint) and controls/markers had no stylesheet to position them.
// Borrow this, with engineStylesheetUrl(provider); do not copy it.
export async function ensureEngineCSS(element, cssUrl) {
// An unmounted pane hands us null (see initializeMap's liveness checks); nothing to style.
if (!element) return
const root = element.getRootNode()

7
plugin-designs/cities-internet/connectivity-map.vue
View file

@ -49,7 +49,7 @@ import FullscreenButton from '@map/components/map-controls/FullscreenButton.vue'
import ShareButton from '@map/components/map-controls/ShareButton.vue'
import { resolveAssetsBase } from '@map/utils/embedBase.js'
import { resolveMapProvider } from '@map/composables/useMapProvider.js'
import { ensureEngineScript, engineGlobal } from '@map/composables/useMapInstance.js'
import { ensureEngineScript, engineGlobal, ensureEngineCSS, engineStylesheetUrl } from '@map/composables/useMapInstance.js'
import { resolveNamedStyle } from '@map/styles/registry.js'
// People-group dots open the SAME detail panel as Prayer Progress (doxa-simple-map): the
// shared store selection, the shared GO-pin highlight, and the shared legend wrappers
@ -259,6 +259,11 @@ onMounted(async () => {
// into a container that no longer exists throws; this is the raw-map twin of the
// useMapInstance guard (0c1a91cd), which this profile does not go through.
if (unmounted || !mapEl.value) return
// The engine's stylesheet must be INSIDE this shadow root; a document-level <link> never reaches
// it. Without it Mapbox's CSS canary fires and controls/markers lose their positioning rules.
const css = engineStylesheetUrl(ciProvider)
if (css) await ensureEngineCSS(mapEl.value, css)
if (unmounted || !mapEl.value) return
const map = new gl.Map({
container: mapEl.value,
// Paired through the registry so both engines show the same intent: 'ink' is the

52
public/doxa-maps/cities-internet/cities-internet.js generated
View file

File diff suppressed because one or more lines are too long

2
public/doxa-maps/cities-internet/connectivity-list/index.html generated
View file

@ -26,7 +26,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <cities-internet-map> custom element. -->
<script src="../cities-internet.js" integrity="sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi" crossorigin="anonymous"></script>
<script src="../cities-internet.js" integrity="sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/cities-internet/connectivity-map/index.html generated
View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <cities-internet-map> custom element. -->
<script src="../cities-internet.js" integrity="sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi" crossorigin="anonymous"></script>
<script src="../cities-internet.js" integrity="sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/cities-internet/data-tables/index.html generated
View file

@ -26,7 +26,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <cities-internet-map> custom element. -->
<script src="../cities-internet.js" integrity="sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi" crossorigin="anonymous"></script>
<script src="../cities-internet.js" integrity="sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

8
public/doxa-maps/doxa-maps-spa/manifest.json generated
View file

@ -105,7 +105,7 @@
"bundle": "cities-internet",
"scriptUrl": "./cities-internet/cities-internet.js",
"output": "doxa-maps/cities-internet/cities-internet.js",
"integrity": "sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi",
"integrity": "sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2",
"elements": [
"cities-internet-map"
],
@ -121,7 +121,7 @@
"scriptUrl": "./cities-internet/cities-internet.js",
"embed": {
"iframe": "<iframe src=\"./cities-internet/connectivity-list/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
}
},
{
@ -135,7 +135,7 @@
"scriptUrl": "./cities-internet/cities-internet.js",
"embed": {
"iframe": "<iframe src=\"./cities-internet/connectivity-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
}
},
{
@ -149,7 +149,7 @@
"scriptUrl": "./cities-internet/cities-internet.js",
"embed": {
"iframe": "<iframe src=\"./cities-internet/data-tables/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"data-tables\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"data-tables\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
}
}
]

2
public/doxa-maps/index.html generated
View file

File diff suppressed because one or more lines are too long

8
public/doxa-maps/manifest.json generated
View file

@ -105,7 +105,7 @@
"bundle": "cities-internet",
"scriptUrl": "./cities-internet/cities-internet.js",
"output": "doxa-maps/cities-internet/cities-internet.js",
"integrity": "sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi",
"integrity": "sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2",
"elements": [
"cities-internet-map"
],
@ -121,7 +121,7 @@
"scriptUrl": "./cities-internet/cities-internet.js",
"embed": {
"iframe": "<iframe src=\"./cities-internet/connectivity-list/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
}
},
{
@ -135,7 +135,7 @@
"scriptUrl": "./cities-internet/cities-internet.js",
"embed": {
"iframe": "<iframe src=\"./cities-internet/connectivity-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"connectivity-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
}
},
{
@ -149,7 +149,7 @@
"scriptUrl": "./cities-internet/cities-internet.js",
"embed": {
"iframe": "<iframe src=\"./cities-internet/data-tables/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-2K2SKyR/TsbJcIv322N0K18RY4erDK9aW/rhDf/5gS+sRgc3GPEY7eZuvaPWaYbi\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"data-tables\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./cities-internet/cities-internet.js\" integrity=\"sha384-K43CsAjZx7Gg4Gzu01LrMNb+C+bJi5GfsAlDsmARcJlhjtgUNg8kQEVLPa3QvB/2\" crossorigin=\"anonymous\"></script>\n<cities-internet-map profile-config='{\"profile\":\"data-tables\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></cities-internet-map>"
}
}
]