diff --git a/templates/map.html b/templates/map.html
new file mode 100644
index 0000000..8dc9533
--- /dev/null
+++ b/templates/map.html
@@ -0,0 +1,84 @@
+{% extends "base.html" %}
+
+{% block title %}Geocode to Commons{% 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>
+  var map = L.map('map').setView([56, -4], 6);
+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;
+
+  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();
+  });
+
+</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 */
+}
+
+#main {
+  width: 48%
+}
+
+{{ 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>
+
+{% endblock %}
diff --git a/templates/pin_detail.html b/templates/pin_detail.html
new file mode 100644
index 0000000..feca33c
--- /dev/null
+++ b/templates/pin_detail.html
@@ -0,0 +1,34 @@
+<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>
+{% endif %}
+
+{% if elements %}
+<p>{{ elements.count() }} surrounding elements found</p>
+{% else %}
+<p>No 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>
+{% 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>