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>

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 = '';
-      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 %}