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 · Aug 30, 2017 · b596fe9 · b596fe9
1 parent 8686ef2
commit b596fe9
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 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,
@@ -206,7 +216,8 @@ var MapView = Marionette.ItemView.extend({
         'change:size': 'toggleMapSize',
         'change:maskLayerApplied': 'toggleMask',
         'change:dataCatalogResults': 'renderDataCatalogResults',
-        'change:dataCatalogActiveResult': 'renderDataCatalogActiveResult',
+        'change:dataCatalogActiveResult': 'renderDataCatalogResult',
+        'change:dataCatalogDetailResult': 'renderDataCatalogResult',
         '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);
     },
 
@@ -723,21 +737,36 @@ var MapView = Marionette.ItemView.extend({
         }
     },
 
-    renderDataCatalogActiveResult: function() {
-        var geom = this.model.get('dataCatalogActiveResult'),
-            mapBounds = this._leafletMap.getBounds();
+    renderDataCatalogResult: function(e) {
+        var updatedAttributeName = _.keys(e.changed)[0],
+            geom = this.model.get(updatedAttributeName),
+            mapBounds = this._leafletMap.getBounds(),
+            self = this,
+            optionsMap = {
+                'dataCatalogActiveResult': {
+                    className: 'bigcz-highlight-map',
+                    style: dataCatalogActiveStyle,
+                    layer: self._dataCatalogActiveLayer
+                },
+                'dataCatalogDetailResult': {
+                    className: 'bigcz-detail-map',
+                    style: dataCatalogDetailStyle,
+                    layer: self._dataCatalogDetailLayer
+                }
+            },
+            options = optionsMap[updatedAttributeName];
 
-        this._dataCatalogActiveLayer.clearLayers();
-        this.$el.removeClass('bigcz-highlight-map');
+        options.layer.clearLayers();
+        this.$el.removeClass(options.className);
 
         if (geom) {
             if ((geom.type === 'MultiPolygon' || geom.type === 'Polygon') &&
                 drawUtils.shapeBoundingBox(geom).contains(mapBounds)) {
-                this.$el.addClass('bigcz-highlight-map');
+                this.$el.addClass(options.className);
             } else {
                 var layer = this.createDataCatalogShape(geom);
-                layer.setStyle(dataCatalogActiveStyle);
-                this._dataCatalogActiveLayer.addLayer(layer);
+                layer.setStyle(options.style);
+                options.layer.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,20 @@ 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);
+            App.map.set('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 {