Improvements to Geohash appearance

- Enable adding outlines to GeoJSON
- Enable setting colors with alpha values in Cesium layer color palettes
- Enable setting the min and max for a color palette dynamically
- Use all of these features to set reasonable defaults for the Cesium Geohash layer

Issues #2123, #2124, #2125, #1720

src/js/collections/maps/AssetColors.js

@@ -34,6 +34,22 @@ define(
         */
         model: AssetColor,
 
+        /**
+         * Add custom sort functionality such that values are sorted
+         * numerically, but keep the special value key words "min" and "max" at
+         * the beginning or end of the collection, respectively.
+         */
+        comparator: function (color) {
+          let value = color.get('value');
+          if (value === 'min') {
+            return -Infinity;
+          } else if (value === 'max') {
+            return Infinity;
+          } else {
+            return value
+          }
+        },
+
         /**
          * Finds the last color model in the collection. If there are no colors in the
          * collection, returns the default color set in a new Asset Color model.
@@ -45,7 +61,20 @@ define(
             defaultColor = new AssetColor();
           }
           return defaultColor
+        },
+
+        /**
+         * For any attribute that exists in the models in this collection, return an
+         * array of the values for that attribute.
+         * @param {string} attr - The attribute to get the values for.
+         * @return {Array}
+         */
+        getAttr: function(attr) {
+          return this.map(function (model) {
+            return model.get(attr);
+          });
         }
+
       }
     );
 

src/js/collections/maps/Geohashes.js

@@ -144,6 +144,16 @@ define([
         }
       },
 
+      /**
+       * Get an array of all the values for a given property in the geohash
+       * models in this collection.
+       * @param {string} attr The key of the property in the properties object
+       * in each geohash model.
+       */
+      getAttr(attr) {
+        return this.models.map((geohash) => geohash.get(attr));
+      },
+
       /**
        * Splits a given bounding box if it crosses the prime meridian. Returns
        * an array of bounding boxes.

src/js/models/AppModel.js

@@ -110,10 +110,6 @@ define(['jquery', 'underscore', 'backbone'],
       catalogSearchMapOptions: {
         showToolbar: false,
         layers: [
-          {
-              "type": "CesiumGeohash",
-              "opacity": 0.7,
-          },
           {
               "label": "Satellite imagery",
               "icon": "urn:uuid:4177c2e1-3037-4964-bf00-5f13182308d9",

src/js/models/maps/AssetColor.js

@@ -76,6 +76,8 @@ define(
          * red in this color.
          * @property {number} [green=1] A number between 0 and 1 indicating the intensity of
          * red in this color.
+         * @property {number} [alpha=1] A number between 0 and 1 indicating the opacity of
+         * this color.
          */
 
         /**
@@ -97,7 +99,8 @@ define(
             color: {
               red: 1,
               blue: 1,
-              green: 1
+              green: 1,
+              alpha: 1
             }
           }
         },
@@ -112,15 +115,23 @@ define(
             // If the color is a hex code instead of an object with RGB values, then
             // convert it.
             if (colorConfig && colorConfig.color && typeof colorConfig.color === 'string') {
-              // Assume the string is an hex color code and convert it to RGB
-              var rgb = this.hexToRGB(colorConfig.color)
-              if (rgb) {
-                this.set('color', rgb)
-              } else {
-                // Otherwise, the color is invalid, set it to the default
-                this.set('color', this.defaults().color)
-              }
+              // Assume the string is an hex color code and convert it to RGBA,
+              // otherwise use the default color
+              this.set('color',
+                this.hexToRGBA(colorConfig.color) ||
+                this.defaults().color
+              )
             }
+            // Set missing RGB values to 0, and alpha to 1
+            let color = this.get('color');
+            color.red = color.red || 0;
+            color.green = color.green || 0;
+            color.blue = color.blue || 0;
+            if (!color.alpha && color.alpha !== 0) {
+              color.alpha = 1;
+            }
+            this.set('color', color)
+
           }
           catch (error) {
             console.log(
@@ -130,86 +141,22 @@ define(
           }
         },
 
+
         /**
-         * Converts hex color values to RGB values between 0 and 1
-         *
-         * @param {string} hex a color in hexadecimal format
-         * @return {Color} a color in RGB format
-        */
-        hexToRGB: function (hex) {
-          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+         * Converts an 6 to 8 digit hex color value to RGBA values between 0 and 1
+         * @param {string} hex - A hex color code, e.g. '#44A96A' or '#44A96A88'
+         * @return {Color} - The RGBA values of the color
+         */
+        hexToRGBA: function (hex) {
+          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
           return result ? {
             red: parseInt(result[1], 16) / 255,
             green: parseInt(result[2], 16) / 255,
-            blue: parseInt(result[3], 16) / 255
+            blue: parseInt(result[3], 16) / 255,
+            alpha: parseInt(result[4], 16) / 255
           } : null;
         },
 
-        // /** 
-        //  * Parses the given input into a JSON object to be set on the model.
-        //  *
-        //  * @param {TODO} input - The raw response object
-        //  * @return {TODO} - The JSON object of all the AssetColor attributes
-        //  */
-        // parse: function (input) {
-
-        //   try {
-        //     // var modelJSON = {};
-
-        //     // return modelJSON
-
-        //   }
-        //   catch (error) {
-        //     console.log(
-        //       'There was an error parsing a AssetColor model' +
-        //       '. Error details: ' + error
-        //     );
-        //   }
-
-        // },
-
-        // /**
-        //  * Overrides the default Backbone.Model.validate.function() to check if this if
-        //  * the values set on this model are valid.
-        //  * 
-        //  * @param {Object} [attrs] - A literal object of model attributes to validate.
-        //  * @param {Object} [options] - A literal object of options for this validation
-        //  * process
-        //  * 
-        //  * @return {Object} - Returns a literal object with the invalid attributes and
-        //  * their corresponding error message, if there are any. If there are no errors,
-        //  * returns nothing.
-        //  */
-        // validate: function (attrs, options) {
-        //   try {
-
-        //   }
-        //   catch (error) {
-        //     console.log(
-        //       'There was an error validating a AssetColor model' +
-        //       '. Error details: ' + error
-        //     );
-        //   }
-        // },
-
-        // /**
-        //  * Creates a string using the values set on this model's attributes.
-        //  * @return {string} The AssetColor string
-        //  */
-        // serialize: function () {
-        //   try {
-        //     var serializedAssetColor = "";
-
-        //     return serializedAssetColor;
-        //   }
-        //   catch (error) {
-        //     console.log(
-        //       'There was an error serializing a AssetColor model' +
-        //       '. Error details: ' + error
-        //     );
-        //   }
-        // },
-
       });
 
     return AssetColor;