Photo Map & Style

kristofzerbe · Sep 8, 2023 · d7a57be · d7a57be
1 parent d47fed1
commit d7a57be
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/themes/landscape/layout/photo.ejs b/themes/landscape/layout/photo.ejs
@@ -28,6 +28,15 @@
   }
 %>
 
+<% if (page.meta.latitude && page.meta.longitude) { %>
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+  crossorigin=""/>
+<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+  crossorigin=""></script>
+<% } %>
+
 <h1 class="archive-title">
   <span>Photo<b>|</b></span><%= page.name %>
 </h1>
@@ -38,6 +47,10 @@
 
   <section class="meta">
     <ul>
+      <li>
+        <label>Title</label>
+        <span><%= page.meta.ObjectName %></span>
+      </li>
       <li>
         <label>File</label>
         <span><%= page.file %></span>
@@ -62,10 +75,6 @@
       </li>
       <% if (page.meta) { %>
       <li><hr style="margin:0"></li>
-      <li>
-        <label>Title</label>
-        <span><%= page.meta.ObjectName %></span>
-      </li>
       <li>
         <label>Keywords</label>
         <span><%= page.meta.Keywords?.join(", ") %></span>
@@ -82,6 +91,13 @@
         <label>Country, State, City</label>
         <span><%= (page.meta?.Country?? "---") + ", " + (page.meta.State ?? "---") + ", " + (page.meta.City ?? "---") %></span>
       </li>
+      <li>
+        <label>GPS Coordinates (Lat/Long)</label>
+        <span><%= page.meta.latitude ?? "---" %> / <%= page.meta.longitude ?? "---" %></span>
+        <% if (page.meta.latitude && page.meta.longitude) { %>
+        <div id="map" style="height: 320px; margin: 12px -28px 0"></div>
+        <% } %>
+      </li>
       <li><hr style="margin:0"></li>
       <li>
         <label>Camera</label>
@@ -133,6 +149,21 @@
 
   <%- partial('_partial/post/interaction', { post: page, type: 'photo', comments: false }) %>
 
+  <% if (page.meta.latitude && page.meta.longitude) { %>
+  <script>
+    var map = L.map('map', {
+      center: [<%= page.meta.latitude %>, <%= page.meta.longitude %>],
+      zoom: 11,
+      zoomControl: false,
+    })
+    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 = L.marker([<%= page.meta.latitude %>, <%= page.meta.longitude %>]).addTo(map);
+  </script>
+  <% } %>
+  
   <script>
     setTimeout(() => {
       let header = document.getElementById("header");

diff --git a/themes/landscape/source/css/_partial/page.styl b/themes/landscape/source/css/_partial/page.styl
@@ -534,14 +534,15 @@
         span
           line-height: normal
           a
-            white-space: nowrap
         div.site-links
           display: flex
           flex-flow: column
           gap: 8px
           a.site-link
-            padding: 18px 0 12px 48px
+            padding: 18px 12px 12px 48px
             text-decoration: none
+            overflow-wrap: break-word
+            line-height: 18px
             background-size: 24px 24px
             background-repeat: no-repeat
             background-color: color-hover-background