feat(maps): single-color markers with Padelnomics Score

Phase B: Remove dual-ring marker design (ring/core), replace with single-color markers colored by opportunity_score ("Padelnomics Score"). Simplify CSS, update tooltips to show one score line on all maps. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 12:00:13 +01:00
parent bda2f85fd6
commit 6d44c116aa
5 changed files with 42 additions and 105 deletions
--- a/web/src/padelnomics/content/templates/markets.html
+++ b/web/src/padelnomics/content/templates/markets.html
@@ -20,10 +20,6 @@

  <!-- Map legend -->
  <div class="mb-6" style="display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; font-size:0.82rem; color:#64748B;">
-    <span style="display:flex; align-items:center; gap:0.35rem;">
-      <span style="font-weight:600;">◉</span> inner = Market Score
-      &nbsp;<span style="font-weight:600;">○</span> ring = Opportunity Score
-    </span>
    <span style="display:flex; align-items:center; gap:0.3rem;">
      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#15803D;"></span>≥80
      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#0D9488;margin-left:4px;"></span>≥60
@@ -98,12 +94,6 @@
    maxZoom: 18
  }).addTo(map);

-  function dot(hex, filled) {
-    return filled
-      ? '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
-      : '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid ' + hex + ';vertical-align:middle;margin-right:4px;"></span>';
-  }
-
  var data = {{ map_countries | tojson }};
  if (data.length) {
    var maxV = Math.max.apply(null, data.map(function(d) { return d.total_venues; }));
@@ -111,13 +101,13 @@
    data.forEach(function(c) {
      if (!c.lat || !c.lon) return;
      var size = 12 + 44 * Math.sqrt(c.total_venues / maxV);
-      var coreHex = sc(c.avg_market_score);
-      var ringHex = sc(c.avg_opportunity_score || 0);
+      var score = c.avg_opportunity_score || 0;
+      var hex = sc(score);
      var tip = '<strong>' + c.country_name_en + '</strong><br>'
-        + dot(coreHex, true) + '<span style="color:' + coreHex + ';font-weight:600;">Market Score: ' + c.avg_market_score + '/100</span><br>'
-        + dot(ringHex, false) + '<span style="color:' + ringHex + ';font-weight:600;">Opportunity Score: ' + (c.avg_opportunity_score || 0) + '/100</span><br>'
+        + '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
+        + '<span style="color:' + hex + ';font-weight:600;">Padelnomics Score: ' + score + '/100</span><br>'
        + '<span style="color:#94A3B8;font-size:0.75rem;">' + c.total_venues + ' venues · ' + c.city_count + ' cities</span>';
-      L.marker([c.lat, c.lon], { icon: PNMarkers.makeIcon({ size: size, coreColor: coreHex, ringColor: ringHex }) })
+      L.marker([c.lat, c.lon], { icon: PNMarkers.makeIcon({ size: size, color: hex }) })
        .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
        .on('click', function() { window.location = '/' + lang + '/markets/' + c.country_slug; })
        .addTo(map);
--- a/web/src/padelnomics/public/templates/opportunity_map.html
+++ b/web/src/padelnomics/public/templates/opportunity_map.html
@@ -39,7 +39,6 @@
  <div id="map-data" style="display:none;"></div>

  <div class="mt-4 text-sm text-slate" style="display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; align-items:center;">
-    <span><strong>◉</strong> inner = Opportunity Score &nbsp;<strong>○</strong> ring = Market Score</span>
    <span style="display:flex; align-items:center; gap:0.3rem;">
      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#15803D;"></span>≥80
      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#0D9488;margin-left:4px;"></span>≥60
@@ -80,12 +79,6 @@
         : (p || '');
  }

-  function dot(hex, filled) {
-    return filled
-      ? '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
-      : '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid ' + hex + ';vertical-align:middle;margin-right:4px;"></span>';
-  }
-
  function renderMap() {
    oppLayer.clearLayers();
    refLayer.clearLayers();
@@ -109,20 +102,19 @@
    oppData.forEach(function(loc) {
      if (!loc.lat || !loc.lon) return;
      var size = 8 + 40 * Math.sqrt((loc.population || 1) / maxPop);
-      var coreHex = sc(loc.opportunity_score);
-      var ringHex = sc(loc.market_score || 0);
+      var score = loc.opportunity_score;
+      var hex = sc(score);
      var dist = loc.nearest_padel_court_km != null
        ? loc.nearest_padel_court_km.toFixed(1) + ' km to nearest court'
        : 'No nearby courts';
      var tip = '<strong>' + loc.location_name + '</strong><br>'
-        + dot(coreHex, true) + '<span style="color:' + coreHex + ';font-weight:600;">Opportunity Score: ' + loc.opportunity_score + '/100</span><br>'
-        + dot(ringHex, false) + '<span style="color:' + ringHex + ';font-weight:600;">Market Score: ' + (loc.market_score || 0) + '/100</span><br>'
+        + '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
+        + '<span style="color:' + hex + ';font-weight:600;">Padelnomics Score: ' + score + '/100</span><br>'
        + '<span style="color:#94A3B8;font-size:0.75rem;">' + dist + ' · Pop. ' + fmtPop(loc.population) + '</span>';
      var icon = PNMarkers.makeIcon({
        size: size,
-        coreColor: coreHex,
-        ringColor: ringHex,
-        pulse: loc.opportunity_score >= 75,
+        color: hex,
+        pulse: score >= 75,
      });
      L.marker([loc.lat, loc.lon], { icon: icon })
        .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
--- a/web/src/padelnomics/static/css/input.css
+++ b/web/src/padelnomics/static/css/input.css
@@ -879,10 +879,9 @@
 .leaflet-tooltip.map-tooltip::before { display: none; }
 .leaflet-tooltip.map-tooltip strong { color: white; }

-/* ── Dual-ring map markers ── */
-/* Container: sets size, white border, shadow, hover */
+/* ── Single-color map markers ── */
+/* Circle: score-colored background, white border, shadow, hover */
 .pn-marker {
-  position: relative;
  border-radius: 50%;
  border: 2.5px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
@@ -893,25 +892,6 @@
  box-shadow: 0 3px 12px rgba(0,0,0,0.38);
  transform: scale(1.1);
 }
-/* Outer ring: secondary score color */
-.pn-marker__ring {
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  opacity: 0.65;
-}
-/* Inner core: primary score color, inset 5px from container edges */
-.pn-marker__core {
-  position: absolute;
-  inset: 5px;
-  border-radius: 50%;
-  border: 1.5px solid rgba(255,255,255,0.5);
-}
-/* Compact fallback: marker < 18px, no ring — core fills container */
-.pn-marker--compact .pn-marker__core {
-  inset: 0;
-  border: none;
-}

 /* User's city highlight — blue outer glow */
 .pn-marker--highlight {
@@ -919,29 +899,24 @@
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25), 0 2px 8px rgba(0,0,0,0.28);
 }

-/* Non-article city markers: faded, dashed ring outline, no click */
+/* Non-article city markers: faded, no click */
 .pn-marker--muted {
  opacity: 0.4;
  cursor: default;
  filter: saturate(0.6) brightness(1.1);
 }
-.pn-marker--muted .pn-marker__ring {
-  background: transparent !important;
-  border: 1.5px dashed rgba(255,255,255,0.6);
-  opacity: 1;
-}
 .pn-marker--muted:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
 }

-/* Pulse animation — opportunity map only, score >= 75 */
-.pn-marker--pulse .pn-marker__ring {
+/* Pulse animation — high-score locations */
+.pn-marker--pulse {
  animation: marker-pulse 2.5s ease-in-out infinite;
 }
@keyframes marker-pulse {
-  0%, 100% { transform: scale(1);    opacity: 0.65; }
-  50%      { transform: scale(1.35); opacity: 0.25; }
+  0%, 100% { transform: scale(1);   opacity: 1; }
+  50%      { transform: scale(1.2); opacity: 0.7; }
 }

 /* Small fixed venue dot */
--- a/web/src/padelnomics/static/js/article-maps.js
+++ b/web/src/padelnomics/static/js/article-maps.js
@@ -15,12 +15,12 @@
  var TILES = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
  var TILES_ATTR = '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>';
  var sc = PNMarkers.scoreColor;
+  var T = window.__MAP_T || {};

-  function tooltipDot(hex, filled) {
-    var style = filled
-      ? 'display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;'
-      : 'display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid ' + hex + ';vertical-align:middle;margin-right:4px;';
-    return '<span style="' + style + '"></span>';
+  function fmtPop(p) {
+    return p >= 1000000 ? (p / 1000000).toFixed(1) + 'M'
+         : p >= 1000   ? Math.round(p / 1000) + 'K'
+         : (p || '');
  }

  function initCountryMap(el) {
@@ -38,26 +38,23 @@
          if (!c.lat || !c.lon) return;
          var size = 10 + 36 * Math.sqrt((c.padel_venue_count || 1) / maxV);
          var hasArticle = c.has_article !== false;
-          var coreHex = sc(c.market_score);
-          var ringHex = sc(c.opportunity_score || 0);
-          var pop = c.population >= 1000000
-            ? (c.population / 1000000).toFixed(1) + 'M'
-            : (c.population >= 1000 ? Math.round(c.population / 1000) + 'K' : (c.population || ''));
+          var score = c.opportunity_score || 0;
+          var hex = sc(score);
+          var pop = fmtPop(c.population);
          var tip = '<strong>' + c.city_name + '</strong><br>'
-            + tooltipDot(coreHex, true) + '<span style="color:' + coreHex + ';font-weight:600;">Market Score: ' + Math.round(c.market_score) + '/100</span><br>'
-            + tooltipDot(ringHex, false) + '<span style="color:' + ringHex + ';font-weight:600;">Opportunity Score: ' + Math.round(c.opportunity_score || 0) + '/100</span><br>'
+            + '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
+            + '<span style="color:' + hex + ';font-weight:600;">' + (T.score_label || 'Padelnomics Score') + ': ' + Math.round(score) + '/100</span><br>'
            + '<span style="color:#94A3B8;font-size:0.75rem;">'
-            + (c.padel_venue_count || 0) + ' venues'
-            + (pop ? ' · ' + pop : '') + '</span>';
+            + (c.padel_venue_count || 0) + ' ' + (T.venues || 'venues')
+            + (pop ? ' · ' + pop + ' ' + (T.pop || 'pop') : '') + '</span>';
          if (hasArticle) {
-            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Click to explore →</span>';
+            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">' + (T.click_explore || 'Click to explore →') + '</span>';
          } else {
-            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Coming soon</span>';
+            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">' + (T.coming_soon || 'Coming soon') + '</span>';
          }
          var icon = PNMarkers.makeIcon({
            size: size,
-            coreColor: coreHex,
-            ringColor: ringHex,
+            color: hex,
            muted: !hasArticle,
          });
          var marker = L.marker([c.lat, c.lon], { icon: icon })
@@ -80,8 +77,7 @@
            var hSize = 10 + 36 * Math.sqrt((match.padel_venue_count || 1) / maxV);
            var hIcon = PNMarkers.makeIcon({
              size: hSize,
-              coreColor: sc(match.market_score),
-              ringColor: sc(match.opportunity_score || 0),
+              color: sc(match.opportunity_score || 0),
              highlight: true,
            });
            L.marker([match.lat, match.lon], { icon: hIcon }).addTo(map);
@@ -107,9 +103,9 @@
          var outdoor = v.outdoor_court_count || 0;
          var total = v.court_count || (indoor + outdoor);
          var courtLine = total
-            ? total + ' court' + (total > 1 ? 's' : '')
+            ? total + ' ' + (T.courts || 'court' + (total > 1 ? 's' : ''))
              + (indoor || outdoor
-                ? ' (' + [indoor ? indoor + ' indoor' : '', outdoor ? outdoor + ' outdoor' : ''].filter(Boolean).join(', ') + ')'
+                ? ' (' + [indoor ? indoor + ' ' + (T.indoor || 'indoor') : '', outdoor ? outdoor + ' ' + (T.outdoor || 'outdoor') : ''].filter(Boolean).join(', ') + ')'
                : '')
            : '';
          var tip = '<strong>' + v.name + '</strong>' + (courtLine ? '<br>' + courtLine : '');
--- a/web/src/padelnomics/static/js/map-markers.js
+++ b/web/src/padelnomics/static/js/map-markers.js
@@ -1,18 +1,17 @@
 /**
- * Shared map marker utilities — dual-ring design with 5-tier color scale.
+ * Shared map marker utilities — single-color markers with 5-tier color scale.
 *
 * Exposes window.PNMarkers = { scoreColor, makeIcon }
 *
 * scoreColor(score) → hex color string (5 tiers, colorblind-safe luminance steps)
- * makeIcon(opts)    → L.divIcon with dual-ring HTML
+ * makeIcon(opts)    → L.divIcon with single-color circle
 *
 * opts = {
 *   size:       number,           // marker diameter in px
- *   coreColor:  string,           // hex for inner core (primary score)
- *   ringColor:  string,           // hex for outer ring (secondary score)
- *   muted:      boolean,          // dashed ring, no click affordance
+ *   color:      string,           // hex color (from scoreColor)
+ *   muted:      boolean,          // faded, no click affordance
 *   highlight:  boolean,          // blue outer glow (user's geo city)
- *   pulse:      boolean,          // gentle ring pulse (high opportunity)
+ *   pulse:      boolean,          // gentle pulse (high score)
 * }
 */
 (function() {
@@ -27,30 +26,15 @@
    return '#DC2626';                  // red — poor
  }

-  var COMPACT_THRESHOLD_PX = 18;
-
  function makeIcon(opts) {
    var s = Math.round(opts.size);
-    var compact = s < COMPACT_THRESHOLD_PX;

    var cls = 'pn-marker';
-    if (compact)        cls += ' pn-marker--compact';
    if (opts.muted)     cls += ' pn-marker--muted';
    if (opts.highlight) cls += ' pn-marker--highlight';
    if (opts.pulse && !opts.muted) cls += ' pn-marker--pulse';

-    var html;
-    if (compact || !opts.ringColor) {
-      // Single-layer fallback: core fills entire marker
-      html = '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;">'
-           + '<div class="pn-marker__core" style="background:' + opts.coreColor + ';"></div>'
-           + '</div>';
-    } else {
-      html = '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;">'
-           + '<div class="pn-marker__ring" style="background:' + opts.ringColor + ';"></div>'
-           + '<div class="pn-marker__core" style="background:' + opts.coreColor + ';"></div>'
-           + '</div>';
-    }
+    var html = '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;background:' + opts.color + ';"></div>';

    return L.divIcon({
      className: '',