redo map with leafletjs

styles/less/main.less

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

templates/map.html

@@ -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" );
-        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);
+        ];
+
+        // 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;
         }
-        map.addLayer(markers);
-        var zoom={{ zoom or 3 }};
-        map.setCenter(lonLat, zoom);
+
+        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++) {
+            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>');
+        }
+
+        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 %}