Redesign map page and add lat/lon/needs_commons URL parameters
- 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:
parent
cd9d8779d3
commit
76437d5240
3 changed files with 204 additions and 68 deletions
12
lookup.py
12
lookup.py
|
|
@ -2,6 +2,7 @@
|
|||
"""Reverse geocode: convert lat/lon to Wikidata item & Wikimedia Commons category."""
|
||||
|
||||
import inspect
|
||||
import json
|
||||
import random
|
||||
import re
|
||||
import socket
|
||||
|
|
@ -535,7 +536,8 @@ def reports() -> str:
|
|||
@app.route("/pin/<lat>/<lon>")
|
||||
def pin_detail(lat: str, lon: str) -> Response:
|
||||
"""Details for map pin location."""
|
||||
reply = lat_lon_to_wikidata(float(lat), float(lon))
|
||||
needs_commons = request.args.get("needs_commons", "true").lower() != "false"
|
||||
reply = lat_lon_to_wikidata(float(lat), float(lon), needs_commons)
|
||||
element = reply["result"].pop("element", None)
|
||||
geojson = reply["result"].pop("geojson", None)
|
||||
|
||||
|
|
@ -548,18 +550,22 @@ def pin_detail(lat: str, lon: str) -> Response:
|
|||
str=str,
|
||||
element_id=element,
|
||||
geojson=geojson,
|
||||
needs_commons=needs_commons,
|
||||
css=css,
|
||||
**reply,
|
||||
)
|
||||
|
||||
return jsonify(html=html)
|
||||
geojson_data = json.loads(geojson) if geojson else None
|
||||
return jsonify(html=html, geojson=geojson_data)
|
||||
|
||||
|
||||
@app.route("/map")
|
||||
def map_page() -> str:
|
||||
"""Map page."""
|
||||
css = HtmlFormatter().get_style_defs(".highlight")
|
||||
return render_template("map.html", css=css)
|
||||
lat = request.args.get("lat", type=float)
|
||||
lon = request.args.get("lon", type=float)
|
||||
return render_template("map.html", css=css, init_lat=lat, init_lon=lon)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Geocode to Commons{% endblock %}
|
||||
{% block title %}Geocode to Commons — Map{% endblock %}
|
||||
|
||||
{% block link %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
|
|
@ -14,71 +14,145 @@
|
|||
crossorigin=""></script>
|
||||
|
||||
<script>
|
||||
{% if init_lat and init_lon %}
|
||||
var map = L.map('map').setView([{{ init_lat }}, {{ init_lon }}], 13);
|
||||
{% else %}
|
||||
var map = L.map('map').setView([56, -4], 6);
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
{% endif %}
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
}).addTo(map);
|
||||
|
||||
var marker;
|
||||
var geojsonLayer;
|
||||
var currentLat = null;
|
||||
var currentLon = null;
|
||||
|
||||
var initParams = new URLSearchParams(window.location.search);
|
||||
var needsCommons = initParams.get('needs_commons') !== 'false';
|
||||
document.getElementById('needs-commons').checked = needsCommons;
|
||||
|
||||
function updateUrl(lat, lon) {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
if (lat !== null) { params.set('lat', lat); params.set('lon', lon); }
|
||||
if (needsCommons) { params.delete('needs_commons'); } else { params.set('needs_commons', 'false'); }
|
||||
history.replaceState(null, '', '?' + params.toString());
|
||||
}
|
||||
|
||||
function loadPin(lat, lon) {
|
||||
currentLat = lat;
|
||||
currentLon = lon;
|
||||
var info = document.getElementById('info');
|
||||
info.innerHTML = '<p class="text-muted small">Loading\u2026</p>';
|
||||
|
||||
var latlng = L.latLng(lat, lon);
|
||||
if (marker) {
|
||||
marker.setLatLng(latlng);
|
||||
} else {
|
||||
marker = L.marker(latlng).addTo(map);
|
||||
}
|
||||
|
||||
if (geojsonLayer) {
|
||||
map.removeLayer(geojsonLayer);
|
||||
geojsonLayer = null;
|
||||
}
|
||||
|
||||
updateUrl(lat, lon);
|
||||
|
||||
var pinUrl = '{{ request.root_path }}/pin/' + lat + '/' + lon;
|
||||
if (!needsCommons) { pinUrl += '?needs_commons=false'; }
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', pinUrl, true);
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
var response = JSON.parse(xhr.responseText);
|
||||
info.innerHTML = response.html;
|
||||
if (response.geojson) {
|
||||
geojsonLayer = L.geoJSON(response.geojson).addTo(map);
|
||||
}
|
||||
} else {
|
||||
info.innerHTML = '<p class="text-danger small">Request failed (status ' + xhr.status + ').</p>';
|
||||
}
|
||||
};
|
||||
xhr.onerror = function() {
|
||||
info.innerHTML = '<p class="text-danger small">Network error.</p>';
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
map.on('click', function(e) {
|
||||
document.getElementById('info').innerHTML = '';
|
||||
if (marker) {
|
||||
// If the marker already exists, just set its new position
|
||||
marker.setLatLng(e.latlng);
|
||||
} else {
|
||||
// If the marker doesn't exist yet, create it at the clicked position
|
||||
marker = L.marker(e.latlng).addTo(map);
|
||||
}
|
||||
|
||||
// Send XHR to the server
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '{{ request.root_path }}/pin/' + e.latlng.lat + '/' + e.latlng.lng, true);
|
||||
xhr.onload = function() {
|
||||
if (xhr.status === 200) {
|
||||
var response = JSON.parse(xhr.responseText);
|
||||
document.getElementById('info').innerHTML = response.html;
|
||||
} else {
|
||||
console.error('Request failed. Returned status of ' + xhr.status);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
loadPin(e.latlng.lat, e.latlng.lng);
|
||||
});
|
||||
|
||||
document.getElementById('needs-commons').addEventListener('change', function() {
|
||||
needsCommons = this.checked;
|
||||
updateUrl(currentLat, currentLon);
|
||||
if (currentLat !== null) { loadPin(currentLat, currentLon); }
|
||||
});
|
||||
|
||||
{% if init_lat and init_lon %}
|
||||
loadPin({{ init_lat }}, {{ init_lon }});
|
||||
{% endif %}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block style %}
|
||||
<style>
|
||||
|
||||
/* Styles for the map */
|
||||
#map {
|
||||
position: fixed; /* This keeps the map in place when the page is scrolled */
|
||||
top: 0; /* Starting from the top edge of the browser window */
|
||||
right: 0; /* Positioned on the right side */
|
||||
width: 50%; /* Half the screen width */
|
||||
height: 100%; /* Full height of the browser window */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 48%
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.tag-key {
|
||||
color: #6c757d;
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.element-card {
|
||||
border-left: 3px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
.element-card.matched {
|
||||
border-left-color: #0d6efd !important;
|
||||
background-color: #f8f9ff;
|
||||
}
|
||||
|
||||
details > summary {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
details > summary:hover {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
{{ css | safe }}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="map"></div>
|
||||
<div class="m-3" id="main">
|
||||
<h1>Geocode coordinates to Commons Category</h1>
|
||||
|
||||
<div id="info">Click on the map</div>
|
||||
|
||||
<div class="px-3 py-3" id="main">
|
||||
<h4 class="mb-1">Geocode to Commons</h4>
|
||||
<p class="text-muted small mb-2">Click anywhere on the map to look up the Wikidata item and Commons category.</p>
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="needs-commons" checked>
|
||||
<label class="form-check-label small text-muted" for="needs-commons">Require Commons category</label>
|
||||
</div>
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue