From a796c41881c26e6da8828a71dbfb533613e5a83f Mon Sep 17 00:00:00 2001 From: Aaron Lidman Date: Mon, 9 Dec 2013 11:24:51 -0500 Subject: [PATCH 1/1] Refine zooming and panning for note and data layers Fixes #629 Fixes #643 --- app/assets/javascripts/index.js | 14 +++++++-- app/assets/javascripts/index/history.js | 2 +- app/assets/javascripts/index/note.js.erb | 36 +++++++++++++++++------ app/assets/javascripts/leaflet.map.js.erb | 11 ++----- 4 files changed, 42 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index d7a14c312..a7522479e 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -250,14 +250,24 @@ $(document).ready(function () { page.pushstate = page.popstate = function(path, id) { OSM.loadSidebarContent(path, function() { - page.load(path, id); + addObject(type, id); }); }; page.load = function(path, id) { - map.addObject({type: type, id: parseInt(id)}); + addObject(type, id, true); }; + function addObject(type, id, center) { + var bounds = map.addObject({type: type, id: parseInt(id)}, function(bounds) { + if (!window.location.hash && bounds.isValid()) { + OSM.router.moveListenerOff(); + map.once('moveend', OSM.router.moveListenerOn); + if (center || !map.getBounds().contains(bounds)) map.fitBounds(bounds); + } + }); + } + page.unload = function() { map.removeObject(); }; diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js index d98179d8a..8103f047e 100644 --- a/app/assets/javascripts/index/history.js +++ b/app/assets/javascripts/index/history.js @@ -126,7 +126,7 @@ OSM.History = function(map) { map.addLayer(group); if (window.location.pathname === '/history') { - map.on("moveend", update) + map.on("moveend", update); } update(); diff --git a/app/assets/javascripts/index/note.js.erb b/app/assets/javascripts/index/note.js.erb index 2a2599a3c..18000deb0 100644 --- a/app/assets/javascripts/index/note.js.erb +++ b/app/assets/javascripts/index/note.js.erb @@ -37,10 +37,20 @@ OSM.Note = function (map) { } page.pushstate = page.popstate = function (path) { - OSM.loadSidebarContent(path, page.load); + OSM.loadSidebarContent(path, function() { + initialize(function() { + var data = $('.details').data(), + latLng = L.latLng(data.coordinates.split(',')); + if (!map.getBounds().contains(latLng)) moveToNote(); + }); + }); }; - page.load = function () { + page.load = function() { + initialize(moveToNote); + }; + + function initialize(callback) { content.find("input[type=submit]").on("click", function (e) { e.preventDefault(); var data = $(e.target).data(); @@ -62,13 +72,7 @@ OSM.Note = function (map) { content.find("textarea").val('').trigger("input"); var data = $('.details').data(), - latLng = data.coordinates.split(','); - - if (!window.location.hash || window.location.hash.match(/^#?c[0-9]+$/)) { - OSM.router.moveListenerOff(); - map.once('moveend', OSM.router.moveListenerOn); - map.getZoom() > 15 ? map.panTo(latLng) : map.setView(latLng, 16); - } + latLng = L.latLng(data.coordinates.split(',')); if (!map.hasLayer(halo)) { halo = L.circleMarker(latLng, { @@ -86,9 +90,23 @@ OSM.Note = function (map) { opacity: 1, clickable: true }); + map.addLayer(currentNote); + + if (callback) callback(); }; + function moveToNote() { + var data = $('.details').data(), + latLng = L.latLng(data.coordinates.split(',')); + + if (!window.location.hash || window.location.hash.match(/^#?c[0-9]+$/)) { + OSM.router.moveListenerOff(); + map.once('moveend', OSM.router.moveListenerOn); + map.setView(latLng, 15, {reset: true}); + } + } + page.unload = function () { if (map.hasLayer(halo)) map.removeLayer(halo); if (map.hasLayer(currentNote)) map.removeLayer(currentNote); diff --git a/app/assets/javascripts/leaflet.map.js.erb b/app/assets/javascripts/leaflet.map.js.erb index ed89e1fa5..6c84bef55 100644 --- a/app/assets/javascripts/leaflet.map.js.erb +++ b/app/assets/javascripts/leaflet.map.js.erb @@ -165,7 +165,7 @@ L.OSM.Map = L.Map.extend({ return str; }, - addObject: function(object) { + addObject: function(object, callback) { var objectStyle = { color: "#FF6200", weight: 4, @@ -215,14 +215,7 @@ L.OSM.Map = L.Map.extend({ map._objectLayer.addData(xml); map._objectLayer.addTo(map); - if (!window.location.hash) { - var bounds = map._objectLayer.getBounds(); - if (bounds.isValid()) { - OSM.router.moveListenerOff(); - map.once('moveend', OSM.router.moveListenerOn); - map.fitBounds(bounds); - } - } + if (callback) callback(map._objectLayer.getBounds()); } }); }, -- 2.43.2