|
|
|
@ -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 %}
|
|
|
|
|