edward/geocode
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Redesign map page and add lat/lon/needs_commons URL parameters

Browse source 
- Redesign pin_detail.html to match detail page style: place name heading,
  result card, button group, collapsible API response, element cards with
  left-border highlight, collapsible SPARQL query
- Redesign map.html: compact header, styled prompt, shared CSS for element
  cards and tag keys, loading state on XHR
- Add lat/lon URL params to /map: map centres on coords and auto-loads pin
- Add needs_commons checkbox to map page: toggles needs_commons=false in URL
  and re-fetches the current pin when changed
- Return geojson in /pin/ JSON response so map can render the polygon layer
- Pass needs_commons through to /pin/ route and detail page link

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Edward Betts 2026-04-18 22:18:10 +01:00
parent cd9d8779d3
commit 76437d5240
3 changed files with 204 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

106
templates/pin_detail.html
View file

@ -1,34 +1,90 @@
<h4>API returns</h4>
<pre>{{ result | tojson(indent=2) }}</pre>
{% if result.wikidata %}
<p><strong>Wikidata item</strong>: <a href="https://www.wikidata.org/wiki/{{ result.wikidata }}">{{ result.wikidata }}</a></p>
{% endif %}
{% if result.commons_cat %}
<p><strong>Commons category</strong>: <a href="{{ result.commons_cat.url }}">{{result.commons_cat.title }}</a></p>
<h5 class="mb-0 mt-1">{{ result.commons_cat.title }}</h5>
{% elif result.wikidata %}
<h5 class="mb-0 mt-1">{{ result.wikidata }}</h5>
{% else %}
<h5 class="mb-0 mt-1 text-muted">No result</h5>
{% endif %}
<p class="text-muted mb-3" style="font-family:monospace;font-size:0.85em">{{ lat }}, {{ lon }}</p>
<div class="card mb-3">
<div class="card-body py-2 px-3">
<div class="row g-2">
{% if result.wikidata %}
<div class="col-auto">
<span class="tag-key">Wikidata</span>
<a href="https://www.wikidata.org/wiki/{{ result.wikidata }}">{{ result.wikidata }}</a>
</div>
{% endif %}
{% if result.commons_cat %}
<div class="col-auto">
<span class="tag-key">Commons category</span>
<a href="{{ result.commons_cat.url }}">{{ result.commons_cat.title }}</a>
</div>
{% endif %}
{% if result.admin_level %}
<div class="col-auto">
<span class="tag-key">Admin level</span>
{{ result.admin_level }}
</div>
{% endif %}
</div>
</div>
</div>
<div class="d-flex flex-wrap gap-2 mb-3">
<a href="{{ url_for('detail_page', lat=lat, lon=lon) }}{% if not needs_commons %}&needs_commons=false{% endif %}" class="btn btn-sm btn-outline-secondary">Detail page</a>
<a href="https://www.openstreetmap.org/#map=17/{{ lat }}/{{ lon }}" class="btn btn-sm btn-outline-secondary">OpenStreetMap</a>
{% if result.commons_cat %}
<a href="{{ result.commons_cat.url }}" class="btn btn-sm btn-outline-secondary">Commons category</a>
{% endif %}
{% if result.wikidata %}
<a href="https://www.wikidata.org/wiki/{{ result.wikidata }}" class="btn btn-sm btn-outline-secondary">{{ result.wikidata }}</a>
{% endif %}
</div>
<details class="mb-3">
<summary class="text-muted small">API response</summary>
<pre class="mt-2 p-2 bg-light rounded small">{{ result | tojson(indent=2) }}</pre>
</details>
{% if elements %}
<p>{{ elements.count() }} surrounding elements found</p>
{% set elem_count = elements.count() %}
<h6 class="text-muted mb-2">{{ elem_count }} surrounding OSM element{{ 's' if elem_count != 1 }}</h6>
{% for element in elements %}
{% set tags = element.tags %}
<div class="card mb-2 element-card{% if element_id == element.osm_id %} matched{% endif %}">
<div class="card-body py-2 px-3">
<div class="d-flex align-items-start justify-content-between mb-1">
<span class="fw-semibold">
{{ tags.name or ('relation' if element.osm_id < 0 else 'way') ~ ' ' ~ element.osm_id|abs }}
</span>
<div class="d-flex gap-2 ms-2 flex-shrink-0">
{% if tags.wikidata %}
<a href="https://www.wikidata.org/wiki/{{ tags.wikidata }}" class="badge bg-secondary text-decoration-none small">{{ tags.wikidata }}</a>
{% endif %}
<a href="{{ element.osm_url }}" class="badge bg-light text-secondary border text-decoration-none small">OSM</a>
</div>
</div>
<div class="row row-cols-auto g-2 small">
{% for key, value in tags.items() if not (key == "way_area" or "name:" in key or key.startswith("source") or key == "name" or key == "wikidata") %}
<div class="col">
<span class="tag-key">{{ key }}</span>{{ value }}
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No elements found</p>
<p class="text-muted small">No surrounding elements found.</p>
{% endif %}
{% if query %}
<p>Searching for Wikimedia Commons categories using this SPARQL query. <a href="https://query.wikidata.org/#{{ query | urlencode }}">Wikidata Query service</a></p>
<div>
{{ query | highlight_sparql | safe }}
</div>
<details class="mt-3">
<summary class="text-muted small">SPARQL geosearch query
<a href="https://query.wikidata.org/#{{ query | urlencode }}" class="ms-2 small" onclick="event.stopPropagation()">run on Wikidata ↗</a>
</summary>
<div class="mt-2">{{ query | highlight_sparql | safe }}</div>
</details>
{% endif %}
{% for element in elements %}
{% set tags = element.tags %}
<div class="rounded border border-4 p-1 my-2{% if element_id == element.osm_id %} bg-primary-subtle{% endif %}">
{% for key, value in element.tags.items() if not (key == "way_area" or "name:" in key or key.startswith("source")) %}
<div><strong>{{ key }}</strong>: {{ value }}</div>
{% endfor %}
</div>
{% endfor %}
</div>