Add cmocean colormaps, fix bug when switching render type

packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx

@@ -3,6 +3,7 @@ import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
 
 import ColorRampEntry from './ColorRampEntry';
+import cmocean from './cmocean.json';
 
 export interface IColorMap {
   name: string;
@@ -79,9 +80,19 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
       });
       const colorMap = { name: name, colors: colorRamp };
       colorMapList.push(colorMap);
+    });
 
-      setColorMaps(colorMapList);
+    Object.entries(cmocean).forEach(([name, colors]) => {
+      if (name === '__license__') {
+        return;
+      }
+      colorMapList.push({
+        name,
+        colors: colors as string[],
+      });
     });
+
+    setColorMaps(colorMapList);
   }, []);
 
   useEffect(() => {

packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx

@@ -38,10 +38,12 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    populateOptions();
+    if (selectedRamp === '' && selectedMode === '' && numberOfShades === '') {
+      populateOptions();
+    }
   }, [layerParams]);
 
-  const populateOptions = async () => {
+  const populateOptions = () => {
     let nClasses, singleBandMode, colorRamp;
 
     if (layerParams.symbologyState) {