doxa-life/doxa-maps-cdn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
doxa-maps-cdn/DX-MAPS-GALLERY.md

7 KiB
Raw Blame History

Deep Research (the Research Gallery) on a hidden page, and every map served from /dx-maps/

This branch adds the Deep Research page, /deep-research: the Research Gallery (the research maps, dashboards and lists in one app), filling the page below the site header, on desktop and phone. The page is hidden: it is in no menu, and robots are told not to index it; it is reached by its address. The Research page is DX Life's own again, with the production simple map. Every map on the site loads from the same build tree.

What changed
public/dx-maps/ The dx-maps output folder, dropped in (doxa-maps development d45b765bd, public/dx-maps/, copied unchanged). Every map on this site loads from it, same-origin.
app/pages/deep-research/index.vue Deep Research: the Research Gallery. The page loads one script (/dx-maps/doxa-maps-spa/doxa-maps-spa.js) and adds one element (<doxa-maps-spa>), sized to the viewport below the header; its tree-base is built at runtime from the page's own origin. Every section of the gallery shows, the Experimental section included. Hidden: in no menu, robots: noindex.
app/pages/research/index.vue The Research page, DX Life production's (fc4d622): the heading, the "By Region" link, the research map on its own (bundle="research-map", <doxa-research-map>) and the UUPG list. One addition, under the map: "Want Deeper Research? See our Deep-Research Maps →", linking to /deep-research (the locale prefix kept). The two phrases, and the page name "Deep Research", are in i18n/locales/<code>/common.json for all 11 locales; "Deep Research" stays a name in every language, as the gallery's own heading does.
app/pages/regions/index.vue, app/utils/nav.ts, nuxt.config.ts /regions is DX Life's own index again, with its menu item, and /countries goes to it (USE_LEGACY_REGIONS_PAGE and LEGACY_REGIONS_PAGE on). Set both off to send /regions to a gallery tab instead.
app/composables/useDoxaMap.ts The home (engagement), pray (prayer) and adopt (adoption) maps now load /dx-maps/doxa-simple-map/doxa-simple-map.js; the research-map key loads /dx-maps/doxa-research-map/doxa-research-map.js. Mapbox GL moves from v3.3.0 to v3.24.0, the version the dx-maps bundles are built and tested with.
app/components/DoxaMapSlot.vue With no Mapbox token configured, it asks the map for the keyless MapLibre engine (see Map engine). With a token, the config passes through unchanged. The map fills the slot's box, not the viewport (--profile-min-h: 0), so the slot never cuts off the map's attribution and bottom controls.
public/embed/map/index.html, public/research/doxa-research-map.html The same: bundles from /dx-maps/, Mapbox GL v3.24.0.
public/js/doxa-simple-map.js, public/js/doxa-research-map.js Kept, unused. No page loads them any more (every map loads from /dx-maps/), but they stay in place so nothing DX-life relied on is deleted.

Unchanged on purpose: the element names (<doxa-map>, <doxa-research-map>, <doxa-maps-spa>) and nuxt.config.ts (its isCustomElement lists only those names). public/js/pplr-data-maps.iife.js and /research/pplr-data-maps.html are a separate showcase with no dx-maps equivalent, so they are also unchanged.

Language. The gallery follows the site's language and the language switcher (all 11 locales; Arabic lays out right-to-left).

Map engine. Every map on the site (the Deep Research gallery and the home, pray, adopt, research and country maps) uses the keyless MapLibre engine by default, so the whole site's maps work with no secrets at all. To switch back to Mapbox, as doxa.life uses it today, set NUXT_PUBLIC_MAP_PROVIDER=mapbox together with NUXT_PUBLIC_MAPBOX_TOKEN; a token alone does not switch, and "mapbox" without a token falls back to MapLibre. The page loads only the map bundle; each map loads its own engine, so nothing is fetched from api.mapbox.com unless Mapbox is chosen.

What comes from elsewhere. The map code and the data folder are this site's own (/dx-maps/). The MapLibre engine comes from jsDelivr, the base-map tiles from OpenFreeMap and VersaTiles, one dashboard's country figures from the World Bank API, and the maps' people-group data from the prayer API (NUXT_PUBLIC_PRAY_BASE_URL, default https://pray.doxa.life).

One scrollbar. The gallery is a full-page app: it fills exactly the space between the header and the bottom of the screen. The Deep Research page has no footer and does not scroll itself, so the only scrollbar is the gallery's own.

Phone. The gallery opens straight on a map (Simple Research). Its list of views sits behind the ☰ button. Big Picture is marked Desktop only there (it needs a wide screen); every other view works on a phone.

Run it

bun install
bun run dev

Then open http://localhost:3000/deep-research/ (Nuxt prints the port if 3000 is taken). No database or .env is needed for this page. Without DATABASE_URL, the dev server only logs "skipping migrations".

  • Arabic: http://localhost:3000/ar/deep-research/
  • Open a specific view: /deep-research/?tab=prayer-map (also research-map-plus-grid, regions-dashboard, upg-100, and so on).
  • The Research page with the simple map: http://localhost:3000/research/
  • Share and embed links in the maps point at this site's own /dx-maps/ pages.
  • To run it against a local dx-maps, and to try all three ways a site can take the gallery (drop-in, CDN, subdomain) with the exact ports and settings: documentation/LAPTOP-6WAY.md.

Deployment method: the dx-maps output folder dropped in (this branch, deep-research, from research-gallery-drop-in)

Identical to research-gallery-js (maps from the CDN), except that the dx-maps output folder is dropped into public/dx-maps/ and every map loads same-origin from it: NUXT_PUBLIC_DX_MAPS_BASE defaults to empty, which means this site's own /dx-maps/. That covers the Research Gallery, the home (engagement), pray (prayer) and adopt maps (useDoxaMap, DoxaMapSlot), and the static pages public/embed/map/ and public/research/doxa-research-map.html (which carry /dx-maps as a constant). Each map is told its assetsBase in the tree. No iframe is used, and no other host is involved.

/embed-test

/embed-test embeds every web plugin in the dx-maps tree, as JavaScript (no iframe). The list is read at runtime from the tree's manifest.json, never typed: section 1 is every profile with stage: production, section 2 every other profile. A profile whose targets leave out web (a desktop-only plugin, such as Rudder) is skipped. Each card loads its bundle's script and adds the element that bundle defines. A card mounts its plugin when it scrolls into view and removes it when it leaves (browsers allow only a few WebGL maps at once). ?only=<bundle>/<profile> (or a bundle name, comma-separated) shows just those.

Updating the maps

Replace public/dx-maps/ with a newer build of the tree, from the doxa-maps repo's public/dx-maps/. No page needs to change.