Add Zoom and Center to AoI Button

Refs #3242

src/mmw/js/src/compare/views.js

@@ -588,6 +588,7 @@ var Tr55ScenarioItemView = Marionette.ItemView.extend({
             }),
             el: this.ui.mapContainer,
             addZoomControl: false,
+            addZoomToAoiControl: false,
             addLocateMeButton: false,
             addSidebarToggleControl: false,
             showLayerAttribution: false,

src/mmw/js/src/core/templates/zoomToAoiControlButton.html

@@ -0,0 +1,5 @@
+<div class="layer-control-button-container leaflet-bar {{"hidden-control" if disabled }}">
+    <a class="leaflet-bar leaflet-bar-button " href="#" title="Zoom to Area of Interest">
+        <span class="fa fa-bullseye"></span>
+    </a>
+</div>

src/mmw/js/src/core/tests.js

@@ -39,6 +39,7 @@ describe('Core', function() {
             'LayerSelector',
             'LocateMeButton',
             'ZoomControl',
+            'ZoomToAoiControl',
         ]);
     });
 

src/mmw/js/src/core/views.js

@@ -16,7 +16,8 @@ var L = require('leaflet'),
     modalModels = require('./modals/models'),
     modalViews = require('./modals/views'),
     settings = require('./settings'),
-    SidebarToggleControl = require('./sidebarToggleControl');
+    SidebarToggleControl = require('./sidebarToggleControl'),
+    ZoomToAoiControl = require('./zoomToAoiControl');
 
 require('leaflet.locatecontrol');
 require('leaflet-plugins/layer/tile/Google');
@@ -311,6 +312,9 @@ var MapView = Marionette.ItemView.extend({
     // L.FeatureGroup instance.
     _areaOfInterestLayer: null,
 
+    // The bounds of the current "area of interest"
+    _areaOfInterestBounds: null,
+
     // For showing points, etc. that users searched for
     // L.FeatureGroup instance
     _searchResultLayer: null,
@@ -342,12 +346,14 @@ var MapView = Marionette.ItemView.extend({
     _googleMaps: (window.google ? window.google.maps : null),
 
     initialize: function(options) {
-        var map_controls = settings.get('map_controls');
+        var map_controls = settings.get('map_controls'),
+            self = this;
 
         this.layerTabCollection = options.layerTabCollection;
 
         _.defaults(options, {
             addZoomControl: _.includes(map_controls, 'ZoomControl'),
+            addZoomToAoiControl: _.includes(map_controls, 'ZoomToAoiControl'),
             addSidebarToggleControl: _.includes(map_controls, 'SidebarToggleControl'),
             addLocateMeButton: _.includes(map_controls, 'LocateMeButton'),
             showLayerAttribution: _.includes(map_controls, 'LayerAttribution'),
@@ -393,6 +399,13 @@ var MapView = Marionette.ItemView.extend({
             map.addControl(new SidebarToggleControl({ model: options.model }));
         }
 
+        if (options.addZoomToAoiControl) {
+            map.addControl(new ZoomToAoiControl({
+                model: options.model,
+                zoomToAoi: function() { self.zoomToAreaOfInterest(); }
+            }));
+        }
+
         this.setMapEvents();
         this.setupGeoLocation();
 
@@ -641,14 +654,21 @@ var MapView = Marionette.ItemView.extend({
                 var layer = new L.GeoJSON(areaOfInterest);
                 applyMask(this._areaOfInterestLayer, layer);
                 this.model.set('maskLayerApplied', true);
-                this._leafletMap.fitBounds(layer.getBounds(), { reset: true });
+                this._areaOfInterestBounds = layer.getBounds();
+                this.zoomToAreaOfInterest();
                 this.addAdditionalAoiShapes();
             } catch (ex) {
                 console.log('Error adding Leaflet layer (invalid GeoJSON object)');
             }
         }
     },
 
+    zoomToAreaOfInterest: function() {
+        if(this.model.get('areaOfInterest')) {
+            this._leafletMap.fitBounds(this._areaOfInterestBounds, { reset: true });
+        }
+    },
+
     addAdditionalAoiShapes: function() {
         var self = this,
             additionalShapes = this.model.get('areaOfInterestAdditionals');

src/mmw/js/src/core/zoomToAoiControl.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var L = require('leaflet'),
+    Marionette = require('../../shim/backbone.marionette'),
+    sidebarToggleControlButtonTmpl = require('./templates/zoomToAoiControlButton.html');
+
+module.exports = L.Control.extend({
+    options: {
+        position: 'bottomright'
+    },
+
+    initialize: function(options) {
+        this.mapModel = options.model;
+        this.zoomToAoi = options.zoomToAoi;
+    },
+
+    onAdd: function() {
+        return new ZoomToAoiControlButton({ model: this.mapModel,
+                                            zoomToAoi: this.zoomToAoi }).render().el;
+    }
+});
+
+var ZoomToAoiControlButton = Marionette.ItemView.extend({
+    // model: MapModel,
+    template: sidebarToggleControlButtonTmpl,
+    className: 'leaflet-control leaflet-control-zoom-to-aoi',
+
+    ui: {
+        button: '.leaflet-bar-button'
+    },
+
+    events: {
+        'click @ui.button': 'toggle'
+    },
+
+    modelEvents: {
+        'change:size': 'render',
+        'change:areaOfInterest': 'render'
+    },
+
+    initialize: function(options) {
+        this.zoomToAoi = options.zoomToAoi;
+    },
+
+
+    templateHelpers: function() {
+        return {
+            disabled: this.model.get('areaOfInterest') === null
+        };
+    },
+
+    toggle: function() {
+        this.zoomToAoi();
+    }
+});

src/mmw/mmw/settings/base.py

@@ -934,6 +934,7 @@ def get_env_setting(setting):
     'LayerSelector',
     'LocateMeButton',
     'ZoomControl',
+    'ZoomToAoiControl',
     'SidebarToggleControl',
 ]
 

src/mmw/mmw/settings/production.py

@@ -108,6 +108,7 @@
     'LayerSelector',
     'LocateMeButton',
     'ZoomControl',
+    'ZoomToAoiControl',
     'SidebarToggleControl',
 ]
 

src/mmw/sass/base/_map.scss

@@ -136,6 +136,10 @@
         height: 38px;
         width: 38px;
     }
+
+    &.hidden-control {
+        visibility: hidden;
+    }
 }
 
 .leaflet-control {