merge: opportunity map HTMX data islands + remove dead API endpoint
All checks were successful
CI / test (push) Successful in 1m0s
CI / tag (push) Successful in 3s

# Conflicts:
#	transform/sqlmesh_padelnomics/models/serving/location_opportunity_profile.sql
#	web/src/padelnomics/api.py
#	web/src/padelnomics/public/templates/opportunity_map.html
This commit is contained in:
Deeman
2026-03-07 21:05:52 +01:00
4 changed files with 83 additions and 63 deletions

View File

@@ -82,7 +82,6 @@ async def country_cities(country_slug: str):
@bp.route("/markets/<country_slug>/<city_slug>/venues.json")
@login_required
async def city_venues(country_slug: str, city_slug: str):
"""Venue-level dots for the city detail map."""
await _require_maps_flag()
@@ -99,23 +98,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, 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],
)
return jsonify(rows), 200, _CACHE_HEADERS

View File

@@ -87,6 +87,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")

View File

@@ -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,18 +90,27 @@
: (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; }));
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);
});
if (!oppData.length) return;
var maxPop = Math.max.apply(null, oppData.map(function(d) { return d.population || 1; }));
var bounds = [];
data.forEach(function(loc) {
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);
@@ -115,24 +128,10 @@
bounds.push([loc.lat, loc.lon]);
});
if (bounds.length) map.fitBounds(bounds, { padding: [30, 30] });
});
// 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);
});
});
}
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>

View File

@@ -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>