redo map with leafletjs
Gitea/photolib/pipeline/head This commit looks good Details

api-refactor
dave 10 months ago
parent 23f63b2bdd
commit be69f76ffb

@ -344,6 +344,23 @@ ul.form-pager {
span.uuid {
font-family: monospace;
}
/* map stuff */
.leaflet-popup-content {
img {
width: 250px;
height: 250px;
display: block;
margin:0px auto;
}
span {
text-align: center;
display: block;
margin-bottom: -10px;
display: block;
}
}
span.coords {
font-family: monospace;
}

@ -4,33 +4,100 @@
{% block subtitle %}GPS data{% endblock %}
{% block buttons %}{% 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-map">
<div id="mapdiv" style="height: 900px"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
<!-- https://wiki.openstreetmap.org/wiki/OpenLayers_Marker_Example -->
<div id="map" style="height:800px"></div>
<script type="text/javascript">
var points = [
{%- for item in images -%}
[{{item.lon}}, {{item.lat}}],
{coord: [{{item.lat}}, {{item.lon}}, ],uuid: "{{ item.uuid }}",date: "{{ item.date.strftime('%b %-d %Y') }}"},
{%- endfor -%}
]
var map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var markers = new OpenLayers.Layer.Markers( "Markers" );
];
// Determine initial position by parsing url fragment (or fall back to a random point)
if (window.location.hash) {
var hash = window.location.hash.substr(1).split(",");
var initial_pos = [parseFloat(hash[0]), parseFloat(hash[1])];
var initial_zoom = parseInt(hash[2]);
} else {
var initial_pos = points[0].coord;
var initial_zoom = 5;
}
var map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG3857, // default
attributionControl: false
}).setView(initial_pos, initial_zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
var resolving_hash = 0;
var last_hash = window.location.hash;
var base_title = document.getElementsByTagName("title")[0].text
var updateTitle = function() {
var center = map.getCenter();
document.title = center.lat.toFixed(5) + ", " + center.lng.toFixed(5) + " - " + base_title;
}
var updateState = function() {
if(resolving_hash) {
return;
}
var center = map.getCenter();
var zoom = map.getZoom();
var hash = "#" + center.lat.toFixed(5) + "," + center.lng.toFixed(5) + "," + zoom
if(hash == last_hash) {
return;
}
var state = {
pos: [
center.lat,
center.lng,
],
zoom: zoom,
};
history.pushState(state, null, hash);
last_hash = hash;
updateTitle();
}
map.on('moveend', updateState);
for(var i=0;i<points.length;i++) {
var point = points[i]
var lonLat = new OpenLayers.LonLat(point[0], point[1])
.transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
var marker = new OpenLayers.Marker(lonLat)
markers.addMarker(marker);
L.circleMarker(points[i].coord, {
color: '#3388ff'
}).addTo(map).bindPopup(
'<a href="/photo/' + points[i].uuid + '">' +
'<img src="/thumb/set/feed/' + points[i].uuid + '.jpg"/>' +
'</a>' +
'<span>' + points[i].date + '</span>');
}
map.addLayer(markers);
var zoom={{ zoom or 3 }};
map.setCenter(lonLat, zoom);
updateState();
updateTitle();
addEventListener('popstate', function(state) {
var state = state.state;
if (!state) {
return;
}
console.log("pop")
resolving_hash += 1;
map.setView(state.pos, state.zoom);
setTimeout(
function() {
resolving_hash -= 1;
},
500
)
});
</script>
</div>
{% endblock %}

Loading…
Cancel
Save