Edward Betts
76437d5240
- 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>
90 lines
3.6 KiB
HTML
90 lines
3.6 KiB
HTML
{% if result.commons_cat %}
|
|
<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 %}
|
|
{% 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 class="text-muted small">No surrounding elements found.</p>
|
|
{% endif %}
|
|
|
|
{% if query %}
|
|
<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 %}
|