diff --git a/x-pack/plugins/ml/public/maps/anomaly_job_selector.tsx b/x-pack/plugins/ml/public/maps/anomaly_job_selector.tsx
index cc92d376e0dd8f1..55ee587bbdeb257 100644
--- a/x-pack/plugins/ml/public/maps/anomaly_job_selector.tsx
+++ b/x-pack/plugins/ml/public/maps/anomaly_job_selector.tsx
@@ -64,7 +64,6 @@ export class AnomalyJobSelector extends Component<Props, State> {
       return null;
     }
 
-    const options = this.state.jobId ? [{ value: this.state.jobId, label: this.state.jobId }] : [];
     return (
       <EuiFormRow
         label={i18n.translate('xpack.ml.maps.jobIdLabel', {
@@ -76,7 +75,9 @@ export class AnomalyJobSelector extends Component<Props, State> {
           singleSelection={true}
           onChange={this.onJobIdSelect}
           options={this.state.jobIdList}
-          selectedOptions={options}
+          selectedOptions={
+            this.state.jobId ? [{ value: this.state.jobId, label: this.state.jobId }] : []
+          }
         />
       </EuiFormRow>
     );
diff --git a/x-pack/plugins/ml/public/maps/anomaly_layer_wizard.tsx b/x-pack/plugins/ml/public/maps/anomaly_layer_wizard.tsx
index f633d970945ce9a..e9b79fe3ab49c52 100644
--- a/x-pack/plugins/ml/public/maps/anomaly_layer_wizard.tsx
+++ b/x-pack/plugins/ml/public/maps/anomaly_layer_wizard.tsx
@@ -8,7 +8,13 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import uuid from 'uuid';
-import { LAYER_TYPE, LAYER_WIZARD_CATEGORY, STYLE_TYPE } from '../../../maps/common';
+import {
+  COLOR_MAP_TYPE,
+  FIELD_ORIGIN,
+  LAYER_TYPE,
+  LAYER_WIZARD_CATEGORY,
+  STYLE_TYPE,
+} from '../../../maps/common';
 import { AnomalySource, AnomalySourceDescriptor } from './anomaly_source';
 import { CreateAnomalySourceEditor } from './create_anomaly_source_editor';
 import {
@@ -51,9 +57,17 @@ export const anomalyLayerWizard: LayerWizard = {
           type: 'VECTOR',
           properties: {
             fillColor: {
-              type: STYLE_TYPE.STATIC,
+              type: STYLE_TYPE.DYNAMIC,
               options: {
-                color: 'rgb(255,0,0)',
+                color: 'Blue to Red',
+                colorCategory: 'palette_0',
+                fieldMetaOptions: { isEnabled: true, sigma: 3 },
+                type: COLOR_MAP_TYPE.ORDINAL,
+                field: {
+                  name: 'record_score',
+                  origin: FIELD_ORIGIN.SOURCE,
+                },
+                useCustomColorRamp: false,
               },
             },
           } as unknown as VectorStylePropertiesDescriptor,
diff --git a/x-pack/plugins/ml/public/maps/create_anomaly_source_editor.tsx b/x-pack/plugins/ml/public/maps/create_anomaly_source_editor.tsx
index 2982edae61f3a04..89b4d89599d8f29 100644
--- a/x-pack/plugins/ml/public/maps/create_anomaly_source_editor.tsx
+++ b/x-pack/plugins/ml/public/maps/create_anomaly_source_editor.tsx
@@ -10,7 +10,7 @@ import React, { Component } from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { AnomalySourceDescriptor } from './anomaly_source';
 import { AnomalyJobSelector } from './anomaly_job_selector';
-import { TypicalActualSelector } from './typical_actual_selector';
+import { LayerSelector } from './layer_selector';
 
 interface Props {
   onSourceConfigChange: (sourceConfig: Partial<AnomalySourceDescriptor> | null) => void;
@@ -68,7 +68,7 @@ export class CreateAnomalySourceEditor extends Component<Props, State> {
 
   render() {
     const selector = this.state.jobId ? (
-      <TypicalActualSelector
+      <LayerSelector
         onChange={this.onTypicalActualChange}
         typicalActual={this.state.typicalActual || 'typical'}
       />
diff --git a/x-pack/plugins/ml/public/maps/typical_actual_selector.tsx b/x-pack/plugins/ml/public/maps/layer_selector.tsx
similarity index 96%
rename from x-pack/plugins/ml/public/maps/typical_actual_selector.tsx
rename to x-pack/plugins/ml/public/maps/layer_selector.tsx
index eaddb1504c0cac1..0697cc88f248ccb 100644
--- a/x-pack/plugins/ml/public/maps/typical_actual_selector.tsx
+++ b/x-pack/plugins/ml/public/maps/layer_selector.tsx
@@ -18,7 +18,7 @@ interface Props {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface State {}
 
-export class TypicalActualSelector extends Component<Props, State> {
+export class LayerSelector extends Component<Props, State> {
   private _isMounted: boolean = false;
 
   state: State = {};
diff --git a/x-pack/plugins/ml/public/maps/update_anomaly_source_editor.tsx b/x-pack/plugins/ml/public/maps/update_anomaly_source_editor.tsx
index 5505df363801273..f160d94c8a30c9f 100644
--- a/x-pack/plugins/ml/public/maps/update_anomaly_source_editor.tsx
+++ b/x-pack/plugins/ml/public/maps/update_anomaly_source_editor.tsx
@@ -9,7 +9,7 @@ import React, { Fragment, Component } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { TypicalActualSelector } from './typical_actual_selector';
+import { LayerSelector } from './layer_selector';
 
 interface Props {
   onChange: (...args: Array<{ propName: string; value: unknown }>) => void;
@@ -32,7 +32,7 @@ export class UpdateAnomalySourceEditor extends Component<Props, State> {
             </h6>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <TypicalActualSelector
+          <LayerSelector
             onChange={(typicalActual: 'typical' | 'actual') => {
               this.props.onChange({
                 propName: 'typicalActual',