Add geometry of selected BigCZ result to map

When a user views the details of a BigCZ result, the geometry of the selected result is highlighted on the map, and all of the other items on the map are removed. Refs #2152
WikiWatershed · Sep 5, 2017 · 152a668 · 152a668
1 parent 8686ef2
commit 152a668
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 9 deletions.
diff --git a/src/mmw/js/src/core/models.js b/src/mmw/js/src/core/models.js
@@ -23,6 +23,7 @@ var MapModel = Backbone.Model.extend({
         previousAreaOfInterest: null,
         dataCatalogResults: null,       // GeoJSON array
         dataCatalogActiveResult: null,  // GeoJSON
+        dataCatalogDetailResult: null,  // GeoJSON
         selectedGeocoderArea: null,     // GeoJSON
     },
 

diff --git a/src/mmw/js/src/core/views.js b/src/mmw/js/src/core/views.js
@@ -44,6 +44,16 @@ var dataCatalogActiveStyle = {
     fillOpacity: 0.2
 };
 
+var dataCatalogDetailStyle = {
+    stroke: true,
+    color: 'steelblue',
+    weight: 3,
+    opacity: 1,
+    fill: true,
+    fillColor: 'steelblue',
+    fillOpacity: 0.5
+};
+
 var selectedGeocoderAreaStyle = {
     stroke: true,
     fill: true,
@@ -207,6 +217,7 @@ var MapView = Marionette.ItemView.extend({
         'change:maskLayerApplied': 'toggleMask',
         'change:dataCatalogResults': 'renderDataCatalogResults',
         'change:dataCatalogActiveResult': 'renderDataCatalogActiveResult',
+        'change:dataCatalogDetailResult': 'renderDataCatalogDetailResult',
         'change:selectedGeocoderArea': 'renderSelectedGeocoderArea',
     },
 
@@ -225,6 +236,7 @@ var MapView = Marionette.ItemView.extend({
     // L.FeatureGroup instance
     _dataCatalogResultsLayer: null,
     _dataCatalogActiveLayer: null,
+    _dataCatalogDetailLayer: null,
 
     // The shape for a selected geocoder boundary result
     // L.FeatureGroup instance
@@ -260,6 +272,7 @@ var MapView = Marionette.ItemView.extend({
         this._modificationsLayer = new L.FeatureGroup();
         this._dataCatalogResultsLayer = new L.FeatureGroup();
         this._dataCatalogActiveLayer = new L.FeatureGroup();
+        this._dataCatalogDetailLayer = new L.FeatureGroup();
         this._selectedGeocoderAreaLayer = new L.FeatureGroup();
 
         this.fitToDefaultBounds();
@@ -300,6 +313,7 @@ var MapView = Marionette.ItemView.extend({
         map.addLayer(this._modificationsLayer);
         map.addLayer(this._dataCatalogResultsLayer);
         map.addLayer(this._dataCatalogActiveLayer);
+        map.addLayer(this._dataCatalogDetailLayer);
         map.addLayer(this._selectedGeocoderAreaLayer);
     },
 
@@ -398,6 +412,11 @@ var MapView = Marionette.ItemView.extend({
             // Get the maximum zoom level for the initial location
             this.updateGoogleMaxZoom({ target: this._leafletMap });
         }
+
+        if (settings.get('data_catalog_enabled')) {
+            this._leafletMap.on('zoomend', this.renderDataCatalogDetailResult, this);
+            this._leafletMap.on('moveend', this.renderDataCatalogDetailResult, this);
+        }
     },
 
     onBeforeDestroy: function() {
@@ -724,20 +743,33 @@ var MapView = Marionette.ItemView.extend({
     },
 
     renderDataCatalogActiveResult: function() {
-        var geom = this.model.get('dataCatalogActiveResult'),
-            mapBounds = this._leafletMap.getBounds();
+        var geom = this.model.get('dataCatalogActiveResult');
 
-        this._dataCatalogActiveLayer.clearLayers();
-        this.$el.removeClass('bigcz-highlight-map');
+        this._renderDataCatalogResult(geom, this._dataCatalogActiveLayer,
+            'bigcz-highlight-map', dataCatalogActiveStyle);
+    },
+
+    renderDataCatalogDetailResult: function() {
+        var geom = this.model.get('dataCatalogDetailResult');
+
+        this._renderDataCatalogResult(geom, this._dataCatalogDetailLayer,
+            'bigcz-detail-map', dataCatalogDetailStyle);
+    },
+
+    _renderDataCatalogResult: function(geom, featureGroup, className, style) {
+        var mapBounds = this._leafletMap.getBounds();
+
+        featureGroup.clearLayers();
+        this.$el.removeClass(className);
 
         if (geom) {
             if ((geom.type === 'MultiPolygon' || geom.type === 'Polygon') &&
                 drawUtils.shapeBoundingBox(geom).contains(mapBounds)) {
-                this.$el.addClass('bigcz-highlight-map');
+                this.$el.addClass(className);
             } else {
                 var layer = this.createDataCatalogShape(geom);
-                layer.setStyle(dataCatalogActiveStyle);
-                this._dataCatalogActiveLayer.addLayer(layer);
+                layer.setStyle(style);
+                featureGroup.addLayer(layer);
             }
         }
     },

diff --git a/src/mmw/js/src/data_catalog/views.js b/src/mmw/js/src/data_catalog/views.js
@@ -129,18 +129,22 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
 
         if (!detailResult) {
             this.closeDetails();
-            App.map.set('dataCatalogActiveResult', null);
+            App.map.set('dataCatalogDetailResult', null);
         } else {
             this.detailsRegion.show(new ResultDetailsView({
                 model: detailResult,
                 activeCatalog: activeCatalog.id
             }));
-            App.map.set('dataCatalogActiveResult', detailResult.get('geom'));
+            App.map.set({
+                'dataCatalogResults': null,
+                'dataCatalogDetailResult': detailResult.get('geom')
+            });
         }
     },
 
     closeDetails: function() {
         this.detailsRegion.empty();
+        this.updateMap();
     },
 
     doSearch: function() {

diff --git a/src/mmw/sass/base/_map.scss b/src/mmw/sass/base/_map.scss
@@ -37,6 +37,14 @@
     height: 100%;
     position: absolute;
   }
+
+  &.bigcz-detail-map:after {
+    content: "";
+    border: 3px solid steelblue;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
 }
 
 #overlay-subclass-vector .disabled, #overlay-subclass-raster .disabled {