From 23f63b2bddd4a4cd17d32dc683729e732e159c83 Mon Sep 17 00:00:00 2001
From: dave <dave@davepedu.com>
Date: Sun, 31 Jul 2022 16:14:11 -0700
Subject: [PATCH] add map display on photo pages

---
 styles/less/main.less |  8 +++++++
 templates/photo.html  | 54 ++++++++++++++++++++++++++++++++++---------
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/styles/less/main.less b/styles/less/main.less
index 9ea2c58..1b9433b 100644
--- a/styles/less/main.less
+++ b/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;
+}
diff --git a/templates/photo.html b/templates/photo.html
index 419d177..f2a9f74 100644
--- a/templates/photo.html
+++ b/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 %}