From 22b92ae0439a2fd940c8b5132d5e08c76bb6e17d Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Sat, 26 Sep 2026 02:56:05 +0000 Subject: [PATCH] template-bundle: the starter's first screen is now a real map A new writer's first copy used to draw a coloured box. template-map-a.vue now draws the points in data/places.geojson on a basemap with one translated title, through the library's own pieces (useMapInstance, resolveMapProvider, labelFont, emissivePaint). It follows the page's engine, locale (right-to-left included) and token, and with no token it runs on keyless MapLibre, so it works with no account. template-map-b.vue stays as the second-screen example, so the README, the tutorial and the plugin-designer skill (rename a, delete b) stay true. The README gains the map's pieces table and the dx-maps paths. Library change: library/i18n/locales/<11>/template.json (key template.title) is eagerly globbed into every bundle, so consumers need rebuilding (rule 5B). --- library/i18n/locales/ar/template.json | 3 + library/i18n/locales/de/template.json | 3 + library/i18n/locales/en/template.json | 3 + library/i18n/locales/es/template.json | 3 + library/i18n/locales/fr/template.json | 3 + library/i18n/locales/hi/template.json | 3 + library/i18n/locales/it/template.json | 3 + library/i18n/locales/pt/template.json | 3 + library/i18n/locales/ro/template.json | 3 + library/i18n/locales/ru/template.json | 3 + library/i18n/locales/zh/template.json | 3 + plugin-designs/template-bundle/README.md | 35 ++++- .../template-bundle/data/places.geojson | 11 ++ plugin-designs/template-bundle/index.js | 2 +- .../template-bundle/template-map-a.vue | 120 +++++++++++------- .../template-bundle/template-map-b.vue | 2 +- 16 files changed, 151 insertions(+), 52 deletions(-) create mode 100644 library/i18n/locales/ar/template.json create mode 100644 library/i18n/locales/de/template.json create mode 100644 library/i18n/locales/en/template.json create mode 100644 library/i18n/locales/es/template.json create mode 100644 library/i18n/locales/fr/template.json create mode 100644 library/i18n/locales/hi/template.json create mode 100644 library/i18n/locales/it/template.json create mode 100644 library/i18n/locales/pt/template.json create mode 100644 library/i18n/locales/ro/template.json create mode 100644 library/i18n/locales/ru/template.json create mode 100644 library/i18n/locales/zh/template.json create mode 100644 plugin-designs/template-bundle/data/places.geojson diff --git a/library/i18n/locales/ar/template.json b/library/i18n/locales/ar/template.json new file mode 100644 index 000000000..1971124a0 --- /dev/null +++ b/library/i18n/locales/ar/template.json @@ -0,0 +1,3 @@ +{ + "title": "خريطتي الأولى" +} diff --git a/library/i18n/locales/de/template.json b/library/i18n/locales/de/template.json new file mode 100644 index 000000000..174450379 --- /dev/null +++ b/library/i18n/locales/de/template.json @@ -0,0 +1,3 @@ +{ + "title": "Meine erste Karte" +} diff --git a/library/i18n/locales/en/template.json b/library/i18n/locales/en/template.json new file mode 100644 index 000000000..d179beda9 --- /dev/null +++ b/library/i18n/locales/en/template.json @@ -0,0 +1,3 @@ +{ + "title": "My first map" +} diff --git a/library/i18n/locales/es/template.json b/library/i18n/locales/es/template.json new file mode 100644 index 000000000..53a3fdfc1 --- /dev/null +++ b/library/i18n/locales/es/template.json @@ -0,0 +1,3 @@ +{ + "title": "Mi primer mapa" +} diff --git a/library/i18n/locales/fr/template.json b/library/i18n/locales/fr/template.json new file mode 100644 index 000000000..b0908af76 --- /dev/null +++ b/library/i18n/locales/fr/template.json @@ -0,0 +1,3 @@ +{ + "title": "Ma première carte" +} diff --git a/library/i18n/locales/hi/template.json b/library/i18n/locales/hi/template.json new file mode 100644 index 000000000..97e7f779f --- /dev/null +++ b/library/i18n/locales/hi/template.json @@ -0,0 +1,3 @@ +{ + "title": "मेरा पहला नक्शा" +} diff --git a/library/i18n/locales/it/template.json b/library/i18n/locales/it/template.json new file mode 100644 index 000000000..bea7c1102 --- /dev/null +++ b/library/i18n/locales/it/template.json @@ -0,0 +1,3 @@ +{ + "title": "La mia prima mappa" +} diff --git a/library/i18n/locales/pt/template.json b/library/i18n/locales/pt/template.json new file mode 100644 index 000000000..82353ff85 --- /dev/null +++ b/library/i18n/locales/pt/template.json @@ -0,0 +1,3 @@ +{ + "title": "Meu primeiro mapa" +} diff --git a/library/i18n/locales/ro/template.json b/library/i18n/locales/ro/template.json new file mode 100644 index 000000000..453913848 --- /dev/null +++ b/library/i18n/locales/ro/template.json @@ -0,0 +1,3 @@ +{ + "title": "Prima mea hartă" +} diff --git a/library/i18n/locales/ru/template.json b/library/i18n/locales/ru/template.json new file mode 100644 index 000000000..50c473e1e --- /dev/null +++ b/library/i18n/locales/ru/template.json @@ -0,0 +1,3 @@ +{ + "title": "Моя первая карта" +} diff --git a/library/i18n/locales/zh/template.json b/library/i18n/locales/zh/template.json new file mode 100644 index 000000000..12cb35506 --- /dev/null +++ b/library/i18n/locales/zh/template.json @@ -0,0 +1,3 @@ +{ + "title": "我的第一张地图" +} diff --git a/plugin-designs/template-bundle/README.md b/plugin-designs/template-bundle/README.md index a393ca52d..e839e8ea4 100644 --- a/plugin-designs/template-bundle/README.md +++ b/plugin-designs/template-bundle/README.md @@ -3,8 +3,14 @@ **This folder is the STARTER. Copy it to make a new plugin. That's the whole idea.** Your starting point. **Copy this folder, then build your map inside the copy** — don't start from -blank. It's a tiny working bundle (two trivial profiles that render a colored box, no Mapbox, no -data) plus a `src/` sandbox laid out for your real code. +blank. It's a tiny working bundle plus a `src/` sandbox laid out for your real code: + +- **`template-map-a.vue` is a real map.** It draws the points in `data/places.geojson` on a basemap, + shows one translated title, and follows the page's engine, language (including right-to-left) and + Mapbox token. **It needs no account**: with no token it runs on the free MapLibre engine. Swap in + your own points and it is your map. +- **`template-map-b.vue`** is a second, trivial screen (a coloured box). It only shows that one + bundle can hold several screens. Delete it if you want one. ## In plain English (read this first) @@ -24,7 +30,7 @@ If you've never touched this repo, here are the only 4 words you need: cp -r plugin-designs/template-bundle plugin-designs/my-plugin # 2. build (the ONE command) -bun run build # → public/doxa-maps/my-plugin/my-plugin.js (your paste-anywhere plugin) +bun run build # → public/dx-maps/my-plugin/my-plugin.js (your paste-anywhere plugin) ``` Then rename the tag + profile strings (the "exactly four things" list below) so your copy has its @@ -70,8 +76,9 @@ needs it — an expert move, not a first move. To see everything `library/` offe template-bundle/ ├── index.js ← bundle entry: registers , globs ./*.vue ├── index.html ← dev staging page (the build needs it to find the bundle) -├── template-map-a.vue ← profile "template-map-a" ← FLAT at the bundle root -├── template-map-b.vue ← profile "template-map-b" ← FLAT at the bundle root +├── template-map-a.vue ← profile "template-map-a": THE MAP ← FLAT at the bundle root +├── template-map-b.vue ← profile "template-map-b": a box ← FLAT at the bundle root +├── data/places.geojson ← the map's points (imported by template-map-a.vue, ships inside the .js) └── src/ ← YOUR SANDBOX (each subfolder has its own README) ├── api/ colors/ components/ composables/ utils/ ``` @@ -81,7 +88,21 @@ template-bundle/ (`import.meta.glob('./*.vue')`). A `.vue` inside a `profiles/` subfolder would NOT be found. Keep your profile screens flat; the small pieces they're built from live in `src/`. -Everything builds into **one** file: `public/doxa-maps/template-bundle/template-bundle.js`. +Everything builds into **one** file: `public/dx-maps/template-bundle/template-bundle.js`. + +## The map's pieces (template-map-a.vue) + +| Piece | Where it comes from | To change it | +|---|---|---| +| the points | `data/places.geojson` (a static import, so no extra request on the host) | replace the file with your own GeoJSON points | +| the pin colour | `src/colors/colors.json` → `pins.selected` | edit the hex | +| the engine (Mapbox or MapLibre) | the page: `profile-config` `provider`, `?provider=`, or `window.MAP_PROVIDER`; no token → MapLibre | nothing: leave it to the page | +| the language and right-to-left | the page's locale, given by the library's ProfileLoader | nothing: leave it to the page | +| the title | `t('template.title')` from `library/i18n/locales//template.json` | see below | + +**Your own text.** Translations live in `library/` (every locale in one place), so a new key there +is a library change: ask the build owner to land it. Until then, a plain English string in your +`.vue` is fine. ## The two ways you import @@ -93,7 +114,7 @@ There's no alias for your sandbox — your code is always relative. That boundar ## Embed it ```html - + ``` diff --git a/plugin-designs/template-bundle/data/places.geojson b/plugin-designs/template-bundle/data/places.geojson new file mode 100644 index 000000000..7b3b79922 --- /dev/null +++ b/plugin-designs/template-bundle/data/places.geojson @@ -0,0 +1,11 @@ +{ + "type": "FeatureCollection", + "features": [ + { "type": "Feature", "properties": { "name": "Nairobi" }, "geometry": { "type": "Point", "coordinates": [36.82, -1.29] } }, + { "type": "Feature", "properties": { "name": "Cairo" }, "geometry": { "type": "Point", "coordinates": [31.24, 30.04] } }, + { "type": "Feature", "properties": { "name": "Delhi" }, "geometry": { "type": "Point", "coordinates": [77.21, 28.61] } }, + { "type": "Feature", "properties": { "name": "Jakarta" }, "geometry": { "type": "Point", "coordinates": [106.85, -6.21] } }, + { "type": "Feature", "properties": { "name": "Lima" }, "geometry": { "type": "Point", "coordinates": [-77.04, -12.05] } }, + { "type": "Feature", "properties": { "name": "Istanbul" }, "geometry": { "type": "Point", "coordinates": [28.98, 41.01] } } + ] +} diff --git a/plugin-designs/template-bundle/index.js b/plugin-designs/template-bundle/index.js index 89469dd08..887967491 100644 --- a/plugin-designs/template-bundle/index.js +++ b/plugin-designs/template-bundle/index.js @@ -12,7 +12,7 @@ * profile, all compiled into the single template-bundle.js. * * Usage from a host page: - * + * * * * diff --git a/plugin-designs/template-bundle/template-map-a.vue b/plugin-designs/template-bundle/template-map-a.vue index dfa5cc8ba..2019dcb89 100644 --- a/plugin-designs/template-bundle/template-map-a.vue +++ b/plugin-designs/template-bundle/template-map-a.vue @@ -1,65 +1,99 @@ diff --git a/plugin-designs/template-bundle/template-map-b.vue b/plugin-designs/template-bundle/template-map-b.vue index 40260a3ed..a4443a437 100644 --- a/plugin-designs/template-bundle/template-map-b.vue +++ b/plugin-designs/template-bundle/template-map-b.vue @@ -9,7 +9,7 @@ * * A SECOND profile living in the SAME bundle folder, alongside * template-map-a.vue (both flat, no profiles/ subfolder). Both compile into the - * single output file app/doxa-maps/template-bundle/template-bundle.js — one + * single output file public/dx-maps/template-bundle/template-bundle.js — one * bundle, two profiles. * The host chooses which one to show with the `profile` field: *