Reference
Look-up tables and contracts for doxa-maps. For learning, see the
tutorial; for tasks, how-to.md; for the why,
explanation.md.
doxa-maps is a Vite bundler: one shared library, N independent embeddable bundles. Each
bundle is a single self-contained .js file that registers a custom HTML element
(<doxa-map>, <doxa-research-map>, …) you can drop on any web page.
The three zones
| Zone |
Path |
Alias |
License |
You edit it… |
| Shared library |
library/ |
@map |
Apache-2.0 |
…once; the fix reaches every bundle on next build |
| Your app-profile |
app-profiles/<name>/ |
— |
yours |
…freely; nothing here leaks to other maps |
| The build machine |
internal/ |
— |
Apache-2.0 |
…never — it's the bundler's own scripts |
Terminology. "Profile" is used at two levels: a bundle / app-profile is a folder under
app-profiles/; a profile screen is one .vue file sitting flat in that folder (no
profiles/ subfolder — the entry globs ./*.vue). A bundle can hold several screens; the host
picks which to render with the profile field of profile-config.
Three profile patterns (mix freely in one bundle): Individual (one .vue per bundle) ·
Parameterized (one screen driven by profile-config props at runtime) · Nested (one
screen that renders others via tabs, workbench-style).
Directory tree
doxa-maps/
├── library/ ← SHARED LIBRARY (alias @map, Apache-2.0)
│ ├── index.js ← thin barrel; prefer subpath imports for tree-shaking
│ ├── ProfileLoader.vue ← the ONE component that reads profile-config & loads a screen
│ ├── components/ ← map UI: legends/, map-controls/, poster/, dashboards/, drawers
│ ├── composables/ ← useMapInstance, useMapData, useMapLayers, … (+ legends/, poster/)
│ ├── api/ ← DataSourceManager (csv | api | rest-api) + sources.json
│ ├── colors/ ← one color strategy per file, auto-registered by _registry.js
│ ├── constants/ ← never-change values: mapDefaults.js, zoom.js, poster*.js
│ ├── i18n/locales/ ← 11 base locales: ar de en es fr hi it pt ro ru zh
│ ├── stores/ ← Pinia: dataStore, mapStore, uiStore (per-instance)
│ └── utils/ ← pure helpers (geoUtils, clustering)
│
├── app-profiles/ ← ALL bundles live here (each subfolder = 1 bundle)
│ ├── <bundle>/
│ │ ├── index.js ← bundle ENTRY — globs ./*.vue, registers the web component
│ │ ├── index.html ← Vite html entry = the dev STAGING page
│ │ ├── <profile>.vue ← 1..N FLAT profile screens (no profiles/ subfolder)
│ │ └── src/ ← everything else the map needs (its own colors/, api/, …)
│ └── template-bundle/ ← minimal copy-me reference bundle
│ (folders starting with _ or . are SKIPPED by the build)
│
├── internal/ ← the bundler's own build scripts — never edited by map builders
├── layouts/ ← the app shell: mounts several bundles as one single-page app
├── capacitor/ ← native projects (android/, ios/)
├── public/ ← THE SERVED WEB-ROOT, committed:
│ ├── index.html the app shell
│ ├── doxa-maps/<bundle>/ built bundles + manifest.json + staging HTML
│ └── assets/ posters & data the maps fetch at runtime
├── vite.config.js ← multi-entry: discovers app-profiles/<name>/ folders
└── vite.doxa-maps-build-config.json ← output tree name + copy destinations + token settings
The profile-config runtime contract
A bundle exposes ONE attribute, profile-config — a JSON string parsed by
ProfileLoader.vue at runtime. It is the entire wiring between host page and map, so the same
built bundle re-points to different data/colors/language with no rebuild.
<doxa-map profile-config='{
"profile": "doxa-simple-map", // which flat .vue screen to render (required)
"tk": "pk.eyJ...", // Mapbox token (required; host-supplied, never baked)
"instanceId": "my-map", // optional; isolates window events between embeds
"dataSource": "pray-tools", // or { "type":"rest-api","endpoint":"https://…" }
"colorSet": "default",
"locale": "en",
"tabs": [ /* parameterized screens read this */ ]
}'></doxa-map>
profile must match a flat .vue filename in the bundle. Mismatch → an inline
"Profile not found" error box listing the available names.
tk is supplied at runtime so the token is never compiled in (dev uses .env's
VITE_MAPBOX_TOKEN).
instanceId scopes cross-instance window events so multiple embeds never interfere.
dataSource is handed to DataSourceManager (csv | api | rest-api).
ProfileLoader provide()s to descendants: mapboxToken, dataSource (both computed
refs — unref before use), colorSet, profileConfig, instanceId, lang, and the
instance-scoped Pinia stores uiStore / mapStore / dataStore. Descendants inject;
never call useXxxStore() directly (it would cross-bleed between embeds).
Each bundle registers a shadow-DOM web component via defineCustomElement, with its own
ShadowRoot, styles, Pinia, and i18n. customElements.define() is one-shot per tag name, so
each bundle registers a distinct tag.
Build scripts & output
| Script |
What it does |
bun run dev |
Vite dev server + HMR (default http://localhost:5173). Serves every bundle at its html path. Writes nothing to public/ — no HMR across that boundary. |
bun run build |
clean → one vite build per app-profiles/*/ folder → tree → check:drop → check:parse. |
bun run build:bundle |
Builds ONE bundle (needs BUNDLE=<name>). |
bun run build:watch |
Rebuilds into public/ on every change (integration loop). |
bun run clean |
Wipes + recreates the public/<name>/ output tree. |
bun run tree |
Writes manifest.json + self-contained staging HTML, then copies the tree to every build-config paths destination. |
bun run verify |
Data-integrity + shipped-bundle + network-policy guards (fast, no browser). |
bun run verify:full |
+ rendered posters and live apps in Firefox. |
How a build works. vite.config.js is multi-entry by discovery: at build time it
registers every app-profiles/ subfolder that (a) doesn't start with _/. and (b) has
both index.html and index.js. One vite build builds exactly one bundle, selected
by BUNDLE=<name>, so the output is a self-contained IIFE (inlineDynamicImports: true).
bun run build loops every folder. Each bundle only bundles what its screens import, so sizes
differ (simple ≈ 420 KB, research ≈ 1.3 MB).
Where output goes. One bundle folder → one file: public/doxa-maps/<bundle>/<bundle>.js.
CSS is injected by JS (cssCodeSplit: false), so there is no separate .css. The tree root
name comes from vite.doxa-maps-build-config.json name (default doxa-maps).
emptyOutDir: false keeps sibling bundles intact when you rebuild one.
Bun is required. bun.lock is the committed lockfile; bun x vite runs project-local
Vite. npm run … resolves the same scripts but Bun must be on PATH.
vite.doxa-maps-build-config.json fields
Edit this one file, then bun run build.
| Field |
What it does |
name |
Output folder name (default doxa-maps). |
paths |
Extra folders to copy the whole built tree into. Point at a host repo's public/ → that host serves the maps and becomes the CDN. Empty (the default) ⇒ written to public/<name>/ only, since public/ is already the committed web-root. |
embedBaseUrl |
The public URL the tree is served from, used to generate absolute, paste-anywhere embed snippets. Empty ⇒ relative URLs (position-independent; keeps the drop-portability gate green; required for Capacitor, which loads from https://localhost). |
tokenUrl |
Endpoint each generated page fetches its Mapbox token from — a URL, not a secret. Set absolute (https://…/api/maps/token) so a CDN folder and the mobile app both work; endpoint must send CORS for the embedding origins. window.MAP_TOKEN_URL overrides at runtime. |
token |
Opt-in literal token baked into every page. Leave empty — prefer tokenUrl. |
assetsBaseUrl |
Where the shared asset tree (previews, posters, boundaries) is served from. Empty ⇒ a relative path per page depth (self-contained under one web-root). Set absolute for partner embeds and mobile, where there is no shared web-root to climb to. |
Token resolution ladder: per-map tk prop > ?tk= > baked token > window.MAP_TOKEN_URL > tokenUrl > same-origin /api/maps/token.
Data sources
Maps read data through @map/api/ (the engine) driven by library/api/sources.json (the
declaration). sources.json lists every connection by id, names one activeSource, and maps
each source's raw field names onto the system field names components expect (fieldMappings).
DataSourceManager.js does fetch → normalize → cache; the registry front door is
api/_registry.js. To add or change a source, edit sources.json — components stay
source-agnostic.
| Type |
What |
Points at |
rest-api |
Versioned REST endpoint (the default) |
The live people-group prayer/engagement/adoption API. Base URL resolves at runtime: window.MAP_APP_API_URL → VITE_API_BASE_URL → '' (same-origin), so a host repoints it with no rebuild. |
csv |
A local CSV parsed at load |
The Joshua Project people-groups dataset (also the people-group photo fallback URLs). |
api |
A single JSON URL |
Any plain JSON endpoint. |
Country / region polygons are not a sources.json connection. Boundaries render from
Mapbox's built-in country-boundaries-v1 tileset (highlighted by iso_3166_1_alpha_3), plus a
local WAGF-regions GeoJSON lazy-loaded on the Regions tab.
Colors — two homes, one rule
Reused by more than one map → shared library. Only your map uses it → your profile.
- Shared taxonomies live in
library/colors/ (religion, adoption, engagement,
language-family, prayer-progress). The registry auto-discovers every <name>.js there.
- Single-map strategies live in the bundle's
src/colors/. The bundle's index.js runs
registerStrategies(import.meta.glob('./src/colors/*.js', { eager: true })), merging local
files over the shared set for that bundle only. (affinity-block, doxa-region,
resource are research-only and live in the research bundle.)
The filename derives the mode key (language-family.js → languageFamily). Same key as a
shared strategy → override (your map only); new key → add (your map only). A colors.json
of plain values can sit beside the .js files — the *.js glob ignores it, so values and
strategies coexist. Strategy contract (export default { name, propertyKey, palette, getColor, applyColor, buildColorExpression }) lives in library/colors/README.md; religion.js is the
canonical example.
Importing from @map
Everything under library/ is importable via the @map/… alias (vite.config.js maps @map
→ library/). The import path mirrors the file path: a file at library/<sub>/<file> imports
as @map/<sub>/<file>. Examples:
import SemanticTreeLegend from '@map/components/legends/SemanticTreeLegend.vue'
import { useMapInstance } from '@map/composables/useMapInstance.js'
import { useMapData } from '@map/composables/useMapData.js'
import langFamilyByIso from '@map/data/langFamilyByIso.json'
Prefer subpath imports over the thin @map barrel (which exports MAP_CORE_VERSION only) so
tree-shaking works. The per-file catalog below is the authoritative menu — every library/
file listed is importable this way. A generated one-line import index can also be produced with
node internal/generate-library-index.mjs.
The Semantic Tree Legend
@map/components/legends/SemanticTreeLegend.vue is a reusable hierarchical legend for any
one-to-many semantic tree (Affinity Block → Cluster → People Group, or Language Family →
Language). You feed it a tree of nodes; it renders one tab per generation plus rows.
Node shape: { id, label, color?, count?, pop?, filter?, info?, children?: [ … ] }
| Prop |
Meaning |
nodes |
The tree (array of root nodes). |
tabs |
Optional labels per generation; auto-generated from depth if omitted. |
columns |
Numeric columns to show (default ['count','pop']). |
title |
Panel heading. |
hideTabs |
Render a single flat level. |
exportEnabled |
Opt-in flag revealing the (scaffold) Export affordance. |
Selecting a node walks the tree to highlight it with its ancestors/descendants and emits a
select event the map listens to for filtering. If a per-instance store is provided (via
usePplrInstance) it syncs activeTab/selection through that shared store; otherwise it
falls back to local state and still works standalone. It never imports the map or geocoder —
the profile screen wires its select emission to map filtering.
File map — every file, one line each
Generated by a per-file agent scan. The @map/… import path mirrors each library/ file path
(see Importing from @map above).
library/ — shared core (@map alias)
Root files
| File |
What it is |
Agents should know |
library/ProfileLoader.vue |
Root component of every custom element: parses the profile-config JSON attribute, async-loads the profile .vue, provides shared context (mapboxToken, dataSource, colorSet, profileConfig, instanceId, lang, uiStore/mapStore/dataStore). |
Only reader of profile-config; uses injected appI18n (useI18n() throws at custom-element root); bundle entry MUST app.provide('profileModules', import.meta.glob('./*.vue')) or setup throws. Descendants inject stores, never call useXxxStore(). |
library/index.js |
The @map barrel entry — intentionally thin; exports MAP_CORE_VERSION only. |
Keep the barrel thin: subpath imports (@map/components/..., @map/stores/..., @map/colors/_registry.js) are the preferred pattern; stores/JSON deliberately not re-exported (tree-shaking). |
api/
| File |
What it is |
Agents should know |
library/api/DataSourceManager.js |
Data-loading class: fetches people-group data (csv / json api / rest-api per sources.json), normalizes rows to system field names, caches per source. |
Exports DataSourceManager class + legacy dataSourceManager singleton — prefer new DataSourceManager() per map. sources.json is inlined at build time; 0,0-coord rows dropped; {value,label} objects split into field + fieldLabel. |
library/api/_registry.js |
Front door to the data-source seam (parallel of colors/_registry.js for data): SOURCE_TYPES, SOURCES, getActiveSourceId, getSourceConfig, listSources, getApiBaseUrl, DataSourceManager. |
Connections are pure data in sources.json (activeSource + sources by id, each with type + fieldMappings) — add/change sources there, not in components. |
library/api/apiBaseUrl.js |
Runtime API base URL resolver: getApiBaseUrl() = window override > Vite env var > '' (same-origin). |
Hosts set window.MAP_APP_API_URL before the IIFE loads to repoint the API without a rebuild. |
library/api/sources.json |
Data-source registry: pray-tools REST API + doxa-csv fallback, with endpoints, fieldMappings, poll settings, systemFields, _meta.mapboxTokenUrl. |
Single source of truth for ALL bundles' data config; fieldMappings keys ARE the canonical camelCase field names; base/token URLs resolve at runtime via window.MAP_APP_API_URL / window.MAP_TOKEN_URL. |
colors/
| File |
What it is |
Agents should know |
library/colors/_registry.js |
Color-strategy engine: eager-globs sibling strategy files; exports COLOR_MODES, registerStrategies, getColorStrategy, buildColorExpression, getFeatureColor, listStrategies. |
Dropping <name>.js beside it (or in a bundle's src/colors/ via registerStrategies) IS registration — filename derives the mode (kebab→camelCase); _/.-prefixed or no-default files skipped; bundle-local modes override shared ones per-bundle; unknown mode falls back to LANGUAGE_FAMILY. |
library/colors/adoption.js |
Binary red/green strategy on adoptionStatus. |
Exports PROPERTY_KEY, PALETTE, LABELS, getColor, applyColor + default strategy object; getColor falls back to _raw.adopted_by_churches; LABELS keys (notAdopted/hasAdopted) differ from PALETTE keys (notAdopted/hasAdoption) — easy to trip on. |
library/colors/engagement.js |
Binary red-unengaged/green-engaged strategy. |
getColor tolerates boolean/1/number>0/{value} shapes with _raw.people_committed fallback, but the Mapbox expression only matches true/1 — normalize before styling. |
library/colors/language-family.js |
Maps language-family names to hex colors for pins/legend/expressions; exports PALETTE, getLanguageFamilyColor, canonicalFamilyName, applyColor + compat aliases. |
Exactly one PALETTE key per family — canonicalFamilyName() folds variants onto it (dupes break legend rows). JS fallback is black #000000; the Mapbox match fallback is grey #95a5a6 — intentional divergence. |
library/colors/prayer-progress.js |
3-tier prayer-coverage strategy (red/orange/green) keyed on peoplePraying; FULL_PRAYER_THRESHOLD = 144 (hardcoded). |
applyColor supports colorSource 'properties' vs 'feature-state'; JS getters fall back to _raw.people_praying but Mapbox expressions read only peoplePraying. |
library/colors/religion.js |
Maps Doxa religion codes (first letter = family) to pin colors; exports RELIGION_FAMILIES, PALETTE, getReligionFamily, applyColor/buildColorExpression. |
Family = FIRST letter of religion code (unknown → 'U'); blue is reserved exclusively for Christianity — never add another blue. buildColorExpression alias is required by registry callers. |
components/
| File |
What it is |
Agents should know |
library/components/PeopleGroupDetail.vue |
Detail panel for a selected people group: CTAs, PPLR stats + live prayer count, image, description. Props: peopleGroup (required), hideHeader, dark, action. |
Injects 'uiStore' — parent must provide. Fetches /api/people-groups/detail/{slug} with deliberately NO cache-buster (CF 5-min cache) — never re-add one or stub the count. Styles duplicated in useShadowStyles string AND scoped block — edit both. |
library/components/ResearchMapFilterPanel.vue |
Multi-field filter panel (population range, engagement/adoption selects, language/religion chips) for the research-map. |
Injects mapStore/dataStore; only writes mapStore.filters — the profile deep-watches and applies; options come from dataStore.facets. |
library/components/ResearchMapSideMenu.vue |
Research-map side drawer: cluster-mode toggle, pin-dim slider, filter-panel slot, poster/reload buttons. Props: isOpen; emits close/open-poster/reload-map. |
Writes mapStore.clusteringMode + clusterPinOpacity (map reacts via useMapClustering). Keep box-shadow on .open only. |
library/components/SideMenuDrawer.vue |
Shared slide-in left drawer (75% width, max 420px) over the map area, slot content + reload button. Props: isOpen, isDark. |
Absolute positioning — parent must be a positioned container inside the custom element; needs i18n keys buttons.closeMenu/reloadMap, messages.menuComingSoon. |
components/legends/
| File |
What it is |
Agents should know |
library/components/legends/LegendDesktop.vue |
Desktop legend card: collapsible pill rendering LegendRows tabs, swaps to PeopleGroupDetail on pin select, defers to LegendMobile on mobile. Props: legendType, initiallyCollapsed, isDark, popupAction, disableCollapse. |
Requires injected mapStore/dataStore/uiStore; styles live in useShadowStyles only. Language-family tab intentionally empty here (SemanticTreeLegend is a sibling). Geometry (top:60px/left:8px/380px) must stay in sync with SemanticTreeLegend's .stl-panel. Listens for doxa:openDesktopLegend scoped by mapId. |
library/components/legends/LegendMobile.vue |
Mobile bottom-sheet legend chrome (drag/collapse/detail) wrapping the same LegendRows/SemanticTreeLegend/PeopleGroupDetail. |
All CSS lives in a useShadowStyles template literal — a stray backtick in its comments silently blanks the whole mobile stylesheet. |
library/components/legends/LegendRows.vue |
Flat-grid legend table: colored clickable filter rows, count/population columns, collapsible children, sticky title + totals footer. Emits filter-click. |
ONE flat CSS grid with subgrid rows (spec: docs/legend-spec.md); .lrg-item wrappers are display:contents on desktop only for LegendMobile compat — don't add layout to them. Never use scrollIntoView (host-page scroll regression 554bf10). |
library/components/legends/LegendTools.vue |
Floating pill toolbar (auto-fly tour + clusters toggle) above the desktop legend card. Emits legend-row-fly. |
Only renders for doxa-regions / language-family legend types; must stay a SIBLING of LegendDesktop (own .lt- CSS namespace); flight/cluster state lives in injected mapStore; hidden below 768px. |
library/components/legends/SemanticTreeLegend.vue |
Hierarchical tabbed legend panel (collapsible, sortable, drill-up/down tree). Props: nodes, tabs, columns, open, exportEnabled; emits select/update:open/export. |
Syncs selection via the per-instance mediator (usePplrInstance) when present, else local state; styles via useShadowStyles. Hidden kill-switch SOW_EXPORT_BUTTON=false hides the fully-wired Export menu across ALL bundles regardless of :export-enabled. |
components/map-controls/
| File |
What it is |
Agents should know |
library/components/map-controls/index.js |
Barrel re-exporting all map-control components. |
New controls need an export line here or they're invisible to consumers. |
library/components/map-controls/MapControlButton.vue |
Round base button all toolbar controls wrap; props isDark, title, active, disabled; emits click. |
CSS via useShadowStyles key 'map-control-button'; keep changes parameterized (shared by all bundles); tight box-shadow is deliberate. |
library/components/map-controls/MapToolbar.vue |
Absolute column-flex layout shell for control buttons; prop hasGeocoder; slot for profile-chosen buttons. |
Pure layout; force-slims slotted .mcb/.hbg-btn controls to 32px; hasGeocoder=false collapses the mobile top offset. |
library/components/map-controls/GeocoderComponent.vue |
Mapbox Geocoder search bar with DOXA local-search results and dual mount modes (map control vs standalone header). Emits result, people-group-result, aggregate-result, clear, error. |
Depends on CDN globals MapboxGeocoder/mapboxgl + injected stores; on select it mutates store filter state directly; standalone mode uses onAdd() with a stub map because addTo() breaks in shadow roots. |
library/components/map-controls/HamburgerButton.vue |
Renderless hamburger/X toggle mounted as a Mapbox custom control (top-left). Props map, isOpen, isDark; emits toggle. |
DOM built imperatively via map.addControl; parent owns open/close state; silently no-ops if map isn't set at mount. |
library/components/map-controls/FullscreenButton.vue |
Fullscreen toggle on the shadow host, with iOS pseudo-fullscreen CSS fallback. Props mapContainer, isDark; emits change. |
iOS path mutates host/body/html inline styles and snapshots/restores them — don't set inline styles on the host while fullscreen is active; listens on the ShadowRoot's own fullscreenchange. |
library/components/map-controls/HelpButton.vue |
"?" button that emits open-help. |
Presentational only; i18n key buttons.aboutThisMap. |
library/components/map-controls/LocationButton.vue |
Flies to user geolocation, falls back to default center/zoom on denial/timeout. Props map, center, zoom, userZoom. |
Errors silently swallowed into flyToDefault (5s timeout, 60s maximumAge); i18n key buttons.resetView. |
library/components/map-controls/ShareButton.vue |
Share button + popover (copy link / copy iframe snippet with size presets). Props isDark, embedPath. |
Embed URL order: embedPath prop > profileConfig.shareEmbedPath > fallback /maps/doxa-research-map.html; keep the execCommand copy fallback for file:// contexts. |
library/components/map-controls/ThemeToggleButton.vue |
Sun/moon button emitting toggle. |
Dumb emitter — parent handles uiStore.toggleTheme() + style/theme work; i18n keys buttons.switchToLightMode/switchToDarkMode. |
library/components/map-controls/ZoomInButton.vue |
Zoom-in one step. Props map, isDark. |
map prop nullable (optional-chained); i18n key buttons.zoomIn. |
library/components/map-controls/ZoomOutButton.vue |
Zoom-out one step. Props map, isDark. |
map prop nullable; i18n key buttons.zoomOut. |
components/poster/ (+ slots/)
| File |
What it is |
Agents should know |
library/components/poster/PosterDialog.vue |
Modal for configuring (size/DPI/orientation/format/title/slots) and triggering poster export, with live preview + blob download. Props: modelValue, getMap (required fn), legendRows, metadata, initialSize. |
Pass a getMap accessor FUNCTION, not a map instance; footer attribution forced-on from constants/posterDefaults; size change auto-overrides DPI/orientation via posterSizes presets. |
library/components/poster/PosterPreview.vue |
Scaled live poster preview: snapshots the map canvas to PNG and overlays slot components at layout positions. Props: spec, getMap, legendRows, metadata. |
Snapshot re-captures only on mount and spec dims/dpi change (not pan/zoom); legendRows prop is declared but unused (rows come from spec.slots.legend.rows). |
library/components/poster/slots/TitleSlot.vue |
Poster title strip (title/subtitle/align). |
Preview-only — the headless export path uses separate SVG stubs in useMapPoster, so visual changes here don't affect exported posters. |
library/components/poster/slots/FooterSlot.vue |
Stub footer slot (display:none). |
Intentional stub; keep the spec prop and data-slot="FooterSlot" contract expected by PosterPreview. |
library/components/poster/slots/LegendSlot.vue |
Stub legend slot (display:none). |
Implement here when poster export is wired; keep the spec/data-slot contract. |
library/components/poster/slots/NorthArrowSlot.vue |
Stub north-arrow slot (display:none). |
Knowing stub wired into PosterPreview; pending per build-friction notes. |
library/components/poster/slots/ScaleBarSlot.vue |
Stub scale-bar slot (display:none). |
Implement here rather than creating a new slot file. |
composables/
| File |
What it is |
Agents should know |
library/composables/useAvatarGenerator.js |
Single-letter avatar generator (letter + 8-color palette by charCode). Exports generateAvatar, generateAvatarHTML, getAvatarStyle. |
Pure functions, no reactivity; AVATAR_COLORS is hardcoded here, not in colors/_registry; generateAvatarHTML interpolates into raw HTML. |
library/composables/useCountryOutline.js |
Instant outline-only country highlight using Mapbox country-boundaries-v1 vector tiles. Returns showCountry(iso3)/clearCountry(). |
Singleton source/layer per map (repeats swap the filter); worldview filter required or outlines draw 2-3x; camera framing is the caller's job; ops are try/catch no-ops pre-style-ready. |
library/composables/useDoxaSearch.js |
Local geocoder (localGeocoder for MapboxGeocoder) over 11 categories with tab-context ordering and Carmen-GeoJSON output. Returns search, searchGrouped, index, aggregates. |
Call during setup (uses useI18n). Result shape is contract-bound to GeocoderComponent + research-map's onGeocoderAggregateResult; religions collapse to the legend's 10 families; ALLOWED_BY_CONTEXT keys must match TAB_SEARCH_CONTEXT strings in profiles. |
library/composables/useGeocoderSearch.js |
The single copy of geocoder-result → map-selection logic (kind-switch, per-kind filter builder, legend-tab routing, clear handling). Returns onPeopleGroupResult, onAggregateResult, onClear, clearGeocoderProgrammatic. |
Kind→property map + filter builder live ONLY here — never re-implement in a profile; legendRouters injects divergent per-profile logic; busAdapter reroutes handlers to a non-map sink. Always clear via clearGeocoderProgrammatic (feedback-loop guard). |
library/composables/useMapClustering.js |
Three clustering modes (mapbox bubbles, MST lines, network lines) behind one API. Returns enabled, mode, setMode, applyClustering, clearClustering, cleanup, … |
inject('mapStore') — never import stores directly; clear/toggle hides layers + setData(EMPTY_FC) instead of removing (GL heap-leak avoidance); only cleanup() removes sources/layers — call from host onBeforeUnmount. |
library/composables/useMapData.js |
Loads people-group data via injected DataSourceManager, canonicalizes languageFamily/region keys, builds derived legend datasets. Returns loadData, peopleGroups, normalizedPeopleGroups, regionsData, stats, …. |
Pass dataSourceManager + markRaw in options. Language family MUST derive from ISO 639-3 code (langFamilyByIso), never localized labels; doxa-region registry reads are lazy and guarded on propertyKey==='doxaRegion'; regions map ISO alpha-3 → stable slug. |
library/composables/useMapEvents.js |
Mapbox layer event handlers: pin/region/cluster clicks, popups, cursor hover, cleanup. |
Call during setup (injects 'uiStore', useI18n). If uiStore has legendMode, pin clicks route to the legend panel instead of a popup. Hardcoded layer IDs ('language-family-pins', 'regions-fill', 'clusters'); attach after layers exist, detach on unmount. |
library/composables/useMapFly.js |
Camera navigation: fly/fitBounds helpers, panel-offset centering, antimeridian-safe legend-row zoom. |
zoomToLegendRow reads getSource()._data and re-implements Mapbox filter evaluation in JS — extend _matchesFilter/_resolveExpr for new expression ops; wide spans ease to a world overview instead of fitBounds. |
library/composables/useMapInstance.js |
One map's lifecycle: shadow-DOM CSS injection, aspect-aware dynamic minZoom floor, edge scroll strips, teardown. Returns map, isMapReady, initializeMap, destroy. |
initializeMap() in onMounted with a real DOM element ref (string IDs break in shadow DOM); minZoom is a lower bound raised to a desktop-only no-duplicate-world floor; expects sibling .map-scroll-edge strips and global mapboxgl; always call destroy(). |
library/composables/useMapLayers.js |
Creates/manages all Mapbox layers (pin GeoJSON with family derivation + co-location fan-out, regions fill/border, connection lines, prayer-glow rAF ripple) and theme-aware pin ring widths. |
Do NOT add a style.load listener here — the host profile owns post-setStyle reconciliation (flash race). addPrayerGlowLayers is idempotent; keep zoom 'case' inside interpolate OUTPUTS; dark-ring exceptions are config-only, keyed by strategy name. |
library/composables/useMapPacket.js |
Multi-page "prayer packet" PDF: page 1 = poster map raster, then one jsPDF vector card per people group. Returns renderPacket, progress, isRendering. |
Page 1 reuses useMapPoster.render — keep that the single source of truth; jspdf lazy-imported; footer attribution on every page is a ToS requirement; field reads deliberately defensive across 3 object shapes. |
library/composables/useMapSelection.js |
Applies region/family selection to layer paint props (highlight/fade opacity, connection lines). |
Region matching is on iso_3166_1_alpha_3 (tileset has no region prop); labels fuzzy-normalized to slugs; selection state lives in the Pinia mapStore. |
library/composables/useMapTheme.js |
Seamless light/dark toggle by flipping Mapbox Standard's lightPreset/theme config props. Returns bootStyle, applyTheme, swapTheme, isDarkTheme. |
Never setStyle to switch themes (reloads map, wipes custom layers); applyTheme must run after style.load and re-asserts once on 'idle' (fast-toggle grey-film race); profiles should watch(uiStore.theme) → applyTheme. |
library/composables/usePplrInstance.js |
Per-map mediator "instance store" (provide/inject refs) so map, geocoder, legend in one cluster communicate. Exports createPplrInstance, provideInstance, useInstance, selectNode, clearAll. |
Not Pinia — plain refs under key 'pplrInstance'; useInstance() returns null when standalone, so consumers must null-guard; profiles bridge instance.selection to their own store. |
library/composables/usePrayerStatistics.js |
Fetches the server-side prayer-coverage aggregate (/api/people-groups/statistics) — single source of truth for all legends. |
Module-level singleton state (one shared fetch); never recompute prayer counts from loaded pins (client scans diverge from parent site); load() is idempotent; bucket getters are exclusive and sum to total. |
library/composables/useSelectedPin.js |
Highlights the selected people-group dot and floats a black SVG "GO" pin over it. Returns initialize, cleanup, updateSelectedPin. |
Pass getActivePinColor via options — inject() never resolves here, and omission silently renders black. Marker pin is deliberately always black; requires injected 'uiStore' + a 'language-families' source; circle-emissive-strength re-asserted per selection (Standard lighting bug). |
library/composables/useShadowStyles.js |
Injects a component's CSS string into the containing Shadow DOM root on mount (defineCustomElement drops async-child styles). |
Call at setup() time; no-ops in light DOM; idempotent via label/CSS-hash key — same label across components suppresses injection. |
composables/legends/
| File |
What it is |
Agents should know |
library/composables/legends/useLegendData.js |
Builds the unified LegendItem tree (rows, columns, title, filter wiring, totals) for every legend type from injected stores. |
Research-only strategies (resource, doxa-region, affinity-block) are read LAZILY from _registry at compute time and GUARDED on propertyKey — getColorStrategy silently falls back to language-family. Prayer counts come from usePrayerStatistics, not client pin scans. |
library/composables/legends/researchLegendOptions.js |
Research-map options object (aliases, religion-family exclusions, custom row builders) fed into useLegendData. Exports RESEARCH_LEGEND_OPTIONS. |
doxa-region/resource strategies are registered by the research bundle's src/colors glob — all registry reads MUST stay lazy (inside builders/getters, not module scope), guarded on propertyKey. |
library/composables/legends/useAffinityBlockLegendData.js |
Aggregates pins into a 4-tier Affinity Block → Cluster → People Group → PG-in-country tree for SemanticTreeLegend. |
Mirrors useLanguageFamilyLegendData's node shape; colors read lazily + guarded on propertyKey==='affinityBlock'; all tier filters use uniqueId member lists, not code matching. |
library/composables/legends/useLanguageFamilyLegendData.js |
Aggregates features into a family → language → dialect legend tree (rows, sorting, expand state, highlight events, filter tree). |
API's language_family is null — family is derived client-side from comma-inverted primary_language labels via langFamilyByLanguage.json + sign-language rule; langTree filters match pins by language string. Only EMITS legend:highlight window events; the map listener (research-map.vue) dims pins. |
library/composables/legends/useWagfRegionsLegendData.js |
Aggregates items into a 3-tier WAGF Region → Block → Country tree with filter expressions and region colors. |
REGION_COLORS is keyed on the stable wagf_region slug (never localized labels) and must stay mirrored with SLUG_PALETTE in the research bundle's src/colors/doxa-region.js; highlight() uses the legend:highlight window CustomEvent. |
composables/poster/
| File |
What it is |
Agents should know |
library/composables/poster/useMapPoster.js |
Renders a live map to a poster-grade PNG/PDF blob via a hidden off-screen map (single-canvas ≤4096px or tile-stitch) plus SVG overlay slots. Returns render, progress, isRendering, cancel; also posterPixels. |
jspdf is lazy-imported for PDF and throws if missing; mutates window.devicePixelRatio during hidden-map spawn; requires window.mapboxgl; Mapbox attribution footer always composited (ToS); headless slots use stub SVGs, not the Vue slot components. |
library/composables/poster/usePosterLayout.js |
Pure layout math: PosterSpec + pixel dims → absolute {x,y,w,h} boxes per slot. Exports computeLayout, inchToPx, usePosterLayout. |
Pure/no reactivity despite the use* name; absent slots return zero boxes; footer is ALWAYS present (attribution per ToS); defaults from constants/posterDefaults.js. |
constants/
| File |
What it is |
Agents should know |
library/constants/mapDefaults.js |
Default Mapbox init settings + canonical LAYER_ORDER, overridable per app-profile. |
Keep style = Mapbox Standard (theme is a lightPreset flip, not setStyle); keep renderWorldCopies:true with no maxBounds (zoom-out capped by computeWorldMinZoom); never hardcode a token here. |
library/constants/posterDefaults.js |
Default poster-print layout constants (margins, bleed, slot sizes, typography) + defaultPosterSpec(size) factory. |
All measurements in inches (px via spec DPI); footer attribution mandatory; override via the PosterSpec passed to useMapPoster, don't edit defaults per-map. |
library/constants/posterSizes.js |
Preset poster dimensions (US + ISO) with inch/mm/300-DPI px. Exports POSTER_SIZES, POSTER_ORDER, getPosterSize, listPosterSizes, listByCategory. |
Pure data; new sizes go in BOTH POSTER_SIZES and POSTER_ORDER; getPosterSize returns null on unknown id; orientation flips via PosterSpec, not here. |
library/constants/zoom.js |
Centralized zoom constants: region fly-to configs, min/max constraints, interpolation curves, clustering thresholds, fly durations + getters. |
CLUSTERING_ZOOM is NOT the runtime source of truth — ClusterHelpers.DEFAULT_MAPBOX_CLUSTER_OPTIONS is; keep them in lockstep and clusterMaxZoom ~2 below the map zoom cap or clusters never break apart. |
data/
| File |
What it is |
Agents should know |
library/data/iso-numeric-to-alpha2.json |
ISO 3166 numeric country code → alpha-2 lookup. |
Currently has NO code consumers (docs mention only). Importable via @map/data/*.json. |
library/data/langFamilyByIso.json |
ISO 639-3 language code → language-family name lookup. |
Generated from the EN API + langFamilyByLanguage.json; the canonical family-derivation source (labels are locale-fragile). |
library/data/langFamilyByLanguage.json |
English language name → family name lookup. |
Its lookup logic (reversed-name fallback, stripped variants) is duplicated in 4 composables (useMapData, useMapLayers, useDoxaSearch, useLanguageFamilyLegendData) — keep them consistent. |
i18n/
| File |
What it is |
Agents should know |
library/i18n/index.js |
Vue I18n setup: eagerly inlines all locale JSON catalogs via glob, builds a per-map i18n instance with document-lang detection. Exports createAppI18n (default), detectLocale, SUPPORTED_LOCALES, RTL_LOCALES. |
Folder name IS the locale, filename IS the $t() namespace; new locales must also be added to SUPPORTED_LOCALES (+ RTL_LOCALES if RTL). Do NOT convert to lazy imports (IIFE grew ~22 KB when tried). |
library/i18n/locales/* (97 catalogs) |
11 locales (ar, de, en, es, fr, hi, it, pt, ro, ru, zh), one JSON per UI area (buttons, legend, detail, options, search, messages, aria, prayerLaps, tabs, popup). |
Add a language by copying en/, translating values without renaming/dropping keys. en/ is the fallback source of truth; missing keys/files silently fall back to English. File sets are uneven: en/fr have 10 areas, ar/de/es/pt/ru 9, hi/it/ro/zh only 8 (no tabs.json — their tab strings render in English). |
stores/
| File |
What it is |
Agents should know |
library/stores/dataStore.js |
Pinia store caching fetched datasets per sourceId with loading/error state. Exports useDataStore. |
All fetching routes through this store (no fetch() in components); markRaw() is mandatory on cached payloads. |
library/stores/mapStore.js |
Pinia store: registry of live map instances + cross-map state (selections, filters, auto-fly, clustering, fullscreen, persisted prefs). Exports useMapStore. |
Selections are mutually exclusive — each select* action nulls the others; single store shared across ALL maps on a page (activeMapId tracks focus); prefs persist to localStorage 'mapUserPreferences'. |
library/stores/uiStore.js |
Pinia 'ui' store: theme, tabs, mobile legend sheet, search/hamburger, pin filters, selected people group, toasts, modals, loading, breakpoints, a11y. Exports useUIStore. |
toggleHamburgerMenu is defined TWICE in actions (second silently wins); actions validate and silently no-op on invalid values; call init() once; selectPeopleGroup() hijacks legendState/legendMode. |
utils/
| File |
What it is |
Agents should know |
library/utils/ClusterHelpers.js |
Pure geometric/GeoJSON helpers + default Mapbox cluster options/ramps shared by all clustering modes. |
Distances are degree-space Euclidean (viz only); convexHull mutates its input and returns an open ring; DEFAULT_MAPBOX_CLUSTER_OPTIONS.clusterMaxZoom (6) must stay below the map zoom cap or clusters never break apart. |
library/utils/MSTClusteringUtil.js |
Kruskal MST + Union-Find turning grouped lat/lng points into GeoJSON LineStrings per group with no orphans. |
Distances in raw degrees (maxConnectionDistance is degrees); O(n²) edge building per group; maxConnectionDistance can silently split groups (console.warn only). |
library/utils/NetworkClusteringUtil.js |
Nearest-neighbor "network/shard" cluster-line generator (denser alternative to MST). |
Naive Euclidean degrees, NOT a true MST; points need parseFloat-able latitude/longitude; groups with <2 valid points return no lines. |
library/utils/geoUtils.js |
Pure geo/GeoJSON helpers (bounds, centroid, zoom, coordinate/feature validation, color helpers) shared across bundles. |
Pure/no-deps by contract (no Vue/Mapbox). darkenColor has hardcoded per-region hex overrides bypassing the percent math; isValidCoord takes an array, isValidCoordinate takes (lon, lat) numbers. |
library/utils/DataSourceManager.js |
Back-compat shim re-exporting the real module from library/api/DataSourceManager.js. |
Shim only — new code imports from @map/api/; don't add logic here. |
library/utils/apiBaseUrl.js |
Back-compat shim re-exporting getApiBaseUrl from library/api/apiBaseUrl.js. |
Deprecated alias; import from @map/api/apiBaseUrl.js directly in new code. |
app-profiles/ — one folder per bundle
demo-map/
| File |
What it is |
Agents should know |
app-profiles/demo-map/index.js |
Bundle entry: defines/registers the <demo-map> custom element wrapping @map/ProfileLoader. |
import.meta.glob calls must live HERE (build-time, relative): ./*.vue → 'profileModules', ./src/colors/*.js → registerStrategies. i18n provided as 'appI18n' (custom-element root can't useI18n()). |
app-profiles/demo-map/index.html |
Dev/staging page: loads Mapbox GL peer, mounts <demo-map> with a profile-config attribute, pulls ./index.js as Vite entry. |
%VITE_MAPBOX_TOKEN% replaced by Vite from gitignored .env; sets window.DOXA_TOKEN + MAP_APP_BASE_URL; Mapbox GL must load before the bundle script. |
app-profiles/demo-map/demo-map.vue |
Demo profile: two-tab map (religion coloring vs all-purple pins) composed from @map composables + a local single-color strategy. |
Relies on ProfileLoader injections; tab colorStrategy IDs must exist in the registry; layer name 'language-family-pins' is hardcoded for tab repaints; legend duck-types the strategy shape. |
app-profiles/demo-map/src/colors/colors.json |
Static hex palette (pins, polygons, fallback) — code-free edit surface. |
Edit hex strings only; per-value logic goes in a strategy .js in the same folder. |
app-profiles/demo-map/src/colors/single-color.js |
Local strategy painting every pin one constant purple. |
Auto-registered via the src/colors glob — filename becomes the mode key (single-color → singleColor); keep the buildColorExpression alias and default name; applyColor must return a Mapbox expression array. |
doxa-research-map/
| File |
What it is |
Agents should know |
app-profiles/doxa-research-map/index.js |
Bundle entry: globs profiles + colors, registers strategies, sets up the RTL plugin, defines <doxa-research-map>. |
Globs are relative to THIS file — profile .vue at bundle root, strategies in src/colors/, or they silently don't register. Deliberately does NOT register legacy <doxa-map> (owned by doxa-simple-map; one-shot customElements.define). |
app-profiles/doxa-research-map/index.html |
Staging showcase: gem-framed instances from a flat DOXA_SLOTS array, profile tabs, overview grid. |
Slot profile must match a .vue filename at bundle root; profile + tk (+ ?locale=) auto-injected into config; ./index.js script tag rewritten to the IIFE at build. |
app-profiles/doxa-research-map/research-map.vue |
The research-map profile (~2100 lines): 7-tab map (prayer/adoption/engagement/people-groups/regions/languages/religions) with SemanticTreeLegend, geocoder, filters, detail panel, lazy poster/packet export. |
Tabs are hardcoded in ALL_TABS/FEATURES (NOT profile-config); config arrives only via injections; maxZoom pinned to 22 deliberately; heavy deps (poster, packet, clustering, detail panel, mobile legend) are lazy-loaded — keep them off the boot path. |
app-profiles/doxa-research-map/src/colors/affinity-block.js |
Strategy mapping ROP1 affinity-block codes (A001–A017) to names and pin colors. |
ROP1 code is the primary key (name lookups are lossy legacy); reads properties.affinityBlock falling back to _raw.ROP1; keep NAMES and PALETTE keys in sync; A016 intentionally absent. |
app-profiles/doxa-research-map/src/colors/doxa-region.js |
Strategy coloring pins by DOXA/WAGF region; SLUG_PALETTE is authoritative. |
Color by slug, never localized display labels (break in non-EN locales); uses @map/utils/geoUtils generateColorFromString as fallback. |
app-profiles/doxa-research-map/src/colors/resource.js |
Binary green/black coloring by gospel-resource availability + per-resource palette for the legend. |
Default coloring is intentionally binary despite the per-resource PALETTE; resource values must literally equal 'Available' (properties or _raw CSV columns via getCSVColumn); legacy aliases kept for compat. |
doxa-simple-map/
| File |
What it is |
Agents should know |
app-profiles/doxa-simple-map/index.js |
Bundle entry registering <doxa-map> (legacy) AND <doxa-simple-map> mounting ProfileLoader with per-instance Pinia/i18n. |
Q3 contract: the bundle runs import.meta.glob('./*.vue') itself and provides 'profileModules' (ProfileLoader can't glob across @map). defineCustomElement called twice on purpose (one class per tag); RTL plugin registered once. |
app-profiles/doxa-simple-map/index.html |
Staging showcase: gem-framed <doxa-map> slots (Engagement/Prayer/Adoption) with profile tabs and overview grid. |
Edit only DOXA_SLOTS; profile must match a bundle-root .vue; ?locale= forwarded into every config; build rewrites the module script to ../../app/doxa-simple-map.iife.js. |
app-profiles/doxa-simple-map/doxa-simple-map.vue |
Tabbed (prayer/engagement/adoption) single-map profile wiring library composables, legend, geocoder, and strategies into one Shadow-DOM-safe embed. |
Behavior gated by in-file FEATURES flags (geocoder/hamburger/overlapDensity/activeOverlayEmphasis OFF here); tabs come from injected profileConfig; SHARE_EMBED_BY_ID hardcodes instance-page URLs — renaming instances in simple-map.instances.json breaks share links. |
app-profiles/doxa-simple-map/simple-map.instances.json |
Instance manifest: build emits N preset standalone embed pages (prayer/engagement/adoption) from the one parameterized profile. |
Build-consumed data, not runtime code: each instance becomes doxa-simple-map/<id>/index.html; instances SPLIT one profile into many render targets; colorStrategy/legend/popup values must match registered strategy names. |
template-bundle/ (copy-me starter)
| File |
What it is |
Agents should know |
app-profiles/template-bundle/index.js |
Copy-me entry: globs flat .vue profiles, registers private strategies, defines <template-bundle>. |
Globs are position-bound: ./*.vue flat (filename = profile name) and ./src/colors/*.js (colors.json ignored by the glob); tag name = bundle folder name. |
app-profiles/template-bundle/index.html |
Staging page rendering both template profiles side-by-side. |
The profile-config "profile" field selects which bundle-root .vue renders; copying this bundle means updating tag names and profile strings. |
app-profiles/template-bundle/template-map-a.vue |
Minimal example profile "A" — colored placeholder, no Mapbox/data, demonstrates profile-config injection + sandbox color JSON. |
Filename minus .vue IS the profile name; must sit at bundle root; sandbox imports are relative (./src/...) — @map alias is library-only. |
app-profiles/template-bundle/template-map-b.vue |
Minimal example profile "B" — shows multi-profile bundles; both profiles compile into one bundle JS. |
Host selects it via profile-config {"profile":"template-map-b"}. |
app-profiles/template-bundle/src/colors/colors.json |
Plain-values hex palette a non-programmer edits. |
Values-only; logic goes in a strategy .js beside it; imported relatively from the bundle-root .vue. |
app-profiles/template-bundle/src/colors/example-mode.js |
Copy-me template for a bundle-private strategy (two-bucket example on peoplePraying). |
Filename IS the mode key (kebab → camelCase); matching a library mode overrides it for this bundle only; name in the default export is required or the tab/legend label is blank. |
internal/ — build machinery and staging (do not edit for per-map styling)
| File |
What it is |
Agents should know |
internal/clean.mjs |
Pre-build script that deletes/recreates the output tree public/<name>/. |
Reads the tree name from vite.doxa-maps-build-config.json (fallback "doxa-maps"); must run BEFORE per-bundle vite builds. |
internal/generate-tree.mjs |
Post-vite step that scans app-profiles/ and writes the self-contained doxa-maps/ output tree (manifest.json, staging pages, standalone profile/instance pages) and copies to configured destinations. |
Runs AFTER per-bundle builds (expects the IIFE at public/<name>/<bundle>/<bundle>.js); discovery is convention-driven (bundle = non-underscore dir with .vue at ROOT — profiles moved into src/ silently vanish); all URLs stay relative unless embedBaseUrl is set; inlines staging-forge.{css,js}. |
internal/generate-library-index.mjs |
Scans live library/ code and regenerates docs/reference-library-index.md (one-line import catalog). |
Output is DERIVED — never hand-edit the index; rerun after any library/ change; descriptions come from each file's first header-comment line. |
internal/drop-portability-check.mjs |
CLI gate (check:drop): scans built .html/.json for root-relative refs and fails the build if any would break subpath/Drop hosting. |
Defaults treeDir to public/<name> from the build config — build first; only checks .html/.json and a fixed manifest key list (iframeUrl|scriptUrl|url|embedUrl|output) — new URL keys need adding here. |
internal/inline-parse-check.mjs |
Post-build verifier (check:parse): syntax-checks every inline classic <script> in the built HTML via node --check. |
Only matches bare <script> (no attributes), checked as classic scripts — import.meta or a literal </script> in snippets is exactly the bug class it catches. |
internal/staging.js |
Dev-only "Embeddable JAMstack Maps" showcase script: auto-discovers bundles via import.meta.glob, renders bundle tabs + live map tiles with lazy WebGL-guarded mounting and a locale switcher. |
A bundle appears only if index.js exists and its tag is regex-scraped from customElements.define; map slots come from parsing window.*SLOTS / profile-config attrs. Never iframe the maps (cross-realm instanceof fails); MAX_LIVE=4 with forced WEBGL_lose_context eviction. |
internal/staging-forge.js |
Client script for the generated staging pages: semantic bundle/profile/instance tree sidebar + live map iframe stage + token paste-once UX. |
Must stay file://-safe (no import/export; manifest inlined as window.FORGE.manifest); the DEV-HMR block is stripped by generate-tree.mjs — keep the DEV-HMR-START/END markers intact. |
internal/staging-forge.css |
Dark "Embeddable JAMstack Maps" theme for the generated staging pages (tree sidebar, token bar, gem-framed stage, mobile layout). |
Selectors are a contract with the staging HTML/JS generator (which sets --gem/--gem-rgb per node); pure presentation for internal pages. |
internal/staging-reference-v2.html |
Hand-authored reference mockup of the staging-root tree page (nested details, lazy iframes) that generate-tree.mjs's template replicates. |
Not served or built — spec-by-example; rules encoded: inline manifest (file:// safe), lazy iframe src on toggle, tk never baked, normal-flow header. |
library/scripts/research/ |
Table + resource builders shared by cities-internet, gospel-resources and key-cities. In library/ because more than one profile consumes the output. |
|
library/scripts/posters/ |
Poster and preview generator shared by country-posters and my-upg-100-list. Its out/ tree is render output and is gitignored; what ships is the exported subset in public/assets/. |
|
app-profiles/gospel-resources/scripts/ |
Link and click-sheet verifiers. Single-profile, so they live with the profile rather than in the library. |
|
internal/write-token.mjs |
Writes public/api/maps/token.json from the MAPBOX_TOKEN environment variable. Refuses an sk.*; writes nothing when unset. |
|
Root config files
| File |
What it is |
Agents should know |
vite.config.js |
Vite config building one IIFE bundle per invocation (BUNDLE env var) from auto-discovered app-profiles/; serves all bundles in dev. |
Build requires BUNDLE=<name> (npm run build loops all); bundle discovery needs BOTH index.html AND index.js at profile root (_/. dirs skipped); @map alias → library/; jspdf externalized to an esm.sh CDN URL in builds; output name from vite.doxa-maps-build-config.json. |
vite.doxa-maps-build-config.json |
The single committed build-config: output tree name ("doxa-maps"), extra copy destinations (paths), embedBaseUrl, Mapbox tokenUrl/token. |
Edit this ONE file then bun run build; empty embedBaseUrl keeps manifest URLs tree-relative (drop-portability gate); token ladder: per-map prop > ?tk= > baked token > window.MAP_TOKEN_URL > tokenUrl > same-origin /api/maps/token. tokenUrl is a URL, not a secret. |
package.json |
Root npm/bun manifest: scripts (dev, build, build:bundle, clean, tree, check:drop, check:parse) + deps (vue 3, pinia, vue-i18n, topojson-client, world-atlas, jspdf; vite 5 toolchain). |
build iterates app-profiles/*/ setting BUNDLE per invocation — adding a folder auto-builds; internal/ scripts run as part of build (check:drop currently invoked twice, likely unintentional). Bun-first toolchain. |
index.html |
Root staging page ("Embeddable JAMstack Maps") listing every bundle as tabs and lazy-mounting each bundle's maps in live frames; logic in /internal/staging.js. |
Loads mapbox-gl v3.24.0 + geocoder globally ONCE so custom elements share window.mapboxgl in the same realm; pinned CDN versions must match library expectations. |
Quick reference — "I want to…"
| I want to… |
Do this |
| Add a new map |
copy app-profiles/template-bundle/ → rename folder + tag in index.js |
| Add a screen to an existing bundle |
drop a .vue flat in that bundle's folder, request it via profile-config.profile |
| Fix a legend / control for ALL maps |
edit it once in library/ (@map); rebuild bundles |
| Add a color strategy |
new file in @map/colors/ (shared) or the bundle's src/colors/ (map-private) |
| Build everything |
bun run build → public/doxa-maps/<bundle>/<bundle>.js |
| Build just one |
BUNDLE=<name> bun run build:bundle |
| Preview in isolation |
bun run dev → http://localhost:5173/app-profiles/<name>/index.html |
| See a change on the served site |
bun run build, then refresh (NOT dev) |
| Repoint the API without a rebuild |
set window.MAP_APP_API_URL before the bundle loads |
| Repoint the Mapbox token |
pass tk in profile-config, or set window.MAP_TOKEN_URL / build-config tokenUrl |