preserve visual center of map on sidebar transitions

app/assets/javascripts/index.js

@@ -158,19 +158,31 @@ $(document).ready(function () {
   OSM.Index = function(map) {
     var page = {};
 
-    page.pushstate = page.popstate = function(path) {
-      $("#content").addClass("overlay-sidebar");
-      map.invalidateSize();
+    function loadContent(path) {
       $('#sidebar_content').load(path + "?xhr=1", function(a, b, xhr) {
         if (xhr.getResponseHeader('X-Page-Title')) {
           document.title = xhr.getResponseHeader('X-Page-Title');
         }
       });
+    }
+
+    page.pushstate = function(path) {
+      $("#content").addClass("overlay-sidebar");
+      map.invalidateSize({pan: false})
+        .panBy([-300, 0], {animate: false});
+      loadContent(path);
+    };
+
+    page.popstate = function(path) {
+      $("#content").addClass("overlay-sidebar");
+      map.invalidateSize({pan: false});
+      loadContent(path);
     };
 
     page.unload = function() {
+      map.panBy([300, 0], {animate: false});
       $("#content").removeClass("overlay-sidebar");
-      map.invalidateSize();
+      map.invalidateSize({pan: false});
     };
 
     return page;

app/assets/javascripts/router.js

@@ -88,7 +88,7 @@ OSM.Router = function(map, rts) {
       currentRoute = routes.recognize(currentPath);
       currentRoute.run('popstate', currentPath);
       var state = e.originalEvent.state;
-      map.setView(state.center, state.zoom);
+      map.setView(state.center, state.zoom, {animate: false});
       map.updateLayers(state.layers);
     });
 

app/assets/stylesheets/common.css.scss

@@ -656,9 +656,9 @@ nav.secondary {
       cursor: pointer;
     }
 
-    -webkit-transition: margin 300ms linear;
-       -moz-transition: margin 300ms linear;
-            transition: margin 300ms linear;
+//    -webkit-transition: margin 300ms linear;
+//       -moz-transition: margin 300ms linear;
+//            transition: margin 300ms linear;
   }
 
   .overlay-sidebar #sidebar {

vendor/assets/leaflet/leaflet.js

@@ -1773,11 +1773,7 @@ L.Map = L.Class.extend({
 				this._rawPanBy(offset);
 			}
 
-			this.fire('move');
-
-			// make sure moveend is not fired too often on resize
-			clearTimeout(this._sizeTimer);
-			this._sizeTimer = setTimeout(L.bind(this.fire, this, 'moveend'), 200);
+			this.fire('move').fire('moveend');
 		}
 
 		return this.fire('resize', {