add map display on photo pages

styles/less/main.less

@@ -344,3 +344,11 @@ ul.form-pager {
 span.uuid {
     font-family: monospace;
 }
+span.coords {
+    font-family: monospace;
+}
+
+.single-photo-map span.coords {
+    text-align: center;
+    display: block;
+}

templates/photo.html

@@ -14,8 +14,12 @@
     <a href="/photo/{{ image.uuid }}/edit"><button class="secondary-button pure-button">Edit</button></a>
 {% endblock %}
 
-{% block body %}
+{% block head %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
+<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
+{% endblock %}
 
+{% block body %}
 <div class="photo-view pure-g">
     <div class="photo-preview pure-u-2-3">
         <a href="/thumb/set/big/{{ image.uuid }}.jpg">
@@ -23,10 +27,38 @@
         </a>
     </div>
     <div class="photo-info pure-u-1-3">
-        {% if image.description %}
-        <div class="photo-description">
-            <h2>Description</h2>
-            <p>{{ image.description }}</p>
+        {% if image.lat and image.lon %}
+        <div class="single-photo-map">
+            <div id="map" style="height: 200px"></div>
+            <script type="text/javascript">
+                var position = [{{ image.lat }}, {{ image.lon }}];
+
+                var map = L.map('map', {
+                    crs: L.CRS.EPSG3857, // default
+                    attributionControl: false
+                }).setView(position, 13);
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+
+                }).addTo(map);
+
+                L.marker(position).addTo(map);
+
+                var refreshResults = function() {
+                    var southWest = map.getBounds().getSouthWest();
+                    var northEast = map.getBounds().getNorthEast();
+                    var northWest = map.getBounds().getNorthWest();
+                    var southEast = map.getBounds().getSouthEast();
+                    console.log(southWest, northEast, northWest, southEast)
+                }
+
+                map.on('moveend', refreshResults);
+
+                refreshResults();
+
+            </script>
+            <div>
+                <span class="coords">{{ image.lat }}, {{ image.lon }}</span>
+            </div>
         </div>
         {% endif %}
         <div class="photo-metadata">
@@ -49,13 +81,14 @@
                 <li>
                     <strong>Versions:</strong> {{ image.files|length }}
                 </li>
-                {% if image.lat %}
-                <li>
-                    <strong>Coordinates:</strong> <a href="/map?zoom=13&i={{ image.uuid }}">{{ image.lat }}, {{ image.lon }}</a>
-                </li>
-                {% endif %}
             </ul>
         </div>
+        {% if image.description %}
+        <div class="photo-description">
+            <h2>Description</h2>
+            <p>{{ image.description }}</p>
+        </div>
+        {% endif %}
         <div class="photo-formats">
             <h2>Versions</h2>
             <ul class="pure-g">
@@ -106,5 +139,4 @@
         </div>
     </div>
 </div>
-
 {% endblock %}