clean up js

templates/map.html

@@ -25,7 +25,7 @@
             var initial_pos = [parseFloat(hash[0]), parseFloat(hash[1])];
             var initial_zoom = parseInt(hash[2]);
         } else {
-            var initial_pos = points[0].coord;
+            var initial_pos = points.length == 0 ? [0, 0] : points[0].coord;
             var initial_zoom = 5;
         }
 
@@ -35,10 +35,23 @@
             attributionControl: false
         }).setView(initial_pos, initial_zoom);
 
+        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>');
+        }
+
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
 
+        // when resolving_hash is > 0 we ignore the map's moveend events as to avoid pushing state during a pop
         var resolving_hash = 0;
+        // last_hash is used to avoid pushing duplicate states (e.g. zoom/panning an amount that is rounded out)
         var last_hash = window.location.hash;
+        // we set a dynamic title by prepending the coordinates onto the original html title
         var base_title = document.getElementsByTagName("title")[0].text
 
         var updateTitle = function() {
@@ -68,27 +81,11 @@
             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(
@@ -98,6 +95,11 @@
                 500
             )
         });
+
+        map.on('moveend', updateState);
+
+        updateState();
+        updateTitle();
     </script>
 </div>
 {% endblock %}

templates/photo.html

@@ -42,19 +42,6 @@
                 }).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>