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>

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__":

templates/map.html

@@ -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: '&copy; <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 = '';
+    loadPin(e.latlng.lat, e.latlng.lng);
-      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();
   });
 
+  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 */
+    position: fixed;
-    top: 0;            /* Starting from the top edge of the browser window */
+    top: 0;
-    right: 0;          /* Positioned on the right side */
+    right: 0;
-    width: 50%;        /* Half the screen width */
+    width: 50%;
-    height: 100%;      /* Full height of the browser window */
+    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">
+<div class="px-3 py-3" id="main">
-<h1>Geocode coordinates to Commons Category</h1>
+  <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 id="info">Click on the map</div>
+  <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 %}

templates/pin_detail.html

@@ -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>
+<details class="mt-3">
-<div>
+  <summary class="text-muted small">SPARQL geosearch query
-{{ query | highlight_sparql | safe }}
+    <a href="https://query.wikidata.org/#{{ query | urlencode }}" class="ms-2 small" onclick="event.stopPropagation()">run on Wikidata ↗</a>
-</div>
+  </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>