diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss
index 6960c7101fa10..fe13ac2fafa01 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss
@@ -27,3 +27,11 @@
   padding-left: $euiSizeXS;
   margin-left: $euiSizeXS;
 }
+
+.dscFieldSearch__filterWrapper {
+  flex-grow: 0;
+}
+
+.dscFieldSearch__formWrapper {
+  padding: $euiSizeM;
+}
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
index 2655d28af985b..c207585499483 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
@@ -17,54 +17,123 @@
  * under the License.
  */
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { DiscoverFieldSearch } from './discover_field_search';
+import { DiscoverFieldSearch, Props } from './discover_field_search';
+import { EuiButtonGroupProps } from '@elastic/eui';
+import { ReactWrapper } from 'enzyme';
 
 describe('DiscoverFieldSearch', () => {
-  function mountComponent() {
-    const props = {
-      onChange: jest.fn(),
-      onShowFilter: jest.fn(),
-      showFilter: false,
-      filtersActive: 0,
-      value: 'test',
-    };
-    const comp = mountWithIntl(<DiscoverFieldSearch {...props} />);
-    const input = findTestSubject(comp, 'fieldFilterSearchInput');
-    const btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    return { comp, input, btn, props };
+  const defaultProps = {
+    onChange: jest.fn(),
+    value: 'test',
+    types: ['any', 'string', '_source'],
+  };
+
+  function mountComponent(props?: Props) {
+    const compProps = props || defaultProps;
+    const comp = mountWithIntl(<DiscoverFieldSearch {...compProps} />);
+    return comp;
+  }
+
+  function findButtonGroup(component: ReactWrapper, id: string) {
+    return component.find(`[data-test-subj="${id}ButtonGroup"]`).first();
   }
 
   test('enter value', () => {
-    const { input, props } = mountComponent();
+    const component = mountComponent();
+    const input = findTestSubject(component, 'fieldFilterSearchInput');
     input.simulate('change', { target: { value: 'new filter' } });
-    expect(props.onChange).toBeCalledTimes(1);
+    expect(defaultProps.onChange).toBeCalledTimes(1);
   });
 
-  // this should work, but doesn't, have to do some research
-  test('click toggle filter button', () => {
-    const { btn, props } = mountComponent();
+  test('change in active filters should change facet selection and call onChange', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    let btn = findTestSubject(component, 'toggleFieldFilterButton');
+    expect(btn.hasClass('euiFacetButton--isSelected')).toBeFalsy();
     btn.simulate('click');
-    expect(props.onShowFilter).toBeCalledTimes(1);
+    const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
+    act(() => {
+      // @ts-ignore
+      (aggregatableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    component.update();
+    btn = findTestSubject(component, 'toggleFieldFilterButton');
+    expect(btn.hasClass('euiFacetButton--isSelected')).toBe(true);
+    expect(onChange).toBeCalledWith('aggregatable', true);
   });
 
-  test('change showFilter value should change aria label', () => {
-    const { comp } = mountComponent();
-    let btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.prop('aria-label')).toEqual('Show field filter settings');
-    comp.setProps({ showFilter: true });
-    btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.prop('aria-label')).toEqual('Hide field filter settings');
+  test('change in active filters should change filters count', () => {
+    const component = mountComponent();
+    let btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    btn = findTestSubject(component, 'toggleFieldFilterButton');
+    const badge = btn.find('.euiNotificationBadge');
+    // no active filters
+    expect(badge.text()).toEqual('0');
+    // change value of aggregatable select
+    const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
+    act(() => {
+      // @ts-ignore
+      (aggregatableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('1');
+    // change value of searchable select
+    const searchableButtonGroup = findButtonGroup(component, 'searchable');
+    act(() => {
+      // @ts-ignore
+      (searchableButtonGroup.props() as EuiButtonGroupProps).onChange('searchable-true', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('2');
+    // change value of searchable select
+    act(() => {
+      // @ts-ignore
+      (searchableButtonGroup.props() as EuiButtonGroupProps).onChange('searchable-any', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('1');
   });
 
-  test('change filtersActive should change facet selection', () => {
-    const { comp } = mountComponent();
-    let btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.hasClass('euiFacetButton--isSelected')).toBeFalsy();
-    comp.setProps({ filtersActive: 3 });
-    btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.hasClass('euiFacetButton--isSelected')).toBe(true);
+  test('change in missing fields switch should not change filter count', () => {
+    const component = mountComponent();
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const badge = btn.find('.euiNotificationBadge');
+    expect(badge.text()).toEqual('0');
+    const missingSwitch = findTestSubject(component, 'missingSwitch');
+    missingSwitch.simulate('change', { target: { value: false } });
+    expect(badge.text()).toEqual('0');
+  });
+
+  test('change in filters triggers onChange', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const aggregtableButtonGroup = findButtonGroup(component, 'aggregatable');
+    const missingSwitch = findTestSubject(component, 'missingSwitch');
+    act(() => {
+      // @ts-ignore
+      (aggregtableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    missingSwitch.simulate('change', { target: { value: false } });
+    expect(onChange).toBeCalledTimes(2);
+  });
+
+  test('change in type filters triggers onChange with appropriate value', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const typeSelector = findTestSubject(component, 'typeSelect');
+    typeSelector.simulate('change', { target: { value: 'string' } });
+    expect(onChange).toBeCalledWith('type', 'string');
+    typeSelector.simulate('change', { target: { value: 'any' } });
+    expect(onChange).toBeCalledWith('type', 'any');
   });
 });
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
index 1577b4deece51..f0685c4357c5a 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
@@ -16,61 +16,234 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFacetButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import {
+  EuiFacetButton,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiSelect,
+  EuiSwitch,
+  EuiForm,
+  EuiFormRow,
+  EuiButtonGroup,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+export interface State {
+  searchable: string;
+  aggregatable: string;
+  type: string;
+  missing: boolean;
+  [index: string]: string | boolean;
+}
+
 export interface Props {
   /**
    * triggered on input of user into search field
    */
-  onChange: (field: string, value: string) => void;
-  /**
-   * triggered when the "additional filter btn" is clicked
-   */
-  onShowFilter: () => void;
-  /**
-   * determines whether additional filter fields are displayed
-   */
-  showFilter: boolean;
+  onChange: (field: string, value: string | boolean | undefined) => void;
+
   /**
    * the input value of the user
    */
   value?: string;
+
   /**
-   * the number of selected filters
+   * types for the type filter
    */
-  filtersActive: number;
+  types: string[];
 }
 
 /**
  * Component is Discover's side bar to  search of available fields
  * Additionally there's a button displayed that allows the user to show/hide more filter fields
  */
-export function DiscoverFieldSearch({
-  showFilter,
-  onChange,
-  onShowFilter,
-  value,
-  filtersActive,
-}: Props) {
+export function DiscoverFieldSearch({ onChange, value, types }: Props) {
   if (typeof value !== 'string') {
     // at initial rendering value is undefined (angular related), this catches the warning
     // should be removed once all is react
     return null;
   }
-  const filterBtnAriaLabel = showFilter
+  const searchPlaceholder = i18n.translate('kbn.discover.fieldChooser.searchPlaceHolder', {
+    defaultMessage: 'Search field names',
+  });
+  const aggregatableLabel = i18n.translate('kbn.discover.fieldChooser.filter.aggregatableLabel', {
+    defaultMessage: 'Aggregatable',
+  });
+  const searchableLabel = i18n.translate('kbn.discover.fieldChooser.filter.searchableLabel', {
+    defaultMessage: 'Searchable',
+  });
+  const typeLabel = i18n.translate('kbn.discover.fieldChooser.filter.typeLabel', {
+    defaultMessage: 'Type',
+  });
+  const typeOptions = types
+    ? types.map(type => {
+        return { value: type, text: type };
+      })
+    : [{ value: 'any', text: 'any' }];
+
+  const [activeFiltersCount, setActiveFiltersCount] = useState(0);
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const [values, setValues] = useState<State>({
+    searchable: 'any',
+    aggregatable: 'any',
+    type: 'any',
+    missing: true,
+  });
+
+  const filterBtnAriaLabel = isPopoverOpen
     ? i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
         defaultMessage: 'Hide field filter settings',
       })
     : i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel', {
         defaultMessage: 'Show field filter settings',
       });
-  const searchPlaceholder = i18n.translate('kbn.discover.fieldChooser.searchPlaceHolder', {
-    defaultMessage: 'Search field names',
-  });
 
+  const handleFacetButtonClicked = () => {
+    setPopoverOpen(!isPopoverOpen);
+  };
+
+  const applyFilterValue = (id: string, filterValue: string | boolean) => {
+    switch (filterValue) {
+      case 'any':
+        if (id !== 'type') {
+          onChange(id, undefined);
+        } else {
+          onChange(id, filterValue);
+        }
+        break;
+      case 'true':
+        onChange(id, true);
+        break;
+      case 'false':
+        onChange(id, false);
+        break;
+      default:
+        onChange(id, filterValue);
+    }
+  };
+
+  const isFilterActive = (name: string, filterValue: string | boolean) => {
+    return name !== 'missing' && filterValue !== 'any';
+  };
+
+  const handleValueChange = (name: string, filterValue: string | boolean) => {
+    const previousValue = values[name];
+    updateFilterCount(name, previousValue, filterValue);
+    const updatedValues = { ...values };
+    updatedValues[name] = filterValue;
+    setValues(updatedValues);
+    applyFilterValue(name, filterValue);
+  };
+
+  const updateFilterCount = (
+    name: string,
+    previousValue: string | boolean,
+    currentValue: string | boolean
+  ) => {
+    const previouslyFilterActive = isFilterActive(name, previousValue);
+    const filterActive = isFilterActive(name, currentValue);
+    const diff = Number(filterActive) - Number(previouslyFilterActive);
+    setActiveFiltersCount(activeFiltersCount + diff);
+  };
+
+  const handleMissingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const missingValue = e.target.checked;
+    handleValueChange('missing', missingValue);
+  };
+
+  const buttonContent = (
+    <EuiFacetButton
+      aria-label={filterBtnAriaLabel}
+      data-test-subj="toggleFieldFilterButton"
+      className="dscToggleFieldFilterButton"
+      icon={<EuiIcon type="filter" />}
+      isSelected={activeFiltersCount > 0}
+      quantity={activeFiltersCount}
+      onClick={handleFacetButtonClicked}
+    >
+      <FormattedMessage
+        id="kbn.discover.fieldChooser.fieldFilterFacetButtonLabel"
+        defaultMessage="Filter by type"
+      />
+    </EuiFacetButton>
+  );
+
+  const select = (
+    id: string,
+    selectOptions: Array<{ text: ReactNode } & OptionHTMLAttributes<HTMLOptionElement>>,
+    selectValue: string
+  ) => {
+    return (
+      <EuiSelect
+        id={`${id}-select`}
+        options={selectOptions}
+        value={selectValue}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+          handleValueChange(id, e.target.value)
+        }
+        aria-label={i18n.translate('kbn.discover.fieldChooser.filter.fieldSelectorLabel', {
+          defaultMessage: 'Selection of {id} filter options',
+          values: { id },
+        })}
+        data-test-subj={`${id}Select`}
+        compressed
+      />
+    );
+  };
+
+  const toggleButtons = (id: string) => {
+    return [
+      {
+        id: `${id}-any`,
+        label: 'any',
+      },
+      {
+        id: `${id}-true`,
+        label: 'yes',
+      },
+      {
+        id: `${id}-false`,
+        label: 'no',
+      },
+    ];
+  };
+
+  const buttonGroup = (id: string, legend: string) => {
+    return (
+      <EuiButtonGroup
+        legend={legend}
+        options={toggleButtons(id)}
+        idSelected={`${id}-${values[id]}`}
+        onChange={optionId => handleValueChange(id, optionId.replace(`${id}-`, ''))}
+        buttonSize="compressed"
+        isFullWidth
+        data-test-subj={`${id}ButtonGroup`}
+      />
+    );
+  };
+
+  const selectionPanel = (
+    <div className="dscFieldSearch__formWrapper">
+      <EuiForm data-test-subj="filterSelectionPanel">
+        <EuiFormRow fullWidth label={aggregatableLabel} display="columnCompressed">
+          {buttonGroup('aggregatable', aggregatableLabel)}
+        </EuiFormRow>
+        <EuiFormRow fullWidth label={searchableLabel} display="columnCompressed">
+          {buttonGroup('searchable', searchableLabel)}
+        </EuiFormRow>
+        <EuiFormRow fullWidth label={typeLabel} display="columnCompressed">
+          {select('type', typeOptions, values.type)}
+        </EuiFormRow>
+      </EuiForm>
+    </div>
+  );
   return (
     <React.Fragment>
       <EuiFlexGroup responsive={false} gutterSize={'s'}>
@@ -86,20 +259,35 @@ export function DiscoverFieldSearch({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiFacetButton
-        aria-label={filterBtnAriaLabel}
-        data-test-subj="toggleFieldFilterButton"
-        className="dscToggleFieldFilterButton"
-        icon={<EuiIcon type="filter" />}
-        isSelected={filtersActive > 0}
-        quantity={filtersActive}
-        onClick={() => onShowFilter()}
-      >
-        <FormattedMessage
-          id="kbn.discover.fieldChooser.fieldFilterFacetButtonLabel"
-          defaultMessage="Filter by type"
-        />
-      </EuiFacetButton>
+      <div className="dscFieldSearch__filterWrapper">
+        <EuiPopover
+          id="dataPanelTypeFilter"
+          panelClassName="euiFilterGroup__popoverPanel"
+          panelPaddingSize="none"
+          anchorPosition="downLeft"
+          display="block"
+          isOpen={isPopoverOpen}
+          closePopover={() => {}}
+          button={buttonContent}
+        >
+          <EuiPopoverTitle>
+            {i18n.translate('kbn.discover.fieldChooser.filter.filterByTypeLabel', {
+              defaultMessage: 'Filter by type',
+            })}
+          </EuiPopoverTitle>
+          {selectionPanel}
+          <EuiPopoverFooter>
+            <EuiSwitch
+              label={i18n.translate('kbn.discover.fieldChooser.filter.hideMissingFieldsLabel', {
+                defaultMessage: 'Hide missing fields',
+              })}
+              checked={values.missing}
+              onChange={handleMissingChange}
+              data-test-subj="missingSwitch"
+            />
+          </EuiPopoverFooter>
+        </EuiPopover>
+      </div>
     </React.Fragment>
   );
 }
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.ts b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.ts
index 2e7dd3e210ef8..b78f993e18772 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.ts
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.ts
@@ -27,9 +27,7 @@ const app = uiModules.get('apps/discover');
 app.directive('discoverFieldSearch', function(reactDirective: any) {
   return reactDirective(wrapInI18nContext(DiscoverFieldSearch), [
     ['onChange', { watchDepth: 'reference' }],
-    ['onShowFilter', { watchDepth: 'reference' }],
-    ['showFilter', { watchDepth: 'value' }],
     ['value', { watchDepth: 'value' }],
-    ['filtersActive', { watchDepth: 'value' }],
+    ['types', { watchDepth: 'value' }],
   ]);
 });
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
index 3d8b38c278f31..adf4b1b4326e8 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
@@ -9,10 +9,8 @@
     <form>
       <discover-field-search
         on-change="setFilterValue"
-        on-show-filter="toggleShowFilter"
-        show-filter="showFilter"
         value="filter.vals.name"
-        filters-active="filtersActive"
+        types="fieldTypes"
       >
       </discover-field-search>
       <div data-test-subj="discoverFieldFilter" class="dscFieldFilter" ng-show="showFilter">
diff --git a/test/functional/page_objects/discover_page.js b/test/functional/page_objects/discover_page.js
index 4654b85f9c7c4..8d12b2117a214 100644
--- a/test/functional/page_objects/discover_page.js
+++ b/test/functional/page_objects/discover_page.js
@@ -283,19 +283,13 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
     }
 
     async openSidebarFieldFilter() {
-      const fieldFilterFormExists = await testSubjects.exists('discoverFieldFilter');
-      if (!fieldFilterFormExists) {
-        await testSubjects.click('toggleFieldFilterButton');
-        await testSubjects.existOrFail('discoverFieldFilter');
-      }
+      await testSubjects.click('toggleFieldFilterButton');
+      await testSubjects.existOrFail('filterSelectionPanel');
     }
 
     async closeSidebarFieldFilter() {
-      const fieldFilterFormExists = await testSubjects.exists('discoverFieldFilter');
-      if (fieldFilterFormExists) {
-        await testSubjects.click('toggleFieldFilterButton');
-        await testSubjects.missingOrFail('discoverFieldFilter', { allowHidden: true });
-      }
+      await testSubjects.click('toggleFieldFilterButton');
+      await testSubjects.missingOrFail('filterSelectionPanel', { allowHidden: true });
     }
 
   }
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/ProvideBreadcrumbs.tsx b/x-pack/legacy/plugins/apm/public/components/app/Main/ProvideBreadcrumbs.tsx
index 0c1d20d65b7b9..cfbe8b1edbd71 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Main/ProvideBreadcrumbs.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Main/ProvideBreadcrumbs.tsx
@@ -12,11 +12,10 @@ import {
   RouteProps,
   withRouter
 } from 'react-router-dom';
-import { StringMap } from '../../../../typings/common';
 import { RouteName } from './route_config/route_names';
 
 type LocationMatch = Pick<
-  RouteComponentProps<StringMap<string>>,
+  RouteComponentProps<Record<string, string>>,
   'location' | 'match'
 >;
 
@@ -75,7 +74,7 @@ export function getBreadcrumb({
       return null;
     }
 
-    const match = matchPath<StringMap<string>>(currentPath, route);
+    const match = matchPath<Record<string, string>>(currentPath, route);
 
     if (match) {
       return parse({
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/__test__/createErrorGroupWatch.test.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/__test__/createErrorGroupWatch.test.ts
index 4d6c3f4c116c9..c7860b81a7b1e 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/__test__/createErrorGroupWatch.test.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/__test__/createErrorGroupWatch.test.ts
@@ -7,7 +7,6 @@
 import { isArray, isObject, isString } from 'lodash';
 import mustache from 'mustache';
 import uuid from 'uuid';
-import { StringMap } from '../../../../../../typings/common';
 // @ts-ignore
 import * as rest from '../../../../../services/rest/watcher';
 import { createErrorGroupWatch } from '../createErrorGroupWatch';
@@ -85,8 +84,11 @@ describe('createErrorGroupWatch', () => {
 });
 
 // Recursively iterate a nested structure and render strings as mustache templates
-type InputOutput = string | string[] | StringMap<any>;
-function renderMustache(input: InputOutput, ctx: StringMap): InputOutput {
+type InputOutput = string | string[] | Record<string, any>;
+function renderMustache(
+  input: InputOutput,
+  ctx: Record<string, unknown>
+): InputOutput {
   if (isString(input)) {
     return mustache.render(input, {
       ctx,
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/createErrorGroupWatch.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/createErrorGroupWatch.ts
index 2617fef6de1d2..e7d06403b8f8e 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/createErrorGroupWatch.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/createErrorGroupWatch.ts
@@ -17,7 +17,6 @@ import {
   PROCESSOR_EVENT,
   SERVICE_NAME
 } from '../../../../../common/elasticsearch_fieldnames';
-import { StringMap } from '../../../../../typings/common';
 // @ts-ignore
 import { createWatch } from '../../../../services/rest/watcher';
 
@@ -50,8 +49,8 @@ interface Arguments {
 
 interface Actions {
   log_error: { logging: { text: string } };
-  slack_webhook?: StringMap;
-  email?: StringMap;
+  slack_webhook?: Record<string, unknown>;
+  email?: Record<string, unknown>;
 }
 
 export async function createErrorGroupWatch({
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx
index 8fab7da377eb2..67957ae76b1f1 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Settings/ApmIndices/index.tsx
@@ -22,7 +22,6 @@ import {
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useCallApmApi } from '../../../../hooks/useCallApmApi';
 import { APMClient } from '../../../../services/rest/createCallApmApi';
-import { StringMap } from '../../../../../typings/common';
 import { useKibanaCore } from '../../../../../../observability/public';
 
 const APM_INDEX_LABELS = [
@@ -79,7 +78,7 @@ async function saveApmIndices({
   apmIndices
 }: {
   callApmApi: APMClient;
-  apmIndices: StringMap<string>;
+  apmIndices: Record<string, string>;
 }) {
   await callApmApi({
     method: 'POST',
@@ -95,7 +94,7 @@ export function ApmIndices() {
     notifications: { toasts }
   } = useKibanaCore();
 
-  const [apmIndices, setApmIndices] = useState<StringMap<string>>({});
+  const [apmIndices, setApmIndices] = useState<Record<string, string>>({});
   const [isSaving, setIsSaving] = useState(false);
 
   const callApmApiFromHook = useCallApmApi();
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
index cc7697c1d8964..10f59e237ba7f 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
@@ -17,7 +17,6 @@ import {
 } from 'lodash';
 import { idx } from '@kbn/elastic-idx';
 import { TraceAPIResponse } from '../../../../../../../../server/lib/traces/get_trace';
-import { StringMap } from '../../../../../../../../typings/common';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/Span';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/Transaction';
 
@@ -191,7 +190,7 @@ function getServices(items: IWaterfallItem[]) {
   return uniq(serviceNames);
 }
 
-export type IServiceColors = StringMap<string>;
+export type IServiceColors = Record<string, string>;
 
 function getServiceColors(services: string[]) {
   const assignedColors = [
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/ImpactBar/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/ImpactBar/index.tsx
index 7f9d3c9f9f3b3..ed931191cfb96 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/ImpactBar/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/ImpactBar/index.tsx
@@ -6,10 +6,9 @@
 
 import { EuiProgress } from '@elastic/eui';
 import React from 'react';
-import { StringMap } from '../../../../typings/common';
 
 // TODO: extend from EUI's EuiProgress prop interface
-export interface ImpactBarProps extends StringMap {
+export interface ImpactBarProps extends Record<string, unknown> {
   value: number;
   max?: number;
 }
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/url_helpers.ts b/x-pack/legacy/plugins/apm/public/components/shared/Links/url_helpers.ts
index b6caa47d1ae66..357ea23d522a0 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Links/url_helpers.ts
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Links/url_helpers.ts
@@ -6,13 +6,12 @@
 
 import qs from 'querystring';
 import { LocalUIFilterName } from '../../../../server/lib/ui_filters/local_ui_filters/config';
-import { StringMap } from '../../../../typings/common';
 
 export function toQuery(search?: string): APMQueryParamsRaw {
   return search ? qs.parse(search.slice(1)) : {};
 }
 
-export function fromQuery(query: StringMap<any>) {
+export function fromQuery(query: Record<string, any>) {
   return qs.stringify(query, undefined, undefined, {
     encodeURIComponent: (value: string) => {
       return encodeURIComponent(value).replace(/%3A/g, ':');
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx
index 0f5fcceea3d20..29a8528295dd7 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx
@@ -8,7 +8,6 @@ import { EuiBasicTable } from '@elastic/eui';
 import { sortByOrder } from 'lodash';
 import React, { useMemo, useCallback, ReactNode } from 'react';
 import { idx } from '@kbn/elastic-idx';
-import { StringMap } from '../../../../typings/common';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { history } from '../../../utils/history';
 import { fromQuery, toQuery } from '../Links/url_helpers';
@@ -16,7 +15,7 @@ import { fromQuery, toQuery } from '../Links/url_helpers';
 // TODO: this should really be imported from EUI
 export interface ITableColumn<T> {
   name: ReactNode;
-  actions?: StringMap[];
+  actions?: Array<Record<string, unknown>>;
   field?: string;
   dataType?: string;
   align?: string;
diff --git a/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts b/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts
index 4b65190d8ef22..b15231e89365a 100644
--- a/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts
+++ b/x-pack/legacy/plugins/apm/public/selectors/chartSelectors.ts
@@ -11,7 +11,6 @@ import mean from 'lodash.mean';
 import { rgba } from 'polished';
 import { TimeSeriesAPIResponse } from '../../server/lib/transactions/charts';
 import { ApmTimeSeriesResponse } from '../../server/lib/transactions/charts/get_timeseries_data/transform';
-import { StringMap } from '../../typings/common';
 import {
   Coordinate,
   RectCoordinate,
@@ -192,7 +191,7 @@ function getColorByKey(keys: string[]) {
   const assignedColors = ['HTTP 2xx', 'HTTP 3xx', 'HTTP 4xx', 'HTTP 5xx'];
 
   const unknownKeys = difference(keys, assignedColors);
-  const unassignedColors: StringMap<string> = zipObject(unknownKeys, [
+  const unassignedColors: Record<string, string> = zipObject(unknownKeys, [
     theme.euiColorVis1,
     theme.euiColorVis3,
     theme.euiColorVis4,
diff --git a/x-pack/legacy/plugins/apm/public/services/__test__/SessionStorageMock.ts b/x-pack/legacy/plugins/apm/public/services/__test__/SessionStorageMock.ts
index abe44a0fb3934..83e8f020e2529 100644
--- a/x-pack/legacy/plugins/apm/public/services/__test__/SessionStorageMock.ts
+++ b/x-pack/legacy/plugins/apm/public/services/__test__/SessionStorageMock.ts
@@ -4,10 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { StringMap } from '../../../typings/common';
-
 export class SessionStorageMock {
-  private store: StringMap = {};
+  private store: Record<string, unknown> = {};
 
   public clear() {
     this.store = {};
diff --git a/x-pack/legacy/plugins/apm/public/services/rest/xpack.ts b/x-pack/legacy/plugins/apm/public/services/rest/xpack.ts
index 146376665a0e6..95e283cd67709 100644
--- a/x-pack/legacy/plugins/apm/public/services/rest/xpack.ts
+++ b/x-pack/legacy/plugins/apm/public/services/rest/xpack.ts
@@ -5,7 +5,6 @@
  */
 
 import { HttpServiceBase } from 'kibana/public';
-import { StringMap } from '../../../typings/common';
 import { callApi } from './callApi';
 
 export interface LicenseApiResponse {
@@ -13,11 +12,11 @@ export interface LicenseApiResponse {
     is_active: boolean;
   };
   features: {
-    beats_management?: StringMap;
-    graph?: StringMap;
-    grokdebugger?: StringMap;
-    index_management?: StringMap;
-    logstash?: StringMap;
+    beats_management?: Record<string, unknown>;
+    graph?: Record<string, unknown>;
+    grokdebugger?: Record<string, unknown>;
+    index_management?: Record<string, unknown>;
+    logstash?: Record<string, unknown>;
     ml?: {
       is_available: boolean;
       license_type: number;
@@ -25,12 +24,12 @@ export interface LicenseApiResponse {
       enable_links: boolean;
       show_links: boolean;
     };
-    reporting?: StringMap;
-    rollup?: StringMap;
-    searchprofiler?: StringMap;
-    security?: StringMap;
-    spaces?: StringMap;
-    tilemap?: StringMap;
+    reporting?: Record<string, unknown>;
+    rollup?: Record<string, unknown>;
+    searchprofiler?: Record<string, unknown>;
+    security?: Record<string, unknown>;
+    spaces?: Record<string, unknown>;
+    tilemap?: Record<string, unknown>;
     watcher?: {
       is_available: boolean;
       enable_links: boolean;
diff --git a/x-pack/legacy/plugins/apm/public/utils/httpStatusCodeToColor.ts b/x-pack/legacy/plugins/apm/public/utils/httpStatusCodeToColor.ts
index db1ed490eb7f2..130a7b52ea33b 100644
--- a/x-pack/legacy/plugins/apm/public/utils/httpStatusCodeToColor.ts
+++ b/x-pack/legacy/plugins/apm/public/utils/httpStatusCodeToColor.ts
@@ -5,8 +5,6 @@
  */
 
 import theme from '@elastic/eui/dist/eui_theme_light.json';
-import { StringMap } from '../../typings/common';
-
 const { euiColorDarkShade, euiColorWarning } = theme;
 
 export const errorColor = '#c23c2b';
@@ -14,7 +12,7 @@ export const neutralColor = euiColorDarkShade;
 export const successColor = '#327a42';
 export const warningColor = euiColorWarning;
 
-const httpStatusCodeColors: StringMap<string> = {
+const httpStatusCodeColors: Record<string, string> = {
   1: neutralColor,
   2: successColor,
   3: neutralColor,
diff --git a/x-pack/legacy/plugins/apm/server/lib/helpers/es_client.ts b/x-pack/legacy/plugins/apm/server/lib/helpers/es_client.ts
index 84c52b895f20d..ee41599454dd6 100644
--- a/x-pack/legacy/plugins/apm/server/lib/helpers/es_client.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/helpers/es_client.ts
@@ -14,7 +14,6 @@ import {
 import { Legacy } from 'kibana';
 import { cloneDeep, has, isString, set, pick } from 'lodash';
 import { OBSERVER_VERSION_MAJOR } from '../../../common/elasticsearch_fieldnames';
-import { StringMap, Omit } from '../../../typings/common';
 import { getApmIndices } from '../settings/apm_indices/get_apm_indices';
 import {
   ESSearchResponse,
@@ -95,7 +94,7 @@ interface APMOptions {
 
 export function getESClient(req: Legacy.Request) {
   const cluster = req.server.plugins.elasticsearch.getCluster('data');
-  const query = req.query as StringMap;
+  const query = req.query as Record<string, unknown>;
 
   return {
     search: async <
diff --git a/x-pack/legacy/plugins/apm/typings/common.ts b/x-pack/legacy/plugins/apm/typings/common.ts
index cfe6c9c572dc4..2fafceb32209c 100644
--- a/x-pack/legacy/plugins/apm/typings/common.ts
+++ b/x-pack/legacy/plugins/apm/typings/common.ts
@@ -4,10 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export interface StringMap<T = unknown> {
-  [key: string]: T;
-}
-
 // Allow unknown properties in an object
 export type AllowUnknownProperties<T> = T extends Array<infer X>
   ? Array<AllowUnknownObjectProperties<X>>
@@ -24,9 +20,3 @@ export type PromiseReturnType<Func> = Func extends (
 ) => Promise<infer Value>
   ? Value
   : Func;
-
-export type IndexAsString<Map> = {
-  [k: string]: Map[keyof Map];
-} & Map;
-
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/x-pack/legacy/plugins/apm/typings/elasticsearch/index.ts b/x-pack/legacy/plugins/apm/typings/elasticsearch/index.ts
index 657968fbd704f..56cd0ff23a3fb 100644
--- a/x-pack/legacy/plugins/apm/typings/elasticsearch/index.ts
+++ b/x-pack/legacy/plugins/apm/typings/elasticsearch/index.ts
@@ -4,10 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Omit } from 'utility-types';
 import { SearchParams, SearchResponse } from 'elasticsearch';
 import { AggregationResponseMap, AggregationInputMap } from './aggregations';
-import { StringMap } from '../common';
 
 export interface ESSearchBody {
   query?: any;
@@ -55,6 +53,11 @@ export type ESSearchResponse<
 
 export interface ESFilter {
   [key: string]: {
-    [key: string]: string | string[] | number | StringMap | ESFilter[];
+    [key: string]:
+      | string
+      | string[]
+      | number
+      | Record<string, unknown>
+      | ESFilter[];
   };
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/heatmap_layer.js b/x-pack/legacy/plugins/maps/public/layers/heatmap_layer.js
index 629fb3284ff11..10e528d19785b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/heatmap_layer.js
+++ b/x-pack/legacy/plugins/maps/public/layers/heatmap_layer.js
@@ -7,7 +7,7 @@
 import _ from 'lodash';
 import { AbstractLayer } from './layer';
 import { VectorLayer } from './vector_layer';
-import { HeatmapStyle } from './styles/heatmap_style';
+import { HeatmapStyle } from './styles/heatmap/heatmap_style';
 import { EMPTY_FEATURE_COLLECTION, LAYER_TYPE } from '../../common/constants';
 
 const SCALED_PROPERTY_NAME = '__kbn_heatmap_weight__';//unique name to store scaled value for weighting
diff --git a/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js b/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js
index 8d1d1439a967e..9c9aa912f3a39 100644
--- a/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js
+++ b/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js
@@ -6,7 +6,7 @@
 
 
 import { ESTermSource } from '../sources/es_term_source';
-import { VectorStyle } from '../styles/vector_style';
+import { VectorStyle } from '../styles/vector/vector_style';
 
 export class InnerJoin {
 
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 188ea810258d2..a8b52e586da28 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
@@ -14,8 +14,8 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
 import { AggConfigs } from 'ui/agg_types';
 import { tabifyAggResponse } from 'ui/agg_response/tabify';
 import { convertToGeoJson } from './convert_to_geojson';
-import { VectorStyle } from '../../styles/vector_style';
-import { vectorStyles } from '../../styles/vector_style_defaults';
+import { VectorStyle } from '../../styles/vector/vector_style';
+import { vectorStyles } from '../../styles/vector/vector_style_defaults';
 import { RENDER_AS } from './render_as';
 import { CreateSourceEditor } from './create_source_editor';
 import { UpdateSourceEditor } from './update_source_editor';
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/es_pew_pew_source/es_pew_pew_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/es_pew_pew_source/es_pew_pew_source.js
index b55a94669adca..6cc6ab196f7d8 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/es_pew_pew_source/es_pew_pew_source.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/es_pew_pew_source/es_pew_pew_source.js
@@ -11,8 +11,8 @@ import { VECTOR_SHAPE_TYPES } from '../vector_feature_types';
 import { VectorLayer } from '../../vector_layer';
 import { CreateSourceEditor } from './create_source_editor';
 import { UpdateSourceEditor } from './update_source_editor';
-import { VectorStyle } from '../../styles/vector_style';
-import { vectorStyles } from '../../styles/vector_style_defaults';
+import { VectorStyle } from '../../styles/vector/vector_style';
+import { vectorStyles } from '../../styles/vector/vector_style_defaults';
 import { i18n } from '@kbn/i18n';
 import { SOURCE_DATA_ID_ORIGIN, ES_PEW_PEW } from '../../../../common/constants';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/vector_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/vector_source.js
index b3e8c1b019f28..8f67d7618049b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/vector_source.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/vector_source.js
@@ -7,7 +7,7 @@
 
 import { VectorLayer } from '../vector_layer';
 import { TooltipProperty } from '../tooltips/tooltip_property';
-import { VectorStyle } from '../styles/vector_style';
+import { VectorStyle } from '../styles/vector/vector_style';
 import { AbstractSource } from './source';
 import * as topojson from 'topojson-client';
 import _ from 'lodash';
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/_index.scss b/x-pack/legacy/plugins/maps/public/layers/styles/_index.scss
index 87c7bd1face64..bd517f81517c2 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/_index.scss
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/_index.scss
@@ -1,3 +1,3 @@
 @import './components/color_gradient';
 @import './components/static_dynamic_style_row';
-@import './components/vector/color/color_stops';
+@import './vector/components/color/color_stops';
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/static_dynamic_style_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/static_dynamic_style_row.js
index cfe7a0741a194..5537bb90fa245 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/static_dynamic_style_row.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/static_dynamic_style_row.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { VectorStyle } from '../vector_style';
+import { VectorStyle } from '../vector/vector_style';
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/__snapshots__/heatmap_style_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.js.snap
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/__snapshots__/heatmap_style_editor.test.js.snap
rename to x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.js.snap
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/heatmap_constants.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_constants.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/heatmap_constants.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_constants.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/heatmap_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.js
similarity index 95%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/heatmap_style_editor.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.js
index 0aa20f29c341b..a0f86dcf5130b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/heatmap_style_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.js
@@ -8,7 +8,7 @@ import React from 'react';
 
 import { EuiFormRow, EuiSuperSelect } from '@elastic/eui';
 import { COLOR_GRADIENTS } from '../../color_utils';
-import { ColorGradient } from '../color_gradient';
+import { ColorGradient } from '../../components/color_gradient';
 import {
   DEFAULT_RGB_HEATMAP_COLOR_RAMP,
   DEFAULT_HEATMAP_COLOR_RAMP_NAME,
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/heatmap_style_editor.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.test.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/heatmap_style_editor.test.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/heatmap_style_editor.test.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/legend/heatmap_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js
similarity index 88%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/legend/heatmap_legend.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js
index 74fce11abf0a6..06709ba0ebf21 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/legend/heatmap_legend.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js
@@ -7,8 +7,8 @@
 import React from 'react';
 
 import { i18n } from '@kbn/i18n';
-import { ColorGradient } from '../../color_gradient';
-import { StyleLegendRow } from '../../style_legend_row';
+import { ColorGradient } from '../../../components/color_gradient';
+import { StyleLegendRow } from '../../../components/style_legend_row';
 import {
   DEFAULT_RGB_HEATMAP_COLOR_RAMP,
   DEFAULT_HEATMAP_COLOR_RAMP_NAME,
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/heatmap_style.js
similarity index 90%
rename from x-pack/legacy/plugins/maps/public/layers/styles/heatmap_style.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/heatmap/heatmap_style.js
index 5ccabe610a120..e537da8a3e2e4 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap_style.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/heatmap_style.js
@@ -5,12 +5,12 @@
  */
 
 import React from 'react';
-import { GRID_RESOLUTION } from '../grid_resolution';
-import { AbstractStyle } from './abstract_style';
-import { HeatmapStyleEditor } from './components/heatmap/heatmap_style_editor';
-import { HeatmapLegend } from './components/heatmap/legend/heatmap_legend';
-import { DEFAULT_HEATMAP_COLOR_RAMP_NAME } from './components/heatmap/heatmap_constants';
-import { getColorRampStops } from './color_utils';
+import { GRID_RESOLUTION } from '../../grid_resolution';
+import { AbstractStyle } from '../abstract_style';
+import { HeatmapStyleEditor } from './components/heatmap_style_editor';
+import { HeatmapLegend } from './components/legend/heatmap_legend';
+import { DEFAULT_HEATMAP_COLOR_RAMP_NAME } from './components/heatmap_constants';
+import { getColorRampStops } from '../color_utils';
 import { i18n } from '@kbn/i18n';
 import { EuiIcon } from '@elastic/eui';
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/__snapshots__/vector_style_symbol_editor.test.js.snap
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/__snapshots__/vector_style_symbol_editor.test.js.snap
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_ramp_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_ramp_select.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_ramp_select.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_ramp_select.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_stops.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_stops_utils.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_utils.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/color_stops_utils.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_utils.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/dynamic_color_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_selection.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/dynamic_color_selection.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_selection.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/static_color_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_selection.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/static_color_selection.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_selection.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/vector_style_color_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/vector_style_color_editor.js
similarity index 92%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/vector_style_color_editor.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/vector_style_color_editor.js
index c8950ffe71a1e..a39db57dc4883 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/vector_style_color_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/vector_style_color_editor.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { StaticDynamicStyleRow } from '../../static_dynamic_style_row';
+import { StaticDynamicStyleRow } from '../../../components/static_dynamic_style_row';
 import { DynamicColorSelection } from './dynamic_color_selection';
 import { StaticColorSelection } from './static_color_selection';
 import { getVectorStyleLabel } from '../get_vector_style_label';
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/field_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/field_select.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/get_vector_style_label.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js
similarity index 94%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/get_vector_style_label.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js
index a39fabf20bae4..b6cc215ec6ded 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/get_vector_style_label.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js
@@ -6,7 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { vectorStyles } from '../../vector_style_defaults';
+import { vectorStyles } from '../vector_style_defaults';
 
 export function getVectorStyleLabel(styleName) {
   switch (styleName) {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/__snapshots__/vector_icon.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/__snapshots__/vector_icon.test.js.snap
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/__snapshots__/vector_icon.test.js.snap
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/__snapshots__/vector_icon.test.js.snap
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/circle_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/circle_icon.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/circle_icon.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/circle_icon.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/line_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/line_icon.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/line_icon.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/line_icon.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/polygon_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/polygon_icon.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/polygon_icon.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/polygon_icon.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/style_property_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/style_property_legend_row.js
similarity index 95%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/style_property_legend_row.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/style_property_legend_row.js
index 2f8a603c290ab..4d091389a360e 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/style_property_legend_row.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/style_property_legend_row.js
@@ -9,12 +9,12 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import { styleOptionShapes, rangeShape } from '../style_option_shapes';
-import { VectorStyle } from '../../../vector_style';
-import { ColorGradient } from '../../color_gradient';
+import { VectorStyle } from '../../vector_style';
+import { ColorGradient } from '../../../components/color_gradient';
 import { CircleIcon } from './circle_icon';
 import { getVectorStyleLabel } from '../get_vector_style_label';
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
-import { StyleLegendRow } from '../../style_legend_row';
+import { StyleLegendRow } from '../../../components/style_legend_row';
 
 function getLineWidthIcons() {
   const defaultStyle = {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/symbol_icon.js
similarity index 96%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/symbol_icon.js
index a2f8d44604a0a..d241226e577a8 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/symbol_icon.js
@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { getMakiSymbolSvg, styleSvg, buildSrcUrl } from '../../../symbol_utils';
+import { getMakiSymbolSvg, styleSvg, buildSrcUrl } from '../../symbol_utils';
 
 export class SymbolIcon extends Component {
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js
similarity index 98%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js
index 0f9e76c3e74d9..5b86b88572552 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js
@@ -12,7 +12,7 @@ import { CircleIcon } from './circle_icon';
 import { LineIcon } from './line_icon';
 import { PolygonIcon } from './polygon_icon';
 import { SymbolIcon } from './symbol_icon';
-import { VectorStyle } from '../../../vector_style';
+import { VectorStyle } from '../../vector_style';
 import { getColorRampCenterColor } from '../../../color_utils';
 
 export class VectorIcon extends Component {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js
similarity index 98%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.test.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js
index 221b6268c55df..1a16035fe6d33 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_icon.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js
@@ -8,7 +8,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { VectorIcon } from './vector_icon';
-import { VectorStyle } from '../../../vector_style';
+import { VectorStyle } from '../../vector_style';
 
 let isPointsOnly = false;
 let isLinesOnly = false;
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_style_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/vector_style_legend.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/dynamic_orientation_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_selection.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/dynamic_orientation_selection.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_selection.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/orientation_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/orientation_editor.js
similarity index 92%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/orientation_editor.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/orientation_editor.js
index bfe712d13d3af..65efddae90933 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/orientation_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/orientation_editor.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { StaticDynamicStyleRow } from '../../static_dynamic_style_row';
+import { StaticDynamicStyleRow } from '../../../components/static_dynamic_style_row';
 import { DynamicOrientationSelection } from './dynamic_orientation_selection';
 import { StaticOrientationSelection } from './static_orientation_selection';
 import { i18n } from '@kbn/i18n';
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_selection.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_selection.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/dynamic_size_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_selection.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/dynamic_size_selection.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_selection.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
similarity index 93%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
index 31b9b4f5ad649..4279fbbe0fbb3 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ValidatedDualRange } from 'ui/validated_range';
-import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../../vector_style_defaults';
+import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../vector_style_defaults';
 import { i18n } from '@kbn/i18n';
 
 export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_selection.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_selection.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/vector_style_size_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/vector_style_size_editor.js
similarity index 92%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/vector_style_size_editor.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/vector_style_size_editor.js
index a03835f7a9501..ffaaace680a43 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/vector_style_size_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/vector_style_size_editor.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { StaticDynamicStyleRow } from '../../static_dynamic_style_row';
+import { StaticDynamicStyleRow } from '../../../components/static_dynamic_style_row';
 import  { DynamicSizeSelection } from './dynamic_size_selection';
 import  { StaticSizeSelection } from './static_size_selection';
 import { getVectorStyleLabel } from '../get_vector_style_label';
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/style_option_shapes.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_option_shapes.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/style_option_shapes.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_option_shapes.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
similarity index 98%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
index 83d4ff7c11d66..f624f4e661a14 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
@@ -16,12 +16,12 @@ import {
   getDefaultDynamicProperties,
   getDefaultStaticProperties,
   vectorStyles,
-} from '../../vector_style_defaults';
+} from '../vector_style_defaults';
 import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../../color_utils';
 import { VECTOR_SHAPE_TYPES } from '../../../sources/vector_feature_types';
-import { SYMBOLIZE_AS_ICON } from '../../vector_constants';
+import { SYMBOLIZE_AS_ICON } from '../vector_constants';
 import { i18n } from '@kbn/i18n';
-import { SYMBOL_OPTIONS } from '../../symbol_utils';
+import { SYMBOL_OPTIONS } from '../symbol_utils';
 
 import { EuiSpacer, EuiButtonGroup } from '@elastic/eui';
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_symbol_editor.js
similarity index 97%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_symbol_editor.js
index 268b1f39255b9..29be736b432f9 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_symbol_editor.js
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import { SYMBOLIZE_AS_CIRCLE, SYMBOLIZE_AS_ICON } from '../../vector_constants';
+import { SYMBOLIZE_AS_CIRCLE, SYMBOLIZE_AS_ICON } from '../vector_constants';
 import { SymbolIcon } from './legend/symbol_icon';
 
 const SYMBOLIZE_AS_OPTIONS = [
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_symbol_editor.test.js
similarity index 93%
rename from x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.test.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_symbol_editor.test.js
index 4a2c227d84535..44b864dea2e99 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_symbol_editor.test.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { SYMBOLIZE_AS_CIRCLE, SYMBOLIZE_AS_ICON } from '../../vector_constants';
+import { SYMBOLIZE_AS_CIRCLE, SYMBOLIZE_AS_ICON } from '../vector_constants';
 import { VectorStyleSymbolEditor } from './vector_style_symbol_editor';
 
 const symbolOptions = [
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js
new file mode 100644
index 0000000000000..5c2122dfc4566
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js
@@ -0,0 +1,105 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { DynamicStyleProperty } from './dynamic_style_property';
+import _ from 'lodash';
+import { getComputedFieldName } from '../style_util';
+import { getColorRampStops } from '../../color_utils';
+
+
+export class DynamicColorProperty extends DynamicStyleProperty {
+
+
+  syncCircleColorWithMb(mbLayerId, mbMap, alpha) {
+    const color = this._getMbColor();
+    mbMap.setPaintProperty(mbLayerId, 'circle-color', color);
+    mbMap.setPaintProperty(mbLayerId, 'circle-opacity', alpha);
+  }
+
+  syncIconColorWithMb(mbLayerId, mbMap) {
+    const color = this._getMbColor();
+    mbMap.setPaintProperty(mbLayerId, 'icon-color', color);
+  }
+
+  syncHaloBorderColorWithMb(mbLayerId, mbMap) {
+    const color = this._getMbColor();
+    mbMap.setPaintProperty(mbLayerId, 'icon-halo-color', color);
+  }
+
+  syncCircleStrokeWithMb(pointLayerId, mbMap, alpha) {
+    const color = this._getMbColor();
+    mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color);
+    mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha);
+  }
+
+  syncFillColorWithMb(mbLayerId, mbMap, alpha) {
+    const color = this._getMbColor();
+    mbMap.setPaintProperty(mbLayerId, 'fill-color', color);
+    mbMap.setPaintProperty(mbLayerId, 'fill-opacity', alpha);
+  }
+
+  syncLineColorWithMb(mbLayerId, mbMap, alpha) {
+    const color = this._getMbColor();
+    mbMap.setPaintProperty(mbLayerId, 'line-color', color);
+    mbMap.setPaintProperty(mbLayerId, 'line-opacity', alpha);
+  }
+
+  _getMbColor() {
+    const isDynamicConfigComplete = _.has(this._options, 'field.name') && _.has(this._options, 'color');
+    if (!isDynamicConfigComplete) {
+      return null;
+    }
+
+    if (this._options.useCustomColorRamp && (!this._options.customColorRamp || !this._options.customColorRamp.length)) {
+      return null;
+    }
+
+    return this._getMBDataDrivenColor({
+      targetName: getComputedFieldName(this._styleName, this._options.field.name),
+      colorStops: this._getMBColorStops(),
+      isSteps: this._options.useCustomColorRamp,
+    });
+  }
+
+  _getMBDataDrivenColor({ targetName, colorStops, isSteps }) {
+    if (isSteps) {
+      const firstStopValue = colorStops[0];
+      const lessThenFirstStopValue = firstStopValue - 1;
+      return [
+        'step',
+        ['coalesce', ['feature-state', targetName], lessThenFirstStopValue],
+        'rgba(0,0,0,0)', // MB will assign the base value to any features that is below the first stop value
+        ...colorStops
+      ];
+    }
+
+    return [
+      'interpolate',
+      ['linear'],
+      ['coalesce', ['feature-state', targetName], -1],
+      -1, 'rgba(0,0,0,0)',
+      ...colorStops
+    ];
+  }
+
+
+  _getMBColorStops() {
+
+    if (this._options.useCustomColorRamp) {
+      return this._options.customColorRamp.reduce((accumulatedStops, nextStop) => {
+        return [...accumulatedStops, nextStop.stop, nextStop.color];
+      }, []);
+    }
+
+    return getColorRampStops(this._options.color);
+  }
+
+}
+
+
+
+
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js
new file mode 100644
index 0000000000000..2881ee422048b
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { DynamicStyleProperty } from './dynamic_style_property';
+import { getComputedFieldName } from '../style_util';
+import { vectorStyles } from '../vector_style_defaults';
+
+
+export class DynamicOrientationProperty extends DynamicStyleProperty {
+
+  syncIconRotationWithMb(symbolLayerId, mbMap) {
+    if (this._options.field && this._options.field.name) {
+      const targetName = getComputedFieldName(vectorStyles.ICON_ORIENTATION, this._options.field.name);
+      // Using property state instead of feature-state because layout properties do not support feature-state
+      mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', ['coalesce', ['get', targetName], 0]);
+    } else {
+      mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', 0);
+    }
+  }
+
+}
+
+
+
+
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js
new file mode 100644
index 0000000000000..2758a440f57c5
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { DynamicStyleProperty } from './dynamic_style_property';
+import { getComputedFieldName } from '../style_util';
+import { HALF_LARGE_MAKI_ICON_SIZE, LARGE_MAKI_ICON_SIZE, SMALL_MAKI_ICON_SIZE } from '../symbol_utils';
+import { vectorStyles } from '../vector_style_defaults';
+import _ from 'lodash';
+
+export class DynamicSizeProperty extends DynamicStyleProperty {
+
+  syncHaloWidthWithMb(mbLayerId, mbMap) {
+    const haloWidth = this._getMbSize();
+    mbMap.setPaintProperty(mbLayerId, 'icon-halo-width', haloWidth);
+  }
+
+
+  syncIconImageAndSizeWithMb(symbolLayerId, mbMap, symbolId) {
+    if (this._isSizeDynamicConfigComplete(this._options)) {
+      const iconPixels = this._options.maxSize >= HALF_LARGE_MAKI_ICON_SIZE
+        ? LARGE_MAKI_ICON_SIZE
+        : SMALL_MAKI_ICON_SIZE;
+      mbMap.setLayoutProperty(symbolLayerId, 'icon-image', `${symbolId}-${iconPixels}`);
+
+      const halfIconPixels = iconPixels / 2;
+      const targetName = getComputedFieldName(vectorStyles.ICON_SIZE, this._options.field.name);
+      // Using property state instead of feature-state because layout properties do not support feature-state
+      mbMap.setLayoutProperty(symbolLayerId, 'icon-size', [
+        'interpolate',
+        ['linear'],
+        ['coalesce', ['get', targetName], 0],
+        0, this._options.minSize / halfIconPixels,
+        1, this._options.maxSize / halfIconPixels
+      ]);
+    } else {
+      mbMap.setLayoutProperty(symbolLayerId, 'icon-image', null);
+      mbMap.setLayoutProperty(symbolLayerId, 'icon-size', null);
+    }
+  }
+
+  syncCircleStrokeWidthWithMb(mbLayerId, mbMap) {
+    const lineWidth = this._getMbSize();
+    mbMap.setPaintProperty(mbLayerId, 'circle-stroke-width', lineWidth);
+  }
+
+  syncCircleRadiusWithMb(mbLayerId, mbMap) {
+    const circleRadius = this._getMbSize();
+    mbMap.setPaintProperty(mbLayerId, 'circle-radius', circleRadius);
+  }
+
+  syncLineWidthWithMb(mbLayerId, mbMap) {
+    const lineWidth = this._getMbSize();
+    mbMap.setPaintProperty(mbLayerId, 'line-width', lineWidth);
+  }
+
+  _getMbSize() {
+    if (this._isSizeDynamicConfigComplete(this._options)) {
+      return this._getMbDataDrivenSize({
+        targetName: getComputedFieldName(this._styleName, this._options.field.name),
+        minSize: this._options.minSize,
+        maxSize: this._options.maxSize,
+      });
+    }
+    return null;
+  }
+
+  _getMbDataDrivenSize({ targetName, minSize, maxSize }) {
+    return   [
+      'interpolate',
+      ['linear'],
+      ['coalesce', ['feature-state', targetName], 0],
+      0, minSize,
+      1, maxSize
+    ];
+  }
+
+  _isSizeDynamicConfigComplete() {
+    return this._options.field && this._options.field.name && _.has(this._options, 'minSize') && _.has(this._options, 'maxSize');
+  }
+}
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
new file mode 100644
index 0000000000000..8200ede3e3523
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { AbstractStyleProperty } from './style_property';
+
+export class DynamicStyleProperty extends AbstractStyleProperty {
+    static type = 'DYNAMIC';
+}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js
new file mode 100644
index 0000000000000..d4c44fca1bd08
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_color_property.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { StaticStyleProperty } from './static_style_property';
+
+
+export class StaticColorProperty extends StaticStyleProperty {
+
+  syncCircleColorWithMb(mbLayerId, mbMap, alpha) {
+    mbMap.setPaintProperty(mbLayerId, 'circle-color', this._options.color);
+    mbMap.setPaintProperty(mbLayerId, 'circle-opacity', alpha);
+  }
+
+  syncFillColorWithMb(mbLayerId, mbMap, alpha) {
+    mbMap.setPaintProperty(mbLayerId, 'fill-color', this._options.color);
+    mbMap.setPaintProperty(mbLayerId, 'fill-opacity', alpha);
+  }
+
+  syncIconColorWithMb(mbLayerId, mbMap) {
+    mbMap.setPaintProperty(mbLayerId, 'icon-color', this._options.color);
+  }
+
+  syncHaloBorderColorWithMb(mbLayerId, mbMap) {
+    mbMap.setPaintProperty(mbLayerId, 'icon-halo-color', this._options.color);
+  }
+
+  syncLineColorWithMb(mbLayerId, mbMap, alpha) {
+    mbMap.setPaintProperty(mbLayerId, 'line-color', this._options.color);
+    mbMap.setPaintProperty(mbLayerId, 'line-opacity', alpha);
+  }
+
+  syncCircleStrokeWithMb(pointLayerId, mbMap, alpha) {
+    mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', this._options.color);
+    mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha);
+  }
+
+}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_orientation_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_orientation_property.js
new file mode 100644
index 0000000000000..48a7bbd3f79df
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_orientation_property.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { StaticStyleProperty } from './static_style_property';
+
+
+export class StaticOrientationProperty extends StaticStyleProperty {
+
+  constructor(options, styleName) {
+    if (typeof options.orientation !== 'number') {
+      super({ orientation: 0 }, styleName);
+    } else {
+      super(options, styleName);
+    }
+  }
+
+  syncIconRotationWithMb(symbolLayerId, mbMap) {
+    mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', this._options.orientation);
+  }
+
+
+}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js
new file mode 100644
index 0000000000000..37162d8cb0a3c
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_size_property.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { StaticStyleProperty } from './static_style_property';
+import { HALF_LARGE_MAKI_ICON_SIZE, LARGE_MAKI_ICON_SIZE, SMALL_MAKI_ICON_SIZE } from '../symbol_utils';
+
+
+export class StaticSizeProperty extends StaticStyleProperty {
+
+  constructor(options, styleName) {
+    if (typeof options.size !== 'number') {
+      super({ size: 1 }, styleName);
+    } else {
+      super(options, styleName);
+    }
+  }
+
+  syncHaloWidthWithMb(mbLayerId, mbMap) {
+    mbMap.setPaintProperty(mbLayerId, 'icon-halo-width', this._options.size);
+  }
+
+  syncIconImageAndSizeWithMb(symbolLayerId, mbMap, symbolId) {
+    const iconPixels = this._size >= HALF_LARGE_MAKI_ICON_SIZE ? LARGE_MAKI_ICON_SIZE : SMALL_MAKI_ICON_SIZE;
+    mbMap.setLayoutProperty(symbolLayerId, 'icon-image', `${symbolId}-${iconPixels}`);
+    const halfIconPixels = iconPixels / 2;
+    mbMap.setLayoutProperty(symbolLayerId, 'icon-size', this._options.size / halfIconPixels);
+  }
+
+  syncCircleStrokeWidthWithMb(mbLayerId, mbMap) {
+    mbMap.setPaintProperty(mbLayerId, 'circle-stroke-width', this._options.size);
+  }
+
+  syncCircleRadiusWithMb(mbLayerId, mbMap) {
+    mbMap.setPaintProperty(mbLayerId, 'circle-radius', this._options.size);
+  }
+
+  syncLineWidthWithMb(mbLayerId, mbMap) {
+    mbMap.setPaintProperty(mbLayerId, 'line-width', this._options.size);
+  }
+
+
+}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_style_property.js
new file mode 100644
index 0000000000000..448efc06899e5
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/static_style_property.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import { AbstractStyleProperty } from './style_property';
+
+export class StaticStyleProperty extends AbstractStyleProperty {
+  static type = 'STATIC';
+
+}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js
new file mode 100644
index 0000000000000..7e9e27f83722d
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export class AbstractStyleProperty {
+
+  constructor(options, styleName) {
+    this._options = options;
+    this._styleName = styleName;
+  }
+}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/style_util.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/style_util.js
new file mode 100644
index 0000000000000..69caaca080138
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/style_util.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+export function getComputedFieldName(styleName, fieldName) {
+  return `${getComputedFieldNamePrefix(fieldName)}__${styleName}`;
+}
+
+export function getComputedFieldNamePrefix(fieldName) {
+  return `__kbn__dynamic__${fieldName}`;
+}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/symbol_utils.js
similarity index 97%
rename from x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/symbol_utils.js
index 22e1a6aea6a72..967d0e0bbd096 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/symbol_utils.js
@@ -6,7 +6,7 @@
 
 import maki from '@elastic/maki';
 import xml2js from 'xml2js';
-import { parseXmlString } from '../../../common/parse_xml_string';
+import { parseXmlString } from '../../../../common/parse_xml_string';
 
 export const LARGE_MAKI_ICON_SIZE = 15;
 const LARGE_MAKI_ICON_SIZE_AS_STRING = LARGE_MAKI_ICON_SIZE.toString();
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/symbol_utils.test.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.test.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/symbol_utils.test.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector_constants.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_constants.js
similarity index 100%
rename from x-pack/legacy/plugins/maps/public/layers/styles/vector_constants.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_constants.js
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
similarity index 58%
rename from x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
index f26f4df0b1753..70ebba7e8d177 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
@@ -7,34 +7,36 @@
 import _ from 'lodash';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { getColorRampStops } from './color_utils';
-import { VectorStyleEditor } from './components/vector/vector_style_editor';
+import { VectorStyleEditor } from './components/vector_style_editor';
 import { getDefaultProperties, vectorStyles } from './vector_style_defaults';
-import { AbstractStyle } from './abstract_style';
-import { SOURCE_DATA_ID_ORIGIN, GEO_JSON_TYPE } from '../../../common/constants';
-import { VectorIcon } from './components/vector/legend/vector_icon';
-import { VectorStyleLegend } from './components/vector/legend/vector_style_legend';
-import { VECTOR_SHAPE_TYPES } from '../sources/vector_feature_types';
+import { AbstractStyle } from '../abstract_style';
+import { SOURCE_DATA_ID_ORIGIN, GEO_JSON_TYPE } from '../../../../common/constants';
+import { VectorIcon } from './components/legend/vector_icon';
+import { VectorStyleLegend } from './components/legend/vector_style_legend';
+import { VECTOR_SHAPE_TYPES } from '../../sources/vector_feature_types';
 import { SYMBOLIZE_AS_CIRCLE, SYMBOLIZE_AS_ICON } from './vector_constants';
-import {
-  getMakiSymbolAnchor,
-  LARGE_MAKI_ICON_SIZE,
-  SMALL_MAKI_ICON_SIZE,
-  HALF_LARGE_MAKI_ICON_SIZE
-} from './symbol_utils';
+import { getMakiSymbolAnchor } from './symbol_utils';
+import { getComputedFieldName, getComputedFieldNamePrefix } from './style_util';
+import { StaticStyleProperty } from './properties/static_style_property';
+import { DynamicStyleProperty } from './properties/dynamic_style_property';
+import { DynamicSizeProperty } from './properties/dynamic_size_property';
+import { StaticSizeProperty } from './properties/static_size_property';
+import { StaticColorProperty } from './properties/static_color_property';
+import { DynamicColorProperty } from './properties/dynamic_color_property';
+import { StaticOrientationProperty } from './properties/static_orientation_property';
+import { DynamicOrientationProperty } from './properties/dynamic_orientation_property';
+
+const POINTS = [GEO_JSON_TYPE.POINT, GEO_JSON_TYPE.MULTI_POINT];
+const LINES = [GEO_JSON_TYPE.LINE_STRING, GEO_JSON_TYPE.MULTI_LINE_STRING];
+const POLYGONS = [GEO_JSON_TYPE.POLYGON, GEO_JSON_TYPE.MULTI_POLYGON];
 
 export class VectorStyle extends AbstractStyle {
 
   static type = 'VECTOR';
-  static STYLE_TYPE = { 'DYNAMIC': 'DYNAMIC', 'STATIC': 'STATIC' };
+  static STYLE_TYPE = { 'DYNAMIC': DynamicStyleProperty.type, 'STATIC': StaticStyleProperty.type };
 
-  static getComputedFieldName(styleName, fieldName) {
-    return `${VectorStyle.getComputedFieldNamePrefix(fieldName)}__${styleName}`;
-  }
-
-  static getComputedFieldNamePrefix(fieldName) {
-    return `__kbn__dynamic__${fieldName}`;
-  }
+  static getComputedFieldName = getComputedFieldName;
+  static getComputedFieldNamePrefix = getComputedFieldNamePrefix;
 
   constructor(descriptor = {}, source) {
     super();
@@ -43,6 +45,13 @@ export class VectorStyle extends AbstractStyle {
       ...descriptor,
       ...VectorStyle.createDescriptor(descriptor.properties),
     };
+
+    this._lineColorStyleProperty = this._makeColorProperty(this._descriptor.properties[vectorStyles.LINE_COLOR], vectorStyles.LINE_COLOR);
+    this._fillColorStyleProperty = this._makeColorProperty(this._descriptor.properties[vectorStyles.FILL_COLOR], vectorStyles.FILL_COLOR);
+    this._lineWidthStyleProperty = this._makeSizeProperty(this._descriptor.properties[vectorStyles.LINE_WIDTH], vectorStyles.LINE_WIDTH);
+    this._iconSizeStyleProperty = this._makeSizeProperty(this._descriptor.properties[vectorStyles.ICON_SIZE], vectorStyles.ICON_SIZE);
+    // eslint-disable-next-line max-len
+    this._iconOrientationProperty = this._makeOrientationProperty(this._descriptor.properties[vectorStyles.ICON_ORIENTATION], vectorStyles.ICON_ORIENTATION);
   }
 
   static createDescriptor(properties = {}) {
@@ -168,13 +177,13 @@ export class VectorStyle extends AbstractStyle {
     let hasPolygons = false;
     for (let i = 0; i < features.length; i++) {
       const feature = features[i];
-      if (!hasPoints && [GEO_JSON_TYPE.POINT, GEO_JSON_TYPE.MULTI_POINT].includes(feature.geometry.type)) {
+      if (!hasPoints && POINTS.includes(feature.geometry.type)) {
         hasPoints = true;
       }
-      if (!hasLines && [GEO_JSON_TYPE.LINE_STRING, GEO_JSON_TYPE.MULTI_LINE_STRING].includes(feature.geometry.type)) {
+      if (!hasLines && LINES.includes(feature.geometry.type)) {
         hasLines = true;
       }
-      if (!hasPolygons && [GEO_JSON_TYPE.POLYGON, GEO_JSON_TYPE.MULTI_POLYGON].includes(feature.geometry.type)) {
+      if (!hasPolygons && POLYGONS.includes(feature.geometry.type)) {
         hasPolygons = true;
       }
 
@@ -430,210 +439,72 @@ export class VectorStyle extends AbstractStyle {
     return hasGeoJsonProperties;
   }
 
-  _getMBDataDrivenColor({ targetName, colorStops, isSteps }) {
-    if (isSteps) {
-      const firstStopValue = colorStops[0];
-      const lessThenFirstStopValue = firstStopValue - 1;
-      return [
-        'step',
-        ['coalesce', ['feature-state', targetName], lessThenFirstStopValue],
-        'rgba(0,0,0,0)', // MB will assign the base value to any features that is below the first stop value
-        ...colorStops
-      ];
-    }
-
-    return [
-      'interpolate',
-      ['linear'],
-      ['coalesce', ['feature-state', targetName], -1],
-      -1, 'rgba(0,0,0,0)',
-      ...colorStops
-    ];
-  }
-
-  _getMbDataDrivenSize({ targetName, minSize, maxSize }) {
-    return   [
-      'interpolate',
-      ['linear'],
-      ['coalesce', ['feature-state', targetName], 0],
-      0, minSize,
-      1, maxSize
-    ];
+  arePointsSymbolizedAsCircles() {
+    return this._descriptor.properties.symbol.options.symbolizeAs === SYMBOLIZE_AS_CIRCLE;
   }
 
-  _getMBColor(styleName, styleDescriptor) {
-    const isStatic = styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC;
-    if (isStatic) {
-      return _.get(styleDescriptor, 'options.color', null);
-    }
-
-    const isDynamicConfigComplete = _.has(styleDescriptor, 'options.field.name')
-      && _.has(styleDescriptor, 'options.color');
-    if (!isDynamicConfigComplete) {
-      return null;
-    }
-
-    if (styleDescriptor.options.useCustomColorRamp &&
-      (!styleDescriptor.options.customColorRamp ||
-      !styleDescriptor.options.customColorRamp.length)) {
-      return null;
-    }
-
-    return this._getMBDataDrivenColor({
-      targetName: VectorStyle.getComputedFieldName(styleName, styleDescriptor.options.field.name),
-      colorStops: this._getMBColorStops(styleDescriptor),
-      isSteps: styleDescriptor.options.useCustomColorRamp,
-    });
+  setMBPaintProperties({ alpha, mbMap, fillLayerId, lineLayerId }) {
+    this._fillColorStyleProperty.syncFillColorWithMb(fillLayerId, mbMap, alpha);
+    this._lineColorStyleProperty.syncLineColorWithMb(lineLayerId, mbMap, alpha);
+    this._lineWidthStyleProperty.syncLineWidthWithMb(lineLayerId, mbMap);
   }
 
-  _getMBColorStops(styleDescriptor) {
-    if (styleDescriptor.options.useCustomColorRamp) {
-      return styleDescriptor.options.customColorRamp.reduce((accumulatedStops, nextStop) => {
-        return [...accumulatedStops, nextStop.stop, nextStop.color];
-      }, []);
-    }
-
-    return getColorRampStops(styleDescriptor.options.color);
+  setMBPaintPropertiesForPoints({ alpha, mbMap, pointLayerId }) {
+    this._fillColorStyleProperty.syncCircleColorWithMb(pointLayerId, mbMap, alpha);
+    this._lineColorStyleProperty.syncCircleStrokeWithMb(pointLayerId, mbMap, alpha);
+    this._lineWidthStyleProperty.syncCircleStrokeWidthWithMb(pointLayerId, mbMap);
+    this._iconSizeStyleProperty.syncCircleRadiusWithMb(pointLayerId, mbMap);
   }
 
-  _isSizeDynamicConfigComplete(styleDescriptor) {
-    return _.has(styleDescriptor, 'options.field.name')
-      && _.has(styleDescriptor, 'options.minSize')
-      && _.has(styleDescriptor, 'options.maxSize');
-  }
+  setMBSymbolPropertiesForPoints({ mbMap, symbolLayerId, alpha }) {
 
-  _getMbSize(styleName, styleDescriptor) {
-    if (styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC) {
-      return styleDescriptor.options.size;
-    }
+    const symbolId = this._descriptor.properties.symbol.options.symbolId;
+    mbMap.setLayoutProperty(symbolLayerId, 'icon-ignore-placement', true);
+    mbMap.setLayoutProperty(symbolLayerId, 'icon-anchor', getMakiSymbolAnchor(symbolId));
+    mbMap.setPaintProperty(symbolLayerId, 'icon-opacity', alpha);
 
-    if (this._isSizeDynamicConfigComplete(styleDescriptor)) {
-      return this._getMbDataDrivenSize({
-        targetName: VectorStyle.getComputedFieldName(styleName, styleDescriptor.options.field.name),
-        minSize: styleDescriptor.options.minSize,
-        maxSize: styleDescriptor.options.maxSize,
-      });
-    }
+    // icon-color is only supported on SDF icons.
+    this._fillColorStyleProperty.syncIconColorWithMb(symbolLayerId, mbMap);
+    this._lineColorStyleProperty.syncHaloBorderColorWithMb(symbolLayerId, mbMap);
+    this._lineWidthStyleProperty.syncHaloWidthWithMb(symbolLayerId, mbMap);
+    this._iconSizeStyleProperty.syncIconImageAndSizeWithMb(symbolLayerId, mbMap, symbolId);
+    this._iconOrientationProperty.syncIconRotationWithMb(symbolLayerId, mbMap);
 
-    return null;
   }
 
-  setMBPaintProperties({ alpha, mbMap, fillLayerId, lineLayerId }) {
-    if (this._descriptor.properties.fillColor) {
-      const color = this._getMBColor(vectorStyles.FILL_COLOR, this._descriptor.properties.fillColor);
-      mbMap.setPaintProperty(fillLayerId, 'fill-color', color);
-      mbMap.setPaintProperty(fillLayerId, 'fill-opacity', alpha);
-    } else {
-      mbMap.setPaintProperty(fillLayerId, 'fill-color', null);
-      mbMap.setPaintProperty(fillLayerId, 'fill-opacity', 0);
-    }
-
-    if (this._descriptor.properties.lineColor) {
-      const color = this._getMBColor(vectorStyles.LINE_COLOR, this._descriptor.properties.lineColor);
-      mbMap.setPaintProperty(lineLayerId, 'line-color', color);
-      mbMap.setPaintProperty(lineLayerId, 'line-opacity', alpha);
-
-    } else {
-      mbMap.setPaintProperty(lineLayerId, 'line-color', null);
-      mbMap.setPaintProperty(lineLayerId, 'line-opacity', 0);
-    }
-
-    if (this._descriptor.properties.lineWidth) {
-      const lineWidth = this._getMbSize(vectorStyles.LINE_WIDTH, this._descriptor.properties.lineWidth);
-      mbMap.setPaintProperty(lineLayerId, 'line-width', lineWidth);
+  _makeSizeProperty(descriptor, styleName) {
+    if (!descriptor || !descriptor.options) {
+      return new StaticSizeProperty({ size: 0 }, styleName);
+    } else if (descriptor.type === StaticStyleProperty.type) {
+      return new StaticSizeProperty(descriptor.options, styleName);
+    } else if (descriptor.type === DynamicStyleProperty.type) {
+      return new DynamicSizeProperty(descriptor.options, styleName);
     } else {
-      mbMap.setPaintProperty(lineLayerId, 'line-width', 0);
+      throw new Error(`${descriptor} not implemented`);
     }
   }
 
-  setMBPaintPropertiesForPoints({ alpha, mbMap, pointLayerId }) {
-    if (this._descriptor.properties.fillColor) {
-      const color = this._getMBColor(vectorStyles.FILL_COLOR, this._descriptor.properties.fillColor);
-      mbMap.setPaintProperty(pointLayerId, 'circle-color', color);
-      mbMap.setPaintProperty(pointLayerId, 'circle-opacity', alpha);
-    } else {
-      mbMap.setPaintProperty(pointLayerId, 'circle-color', null);
-      mbMap.setPaintProperty(pointLayerId, 'circle-opacity', 0);
-    }
-    if (this._descriptor.properties.lineColor) {
-      const color = this._getMBColor(vectorStyles.LINE_COLOR, this._descriptor.properties.lineColor);
-      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color);
-      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha);
-
-    } else {
-      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', null);
-      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', 0);
-    }
-    if (this._descriptor.properties.lineWidth) {
-      const lineWidth = this._getMbSize(vectorStyles.LINE_WIDTH, this._descriptor.properties.lineWidth);
-      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-width', lineWidth);
-    } else {
-      mbMap.setPaintProperty(pointLayerId, 'circle-stroke-width', 0);
-    }
-    if (this._descriptor.properties.iconSize) {
-      const iconSize = this._getMbSize(vectorStyles.ICON_SIZE, this._descriptor.properties.iconSize);
-      mbMap.setPaintProperty(pointLayerId, 'circle-radius', iconSize);
+  _makeColorProperty(descriptor, styleName) {
+    if (!descriptor || !descriptor.options) {
+      return new StaticColorProperty({ color: null }, styleName);
+    } else if (descriptor.type === StaticStyleProperty.type) {
+      return new StaticColorProperty(descriptor.options, styleName);
+    } else if (descriptor.type === DynamicStyleProperty.type) {
+      return new DynamicColorProperty(descriptor.options, styleName);
     } else {
-      mbMap.setPaintProperty(pointLayerId, 'circle-radius', 0);
+      throw new Error(`${descriptor} not implemented`);
     }
   }
 
-  async setMBSymbolPropertiesForPoints({ mbMap, symbolLayerId, alpha }) {
-    mbMap.setLayoutProperty(symbolLayerId, 'icon-ignore-placement', true);
-
-    const symbolId = this._descriptor.properties.symbol.options.symbolId;
-    mbMap.setLayoutProperty(symbolLayerId, 'icon-anchor', getMakiSymbolAnchor(symbolId));
-    const color = this._getMBColor(vectorStyles.FILL_COLOR, this._descriptor.properties.fillColor);
-    const haloColor = this._getMBColor(vectorStyles.LINE_COLOR, this._descriptor.properties.lineColor);
-    const haloWidth = this._getMbSize(vectorStyles.LINE_WIDTH, this._descriptor.properties.lineWidth);
-    // icon-color is only supported on SDF icons.
-    mbMap.setPaintProperty(symbolLayerId, 'icon-color', color);
-    mbMap.setPaintProperty(symbolLayerId, 'icon-halo-color', haloColor);
-    mbMap.setPaintProperty(symbolLayerId, 'icon-halo-width', haloWidth);
-    mbMap.setPaintProperty(symbolLayerId, 'icon-opacity', alpha);
-
-    // circle sizing is by radius
-    // to make icons be similiar in size to circles then have to deal with icon in half width measurements
-    const iconSize = this._descriptor.properties.iconSize;
-    if (iconSize.type === VectorStyle.STYLE_TYPE.STATIC) {
-      const iconPixels = iconSize.options.size >= HALF_LARGE_MAKI_ICON_SIZE
-        ? LARGE_MAKI_ICON_SIZE
-        : SMALL_MAKI_ICON_SIZE;
-      mbMap.setLayoutProperty(symbolLayerId, 'icon-image', `${symbolId}-${iconPixels}`);
-
-      const halfIconPixels = iconPixels / 2;
-      mbMap.setLayoutProperty(symbolLayerId, 'icon-size', iconSize.options.size / halfIconPixels);
-    } else if (this._isSizeDynamicConfigComplete(iconSize)) {
-      const iconPixels = iconSize.options.maxSize >= HALF_LARGE_MAKI_ICON_SIZE
-        ? LARGE_MAKI_ICON_SIZE
-        : SMALL_MAKI_ICON_SIZE;
-      mbMap.setLayoutProperty(symbolLayerId, 'icon-image', `${symbolId}-${iconPixels}`);
-
-      const halfIconPixels = iconPixels / 2;
-      const targetName = VectorStyle.getComputedFieldName(vectorStyles.ICON_SIZE, iconSize.options.field.name);
-      // Using property state instead of feature-state because layout properties do not support feature-state
-      mbMap.setLayoutProperty(symbolLayerId, 'icon-size', [
-        'interpolate',
-        ['linear'],
-        ['coalesce', ['get', targetName], 0],
-        0, iconSize.options.minSize / halfIconPixels,
-        1, iconSize.options.maxSize / halfIconPixels
-      ]);
-    }
-
-    const iconOrientation = this._descriptor.properties.iconOrientation;
-    if (iconOrientation.type === VectorStyle.STYLE_TYPE.STATIC) {
-      mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', iconOrientation.options.orientation);
-    } else if (_.has(iconOrientation, 'options.field.name')) {
-      const targetName = VectorStyle.getComputedFieldName(vectorStyles.ICON_ORIENTATION, iconOrientation.options.field.name);
-      // Using property state instead of feature-state because layout properties do not support feature-state
-      mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', [
-        'coalesce', ['get', targetName], 0
-      ]);
+  _makeOrientationProperty(descriptor, styleName) {
+    if (!descriptor || !descriptor.options) {
+      return new StaticOrientationProperty({ orientation: 0 }, styleName);
+    } else if (descriptor.type === StaticStyleProperty.type) {
+      return new StaticOrientationProperty(descriptor.options, styleName);
+    } else if (descriptor.type === DynamicStyleProperty.type) {
+      return new DynamicOrientationProperty(descriptor.options, styleName);
+    } else {
+      throw new Error(`${descriptor} not implemented`);
     }
   }
-
-  arePointsSymbolizedAsCircles() {
-    return this._descriptor.properties.symbol.options.symbolizeAs === SYMBOLIZE_AS_CIRCLE;
-  }
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
similarity index 98%
rename from x-pack/legacy/plugins/maps/public/layers/styles/vector_style.test.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
index 7c993564018aa..c0d76fadc01a5 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.test.js
@@ -5,8 +5,8 @@
  */
 
 import { VectorStyle } from './vector_style';
-import { DataRequest } from '../util/data_request';
-import { VECTOR_SHAPE_TYPES } from '../sources/vector_feature_types';
+import { DataRequest } from '../../util/data_request';
+import { VECTOR_SHAPE_TYPES } from '../../sources/vector_feature_types';
 
 describe('getDescriptorWithMissingStylePropsRemoved', () => {
   const fieldName = 'doIStillExist';
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style_defaults.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js
similarity index 99%
rename from x-pack/legacy/plugins/maps/public/layers/styles/vector_style_defaults.js
rename to x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js
index dfd0c1ca1b86b..ea4228430d13d 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector_style_defaults.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style_defaults.js
@@ -10,7 +10,7 @@ import {
   COLOR_GRADIENTS,
   DEFAULT_FILL_COLORS,
   DEFAULT_LINE_COLORS
-} from './color_utils';
+} from '../color_utils';
 
 const DEFAULT_ICON = 'airfield';
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js
index 7372b549f6423..b2f45cb6206c6 100644
--- a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js
+++ b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js
@@ -7,7 +7,7 @@
 import turf from 'turf';
 import React from 'react';
 import { AbstractLayer } from './layer';
-import { VectorStyle } from './styles/vector_style';
+import { VectorStyle } from './styles/vector/vector_style';
 import { InnerJoin } from './joins/inner_join';
 import {
   GEO_JSON_TYPE,
diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
index efcac8a9175ca..4f561c9391d4d 100644
--- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
+++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
@@ -11,8 +11,8 @@ import { VectorTileLayer } from '../layers/vector_tile_layer';
 import { VectorLayer } from '../layers/vector_layer';
 import { HeatmapLayer } from '../layers/heatmap_layer';
 import { ALL_SOURCES } from '../layers/sources/all_sources';
-import { VectorStyle } from '../layers/styles/vector_style';
-import { HeatmapStyle } from '../layers/styles/heatmap_style';
+import { VectorStyle } from '../layers/styles/vector/vector_style';
+import { HeatmapStyle } from '../layers/styles/heatmap/heatmap_style';
 import { timefilter } from 'ui/timefilter';
 import { getInspectorAdapters } from '../reducers/non_serializable_instances';
 import { copyPersistentState, TRACKED_LAYER_DESCRIPTOR } from '../reducers/util';