preserve visual center of map on sidebar transitions

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 2d930024721932b58c6cbd49c36c27785fddc4c7..f16589eeefffe53d3d6cd12e81fc532c5760d26e 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/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;

diff --git a/app/assets/javascripts/router.js b/app/assets/javascripts/router.js
index 60630898297a67b31222ba43b04665eb11e56f72..fbad1e28c1695f90d37b5a40bef573f491e1afd1 100644 (file)
--- a/app/assets/javascripts/router.js
+++ b/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);
     });
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 24172416f257f254935f104fa0316397952f19c3..de0bad969d75d06c0c06cfecc1efa89fce2f29de 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/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 {

diff --git a/vendor/assets/leaflet/leaflet.js b/vendor/assets/leaflet/leaflet.js
index b972941d97a06cbb5705ce998d7382fa682e355c..a76c6fc8edd0d356d9488aba54af363393f68392 100644 (file)
--- a/vendor/assets/leaflet/leaflet.js
+++ b/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', {