From a5eb9f6fa67f9d8db1c348a67e814bdaae4bb25e Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 09:03:26 +0000 Subject: [PATCH] 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. --- .../regions-dashboard/src/RegionCountryMap.vue | 18 ++++++++++++++++-- public/dx-maps/doxa-maps-spa/manifest.json | 8 ++++---- public/dx-maps/manifest.json | 8 ++++---- .../region-dashboards/index.html | 2 +- .../regions-dashboard/regions-dashboard.js | 2 +- .../regions-dashboard/regions-list/index.html | 2 +- .../regions-dashboard/regions-mfe/index.html | 2 +- 7 files changed, 28 insertions(+), 14 deletions(-) diff --git a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue index 18cbe726f..4204e6485 100644 --- 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). diff --git a/public/dx-maps/doxa-maps-spa/manifest.json b/public/dx-maps/doxa-maps-spa/manifest.json index 20d024772..8a0cdb1b9 100644 --- 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": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } }, { @@ -1119,7 +1119,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -1135,7 +1135,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } } ] diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 20d024772..8a0cdb1b9 100644 --- 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": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } }, { @@ -1119,7 +1119,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -1135,7 +1135,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } } ] diff --git a/public/dx-maps/regions-dashboard/region-dashboards/index.html b/public/dx-maps/regions-dashboard/region-dashboards/index.html index c7660576e..91851f4bd 100644 --- a/public/dx-maps/regions-dashboard/region-dashboards/index.html +++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html @@ -36,7 +36,7 @@ - + - + - +