geocode/templates/map.html

{% extends "base.html" %}

{% block title %}Geocode to Commons — Map{% endblock %}

{% block link %}
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
{% endblock %}

{% block script %}
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     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);
  {% 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);

  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) {
    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>
#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
}

#main {
  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="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 %}