Colormap selection working

app/api/tiler.py

@@ -127,11 +127,9 @@ class Metadata(TaskNestedView):
 
         formula = self.request.query_params.get('formula')
         bands = self.request.query_params.get('bands')
-        color_map = self.request.query_params.get('color_map')
 
         if formula == '': formula = None
         if bands == '': bands = None
-        if color_map == '': color_map = None
 
         expr = lookup_formula(formula, bands)
 
@@ -139,22 +137,39 @@ class Metadata(TaskNestedView):
         raster_path = get_raster_path(task, tile_type)
         info = main.metadata(raster_path, pmin=pmin, pmax=pmax, histogram_bins=255, expr=expr)
 
-        if tile_type == 'plant':
+        cmap_labels = {
+            'jet_r': 'Jet',
+            "terrain_r": "Terrain",
+            "rdylgn": "Index",
+            "spectral_r": "Spectral",
+            "pastel1_r": "Pastel",
+        }
+
+        colormaps = []
+        if tile_type in ['dsm', 'dtm']:
+            colormaps = ['jet_r', 'terrain_r', 'spectral_r', 'pastel1_r']
+        elif formula and bands:
+            colormaps = ['rdylgn']
             info['algorithms'] = get_algorithm_list(),
             info['filters'] = get_camera_filters_list()
 
+        info['color_maps'] = []
+        if colormaps:
+            for cmap in colormaps:
+                try:
+                    info['color_maps'].append({
+                        'key': cmap,
+                        'color_map': get_colormap(cmap, format="gdal"),
+                        'label': cmap_labels.get(cmap, cmap)
+                    })
+                except FileNotFoundError:
+                    raise exceptions.ValidationError("Not a valid color_map value: %s" % cmap)
+
         del info['address']
         info['name'] = task.name
         info['scheme'] = 'xyz'
         info['tiles'] = [get_tile_url(task, tile_type, self.request.query_params)]
 
-        if color_map:
-            try:
-                color_map = get_colormap(color_map, format="gdal")
-                info['color_map'] = color_map
-            except FileNotFoundError:
-                raise exceptions.ValidationError("Not a valid color_map value")
-
         return Response(info)
 
 def get_elevation_tiles(elevation, url, x, y, z, tilesize, nodata):

app/static/app/js/components/Histogram.jsx

@@ -75,12 +75,7 @@ export default class Histogram extends React.Component {
                     .attr('y1', '0%')
                     .attr('x2', '100%')
                     .attr('y2', '0%');
-        this.props.colorMap.forEach((color, i) => {
-            this.colorMapElem.append("stop")
-                        .attr('offset', `${(i / (this.props.colorMap.length - 1)) * 100.0}%`)
-                        .attr('stop-color', `rgb(${color.join(",")})`);
-        });
-        this.updateColorMap();
+        this.updateColorMap(true);
     }
 
     let svg = svgContainer.append("g")
@@ -223,17 +218,28 @@ export default class Histogram extends React.Component {
     
   componentDidUpdate(prevProps, prevState){
       if (prevState.min !== this.state.min || 
-          prevState.max !== this.state.max){
+          prevState.max !== this.state.max ||
+          prevProps.colorMap !== this.props.colorMap){
           if (!this.maxDown && !this.minDown) this.redraw();
-          this.updateColorMap();
+          this.updateColorMap(prevProps.colorMap !== this.props.colorMap);
           
           if (this.props.onUpdate !== undefined) this.props.onUpdate({min: this.state.min, max: this.state.max});
       }
   }
     
-  updateColorMap = () => {
+  updateColorMap = (recreate) => {
     if (!this.colorMapElem) return;
 
+    if (recreate){
+        this.colorMapElem.select("stop").remove();
+
+        this.props.colorMap.forEach((color, i) => {
+            this.colorMapElem.append("stop")
+                        .attr('offset', `${(i / (this.props.colorMap.length - 1)) * 100.0}%`)
+                        .attr('stop-color', `rgb(${color.join(",")})`);
+        });
+    }
+
     const { min, max } = this.state;
 
     const minPerc = Math.abs(min - this.rangeX[0]) / (this.rangeX[1] - this.rangeX[0]) * 100.0;

app/static/app/js/components/LayersControlLayer.jsx

@@ -23,24 +23,16 @@ export default class LayersControlLayer extends React.Component {
     const url = this.getLayerUrl();
     const params = Utils.queryParams({search: url.slice(url.indexOf("?"))});
 
-    this.colorMaps = [
-        {key: "jet_r", label: "Jet"},
-        {key: "terrain_r", label: "Terrain"},
-        {key: "rdylgn", label: "RYG"},
-        {key: "spectral_r", label: "Spectral"},
-        {key: "pastel1_r", label: "Pastel"},
-        {key: "reds_r", label: "Red"},
-        {key: "greens_r", label: "Greens"},
-        {key: "blues_r", label: "Blue"}
-    ];
+    this.meta = props.layer[Symbol.for("meta")];
+    this.tmeta = props.layer[Symbol.for("tile-meta")];
 
     this.state = {
         visible: true,
         expanded: props.expanded,
-        color_map: params.color_map || "",
+        colorMap: params.color_map || "",
         formula: params.formula || "",
         bands: params.bands || "",
-        hillshade: params.hillshade || ""
+        hillshade: params.hillshade || "",
     };
 
     this.rescale = "";
@@ -68,7 +60,7 @@ export default class LayersControlLayer extends React.Component {
   }
 
   handleSelectColor = e => {
-    this.setState({color_map: e.target.value});
+    this.setState({colorMap: e.target.value});
   }
 
   updateLayer = () => {
@@ -79,13 +71,13 @@ export default class LayersControlLayer extends React.Component {
 
       this.updateTimer = setTimeout(() => {
         const url = this.getLayerUrl();
-        const { color_map,
+        const { colorMap,
                 formula,
                 bands,
                 hillshade } = this.state;
 
         const newUrl = (url.indexOf("?") !== -1 ? url.slice(0, url.indexOf("?")) : url) + Utils.toSearchQuery({
-            color_map,
+            color_map: colorMap,
             formula,
             bands,
             hillshade,
@@ -110,11 +102,14 @@ export default class LayersControlLayer extends React.Component {
   }
 
   render(){
-    const { layer } = this.props;
-    const { color_map } = this.state;
+    const { colorMap } = this.state;
+    const { meta, tmeta } = this;
+    const { color_maps } = tmeta;
 
-    const tmeta = layer[Symbol.for("tile-meta")];
-    const meta = layer[Symbol.for("meta")];
+    let cmapValues = null;
+    if (colorMap){
+        cmapValues = (color_maps.find(c => c.key === colorMap) || {}).color_map;
+    }
 
     return (<div className="layers-control-layer">
         <ExpandButton bind={[this, 'expanded']} /><Checkbox bind={[this, 'visible']}/> 
@@ -124,15 +119,15 @@ export default class LayersControlLayer extends React.Component {
         <div className="layer-expanded">
             <Histogram width={280} 
                         statistics={tmeta.statistics} 
-                        colorMap={tmeta.color_map}
+                        colorMap={cmapValues}
                         onUpdate={this.handleHistogramUpdate} />
 
-            {this.state.color_map ? 
+            {colorMap && color_maps.length ? 
             <div className="row form-group form-inline">
                 <label className="col-sm-3 control-label">Color:</label>
                 <div className="col-sm-9 ">
-                    <select className="form-control" value={color_map} onChange={this.handleSelectColor}>
-                        {this.colorMaps.map(c => <option key={c.key} value={c.key}>{c.label}</option>)}
+                    <select className="form-control" value={colorMap} onChange={this.handleSelectColor}>
+                        {color_maps.map(c => <option key={c.key} value={c.key}>{c.label}</option>)}
                     </select>
                 </div>
             </div> : ""}

app/static/app/js/components/Map.jsx

@@ -123,7 +123,6 @@ class Map extends React.Component {
                 
                 tileUrl = tileUrl.slice(0, tileUrl.indexOf("?")) + Utils.toSearchQuery(params);
             }
-            console.log(tileUrl);
 
             const layer = Leaflet.tileLayer(tileUrl, {
                   bounds,