From b1e008a2a4e843a4e866aef1178819aece68d58f Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Sat, 7 Mar 2026 20:56:45 +0100
Subject: [PATCH] =?UTF-8?q?refactor(maps):=20opportunity=20map=20=E2=86=92?=
 =?UTF-8?q?=20HTMX=20data=20islands,=20remove=20dead=20API=20endpoint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Delete opportunity() JSON endpoint from api.py (dead after this refactor)
- Add GET /opportunity-map/data route returning HTML partial with two JSON
  data islands (opp_points + ref_points from serving.location_profiles)
- Create partials/opportunity_map_data.html (2-line data island partial)
- Rewrite opportunity_map.html: HTMX attrs on <select>, invisible #map-data
  swap target, htmx:afterSwap listener replaces fetch()-based loadCountry()

city_venues endpoint stays public (article-maps.js calls it on public pages).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/padelnomics/api.py                    | 19 -----
 web/src/padelnomics/public/routes.py          | 40 ++++++++++
 .../public/templates/opportunity_map.html     | 79 +++++++++----------
 .../partials/opportunity_map_data.html        |  2 +
 4 files changed, 81 insertions(+), 59 deletions(-)
 create mode 100644 web/src/padelnomics/public/templates/partials/opportunity_map_data.html

diff --git a/web/src/padelnomics/api.py b/web/src/padelnomics/api.py
index 37c620d..f20e551 100644
--- a/web/src/padelnomics/api.py
+++ b/web/src/padelnomics/api.py
@@ -79,22 +79,3 @@ async def city_venues(country_slug: str, city_slug: str):
     )
     return jsonify(rows), 200, _CACHE_HEADERS
 
-
-@bp.route("/opportunity/<country_slug>.json")
-async def opportunity(country_slug: str):
-    """Location-level opportunity scores for the opportunity map."""
-    await _require_maps_flag()
-    assert country_slug, "country_slug required"
-    rows = await fetch_analytics(
-        """
-        SELECT location_name, location_slug, lat, lon,
-               opportunity_score, nearest_padel_court_km,
-               padel_venue_count, population
-        FROM serving.location_opportunity_profile
-        WHERE country_slug = ? AND opportunity_score > 0
-        ORDER BY opportunity_score DESC
-        LIMIT 500
-        """,
-        [country_slug],
-    )
-    return jsonify(rows), 200, _CACHE_HEADERS
diff --git a/web/src/padelnomics/public/routes.py b/web/src/padelnomics/public/routes.py
index 018bf74..d54a550 100644
--- a/web/src/padelnomics/public/routes.py
+++ b/web/src/padelnomics/public/routes.py
@@ -86,6 +86,46 @@ async def opportunity_map():
     return await render_template("opportunity_map.html", countries=countries)
 
 
+@bp.route("/opportunity-map/data")
+async def opportunity_map_data():
+    """HTMX partial: opportunity + reference data islands for Leaflet map."""
+    from ..core import is_flag_enabled
+    if not await is_flag_enabled("maps", default=True):
+        abort(404)
+    country_slug = request.args.get("country", "")
+    if not country_slug:
+        return ""
+    opp_points = await fetch_analytics(
+        """
+        SELECT location_name, location_slug, lat, lon,
+               opportunity_score, market_score,
+               nearest_padel_court_km, padel_venue_count, population
+        FROM serving.location_profiles
+        WHERE country_slug = ? AND opportunity_score > 0
+        ORDER BY opportunity_score DESC
+        LIMIT 500
+        """,
+        [country_slug],
+    )
+    ref_points = await fetch_analytics(
+        """
+        SELECT city_name, city_slug, lat, lon,
+               city_padel_venue_count AS padel_venue_count,
+               market_score, population
+        FROM serving.location_profiles
+        WHERE country_slug = ? AND city_slug IS NOT NULL
+        ORDER BY city_padel_venue_count DESC
+        LIMIT 200
+        """,
+        [country_slug],
+    )
+    return await render_template(
+        "partials/opportunity_map_data.html",
+        opp_points=opp_points,
+        ref_points=ref_points,
+    )
+
+
 @bp.route("/imprint")
 async def imprint():
     lang = g.get("lang", "en")
diff --git a/web/src/padelnomics/public/templates/opportunity_map.html b/web/src/padelnomics/public/templates/opportunity_map.html
index c98efad..3801020 100644
--- a/web/src/padelnomics/public/templates/opportunity_map.html
+++ b/web/src/padelnomics/public/templates/opportunity_map.html
@@ -24,7 +24,10 @@
 
   <div class="card mb-4" style="padding: 1rem 1.25rem;">
     <label class="form-label" for="opp-country-select" style="margin-bottom: 0.5rem; display:block;">Select a country</label>
-    <select id="opp-country-select" class="form-input" style="max-width: 280px;">
+    <select id="opp-country-select" name="country" class="form-input" style="max-width:280px;"
+            hx-get="{{ url_for('public.opportunity_map_data') }}"
+            hx-target="#map-data"
+            hx-trigger="change">
       <option value="">— choose country —</option>
       {% for c in countries %}
       <option value="{{ c.country_slug }}">{{ c.country_name_en }}</option>
@@ -33,6 +36,7 @@
   </div>
 
   <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;
@@ -86,51 +90,46 @@
          : (p || '');
   }
 
-  function loadCountry(slug) {
+  function renderMap() {
     oppLayer.clearLayers();
     refLayer.clearLayers();
-    if (!slug) return;
+    var oppEl = document.getElementById('opp-data');
+    var refEl = document.getElementById('ref-data');
+    if (!oppEl) return;
+    var oppData = JSON.parse(oppEl.textContent);
+    var refData = JSON.parse(refEl.textContent);
 
-    fetch('/api/opportunity/' + slug + '.json')
-      .then(function(r) { return r.json(); })
-      .then(function(data) {
-        if (!data.length) return;
-        var maxPop = Math.max.apply(null, data.map(function(d) { return d.population || 1; }));
-        var bounds = [];
-        data.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 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>'
-            + '<span style="color:' + color + ';font-weight:600;">Score ' + loc.opportunity_score + '/100</span><br>'
-            + dist + ' · Pop. ' + fmtPop(loc.population);
-          L.marker([loc.lat, loc.lon], { icon: makeIcon(size, color) })
-            .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
-            .addTo(oppLayer);
-          bounds.push([loc.lat, loc.lon]);
-        });
-        if (bounds.length) map.fitBounds(bounds, { padding: [30, 30] });
-      });
+    refData.forEach(function(c) {
+      if (!c.lat || !c.lon || !c.padel_venue_count) return;
+      L.marker([c.lat, c.lon], { icon: REF_ICON })
+        .bindTooltip(c.city_name + ' — ' + c.padel_venue_count + ' existing venues',
+          { className: 'map-tooltip', direction: 'top', offset: [0, -7] })
+        .addTo(refLayer);
+    });
 
-    // Existing venues as small gray reference dots (drawn first = behind opp dots)
-    fetch('/api/markets/' + slug + '/cities.json')
-      .then(function(r) { return r.json(); })
-      .then(function(data) {
-        data.forEach(function(c) {
-          if (!c.lat || !c.lon || !c.padel_venue_count) return;
-          L.marker([c.lat, c.lon], { icon: REF_ICON })
-            .bindTooltip(c.city_name + ' — ' + c.padel_venue_count + ' existing venues',
-              { className: 'map-tooltip', direction: 'top', offset: [0, -7] })
-            .addTo(refLayer);
-        });
-      });
+    if (!oppData.length) return;
+    var maxPop = Math.max.apply(null, oppData.map(function(d) { return d.population || 1; }));
+    var bounds = [];
+    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 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>'
+        + '<span style="color:' + color + ';font-weight:600;">Score ' + loc.opportunity_score + '/100</span><br>'
+        + dist + ' · Pop. ' + fmtPop(loc.population);
+      L.marker([loc.lat, loc.lon], { icon: makeIcon(size, color) })
+        .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
+        .addTo(oppLayer);
+      bounds.push([loc.lat, loc.lon]);
+    });
+    if (bounds.length) map.fitBounds(bounds, { padding: [30, 30] });
   }
 
-  document.getElementById('opp-country-select').addEventListener('change', function() {
-    loadCountry(this.value);
+  document.body.addEventListener('htmx:afterSwap', function(e) {
+    if (e.detail.target.id === 'map-data') renderMap();
   });
 })();
 </script>
diff --git a/web/src/padelnomics/public/templates/partials/opportunity_map_data.html b/web/src/padelnomics/public/templates/partials/opportunity_map_data.html
new file mode 100644
index 0000000..d684587
--- /dev/null
+++ b/web/src/padelnomics/public/templates/partials/opportunity_map_data.html
@@ -0,0 +1,2 @@
+<script id="opp-data" type="application/json">{{ opp_points | tojson }}</script>
+<script id="ref-data" type="application/json">{{ ref_points | tojson }}</script>