add map display on photo pages
Gitea/photolib/pipeline/head Something is wrong with the build of this commit Details

This commit is contained in:
dave 2022-07-31 16:14:11 -07:00
parent aade3ae87a
commit 23f63b2bdd
2 changed files with 51 additions and 11 deletions

View File

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

View File

@ -14,8 +14,12 @@
<a href="/photo/{{ image.uuid }}/edit"><button class="secondary-button pure-button">Edit</button></a> <a href="/photo/{{ image.uuid }}/edit"><button class="secondary-button pure-button">Edit</button></a>
{% endblock %} {% 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-view pure-g">
<div class="photo-preview pure-u-2-3"> <div class="photo-preview pure-u-2-3">
<a href="/thumb/set/big/{{ image.uuid }}.jpg"> <a href="/thumb/set/big/{{ image.uuid }}.jpg">
@ -23,10 +27,38 @@
</a> </a>
</div> </div>
<div class="photo-info pure-u-1-3"> <div class="photo-info pure-u-1-3">
{% if image.description %} {% if image.lat and image.lon %}
<div class="photo-description"> <div class="single-photo-map">
<h2>Description</h2> <div id="map" style="height: 200px"></div>
<p>{{ image.description }}</p> <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> </div>
{% endif %} {% endif %}
<div class="photo-metadata"> <div class="photo-metadata">
@ -49,13 +81,14 @@
<li> <li>
<strong>Versions:</strong> {{ image.files|length }} <strong>Versions:</strong> {{ image.files|length }}
</li> </li>
{% if image.lat %}
<li>
<strong>Coordinates:</strong> <a href="/map?zoom=13&i={{ image.uuid }}">{{ image.lat }}, {{ image.lon }}</a>
</li>
{% endif %}
</ul> </ul>
</div> </div>
{% if image.description %}
<div class="photo-description">
<h2>Description</h2>
<p>{{ image.description }}</p>
</div>
{% endif %}
<div class="photo-formats"> <div class="photo-formats">
<h2>Versions</h2> <h2>Versions</h2>
<ul class="pure-g"> <ul class="pure-g">
@ -106,5 +139,4 @@
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}