Update 2023-10-31T15:31:15.761Z

GreenInfo-Network · Oct 31, 2023 · 0a94deb · 0a94deb
1 parent 345dd79
commit 0a94deb
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/app/models/building_color_bucket_calculator.js b/app/models/building_color_bucket_calculator.js
@@ -41,18 +41,27 @@ define(['underscore', 'd3'], function (_, d3) {
     var gradient = this.colorGradient();
     var cssFillType = this.cssFillType;
     var css;
+
+    // for polygons (only) we have to add a rule to "undo" the default polygon pattern
+    // otherwise it applies to all polygons
+    var defaultHatchCSSOpacityRule = 'polygon-pattern-opacity: 0;';
     if (this.thresholds) {
       css = this.memoized.cartoCSS[this.fieldName] = _.map(stops, function (stop, i) {
         var min = _.min(gradient.invertExtent(stop));
+        var cssText;
         if (i === 0) {
-          return "[".concat(fieldName, "<").concat(min, "]{").concat(cssFillType, ":").concat(stop, "}");
+          cssText = cssFillType === 'polygon-fill' ? "[".concat(fieldName, "<").concat(min, "]{").concat(cssFillType, ":").concat(stop, "; ").concat(defaultHatchCSSOpacityRule, "}") : "[".concat(fieldName, "<").concat(min, "]{").concat(cssFillType, ":").concat(stop, "}");
+          return cssText;
         }
-        return "[".concat(fieldName, ">=").concat(min, "]{").concat(cssFillType, ":").concat(stop, "}");
+        cssText = cssFillType === 'polygon-fill' ? "[".concat(fieldName, ">=").concat(min, "]{").concat(cssFillType, ":").concat(stop, "; ").concat(defaultHatchCSSOpacityRule, "}") : "[".concat(fieldName, ">=").concat(min, "]{").concat(cssFillType, ":").concat(stop, "; ").concat(defaultHatchCSSOpacityRule, "}");
+        return cssText;
       });
     } else {
       css = this.memoized.cartoCSS[this.fieldName] = _.map(stops, function (stop) {
         var min = _.min(gradient.invertExtent(stop));
-        return "[".concat(fieldName, ">=").concat(min, "]{").concat(cssFillType, ":").concat(stop, "}");
+        var cssText;
+        cssText = cssFillType === 'polygon-fill' ? "[".concat(fieldName, ">=").concat(min, "]{").concat(cssFillType, ":").concat(stop, "; ").concat(defaultHatchCSSOpacityRule, "}") : "[".concat(fieldName, ">=").concat(min, "]{").concat(cssFillType, ":").concat(stop, "}");
+        return cssText;
       });
     }
     return css;

diff --git a/app/views/map/building_layer.js b/app/views/map/building_layer.js
@@ -13,17 +13,24 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'models/building_color_bucket_calculator', 'text!templates/map/building_info.html'], function ($, _, Backbone, CityBuildings, BuildingColorBucketCalculator, BuildingInfoTemplate) {
   var baseCartoCSS = {
     dots: ['{marker-fill: #CCC;' + 'marker-fill-opacity: 0.9;' + 'marker-line-color: #FFF;' + 'marker-line-width: 0.5;' + 'marker-line-opacity: 1;' + 'marker-placement: point;' + 'marker-multi-policy: largest;' + 'marker-type: ellipse;' + 'marker-allow-overlap: true;' + 'marker-clip: false;}'],
-    footprints: ['{polygon-fill: #CCC;' + 'polygon-opacity: 0.9;' + 'line-width: 1;' + 'line-color: #FFF;' + 'line-opacity: 0.5;}']
+    footprints: ['{polygon-fill: #CCC;' + 'polygon-opacity: 0.9;' + 'line-width: 1;' + 'line-color: #FFF;' + 'line-opacity: 0.5;}'],
+    // A hatch polygon that only applies to buildings with null values for the given measure
+    // we make the pattern transparent for all non-null values in building_color_bucket_calculator.js
+    footprints_hatch: ['{polygon-fill: #CCC;' + 'polygon-opacity: 0.9;' + 'line-width: 1;' + 'line-color: #FFF;' + 'line-opacity: 0.5;' + 'polygon-pattern-file: url(https://seattle-buildings-polygon-hatch-images.s3.us-west-1.amazonaws.com/hatch_double_cross_grey_45_narrow_thin_transparent.png);' + 'polygon-pattern-opacity: 1;}']
   };
-  var CartoStyleSheet = function CartoStyleSheet(tableName, bucketCalculator, mode) {
+  var CartoStyleSheet = function CartoStyleSheet(tableName, hatchCss, bucketCalculator, mode) {
     this.tableName = tableName;
+    this.hatchCss = hatchCss;
     this.bucketCalculator = bucketCalculator;
     this.mode = mode;
   };
   CartoStyleSheet.prototype.toCartoCSS = function () {
     var bucketCSS = this.bucketCalculator.toCartoCSS();
     var tableName = this.tableName;
-    var styles = _toConsumableArray(baseCartoCSS[this.mode]).concat(bucketCSS);
+    var mode = this.mode;
+    var hatch = this.hatchCss;
+    if (hatch && mode === 'footprints') mode = "".concat(mode, "_hatch");
+    var styles = _toConsumableArray(baseCartoCSS[mode]).concat(bucketCSS);
     styles = _.reject(styles, function (s) {
       return !s;
     });
@@ -429,7 +436,6 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
         building: buildingId
       };
       var selectedBuildings = this.makeSelectedBuildingsState(buildingId);
-      console.log(selectedBuildings);
       if (selectedBuildings) {
         state.selected_buildings = selectedBuildings;
       }
@@ -487,16 +493,14 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
         return lyr.field_name === layer;
       });
       var fieldName = cityLayer.field_name;
+      var hatchCss = cityLayer.hatch_null_css;
       var buckets = cityLayer.range_slice_count;
       var colorStops = cityLayer.color_range;
       var thresholds = cityLayer.thresholds ? state.get('layer_thresholds') : null;
       var calculator = new BuildingColorBucketCalculator(buildings, fieldName, buckets, colorStops, cssFillType, thresholds);
-      var stylesheet = new CartoStyleSheet(buildings.tableName, calculator, layerMode);
-      // console.log(calculator);
-      // console.log(stylesheet);
+      var stylesheet = new CartoStyleSheet(buildings.tableName, hatchCss, calculator, layerMode);
       var sql = layerMode === 'dots' ? buildings.toSql(year, state.get('categories'), state.get('filters')) : this.footprintGenerateSql.sql(buildings.toSqlComponents(year, state.get('categories'), state.get('filters'), 'b.'));
       var cartocss = stylesheet.toCartoCSS();
-      // console.log(cartocss);
       var interactivity = this.state.get('city').get('property_id');
       return {
         sql: sql,
@@ -512,8 +516,6 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
 
       // skip if we are loading `cartoLayer`
       if (this.cartoLoading) return;
-      console.log('user_name: ', this.allBuildings.cartoDbUser);
-      console.log('sublayers: ', this.toCartoSublayer());
       this.cartoLoading = true;
       cartodb.createLayer(this.leafletMap, {
         user_name: this.allBuildings.cartoDbUser,

diff --git a/app/views/map/filter.js b/app/views/map/filter.js
@@ -202,6 +202,7 @@ define(['jquery', 'underscore', 'backbone', 'd3', 'ionrangeslider', 'models/buil
       var $section = this.$section();
       var filterRange = this.layer.filter_range;
       var rangeSliceCount = this.layer.range_slice_count;
+      if (fieldName === 'total_ghg_emissions_intensity') debugger;
       var extent = this.bucketCalculator.toExtent();
       var gradientCalculator = this.gradientCalculator;
       var filterTemplate = _.template(FilterTemplate);

diff --git a/cities/seattle.json b/cities/seattle.json
@@ -90,6 +90,7 @@
             "range_slice_count": 18,
             "section": "Greenhouse Gas Emissions",
             "color_range": ["#1f5dbe","#599b67","#ffd552","#da863f","#ab2328"],
+            "hatch_null_css": true,
             "unit": "Metric Tons CO₂e",
             "filter_range": {"min" : 0, "max" : 500},
             "formatter": "fixed-1",
@@ -102,10 +103,11 @@
             "range_slice_count": 18,
             "section": "Greenhouse Gas Emissions",
             "color_range": ["#1f5dbe","#599b67","#ffd552","#da863f","#ab2328"],
+            "hatch_null_css": true,
             "unit": "Kilograms CO₂e/ft²",
             "formatter": "fixed-1",
             "filter_range": {"min" : 0, "max" : 10},
-            "description": "The  total Greenhouse Gas (GHG) Emissions, divided by the floor area of the building, in kilograms of carbon dioxide equivalent (CO2e) per square foot."
+            "description": "The total Greenhouse Gas (GHG) Emissions, divided by the floor area of the building, in kilograms of carbon dioxide equivalent (CO2e) per square foot."
         },
         {
             "title": "Building EUI Quartiles",
@@ -114,6 +116,7 @@
             "display_type": "range",
             "range_slice_count": 4,
             "filter_range": {"min": 0, "max" : 4},
+            "hatch_null_css": true,
             "section": "Energy Performance Metrics",
             "color_range": ["#1F5DBE", "#90AE60", "#F7C34D", "#C04F31"],
             "formatter": "threshold",
@@ -142,6 +145,7 @@
             "range_slice_count": 18,
             "section": "Energy Performance Metrics",
             "color_range": ["#1f5dbe","#599b67","#ffd552","#da863f","#ab2328"],
+            "hatch_null_css": true,
             "unit": "kBtu",
             "formatter": "fixed-1",
             "filter_range": {"min": 0, "max": 1500},