Adding Colorbars
CMC supports a few different colorbar formats, which are described in the Developer Manual. For most layers, we recommend using a json-fixed colorbar (which is a json defined mapping of value string:color string that can then be rendered onto a canvas. For the new raster layers, this is the format we will use.
Adding a New Palette Configuration
First, duplicate src/default_data/_core_default-data/palettes.json to src/default_data/demo-default-data. Now edit the file and remove all configurations except for:
{
"paletteArray": [
{
"name": "GIBS_SST",
"values": [...]
}
]
}
Now add the following palette configuration for the Sea Surface Precipitation layers. This is a json-fixed type colorbar which means it is json encoded and maps a specific value string to a specific color string.
{
"name": "AMSR2_Surface_Precipitation_Rate",
"values": [
["0.105 - 0.209", "800080ff"],
["0.209 - 0.314", "850085ff"],
["0.314 - 0.418", "8a008aff"],
["0.418 - 0.523", "8f008fff"],
["0.523 - 0.628", "950095ff"],
["0.628 - 0.732", "9a009aff"],
["0.732 - 0.837", "9f009fff"],
["0.837 - 0.941", "a400a4ff"],
["0.941 - 1.046", "aa00aaff"],
["1.046 - 1.151", "af00afff"],
["1.151 - 1.255", "b500b5ff"],
["1.255 - 1.36", "ba00baff"],
["1.36 - 1.464", "bf00bfff"],
["1.464 - 1.569", "c400c4ff"],
["1.569 - 1.674", "ca00caff"],
["1.674 - 1.778", "cf00cfff"],
["1.778 - 1.883", "d500d5ff"],
["1.883 - 1.987", "da00daff"],
["1.987 - 2.092", "df00dfff"],
["2.092 - 2.197", "e400e4ff"],
["2.197 - 2.301", "ea00eaff"],
["2.301 - 2.406", "ef00efff"],
["2.406 - 2.51", "f400f4ff"],
["2.51 - 2.615", "ff00ffff"],
["2.615 - 2.72", "f800ffff"],
["2.72 - 2.824", "f100ffff"],
["2.824 - 2.929", "ea00ffff"],
["2.929 - 3.033", "e300ffff"],
["3.033 - 3.138", "dc00ffff"],
["3.138 - 3.243", "d400ffff"],
["3.243 - 3.347", "cd00ffff"],
["3.347 - 3.452", "c600ffff"],
["3.452 - 3.556", "bf00ffff"],
["3.556 - 3.661", "b800ffff"],
["3.661 - 3.766", "b100ffff"],
["3.766 - 3.87", "aa00ffff"],
["3.87 - 3.975", "a300ffff"],
["3.975 - 4.079", "9c00ffff"],
["4.079 - 4.184", "9500ffff"],
["4.184 - 4.289", "8e00ffff"],
["4.289 - 4.393", "8700ffff"],
["4.393 - 4.498", "7f00ffff"],
["4.498 - 4.603", "7800ffff"],
["4.603 - 4.707", "7100ffff"],
["4.707 - 4.812", "6a00ffff"],
["4.812 - 4.916", "6300ffff"],
["4.916 - 5.021", "5c00ffff"],
["5.021 - 5.126", "5500ffff"],
["5.126 - 5.23", "4e00ffff"],
["5.23 - 5.335", "4700ffff"],
["5.335 - 5.439", "4000ffff"],
["5.439 - 5.544", "3900ffff"],
["5.544 - 5.649", "3200ffff"],
["5.649 - 5.753", "2a00ffff"],
["5.753 - 5.858", "2300ffff"],
["5.858 - 5.962", "1c00ffff"],
["5.962 - 6.067", "1500ffff"],
["6.067 - 6.172", "0e00ffff"],
["6.172 - 6.276", "0700ffff"],
["6.276 - 6.381", "0000ffff"],
["6.381 - 6.485", "0007ffff"],
["6.485 - 6.59", "000effff"],
["6.59 - 6.695", "0015ffff"],
["6.695 - 6.799", "001cffff"],
["6.799 - 6.904", "0023ffff"],
["6.904 - 7.008", "002bffff"],
["7.008 - 7.113", "0032ffff"],
["7.113 - 7.218", "0039ffff"],
["7.218 - 7.322", "0040ffff"],
["7.322 - 7.427", "0047ffff"],
["7.427 - 7.531", "004effff"],
["7.531 - 7.636", "0055ffff"],
["7.636 - 7.741", "005cffff"],
["7.741 - 7.845", "0063ffff"],
["7.845 - 7.95", "006affff"],
["7.95 - 8.054", "0071ffff"],
["8.054 - 8.159", "0078ffff"],
["8.159 - 8.264", "0080ffff"],
["8.264 - 8.368", "0087ffff"],
["8.368 - 8.473", "008effff"],
["8.473 - 8.577", "0095ffff"],
["8.577 - 8.682", "009cffff"],
["8.682 - 8.787", "00a3ffff"],
["8.787 - 8.891", "00aaffff"],
["8.891 - 8.996", "00b1ffff"],
["8.996 - 9.1", "00b8ffff"],
["9.1 - 9.205", "00bfffff"],
["9.205 - 9.31", "00c6ffff"],
["9.31 - 9.414", "00cdffff"],
["9.414 - 9.519", "00d5ffff"],
["9.519 - 9.623", "00dcffff"],
["9.623 - 9.728", "00e3ffff"],
["9.728 - 9.833", "00eaffff"],
["9.833 - 9.937", "00f1ffff"],
["9.937 - 10.042", "00f8ffff"],
["10.042 - 10.146", "00ffffff"],
["10.146 - 10.251", "00fdf8ff"],
["10.251 - 10.356", "00faf1ff"],
["10.356 - 10.46", "00f8eaff"],
["10.46 - 10.565", "00f6e3ff"],
["10.565 - 10.669", "00f3dcff"],
["10.669 - 10.774", "00f1d4ff"],
["10.774 - 10.879", "00eecdff"],
["10.879 - 10.983", "00ecc6ff"],
["10.983 - 11.088", "00eabfff"],
["11.088 - 11.192", "00e7b8ff"],
["11.192 - 11.297", "00e5b1ff"],
["11.297 - 11.402", "00e3aaff"],
["11.402 - 11.506", "00e0a3ff"],
["11.506 - 11.611", "00de9cff"],
["11.611 - 11.715", "00dc95ff"],
["11.715 - 11.82", "00d98eff"],
["11.82 - 11.925", "00d787ff"],
["11.925 - 12.029", "00d47fff"],
["12.029 - 12.134", "00d278ff"],
["12.134 - 12.238", "00d071ff"],
["12.238 - 12.343", "00cd6aff"],
["12.343 - 12.448", "00cb63ff"],
["12.448 - 12.552", "00c95cff"],
["12.552 - 12.657", "00c655ff"],
["12.657 - 12.762", "00c44eff"],
["12.762 - 12.866", "00c247ff"],
["12.866 - 12.971", "00bf40ff"],
["12.971 - 13.075", "00bd39ff"],
["13.075 - 13.18", "00bb32ff"],
["13.18 - 13.285", "00b82aff"],
["13.285 - 13.389", "00b623ff"],
["13.389 - 13.494", "00b31cff"],
["13.494 - 13.598", "00b115ff"],
["13.598 - 13.703", "00af0eff"],
["13.703 - 13.808", "00ac07ff"],
["13.808 - 13.912", "00aa00ff"],
["13.912 - 14.017", "07ac00ff"],
["14.017 - 14.121", "0eaf00ff"],
["14.121 - 14.226", "15b100ff"],
["14.226 - 14.331", "1cb300ff"],
["14.331 - 14.435", "23b600ff"],
["14.435 - 14.54", "2bb800ff"],
["14.54 - 14.644", "32bb00ff"],
["14.644 - 14.749", "39bd00ff"],
["14.749 - 14.854", "40bf00ff"],
["14.854 - 14.958", "47c200ff"],
["14.958 - 15.063", "4ec400ff"],
["15.063 - 15.167", "55c600ff"],
["15.167 - 15.272", "5cc900ff"],
["15.272 - 15.377", "63cb00ff"],
["15.377 - 15.481", "6acd00ff"],
["15.481 - 15.586", "71d000ff"],
["15.586 - 15.69", "78d200ff"],
["15.69 - 15.795", "80d500ff"],
["15.795 - 15.9", "87d700ff"],
["15.9 - 16.004", "8ed900ff"],
["16.004 - 16.109", "95dc00ff"],
["16.109 - 16.213", "9cde00ff"],
["16.213 - 16.318", "a3e000ff"],
["16.318 - 16.423", "aae300ff"],
["16.423 - 16.527", "b1e500ff"],
["16.527 - 16.632", "b8e700ff"],
["16.632 - 16.736", "bfea00ff"],
["16.736 - 16.841", "c6ec00ff"],
["16.841 - 16.946", "cdee00ff"],
["16.946 - 17.05", "d5f100ff"],
["17.05 - 17.155", "dcf300ff"],
["17.155 - 17.259", "e3f600ff"],
["17.259 - 17.364", "eaf800ff"],
["17.364 - 17.469", "f1fa00ff"],
["17.469 - 17.573", "f8fd00ff"],
["17.573 - 17.678", "ffff00ff"],
["17.678 - 17.782", "fff800ff"],
["17.782 - 17.887", "fff100ff"],
["17.887 - 17.992", "ffea00ff"],
["17.992 - 18.096", "ffe300ff"],
["18.096 - 18.201", "ffdc00ff"],
["18.201 - 18.305", "ffd400ff"],
["18.305 - 18.41", "ffcd00ff"],
["18.41 - 18.515", "ffc600ff"],
["18.515 - 18.619", "ffbf00ff"],
["18.619 - 18.724", "ffb800ff"],
["18.724 - 18.828", "ffb100ff"],
["18.828 - 18.933", "ffaa00ff"],
["18.933 - 19.038", "ffa300ff"],
["19.038 - 19.142", "ff9c00ff"],
["19.142 - 19.247", "ff9500ff"],
["19.247 - 19.351", "ff8e00ff"],
["19.351 - 19.456", "ff8700ff"],
["19.456 - 19.561", "ff7f00ff"],
["19.561 - 19.665", "ff7800ff"],
["19.665 - 19.77", "ff7100ff"],
["19.77 - 19.874", "ff6a00ff"],
["19.874 - 19.979", "ff6300ff"],
["19.979 - 20.084", "ff5c00ff"],
["20.084 - 20.188", "ff5500ff"],
["20.188 - 20.293", "ff4e00ff"],
["20.293 - 20.397", "ff4700ff"],
["20.397 - 20.502", "ff4000ff"],
["20.502 - 20.607", "ff3900ff"],
["20.607 - 20.711", "ff3200ff"],
["20.711 - 20.816", "ff2a00ff"],
["20.816 - 20.921", "ff2300ff"],
["20.921 - 21.025", "ff1c00ff"],
["21.025 - 21.13", "ff1500ff"],
["21.13 - 21.234", "ff0e00ff"],
["21.234 - 21.339", "ff0700ff"],
["21.339 - 21.444", "ff0000ff"],
["21.444 - 21.548", "ff0707ff"],
["21.548 - 21.653", "ff0f0fff"],
["21.653 - 21.757", "ff1616ff"],
["21.757 - 21.862", "ff1d1dff"],
["21.862 - 21.967", "ff2424ff"],
["21.967 - 22.071", "ff2c2cff"],
["22.071 - 22.176", "ff3333ff"],
["22.176 - 22.28", "ff3a3aff"],
["22.28 - 22.385", "ff4242ff"],
["22.385 - 22.49", "ff4949ff"],
["22.49 - 22.594", "ff5050ff"],
["22.594 - 22.699", "ff5757ff"],
["22.699 - 22.803", "ff5f5fff"],
["22.803 - 22.908", "ff6666ff"],
["22.908 - 23.013", "ff6d6dff"],
["23.013 - 23.117", "ff7575ff"],
["23.117 - 23.222", "ff7c7cff"],
["23.222 - 23.326", "ff8383ff"],
["23.326 - 23.431", "ff8a8aff"],
["23.431 - 23.536", "ff9292ff"],
["23.536 - 23.64", "ff9999ff"],
["23.64 - 23.745", "ffa0a0ff"],
["23.745 - 23.849", "ffa8a8ff"],
["23.849 - 23.954", "ffafafff"],
["23.954 - 24.059", "ffb6b6ff"],
["24.059 - 24.163", "ffbdbdff"],
["24.163 - 24.268", "ffc5c5ff"],
["24.268 - 24.372", "ffccccff"],
["24.372 - 24.477", "ffd3d3ff"],
["24.477 - 24.582", "ffdbdbff"],
["24.582 - 24.686", "ffe2e2ff"],
["24.686 - 24.791", "ffe9e9ff"],
["24.791 - 24.895", "fff0f0ff"],
["24.895 - 25.000", "fff8f8ff"],
[">= 25.000", "ffffffff"]
]
}
Setting the Colorbar in the Layer Config
Now we need to update the our layer configurations to use that colorbar.
Edit src/default-data/demo-default-data/layers.json and add the following configs to the AMSR2_Surface_Precipitation_Rate_Day_EPSG4326 and AMSR2_Surface_Precipitation_Rate_Night_EPSG4326 entries
{
"id": "AMSR2_Surface_Precipitation_Rate_Day_EPSG4326",
...
"min": 0,
"max": 25,
"units": "mm/hr",
...
"palette": {
"name": "AMSR2_Surface_Precipitation_Rate",
"handleAs": "json-fixed"
},
...
}
Note that we are adding min, max, and units keys, these will be displayed beneath the colorbar by default. We are specifying that this colobar is a json-fixed colorbar so that CMC will know to dynamically render it to a canvas and enable a value preview on hover for the colorbar.
Loading the New Palette Configuration
As we saw when first adding these layer configurations, we need to now modify the url configurations for the application so that it loads the correct file.
Edit src/constants/appConfig.js and add the following configuration
...
const APP_CONFIG = Immutable.fromJS({
...
URLS: {
...
paletteConfig: "default-data/demo-default-data/palettes.json"
}
...
});
Now save your work and refresh the browser. Now you should see colorbars for all data layers (except for the True Color layer) and when you hover over them, you should see a value preview.