merge: dual-ring map markers with 5-tier color scale

Replace flat circle markers with nested dual-ring structure encoding
two scores per marker (core = primary, ring = secondary). Upgrade
from 3-tier to 5-tier colorblind-safe scale. Add pulse animation for
high-opportunity markers (>=75). Extract shared PNMarkers module from
3 duplicated implementations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ## [Unreleased]
 
 ### Changed
+- **Dual-ring map markers** — map markers now encode two scores visually: inner core = primary score, outer ring = secondary score. Markets hub and country overview show Market Score (core) + Opportunity Score (ring). Opportunity map shows Opportunity Score (core) + Market Score (ring). City venue maps unchanged (navy dots). Color scale upgraded from 3-tier (green/amber/red) to 5-tier (deep green ≥80, teal ≥60, amber ≥40, orange-red ≥20, red <20) with distinct luminance at each tier for colorblind safety. Markers < 18px fall back to single-layer (no ring). Muted markers (cities without articles) show dashed ring outline. Highlighted markers (user's geo city) get blue outer glow. Opportunity map markers with score ≥75 pulse gently to highlight top investment targets. Tooltip lines now have inline color dots matching marker layers. All map scripts share a single `map-markers.js` module (`PNMarkers.scoreColor` + `PNMarkers.makeIcon`), replacing 3 duplicated implementations.
+
+### Added
+- **Geo headers on city/region hubs** — Cloudflare geo headers (`CF-IPCountry`, `CF-IPCity`) now used across location-based pages. Opportunity map pre-selects and auto-loads the user's country. Country overview maps highlight the user's city with a blue ring (best-effort CF-IPCity name match). `window.__GEO` JS global injected via `base.html` for client-side map code.
+
+### Fixed
+- **Opportunity map color scale** — low-score bubbles used blue (`#3B82F6`) instead of red (`#DC2626`), inconsistent with the unified `scoreColor()` scale used everywhere else. Fixed in `oppColor()`, legend, and `article-maps.js` tooltip colors. Thresholds aligned to ≥60/30/\<30.
+
+### Changed
+- **Opportunity Score v5 → v6** — calibrates for saturated markets (Spain avg dropped from ~78 to ~50-60 range). Density ceiling lowered from 8 → 5/100k (Spain at 6-16/100k now hits zero-gap). Supply deficit weight increased from 35 → 40 pts. Addressable market reduced from 25 → 20 pts. Market validation inverted → "market headroom": high country avg maturity now reduces opportunity (saturated market = less room for new entrants).
+- **Markets page map legend** — bubble map now has a visual legend explaining size = venue count, color = Market Score. Opportunity score tooltip color unified to same green/amber/red scale (was using blue for low scores, inconsistent).
+- **Geo-localized article sorting** — `/markets` page sorts articles by user proximity using Cloudflare CF-IPCountry header. User's country first, nearby countries second (DACH, Iberia, Nordics, etc.), rest by published_at. Map bubbles re-ordered so user's country renders on top. Falls back to chronological order when header is absent (local dev).
 - **Score v6: Global economic data** — `dim_countries.median_income_pps` and `pli_construction` now cover all target markets, not just EU. World Bank WDI indicators (GNI per capita PPP + price level ratio) fill gaps for non-EU countries (AR, MX, AE, AU, etc.) with values calibrated to the Eurostat scale using Germany as anchor. EU countries keep exact Eurostat values. New extractor (`worldbank.py`), staging model (`stg_worldbank_income`), and `dim_countries` fallback CTEs. No changes to scoring formulas — the fix is upstream in the data layer.
 - **Market Score v3 → v4** — fixes Spain averaging 54 (should be 65-80). Four calibration changes: count gate threshold lowered from 5 → 3 venues (3 establishes a market pattern), density ceiling lowered from LN(21) → LN(11) (10/100k is reachable for mature markets), demand evidence fallback raised from 0.4 → 0.65 multiplier with 0.3 floor (existence of venues IS evidence of demand), economic context ceiling changed from income/200 → income/25000 (actual discrimination instead of free 10 pts for everyone).
 - **Opportunity Score v4 → v5** — fixes structural flaws: supply gap (30pts) + catchment gap (15pts) merged into single supply deficit (35pts, GREATEST of density gap and distance gap) eliminating ~80% correlated double-count. New sports culture signal (10pts) using tennis court density as racquet-sport adoption proxy. New construction affordability signal (5pts) using income relative to PLI construction costs from `dim_countries`. Economic power reduced from 20 → 15pts. New dependency on `foundation.dim_countries` for `pli_construction`.

transform/sqlmesh_padelnomics/models/serving/location_profiles.sql

@@ -19,22 +19,22 @@
 --   10 pts  economic context  — income PPS normalised to 25,000 ceiling
 --   10 pts  data quality      — completeness discount
 --
--- Padelnomics Opportunity Score (Marktpotenzial-Score v5, 0–100):
+-- Padelnomics Opportunity Score (Marktpotenzial-Score v6, 0–100):
 --   "Where should I build a padel court?"
 --   Computed for ALL locations — zero-court locations score highest on supply deficit.
 --   H3 catchment methodology: addressable market and supply deficit use a regional
 --   H3 catchment (res-5 cell + 6 neighbours, ~24km radius).
 --
---   v5 changes: merge supply gap + catchment gap → single supply deficit (35 pts),
---   add sports culture proxy (10 pts, tennis density), add construction affordability (5 pts),
---   reduce economic power from 20 → 15 pts.
+--   v6 changes: lower density ceiling 8→5/100k (saturated markets hit zero-gap sooner),
+--   increase supply deficit weight 35→40 pts, reduce addressable market 25→20 pts,
+--   invert market validation (high country maturity = LESS opportunity).
 --
---   25 pts  addressable market        — log-scaled catchment population, ceiling 500K
+--   20 pts  addressable market        — log-scaled catchment population, ceiling 500K
 --   15 pts  economic power            — income PPS, normalised to 35,000
---   35 pts  supply deficit            — max(density gap, distance gap); eliminates double-count
+--   40 pts  supply deficit            — max(density gap, distance gap); eliminates double-count
 --   10 pts  sports culture            — tennis court density as racquet-sport adoption proxy
 --    5 pts  construction affordability — income relative to construction costs (PLI)
---   10 pts  market validation         — country-level avg market maturity (from market_scored CTE)
+--   10 pts  market headroom           — inverse country-level avg market maturity
 --
 -- Consumers query directly with WHERE filters:
 --   cities API:       WHERE country_slug = ? AND city_slug IS NOT NULL
@@ -198,9 +198,9 @@ market_scored AS (
     END AS market_score
   FROM with_pricing
 ),
--- Step 2: country-level avg market maturity — used as market validation signal (10 pts).
+-- Step 2: country-level avg market maturity — used as market headroom signal (10 pts).
 -- Filter to market_score > 0 (cities with padel courts only) so zero-court locations
--- don't dilute the country signal. ES proven demand → ~60, SE struggling → ~35.
+-- don't dilute the country signal. Higher avg = more saturated = less headroom.
 country_market AS (
   SELECT
     country_code,
@@ -212,21 +212,21 @@ country_market AS (
 -- Step 3: add opportunity_score using country market validation signal.
 scored AS (
   SELECT ms.*,
-    -- ── Opportunity Score (Marktpotenzial-Score v5, H3 catchment) ──────────
+    -- ── Opportunity Score (Marktpotenzial-Score v6, H3 catchment) ──────────
     ROUND(
-      -- Addressable market (25 pts): log-scaled catchment population, ceiling 500K
-      25.0 * LEAST(1.0, LN(GREATEST(catchment_population, 1)) / LN(500000))
+      -- Addressable market (20 pts): log-scaled catchment population, ceiling 500K
+      20.0 * LEAST(1.0, LN(GREATEST(catchment_population, 1)) / LN(500000))
       -- Economic power (15 pts): income PPS normalised to 35,000
       + 15.0 * LEAST(1.0, COALESCE(median_income_pps, 15000) / 35000.0)
-      -- Supply deficit (35 pts): max of density gap and distance gap.
-      -- Merges old supply gap (30) + catchment gap (15) which were ~80% correlated.
-      + 35.0 * GREATEST(
-          -- density-based gap (H3 catchment): 0 courts = 1.0, 8/100k = 0.0
+      -- Supply deficit (40 pts): max of density gap and distance gap.
+      -- Ceiling 5/100k (down from 8): Spain at 6-16/100k now hits zero-gap.
+      + 40.0 * GREATEST(
+          -- density-based gap (H3 catchment): 0 courts = 1.0, 5/100k = 0.0
           GREATEST(0.0, 1.0 - COALESCE(
             CASE WHEN catchment_population > 0
               THEN GREATEST(catchment_padel_courts, COALESCE(city_padel_venue_count, 0))::DOUBLE / catchment_population * 100000
               ELSE 0.0
-            END, 0.0) / 8.0),
+            END, 0.0) / 5.0),
           -- distance-based gap: 30km+ = 1.0, 0km = 0.0; NULL = 0.5
           COALESCE(LEAST(1.0, nearest_padel_court_km / 30.0), 0.5)
         )
@@ -239,10 +239,11 @@ scored AS (
           COALESCE(median_income_pps, 15000) / 35000.0
           / GREATEST(0.5, COALESCE(pli_construction, 100.0) / 100.0)
         )
-      -- Market validation (10 pts): country-level avg market maturity.
-      -- ES (~70/100): proven demand → ~7 pts. SE (~35/100): emerging → ~3.5 pts.
-      -- NULL (no courts in country yet): 0.5 neutral → 5 pts (untested, not penalised).
-      + 10.0 * COALESCE(cm.country_avg_market_score / 100.0, 0.5)
+      -- Market headroom (10 pts): INVERSE country-level avg market maturity.
+      -- High avg market score = saturated market = LESS opportunity for new entrants.
+      -- ES (~46/100): proven demand, less headroom → ~5.4 pts.
+      -- SE (~40/100): emerging → ~6 pts. NULL: 0.5 neutral → 5 pts.
+      + 10.0 * (1.0 - COALESCE(cm.country_avg_market_score / 100.0, 0.5))
     , 1) AS opportunity_score
   FROM market_scored ms
   LEFT JOIN country_market cm ON ms.country_code = cm.country_code

web/src/padelnomics/admin/templates/admin/partials/article_preview_doc.html

@@ -10,6 +10,7 @@
 <body>
   <div class="article-body">{{ body_html | safe }}</div>
   <script>window.LEAFLET_JS_URL = '{{ url_for("static", filename="vendor/leaflet/leaflet.min.js") }}';</script>
+  <script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
   <script src="{{ url_for('static', filename='js/article-maps.js') }}"></script>
 </body>
 </html>

web/src/padelnomics/admin/templates/admin/template_preview.html

@@ -34,5 +34,6 @@
   </div>
 
   <script>window.LEAFLET_JS_URL = '{{ url_for("static", filename="vendor/leaflet/leaflet.min.js") }}';</script>
+  <script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
   <script src="{{ url_for('static', filename='js/article-maps.js') }}"></script>
 {% endblock %}

web/src/padelnomics/app.py

@@ -148,6 +148,18 @@ def create_app() -> Quart:
     # Per-request hooks
     # -------------------------------------------------------------------------
 
+    @app.before_request
+    async def set_user_geo():
+        """Stash Cloudflare geo headers in g for proximity sorting.
+
+        Requires nginx: proxy_set_header CF-IPCountry $http_cf_ipcountry;
+                        proxy_set_header CF-RegionCode $http_cf_regioncode;
+                        proxy_set_header CF-IPCity $http_cf_ipcity;
+        """
+        g.user_country = request.headers.get("CF-IPCountry", "").upper() or ""
+        g.user_region = request.headers.get("CF-RegionCode", "") or ""
+        g.user_city = request.headers.get("CF-IPCity", "") or ""
+
     @app.before_request
     async def validate_lang():
         """404 unsupported language prefixes (e.g. /fr/terms)."""
@@ -234,6 +246,8 @@ def create_app() -> Quart:
             "csrf_token": get_csrf_token,
             "ab_variant": getattr(g, "ab_variant", None),
             "ab_tag": getattr(g, "ab_tag", None),
+            "user_country": g.get("user_country", ""),
+            "user_city": g.get("user_city", ""),
             "lang": effective_lang,
             "t": get_translations(effective_lang),
             "v": _ASSET_VERSION,

web/src/padelnomics/content/routes.py

@@ -212,6 +212,13 @@ async def markets():
         FROM serving.pseo_country_overview
         ORDER BY total_venues DESC
     """)
+    # Sort so user's country renders last (on top in Leaflet z-order)
+    user_country = g.get("user_country", "")
+    if user_country and map_countries:
+        map_countries = sorted(
+            map_countries,
+            key=lambda c: 1 if c["country_code"] == user_country else 0,
+        )
 
     return await render_template(
         "markets.html",
@@ -237,9 +244,46 @@ async def market_results():
     return await render_template("partials/market_results.html", articles=articles)
 
 
+_NEARBY_COUNTRIES: dict[str, tuple[str, ...]] = {
+    "DE": ("AT", "CH"), "AT": ("DE", "CH"), "CH": ("DE", "AT"),
+    "ES": ("PT",), "PT": ("ES",),
+    "GB": ("IE",), "IE": ("GB",),
+    "US": ("CA",), "CA": ("US",),
+    "IT": ("CH",), "FR": ("BE", "CH"), "BE": ("FR", "NL", "DE"),
+    "NL": ("BE", "DE"), "SE": ("NO", "DK", "FI"), "NO": ("SE", "DK"),
+    "DK": ("SE", "NO", "DE"), "FI": ("SE",),
+    "MX": ("US",), "BR": ("AR",), "AR": ("BR",),
+}
+
+
+def _geo_order_clause(user_country: str) -> tuple[str, list]:
+    """Build ORDER BY clause that sorts user's country first, nearby second.
+
+    Returns (order_sql, params) where order_sql starts with the geo CASE
+    followed by published_at DESC.  Caller prepends 'ORDER BY'.
+    """
+    if not user_country:
+        return "published_at DESC", []
+
+    nearby = _NEARBY_COUNTRIES.get(user_country, ())
+    if nearby:
+        placeholders = ",".join("?" * len(nearby))
+        geo_case = f"""CASE WHEN country = ? THEN 0
+             WHEN country IN ({placeholders}) THEN 1
+             ELSE 2 END,
+        published_at DESC"""
+        return geo_case, [user_country, *nearby]
+
+    return """CASE WHEN country = ? THEN 0 ELSE 1 END,
+        published_at DESC""", [user_country]
+
+
 async def _filter_articles(q: str, country: str, region: str) -> list[dict]:
-    """Query published articles for the current language."""
+    """Query published articles for the current language, geo-sorted."""
     lang = g.get("lang", "en")
+    user_country = g.get("user_country", "")
+    geo_order, geo_params = _geo_order_clause(user_country)
+
     if q:
         # FTS query
         wheres = ["articles_fts MATCH ?"]
@@ -253,14 +297,16 @@ async def _filter_articles(q: str, country: str, region: str) -> list[dict]:
             wheres.append("a.region = ?")
             params.append(region)
         where = " AND ".join(wheres)
+        # Geo-sort references a.country
+        order = geo_order.replace("country", "a.country")
         return await fetch_all(
             f"""SELECT a.* FROM articles a
                 JOIN articles_fts ON articles_fts.rowid = a.id
                 WHERE {where}
                 AND a.status = 'published' AND a.published_at <= datetime('now')
-                ORDER BY a.published_at DESC
+                ORDER BY {order}
                 LIMIT 100""",
-            tuple(params),
+            tuple(params + geo_params),
         )
     else:
         wheres = ["status = 'published'", "published_at <= datetime('now')", "language = ?"]
@@ -274,8 +320,8 @@ async def _filter_articles(q: str, country: str, region: str) -> list[dict]:
         where = " AND ".join(wheres)
         return await fetch_all(
             f"""SELECT * FROM articles WHERE {where}
-                ORDER BY published_at DESC LIMIT 100""",
-            tuple(params),
+                ORDER BY {geo_order} LIMIT 100""",
+            tuple(params + geo_params),
         )
 
 

web/src/padelnomics/content/templates/article_detail.html

@@ -61,5 +61,6 @@
 
 {% block scripts %}
 <script>window.LEAFLET_JS_URL = '{{ url_for("static", filename="vendor/leaflet/leaflet.min.js") }}';</script>
+<script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
 <script src="{{ url_for('static', filename='js/article-maps.js') }}"></script>
 {% endblock %}

web/src/padelnomics/content/templates/markets.html

@@ -16,7 +16,27 @@
     <p class="text-slate">{{ t.mkt_subheading }}</p>
   </header>
 
-  <div id="markets-map" style="height:420px; border-radius:12px;" class="mb-6"></div>
+  <div id="markets-map" style="height:420px; border-radius:12px;" class="mb-4"></div>
+
+  <!-- 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
+      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#D97706;margin-left:4px;"></span>≥40
+      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#EA580C;margin-left:4px;"></span>≥20
+      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#DC2626;margin-left:4px;"></span>&lt;20
+    </span>
+    <span style="display:flex; align-items:center; gap:0.35rem;">
+      <span style="display:inline-block; width:12px; height:12px; border-radius:50%; background:#64748B; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
+      <span style="display:inline-block; width:18px; height:18px; border-radius:50%; background:#64748B; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
+      {{ t.mkt_legend_size }}
+    </span>
+  </div>
 
   <!-- Filters -->
   <div class="card mb-8">
@@ -68,28 +88,20 @@
 
 {% block scripts %}
 <script src="{{ url_for('static', filename='vendor/leaflet/leaflet.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
 <script>
 (function() {
+  var sc = PNMarkers.scoreColor;
   var map = L.map('markets-map', {scrollWheelZoom: false}).setView([48.5, 10], 4);
   L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
     maxZoom: 18
   }).addTo(map);
 
-  function scoreColor(score) {
-    if (score >= 60) return '#16A34A';
-    if (score >= 30) return '#D97706';
-    return '#DC2626';
-  }
-
-  function makeIcon(size, color) {
-    var s = Math.round(size);
-    return L.divIcon({
-      className: '',
-      html: '<div class="pn-marker" style="width:' + s + 'px;height:' + s + 'px;background:' + color + ';opacity:0.82;"></div>',
-      iconSize: [s, s],
-      iconAnchor: [s / 2, s / 2],
-    });
+  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 }};
@@ -99,13 +111,13 @@
     data.forEach(function(c) {
       if (!c.lat || !c.lon) return;
       var size = 12 + 44 * Math.sqrt(c.total_venues / maxV);
-      var color = scoreColor(c.avg_market_score);
-      var oppColor = c.avg_opportunity_score >= 60 ? '#16A34A' : (c.avg_opportunity_score >= 30 ? '#D97706' : '#3B82F6');
+      var coreHex = sc(c.avg_market_score);
+      var ringHex = sc(c.avg_opportunity_score || 0);
       var tip = '<strong>' + c.country_name_en + '</strong><br>'
-        + c.total_venues + ' venues · ' + c.city_count + ' cities<br>'
-        + '<span style="color:' + color + ';font-weight:600;">Padelnomics Market Score: ' + c.avg_market_score + '/100</span><br>'
-        + '<span style="color:' + oppColor + ';font-weight:600;">Padelnomics Opportunity Score: ' + (c.avg_opportunity_score || 0) + '/100</span>';
-      L.marker([c.lat, c.lon], { icon: makeIcon(size, color) })
+        + 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="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 }) })
         .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);

web/src/padelnomics/locales/de.json

@@ -606,6 +606,8 @@
   "mkt_all_countries": "Alle Länder",
   "mkt_all_regions": "Alle Regionen",
   "mkt_no_results": "Keine Märkte gefunden. Passe Deine Filter an.",
+  "mkt_legend_size": "Kreisgröße = Anzahl Anlagen",
+  "mkt_legend_color": "Farbe = Market Score",
   "waitlist_markets_title": "Marktdaten — Demnächst verfügbar",
   "waitlist_markets_sub": "Detaillierte Marktberichte für Padel-Investoren: Baukosten, Umsatz-Benchmarks, Auslastungsdaten und ROI-Analysen nach Stadt und Region.",
   "waitlist_markets_feature1": "Echte Kostendaten aus laufenden Anlagen in über 30 Ländern",

web/src/padelnomics/locales/en.json

@@ -606,6 +606,8 @@
   "mkt_all_countries": "All Countries",
   "mkt_all_regions": "All Regions",
   "mkt_no_results": "No markets found. Try adjusting your filters.",
+  "mkt_legend_size": "Bubble size = venue count",
+  "mkt_legend_color": "Color = Market Score",
   "waitlist_markets_title": "Markets Intelligence — Coming Soon",
   "waitlist_markets_sub": "Deep-dive market reports for padel investors: construction costs, revenue benchmarks, occupancy data, and ROI analysis by city and region.",
   "waitlist_markets_feature1": "Real cost data from operating venues across 30+ countries",

web/src/padelnomics/public/routes.py

@@ -79,12 +79,23 @@ async def opportunity_map():
     if not await is_flag_enabled("maps", default=True):
         abort(404)
     countries = await fetch_analytics("""
-        SELECT DISTINCT country_slug, country_name_en
+        SELECT DISTINCT country_slug, country_name_en, country_code
         FROM serving.location_profiles
         WHERE city_slug IS NOT NULL
         ORDER BY country_name_en
     """)
-    return await render_template("opportunity_map.html", countries=countries)
+    user_cc = g.get("user_country", "")
+    selected_slug = ""
+    if user_cc:
+        for c in countries:
+            if c["country_code"] == user_cc:
+                selected_slug = c["country_slug"]
+                break
+        countries = sorted(
+            countries,
+            key=lambda c: (0 if c["country_code"] == user_cc else 1, c["country_name_en"]),
+        )
+    return await render_template("opportunity_map.html", countries=countries, selected_slug=selected_slug)
 
 
 @bp.route("/opportunity-map/data")

web/src/padelnomics/public/templates/opportunity_map.html

@@ -30,7 +30,7 @@
             hx-trigger="change">
       <option value="">— choose country —</option>
       {% for c in countries %}
-      <option value="{{ c.country_slug }}">{{ c.country_name_en }}</option>
+      <option value="{{ c.country_slug }}" {% if c.country_slug == selected_slug %}selected{% endif %}>{{ c.country_name_en }}</option>
       {% endfor %}
     </select>
   </div>
@@ -38,20 +38,26 @@
   <div id="opportunity-map"></div>
   <div id="map-data" style="display:none;"></div>
 
-  <div class="mt-4 text-sm text-slate">
-    <strong>Circle size:</strong> population &nbsp;|&nbsp;
-    <strong>Color:</strong>
-    <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#16A34A;vertical-align:middle;margin:0 4px"></span>High (≥70) &nbsp;
-    <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#D97706;vertical-align:middle;margin:0 4px"></span>Mid (40–70) &nbsp;
-    <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#3B82F6;vertical-align:middle;margin:0 4px"></span>Low (&lt;40)
+  <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
+      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#D97706;margin-left:4px;"></span>≥40
+      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#EA580C;margin-left:4px;"></span>≥20
+      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#DC2626;margin-left:4px;"></span>&lt;20
+    </span>
+    <span><strong>Size:</strong> population</span>
   </div>
 </main>
 {% endblock %}
 
 {% block scripts %}
 <script src="{{ url_for('static', filename='vendor/leaflet/leaflet.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
 <script>
 (function() {
+  var sc = PNMarkers.scoreColor;
   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>';
 
@@ -61,22 +67,6 @@
   var oppLayer = L.layerGroup().addTo(map);
   var refLayer = L.layerGroup().addTo(map);
 
-  function oppColor(score) {
-    if (score >= 70) return '#16A34A';
-    if (score >= 40) return '#D97706';
-    return '#3B82F6';
-  }
-
-  function makeIcon(size, color) {
-    var s = Math.round(size);
-    return L.divIcon({
-      className: '',
-      html: '<div class="pn-marker" style="width:' + s + 'px;height:' + s + 'px;background:' + color + ';opacity:0.8;"></div>',
-      iconSize: [s, s],
-      iconAnchor: [s / 2, s / 2],
-    });
-  }
-
   var REF_ICON = L.divIcon({
     className: '',
     html: '<div class="pn-venue" style="background:#94A3B8;border-color:white;opacity:0.7;"></div>',
@@ -90,6 +80,12 @@
          : (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();
@@ -113,16 +109,22 @@
     oppData.forEach(function(loc) {
       if (!loc.lat || !loc.lon) return;
       var size = 8 + 40 * Math.sqrt((loc.population || 1) / maxPop);
-      var color = oppColor(loc.opportunity_score);
+      var coreHex = sc(loc.opportunity_score);
+      var ringHex = sc(loc.market_score || 0);
       var dist = loc.nearest_padel_court_km != null
         ? loc.nearest_padel_court_km.toFixed(1) + ' km to nearest court'
         : 'No nearby courts';
-      var mktColor = loc.market_score >= 60 ? '#16A34A' : (loc.market_score >= 30 ? '#D97706' : '#DC2626');
       var tip = '<strong>' + loc.location_name + '</strong><br>'
-        + '<span style="color:' + color + ';font-weight:600;">Padelnomics Opportunity Score: ' + loc.opportunity_score + '/100</span><br>'
-        + '<span style="color:' + mktColor + ';font-weight:600;">Padelnomics Market Score: ' + (loc.market_score || 0) + '/100</span><br>'
-        + dist + ' · Pop. ' + fmtPop(loc.population);
-      L.marker([loc.lat, loc.lon], { icon: makeIcon(size, color) })
+        + 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="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,
+      });
+      L.marker([loc.lat, loc.lon], { icon: icon })
         .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
         .addTo(oppLayer);
       bounds.push([loc.lat, loc.lon]);
@@ -133,6 +135,10 @@
   document.body.addEventListener('htmx:afterSwap', function(e) {
     if (e.detail.target.id === 'map-data') renderMap();
   });
+
+  // Auto-load if country pre-selected via geo header
+  var sel = document.getElementById('opp-country-select');
+  if (sel.value) htmx.trigger(sel, 'change');
 })();
 </script>
 {% endblock %}

web/src/padelnomics/static/css/input.css

@@ -879,8 +879,10 @@
 .leaflet-tooltip.map-tooltip::before { display: none; }
 .leaflet-tooltip.map-tooltip strong { color: white; }
 
-/* Polished variable-size circle — white border + drop shadow */
+/* ── Dual-ring map markers ── */
+/* Container: sets size, 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);
@@ -891,19 +893,57 @@
   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;
+}
 
-/* Non-article city markers: faded + dashed border, no click affordance */
+/* User's city highlight — blue outer glow */
+.pn-marker--highlight {
+  border: 2.5px solid #3B82F6;
+  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 */
 .pn-marker--muted {
-  opacity: 0.45;
-  border: 2px dashed rgba(255,255,255,0.6);
+  opacity: 0.4;
   cursor: default;
-  filter: saturate(0.7);
+  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 {
+  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; }
+}
+
 /* Small fixed venue dot */
 .pn-venue {
   width: 10px;

web/src/padelnomics/static/js/article-maps.js

@@ -4,6 +4,8 @@
  * Looks for #country-map and #city-map elements. If neither exists, does nothing.
  * Expects data-* attributes on the map elements and a global LEAFLET_JS_URL
  * variable pointing to the Leaflet JS bundle.
+ *
+ * Depends on map-markers.js (window.PNMarkers) being loaded first.
  */
 (function() {
   var countryMapEl = document.getElementById('country-map');
@@ -12,22 +14,13 @@
 
   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;
 
-  function scoreColor(score) {
-    if (score >= 60) return '#16A34A';
-    if (score >= 30) return '#D97706';
-    return '#DC2626';
-  }
-
-  function makeIcon(size, color, muted) {
-    var s = Math.round(size);
-    var cls = 'pn-marker' + (muted ? ' pn-marker--muted' : '');
-    return L.divIcon({
-      className: '',
-      html: '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;background:' + color + ';"></div>',
-      iconSize: [s, s],
-      iconAnchor: [s / 2, s / 2],
-    });
+  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 initCountryMap(el) {
@@ -45,22 +38,29 @@
           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 color = scoreColor(c.market_score);
+          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 oppColor = c.opportunity_score >= 60 ? '#16A34A' : (c.opportunity_score >= 30 ? '#D97706' : '#3B82F6');
           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="color:#94A3B8;font-size:0.75rem;">'
             + (c.padel_venue_count || 0) + ' venues'
-            + (pop ? ' · ' + pop : '')
-            + '<br><span style="color:' + color + ';font-weight:600;">Padelnomics Market Score: ' + Math.round(c.market_score) + '/100</span>'
-            + '<br><span style="color:' + oppColor + ';font-weight:600;">Padelnomics Opportunity Score: ' + Math.round(c.opportunity_score || 0) + '/100</span>';
+            + (pop ? ' · ' + pop : '') + '</span>';
           if (hasArticle) {
             tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Click to explore →</span>';
           } else {
             tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Coming soon</span>';
           }
-          var marker = L.marker([c.lat, c.lon], { icon: makeIcon(size, color, !hasArticle) })
+          var icon = PNMarkers.makeIcon({
+            size: size,
+            coreColor: coreHex,
+            ringColor: ringHex,
+            muted: !hasArticle,
+          });
+          var marker = L.marker([c.lat, c.lon], { icon: icon })
             .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
             .addTo(map);
           if (hasArticle) {
@@ -69,6 +69,24 @@
           bounds.push([c.lat, c.lon]);
         });
         if (bounds.length) map.fitBounds(bounds, { padding: [24, 24] });
+
+        // Highlight user's city (best-effort name match via CF-IPCity)
+        var uc = (window.__GEO || {}).city || '';
+        if (uc) {
+          var match = data.find(function(c) {
+            return c.city_name && c.city_name.toLowerCase() === uc.toLowerCase();
+          });
+          if (match && match.lat && match.lon) {
+            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),
+              highlight: true,
+            });
+            L.marker([match.lat, match.lon], { icon: hIcon }).addTo(map);
+          }
+        }
       })
       .catch(function(err) { console.error('Country map fetch failed:', err); });
   }

web/src/padelnomics/static/js/map-markers.js

@@ -0,0 +1,67 @@
+/**
+ * Shared map marker utilities — dual-ring design 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
+ *
+ * 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
+ *   highlight:  boolean,          // blue outer glow (user's geo city)
+ *   pulse:      boolean,          // gentle ring pulse (high opportunity)
+ * }
+ */
+(function() {
+  'use strict';
+
+  // 5-tier color scale — distinct luminance at each tier for deuteranopia/protanopia
+  function scoreColor(score) {
+    if (score >= 80) return '#15803D'; // deep green — excellent
+    if (score >= 60) return '#0D9488'; // teal — good
+    if (score >= 40) return '#D97706'; // amber — moderate
+    if (score >= 20) return '#EA580C'; // orange-red — below avg
+    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>';
+    }
+
+    return L.divIcon({
+      className: '',
+      html: html,
+      iconSize: [s, s],
+      iconAnchor: [s / 2, s / 2],
+    });
+  }
+
+  window.PNMarkers = {
+    scoreColor: scoreColor,
+    makeIcon: makeIcon,
+  };
+})();

web/src/padelnomics/templates/base.html

@@ -36,6 +36,7 @@
   <meta property="og:image" content="{{ url_for('static', filename='images/logo.png', _external=True) }}">
   <meta name="twitter:card" content="summary_large_image">
 
+  <script>window.__GEO = {country: "{{ user_country }}", city: "{{ user_city }}"};</script>
   {% block head %}{% endblock %}
 </head>
 <body>