diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.js
index 8c394e71b3a78f..6adb5dd568e23b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.js
@@ -24,7 +24,12 @@ import { RENDER_AS } from './render_as';
 import { CreateSourceEditor } from './create_source_editor';
 import { UpdateSourceEditor } from './update_source_editor';
 import { GRID_RESOLUTION } from '../../grid_resolution';
-import { SOURCE_DATA_ID_ORIGIN, ES_GEO_GRID, COUNT_PROP_NAME } from '../../../../common/constants';
+import {
+  SOURCE_DATA_ID_ORIGIN,
+  ES_GEO_GRID,
+  COUNT_PROP_NAME,
+  COLOR_MAP_TYPE,
+} from '../../../../common/constants';
 import { i18n } from '@kbn/i18n';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
 import { AbstractESAggSource } from '../es_agg_source';
@@ -251,6 +256,7 @@ export class ESGeoGridSource extends AbstractESAggSource {
             origin: SOURCE_DATA_ID_ORIGIN,
           },
           color: COLOR_GRADIENTS[0].value,
+          type: COLOR_MAP_TYPE.ORDINAL,
         },
       },
       [VECTOR_STYLES.LINE_COLOR]: {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index ba5621b8efadfd..5491d5d567f842 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -55,7 +55,7 @@ export function DynamicColorForm({
       return null;
     }
 
-    if (styleOptions.type === COLOR_MAP_TYPE.ORDINAL) {
+    if (styleProperty.isOrdinal()) {
       return (
         <ColorMapSelect
           colorMapOptions={COLOR_GRADIENTS}
@@ -95,7 +95,7 @@ export function DynamicColorForm({
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
-            selectedFieldName={_.get(styleOptions, 'field.name')}
+            selectedFieldName={styleProperty.getFieldName()}
             onChange={onFieldChange}
             compressed
           />
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
index bad13b487cc295..7ad541efe0ab71 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FieldSelect } from '../field_select';
@@ -27,7 +26,7 @@ export function DynamicLabelForm({
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
-          selectedFieldName={_.get(styleOptions, 'field.name')}
+          selectedFieldName={styleProperty.getFieldName()}
           onChange={onFieldChange}
           compressed
         />
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
index e0b7e7b2865a27..df0ae6513f8ed8 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
 import React from 'react';
 import { FieldSelect } from '../field_select';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
@@ -30,7 +29,7 @@ export function DynamicOrientationForm({
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
-          selectedFieldName={_.get(styleOptions, 'field.name')}
+          selectedFieldName={styleProperty.getFieldName()}
           onChange={onFieldChange}
           compressed
         />
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
index 8b069cd53b731a..141a9410177905 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import _ from 'lodash';
 import React, { Fragment } from 'react';
 import { FieldSelect } from '../field_select';
 import { SizeRangeSelector } from './size_range_selector';
@@ -50,7 +49,7 @@ export function DynamicSizeForm({
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
-            selectedFieldName={_.get(styleOptions, 'field.name')}
+            selectedFieldName={styleProperty.getFieldName()}
             onChange={onFieldChange}
             compressed
           />
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js
index 98e87b0305b447..37db54389866d4 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js
@@ -32,6 +32,10 @@ export class DynamicStyleProperty extends AbstractStyleProperty {
     return this._field;
   }
 
+  getFieldName() {
+    return this._field ? this._field.getName() : '';
+  }
+
   getComputedFieldName() {
     if (!this.isComplete()) {
       return null;