Index: /issm/trunk-jpl/src/m/plot/applyoptions.js
===================================================================
--- /issm/trunk-jpl/src/m/plot/applyoptions.js	(revision 23050)
+++ /issm/trunk-jpl/src/m/plot/applyoptions.js	(revision 23051)
@@ -48,5 +48,6 @@
 			} //}}}
 			//{{{ Initialize colorbar canvas
-			ccanvasid = options.getfieldvalue('colorbarid', options.getfieldvalue('canvasid').replace('canvas','colorbar-canvas'));
+			let colorbarSlug = options.getfieldvalue('colorbarSlug', options.getfieldvalue('canvasid') + '-colorbar');
+			ccanvasid = colorbarSlug + '-canvas';
 			ccanvas = $('#'+ccanvasid)[0];
 			cwidth = ccanvas.width*options.getfieldvalue('colorbarwidth', 1);
@@ -80,5 +81,5 @@
 			//}}}
 			//{{{ Draw colorbar labels
-			clabelsid = options.getfieldvalue('colorbarid', ccanvasid).replace('canvas','labels');
+			clabelsid = colorbarSlug + '-labels';
 			clabels = $('#'+clabelsid);
 			var clabelstring = '';
@@ -98,7 +99,7 @@
 			//}}}
 			//{{{ Draw colorbar title
-			ctitleid = options.getfieldvalue('colorbarid', ccanvasid).replace('canvas','heading');
+			ctitleid = colorbarSlug + '-heading';
 			ctitle = $('#'+ctitleid);
-			if (options.exist('colorbartitle')) { ctitle.html(options.getfieldvalue('colorbartitle')); }
+			if (options.exist('colorbarHeader')) { ctitle.html(options.getfieldvalue('colorbarHeader')); }
 			//}}}
 		}
@@ -114,5 +115,5 @@
 	tcontext = tcanvas.getContext('2d');
 	tgradient = tcontext.createLinearGradient(0, 0, 0, 256);
-	
+
 	var cmap = options.getfieldvalue('colormap','jet');
 	var colorbar = colorbars[cmap];
@@ -124,5 +125,5 @@
 	tcontext.fillStyle = tgradient;
 	tcontext.fillRect(0, 0, 256, 256);
-	
+
 	//Allow for special texture colors, drawing each color in equal width vertical rectangles. The last rectanglar section is reserved for the colormap.
 	if (options.exist('maskregion')) {
@@ -139,5 +140,5 @@
 		}
 	}
-	
+
 	tURL = tcanvas.toDataURL();
 	if (options.getfieldvalue('clf','on')=='off') {
@@ -161,5 +162,5 @@
 	overlaycanvas = canvas.overlaycanvas;
 	ctx = overlaycanvas.getContext('2d');
-	
+
 	if (options.exist('textlabels')) {//{{{
 		//Attatch new overlay handler to display text labels
@@ -176,5 +177,5 @@
 
 				};
-				
+
 				// function declared in slr-gfm sim-front-end-controller.js
 				// if labels are behind the globe sphere then skip iteartion and do not display them
@@ -184,5 +185,5 @@
 					var x = (screenPoint[0] + 1.0) * (canvas.width / 2) + canvas.selector.offset().left;
 					var y = (-screenPoint[1] + 1.0) * (canvas.height / 2) + canvas.selector.offset().top;
-					
+
 					//Draw text
 					ctx.font = 'bold ' + String(textLabel.fontSize) + 'px Arial Black, sans-serif';
@@ -197,5 +198,5 @@
 		}
 	}//}}}
-		
+
 	//{{{ additional rendering nodes
 	if (options.exist('render')) {
@@ -216,5 +217,5 @@
 
 		var renderObjects = options.getfieldvalue('render',{});
-		
+
 		for (var renderObject in renderObjects) {
 			//Modify renderObejct?
@@ -311,5 +312,5 @@
 				node.geometryShader('Mesh', mesh, 'Vertices', [object.x, object.y, object.z], 'Indices', object.indices);
 			}
-			if ('axis' === renderObject && !('axis' in canvas.nodes)) {		
+			if ('axis' === renderObject && !('axis' in canvas.nodes)) {
 				node = new Node(
 					'canvas', canvas,
@@ -357,10 +358,10 @@
 			}
 			if ('clouds' === renderObject && !('clouds0' in canvas.nodes)) {
-				//clouds				
+				//clouds
 				var mesh = GL.Mesh.fromURL(canvas.assetsPath + '/obj/cloud.obj');
 				for (var i = 0; i < object.quantity; i++) {
 					//TODO: More options, less magic numbers. Add animation. Better shading.
-					var offset = [randomizeAxis(translation[0], object.range), 
-												randomizeCloudHeight(translation[1], object), 
+					var offset = [randomizeAxis(translation[0], object.range),
+												randomizeCloudHeight(translation[1], object),
 												randomizeAxis(translation[2], object.range)];
 					var randomSize = randomizeCloudSize(object.scale);
@@ -394,5 +395,5 @@
 					'rotation', [0, 0, 0]
 				);
-				
+
 				//For each target city, calculate the shortest line across the earth by performing a quaternion slerp.
 				//Treat source and target city as vectors to rotate to from the north pole.
@@ -412,6 +413,6 @@
 					var targetXYZ = vec3.fromValues(xcity[target], zcity[target], -ycity[target]);
 					var axis = vec3.cross(vec3.create(), sourceXYZ, targetXYZ);
-					vec3.normalize(axis, axis);		
-					
+					vec3.normalize(axis, axis);
+
 					//Get the total angle between the two cities.
 					var sourceXYZAxis = vec3.normalize(vec3.create(), sourceXYZ);
@@ -419,5 +420,5 @@
 					var dotProduct = vec3.dot(sourceXYZAxis, targetXYZAxis);
 					var totalAngle = Math.acos(dotProduct); //theta = arccos(u . v / (||u|| * ||v||); in this case, ||u|| and ||v|| are 1, since u and v are unit vectors.
-					
+
 					var lineQuat = quat.create();
 					for (var j = 1; j <= lineSteps; j++) {
@@ -425,5 +426,5 @@
 						var angle = j / lineSteps * totalAngle;
 						quat.setAxisAngle(lineQuat, axis, angle);
-						quat.normalize(lineQuat, lineQuat); 
+						quat.normalize(lineQuat, lineQuat);
 						vec3.transformQuat(lineXYZ, sourceXYZ, lineQuat);
 						//GL.LINES needs 2 points for each line - at the beginning, just use the sourceXYZ.
@@ -454,5 +455,5 @@
 		var minHeigth = object.height - 7000;
 		var randomHeight = (Math.random() * (maxHeight - minHeigth)) + minHeigth;
-		
+
 		return canvasGroundHeight + randomHeight;
 }
@@ -460,5 +461,5 @@
 // assumes that originAxisValue is the mid-value between min and max.
 function randomizeAxis(originAxisValue, range) {
-		return originAxisValue + (Math.random() - 0.5) * (range * 2); 
+		return originAxisValue + (Math.random() - 0.5) * (range * 2);
 }
 
@@ -466,5 +467,5 @@
 	var maxResize = 1.3;
 	var minResize = 0.5;
-	var randomizationFactor = Math.random() * (maxResize - minResize) + minResize; 
+	var randomizationFactor = Math.random() * (maxResize - minResize) + minResize;
 	return scale * randomizationFactor;
 }