diff --git a/css/map.css b/css/map.css index 829d0c82..f1f2da29 100644 --- a/css/map.css +++ b/css/map.css @@ -18,6 +18,11 @@ } .recline-map .editor select { - width: 100%; + width: 100%; } +.recline-map .editor .editor-options { + margin-top: 10px; + border-top: 1px solid gray; + padding: 5px 0; +} diff --git a/src/view-map.js b/src/view-map.js index 9553b9e3..861bce65 100644 --- a/src/view-map.js +++ b/src/view-map.js @@ -75,6 +75,11 @@ my.Map = Backbone.View.extend({
\ + \ \ \ \ @@ -92,7 +97,8 @@ my.Map = Backbone.View.extend({ // Define here events for UI elements events: { 'click .editor-update-map': 'onEditorSubmit', - 'change .editor-field-type': 'onFieldTypeChange' + 'change .editor-field-type': 'onFieldTypeChange', + 'change #editor-auto-zoom': 'onAutoZoomChange' }, initialize: function(options) { @@ -114,12 +120,18 @@ my.Map = Backbone.View.extend({ this.model.currentDocuments.bind('remove', function(doc){self.redraw('remove',doc)}); this.model.currentDocuments.bind('reset', function(){self.redraw('reset')}); - // If the div was hidden, Leaflet needs to recalculate some sizes - // to display properly this.bind('view:show',function(){ - if (self.map) { - self.map.invalidateSize(); - } + // If the div was hidden, Leaflet needs to recalculate some sizes + // to display properly + self.map.invalidateSize(); + if (self._zoomPending && self.autoZoom) { + self._zoomToFeatures(); + self._zoomPending = false; + } + self.visible = true; + }); + this.bind('view:hide',function(){ + self.visible = false; }); var stateData = _.extend({ @@ -131,6 +143,7 @@ my.Map = Backbone.View.extend({ ); this.state = new recline.Model.ObjectState(stateData); + this.autoZoom = true; this.mapReady = false; this.render(); }, @@ -196,6 +209,13 @@ my.Map = Backbone.View.extend({ this.features.clearLayers(); this._add(this.model.currentDocuments.models); } + if (action != 'reset' && this.autoZoom){ + if (this.visible){ + this._zoomToFeatures(); + } else { + this._zoomPending = true; + } + } } }, @@ -242,6 +262,10 @@ my.Map = Backbone.View.extend({ } }, + onAutoZoomChange: function(e){ + this.autoZoom = !this.autoZoom; + }, + // Private: Add one or n features to the map // // For each document passed, a GeoJSON geometry will be extracted and added @@ -374,6 +398,18 @@ my.Map = Backbone.View.extend({ return null; }, + // Private: Zoom to map to current features extent if any, or to the full + // extent if none. + // + _zoomToFeatures: function(){ + var bounds = this.features.getBounds(); + if (bounds){ + this.map.fitBounds(bounds); + } else { + this.map.setView(new L.LatLng(0, 0), 2); + } + }, + // Private: Sets up the Leaflet map control and the features layer. // // The map uses a base layer from [MapQuest](http://www.mapquest.com) based @@ -398,6 +434,17 @@ my.Map = Backbone.View.extend({ } }); + + // This will be available in the next Leaflet stable release. + // In the meantime we add it manually to our layer. + this.features.getBounds = function(){ + var bounds = new L.LatLngBounds(); + this._iterateLayers(function (layer) { + bounds.extend(layer instanceof L.Marker ? layer.getLatLng() : layer.getBounds()); + }, this); + return (typeof bounds.getNorthEast() !== 'undefined') ? bounds : null; + } + this.map.addLayer(this.features); this.map.setView(new L.LatLng(0, 0), 2);