Make the all-regions chooser's resting pins easier to see

The Driver reported the pins as hard to see. On the chooser this is the state that answers it: what the page shows on load, before any hover. Two things make a pin harder to read here than on a cloned country page, and neither is a matter of taste. The chooser renders the globe, so every pin sits at the lowest useful zoom instead of a framed close-up; and the 1px white stroke is a fixed cost, so at radius 3 it consumes a third of the pin's width and the coloured core carrying the region's identity is only about 2px. Raising the resting radius from 3 to 4 at zoom 2 grows that core from 2px to 3px -- a ~50% gain in the part a reader actually distinguishes, for ~33% more footprint. Opacity goes to 1 for the same reason: 10% transparency over a basemap costs contrast and buys nothing while nothing is being de-emphasised. Only the chooser changes. The cloned country and region pages keep DX-life's exact geometry, and the hover behaviour is untouched -- dimming the other regions is the design saying "these pins are one group", which is a taste call rather than a legibility defect. Whether this is now easy enough to see needs eyes; the argument here is only that the readable part grows faster than the footprint.
2026-09-28 09:03:26 +00:00 · 2026-09-28 09:03:26 +00:00 · a5eb9f6fa6
commit a5eb9f6fa6
parent 3747122e69
7 changed files with 28 additions and 14 deletions
--- a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue
+++ b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue
@ -228,10 +228,24 @@ function pinExpressions() {
    return {
      color: regionColorExpression(),
      sortKey: lit ? ['case', isLit, 2, 1] : 1,
-      opacity: lit ? ['case', isLit, 1, 0.25] : 0.9,
+      opacity: lit ? ['case', isLit, 1, 0.25] : 1,
+      // THE RESTING STATE IS BIGGER THAN THE CLONE'S, and only here. The Driver reported the pins
+      // as hard to see; this is the state that answers that, because it is what the page shows on
+      // load, before any hover. Two things make a pin harder to read on THIS map than on a cloned
+      // country page, and neither is taste:
+      //   · the chooser renders the GLOBE, so the subject is the whole world rather than one
+      //     country — every pin sits at the lowest useful zoom instead of a framed close-up;
+      //   · a 1px white stroke is a fixed cost, so at radius 3 it eats a third of the pin's
+      //     width and the COLOURED core that carries the region's identity is only ~2px.
+      // Raising the resting radius 3 -> 4 at zoom 2 grows the coloured core from ~2 to ~3, which is
+      // a ~50% gain in the part a reader actually distinguishes, for ~33% more footprint. Opacity
+      // goes 0.9 -> 1 for the same reason: at this size, 10% transparency over a basemap is a
+      // visible loss of contrast and buys nothing when nothing is being de-emphasised yet.
+      // The HOVER state is deliberately untouched — dimming the rest to 0.25 is the design saying
+      // "these pins are one group", and that is a Driver taste call, not a legibility defect.
      radius: lit
        ? ['case', isLit, ['interpolate', ['linear'], ['zoom'], 2, 4.5, 6, 8], ['interpolate', ['linear'], ['zoom'], 2, 2.5, 6, 5]]
-        : ['interpolate', ['linear'], ['zoom'], 2, 3, 6, 6.5],
+        : ['interpolate', ['linear'], ['zoom'], 2, 4, 6, 7.5],
    }
  }
  // DX-life's two modes, unchanged (CountryMap.vue:218-223).
--- a/public/dx-maps/doxa-maps-spa/manifest.json
+++ b/public/dx-maps/doxa-maps-spa/manifest.json
@ -1080,7 +1080,7 @@
      "bundle": "regions-dashboard",
      "scriptUrl": "./regions-dashboard/regions-dashboard.js",
      "output": "dx-maps/regions-dashboard/regions-dashboard.js",
-      "integrity": "sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx",
+      "integrity": "sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8",
      "elements": [
        "regions-dashboard"
      ],
@ -1103,7 +1103,7 @@
          "scriptUrl": "./regions-dashboard/regions-dashboard.js",
          "embed": {
            "iframe": "<iframe src=\"./regions-dashboard/region-dashboards/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
-            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
+            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
          }
        },
        {
@ -1119,7 +1119,7 @@
          "scriptUrl": "./regions-dashboard/regions-dashboard.js",
          "embed": {
            "iframe": "<iframe src=\"./regions-dashboard/regions-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=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
+            "script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
          }
        },
        {
@ -1135,7 +1135,7 @@
          "scriptUrl": "./regions-dashboard/regions-dashboard.js",
          "embed": {
            "iframe": "<iframe src=\"./regions-dashboard/regions-mfe/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
-            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
+            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
          }
        }
      ]
--- a/public/dx-maps/manifest.json
+++ b/public/dx-maps/manifest.json
@ -1080,7 +1080,7 @@
      "bundle": "regions-dashboard",
      "scriptUrl": "./regions-dashboard/regions-dashboard.js",
      "output": "dx-maps/regions-dashboard/regions-dashboard.js",
-      "integrity": "sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx",
+      "integrity": "sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8",
      "elements": [
        "regions-dashboard"
      ],
@ -1103,7 +1103,7 @@
          "scriptUrl": "./regions-dashboard/regions-dashboard.js",
          "embed": {
            "iframe": "<iframe src=\"./regions-dashboard/region-dashboards/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
-            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
+            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
          }
        },
        {
@ -1119,7 +1119,7 @@
          "scriptUrl": "./regions-dashboard/regions-dashboard.js",
          "embed": {
            "iframe": "<iframe src=\"./regions-dashboard/regions-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=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
+            "script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
          }
        },
        {
@ -1135,7 +1135,7 @@
          "scriptUrl": "./regions-dashboard/regions-dashboard.js",
          "embed": {
            "iframe": "<iframe src=\"./regions-dashboard/regions-mfe/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
-            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
+            "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
          }
        }
      ]
--- a/public/dx-maps/regions-dashboard/region-dashboards/index.html
+++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html
@ -36,7 +36,7 @@

  <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
  <!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
-  <script src="../regions-dashboard.js" integrity="sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx" crossorigin="anonymous"></script>
+  <script src="../regions-dashboard.js" integrity="sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8" crossorigin="anonymous"></script>

  <script>
    // Mapbox token resolution — the A3 ladder, in precedence order:
--- a/public/dx-maps/regions-dashboard/regions-dashboard.js
+++ b/public/dx-maps/regions-dashboard/regions-dashboard.js
--- a/public/dx-maps/regions-dashboard/regions-list/index.html
+++ b/public/dx-maps/regions-dashboard/regions-list/index.html
@ -32,7 +32,7 @@

  <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
  <!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
-  <script src="../regions-dashboard.js" integrity="sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx" crossorigin="anonymous"></script>
+  <script src="../regions-dashboard.js" integrity="sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8" crossorigin="anonymous"></script>

  <script>
    // Mapbox token resolution — the A3 ladder, in precedence order:
--- a/public/dx-maps/regions-dashboard/regions-mfe/index.html
+++ b/public/dx-maps/regions-dashboard/regions-mfe/index.html
@ -47,7 +47,7 @@

  <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
  <!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
-  <script src="../regions-dashboard.js" integrity="sha384-D1ybTRQ1Ol9wvv+h5izsuhCSBha2pzmrmKuKv5G3k7UcB2onBWoiEhudXLhCpikx" crossorigin="anonymous"></script>
+  <script src="../regions-dashboard.js" integrity="sha384-E6wQHAZhsMY4+u9tG9at5VmMQ5Svu/IGJQJ7+4jzVu//ADEr0BOAswLQ9pHOBrJ8" crossorigin="anonymous"></script>

  <script>
    // Mapbox token resolution — the A3 ladder, in precedence order: