diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
index f7374ba91f8fe..a7d0d91d3d8e9 100644
--- a/x-pack/plugins/maps/common/constants.ts
+++ b/x-pack/plugins/maps/common/constants.ts
@@ -67,6 +67,7 @@ export enum SOURCE_TYPES {
   REGIONMAP_FILE = 'REGIONMAP_FILE',
   GEOJSON_FILE = 'GEOJSON_FILE',
   MVT_SINGLE_LAYER = 'MVT_SINGLE_LAYER',
+  TILEJSON_SINGLE_LAYER = 'TILEJSON_SINGLE_LAYER',
 }
 
 export enum FIELD_ORIGIN {
@@ -222,6 +223,11 @@ export enum SCALING_TYPES {
 
 export const RGBA_0000 = 'rgba(0,0,0,0)';
 
+export enum MVTFieldType {
+  STRING = 'String',
+  NUMBER = 'Number',
+}
+
 export const SPATIAL_FILTERS_LAYER_ID = 'SPATIAL_FILTERS_LAYER_ID';
 
 export enum INITIAL_LOCATION {
diff --git a/x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.d.ts b/x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.ts
similarity index 100%
rename from x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.d.ts
rename to x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.ts
diff --git a/x-pack/plugins/maps/common/descriptor_types/index.ts b/x-pack/plugins/maps/common/descriptor_types/index.ts
index af0f4487f471b..b0ae065856a5d 100644
--- a/x-pack/plugins/maps/common/descriptor_types/index.ts
+++ b/x-pack/plugins/maps/common/descriptor_types/index.ts
@@ -5,6 +5,6 @@
  */
 
 export * from './data_request_descriptor_types';
-export * from './descriptor_types';
+export * from './sources';
 export * from './map_descriptor';
 export * from './style_property_descriptor_types';
diff --git a/x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts
similarity index 82%
rename from x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts
rename to x-pack/plugins/maps/common/descriptor_types/sources.ts
index b412375874f68..ef23f507594e9 100644
--- a/x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts
+++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts
@@ -6,7 +6,14 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 
 import { Query } from 'src/plugins/data/public';
-import { AGG_TYPE, GRID_RESOLUTION, RENDER_AS, SORT_ORDER, SCALING_TYPES } from '../constants';
+import {
+  AGG_TYPE,
+  GRID_RESOLUTION,
+  RENDER_AS,
+  SORT_ORDER,
+  SCALING_TYPES,
+  MVTFieldType,
+} from '../constants';
 import { StyleDescriptor, VectorStyleDescriptor } from './style_property_descriptor_types';
 import { DataRequestDescriptor } from './data_request_descriptor_types';
 
@@ -95,18 +102,43 @@ export type XYZTMSSourceDescriptor = AbstractSourceDescriptor &
     urlTemplate: string;
   };
 
-export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & {
+export type MVTFieldDescriptor = {
+  name: string;
+  type: MVTFieldType;
+};
+
+export type TiledSingleLayerVectorSourceSettings = {
   urlTemplate: string;
   layerName: string;
 
   // These are the min/max zoom levels of the availability of the a particular layerName in the tileset at urlTemplate.
   // These are _not_ the visible zoom-range of the data on a map.
-  // Tiled data can be displayed at higher levels of zoom than that they are stored in the tileset.
-  // e.g. EMS basemap data from level 14 is at most detailed resolution and can be displayed at higher levels
+  // These are important so mapbox does not issue invalid requests based on the zoom level.
+
+  // Tiled layer data cannot be displayed at lower levels of zoom than that they are stored in the tileset.
+  // e.g. building footprints at level 14 cannot be displayed at level 0.
   minSourceZoom: number;
+  // Tiled layer data can be displayed at higher levels of zoom than that they are stored in the tileset.
+  // e.g. EMS basemap data from level 14 is at most detailed resolution and can be displayed at higher levels
   maxSourceZoom: number;
+
+  fields: MVTFieldDescriptor[];
 };
 
+export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor &
+  TiledSingleLayerVectorSourceSettings & {
+    tooltipProperties: string[];
+  };
+
+export type TileJsonVectorSourceSettings = {
+  url: string;
+  layerName: string;
+};
+export type TileJsonVectorSourceDescriptor = AbstractSourceDescriptor &
+  TileJsonVectorSourceSettings & {
+    tooltipProperties: string[];
+  };
+
 export type JoinDescriptor = {
   leftField: string;
   right: ESTermSourceDescriptor;
@@ -126,6 +158,7 @@ export type SourceDescriptor =
   | EMSFileSourceDescriptor
   | ESPewPewSourceDescriptor
   | TiledSingleLayerVectorSourceDescriptor
+  | TileJsonVectorSourceDescriptor
   | EMSTMSSourceDescriptor
   | EMSFileSourceDescriptor;
 
diff --git a/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.d.ts b/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts
similarity index 100%
rename from x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.d.ts
rename to x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts
diff --git a/x-pack/plugins/maps/public/classes/fields/es_agg_field.ts b/x-pack/plugins/maps/public/classes/fields/es_agg_field.ts
index 60d437d2321b5..e0f5c79f1d427 100644
--- a/x-pack/plugins/maps/public/classes/fields/es_agg_field.ts
+++ b/x-pack/plugins/maps/public/classes/fields/es_agg_field.ts
@@ -128,6 +128,10 @@ export class ESAggField implements IESAggField {
   async getCategoricalFieldMetaRequest(size: number): Promise<unknown> {
     return this._esDocField ? this._esDocField.getCategoricalFieldMetaRequest(size) : null;
   }
+
+  supportsAutoDomain(): boolean {
+    return true;
+  }
 }
 
 export function esAggFieldsFactory(
diff --git a/x-pack/plugins/maps/public/classes/fields/field.ts b/x-pack/plugins/maps/public/classes/fields/field.ts
index dfd5dc05f7b83..410b38e79ffe4 100644
--- a/x-pack/plugins/maps/public/classes/fields/field.ts
+++ b/x-pack/plugins/maps/public/classes/fields/field.ts
@@ -20,6 +20,12 @@ export interface IField {
   isValid(): boolean;
   getOrdinalFieldMetaRequest(): Promise<unknown>;
   getCategoricalFieldMetaRequest(size: number): Promise<unknown>;
+
+  // Determines whether Maps-app can automatically determine the domain of the field-values
+  // if this is not the case (e.g. for .mvt tiled data),
+  // then styling properties that require the domain to be known cannot use this property.
+  supportsAutoDomain(): boolean;
+
   supportsFieldMeta(): boolean;
 }
 
@@ -80,4 +86,8 @@ export class AbstractField implements IField {
   async getCategoricalFieldMetaRequest(size: number): Promise<unknown> {
     return null;
   }
+
+  supportsAutoDomain(): boolean {
+    return true;
+  }
 }
diff --git a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts
new file mode 100644
index 0000000000000..8f9856ef1da46
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts
@@ -0,0 +1,59 @@
+/*
+ * 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 { AbstractField, IField } from './field';
+import { FIELD_ORIGIN, MVTFieldType } from '../../../common/constants';
+import { ITiledSingleLayerVectorSource, IVectorSource } from '../sources/vector_source';
+import { MVTFieldDescriptor } from '../../../common/descriptor_types';
+
+export class MVTField extends AbstractField implements IField {
+  private readonly _source: ITiledSingleLayerVectorSource;
+  private readonly _type: MVTFieldType;
+  constructor({
+    fieldName,
+    type,
+    source,
+    origin,
+  }: {
+    fieldName: string;
+    source: ITiledSingleLayerVectorSource;
+    origin: FIELD_ORIGIN;
+    type: MVTFieldType;
+  }) {
+    super({ fieldName, origin });
+    this._source = source;
+    this._type = type;
+  }
+
+  getMVTFieldDescriptor(): MVTFieldDescriptor {
+    return {
+      type: this._type,
+      name: this.getName(),
+    };
+  }
+
+  getSource(): IVectorSource {
+    return this._source;
+  }
+
+  async getDataType(): Promise<string> {
+    if (this._type === MVTFieldType.STRING) {
+      return 'string';
+    } else if (this._type === MVTFieldType.NUMBER) {
+      return 'number';
+    } else {
+      throw new Error(`Unrecognized MVT field-type ${this._type}`);
+    }
+  }
+
+  async getLabel(): Promise<string> {
+    return this.getName();
+  }
+
+  supportsAutoDomain() {
+    return false;
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts b/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts
new file mode 100644
index 0000000000000..c14b033275d46
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts
@@ -0,0 +1,54 @@
+/*
+ * 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 { AbstractField, IField } from './field';
+import { FIELD_ORIGIN } from '../../../common/constants';
+import { IVectorSource } from '../sources/vector_source';
+import { TileJsonSource } from '../sources/tilejson_source/tilejson_source';
+
+export class TileJsonField extends AbstractField implements IField {
+  private readonly _source: TileJsonSource;
+  constructor({
+    fieldName,
+    source,
+    origin,
+  }: {
+    fieldName: string;
+    source: TileJsonSource;
+    origin: FIELD_ORIGIN;
+  }) {
+    super({ fieldName, origin });
+    this._source = source;
+  }
+
+  getSource(): IVectorSource {
+    return this._source;
+  }
+
+  async getDataType(): Promise<string> {
+    const layerConfig = await this._source.getLayerConfig();
+
+    const type = layerConfig.fields[this.getName()];
+
+    if (type === 'String') {
+      return 'string';
+    } else if (type === 'Number') {
+      return 'number';
+    }
+
+    console.warn('unknwonf ield type');
+    return 'string';
+
+  }
+
+  async getLabel(): Promise<string> {
+    return this.getName();
+  }
+
+  supportsAutoDomain() {
+    return false;
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/fields/top_term_percentage_field.ts b/x-pack/plugins/maps/public/classes/fields/top_term_percentage_field.ts
index 6c504daf3e192..f4625e42ab5de 100644
--- a/x-pack/plugins/maps/public/classes/fields/top_term_percentage_field.ts
+++ b/x-pack/plugins/maps/public/classes/fields/top_term_percentage_field.ts
@@ -60,6 +60,10 @@ export class TopTermPercentageField implements IESAggField {
     return 0;
   }
 
+  supportsAutoDomain(): boolean {
+    return true;
+  }
+
   supportsFieldMeta(): boolean {
     return false;
   }
diff --git a/x-pack/plugins/maps/public/classes/layers/__tests__/mock_sync_context.ts b/x-pack/plugins/maps/public/classes/layers/__tests__/mock_sync_context.ts
new file mode 100644
index 0000000000000..8c4eb49d5040d
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/layers/__tests__/mock_sync_context.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 sinon from 'sinon';
+import { DataRequestContext } from '../../../actions';
+import { DataMeta, MapFilters } from '../../../../common/descriptor_types';
+
+export class MockSyncContext implements DataRequestContext {
+  dataFilters: MapFilters;
+  isRequestStillActive: (dataId: string, requestToken: symbol) => boolean;
+  onLoadError: (dataId: string, requestToken: symbol, errorMessage: string) => void;
+  registerCancelCallback: (requestToken: symbol, callback: () => void) => void;
+  startLoading: (dataId: string, requestToken: symbol, meta: DataMeta) => void;
+  stopLoading: (dataId: string, requestToken: symbol, data: object, meta: DataMeta) => void;
+  updateSourceData: (newData: unknown) => void;
+
+  constructor({ dataFilters }: { dataFilters: Partial<MapFilters> }) {
+    const mapFilters: MapFilters = {
+      filters: [],
+      timeFilters: {
+        from: 'now',
+        to: '15m',
+        mode: 'relative',
+      },
+      zoom: 0,
+      ...dataFilters,
+    };
+
+    this.dataFilters = mapFilters;
+    this.isRequestStillActive = sinon.spy();
+    this.onLoadError = sinon.spy();
+    this.registerCancelCallback = sinon.spy();
+    this.startLoading = sinon.spy();
+    this.stopLoading = sinon.spy();
+    this.updateSourceData = sinon.spy();
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js b/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js
index f6b9bd6280290..adcc86b9d1546 100644
--- a/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js
+++ b/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js
@@ -91,7 +91,7 @@ export class HeatmapLayer extends VectorLayer {
       resolution: this.getSource().getGridResolution(),
     });
     mbMap.setPaintProperty(heatmapLayerId, 'heatmap-opacity', this.getAlpha());
-    mbMap.setLayerZoomRange(heatmapLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
+    mbMap.setLayerZoomRange(heatmapLayerId, this.getMinZoom(), this.getMaxZoom());
   }
 
   getLayerTypeIconName() {
diff --git a/x-pack/plugins/maps/public/classes/layers/layer.tsx b/x-pack/plugins/maps/public/classes/layers/layer.tsx
index 2250d5663378c..e122d1cda3ed9 100644
--- a/x-pack/plugins/maps/public/classes/layers/layer.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/layer.tsx
@@ -325,27 +325,28 @@ export class AbstractLayer implements ILayer {
     return this._source.getMinZoom();
   }
 
+  _getMbSourceId() {
+    return this.getId();
+  }
+
   _requiresPrevSourceCleanup(mbMap: unknown) {
     return false;
   }
 
   _removeStaleMbSourcesAndLayers(mbMap: unknown) {
     if (this._requiresPrevSourceCleanup(mbMap)) {
-      // @ts-ignore
+      // @ts-expect-error
       const mbStyle = mbMap.getStyle();
-      // @ts-ignore
+      // @ts-expect-error
       mbStyle.layers.forEach((mbLayer) => {
-        // @ts-ignore
         if (this.ownsMbLayerId(mbLayer.id)) {
-          // @ts-ignore
+          // @ts-expect-error
           mbMap.removeLayer(mbLayer.id);
         }
       });
-      // @ts-ignore
       Object.keys(mbStyle.sources).some((mbSourceId) => {
-        // @ts-ignore
         if (this.ownsMbSourceId(mbSourceId)) {
-          // @ts-ignore
+          // @ts-expect-error
           mbMap.removeSource(mbSourceId);
         }
       });
@@ -429,7 +430,7 @@ export class AbstractLayer implements ILayer {
     throw new Error('Should implement AbstractLayer#ownsMbLayerId');
   }
 
-  ownsMbSourceId(sourceId: string): boolean {
+  ownsMbSourceId(mbSourceId: string): boolean {
     throw new Error('Should implement AbstractLayer#ownsMbSourceId');
   }
 
diff --git a/x-pack/plugins/maps/public/classes/layers/load_layer_wizards.ts b/x-pack/plugins/maps/public/classes/layers/load_layer_wizards.ts
index 8357971a3778f..653b19da746c9 100644
--- a/x-pack/plugins/maps/public/classes/layers/load_layer_wizards.ts
+++ b/x-pack/plugins/maps/public/classes/layers/load_layer_wizards.ts
@@ -27,6 +27,7 @@ import { mvtVectorSourceWizardConfig } from '../sources/mvt_single_layer_vector_
 import { ObservabilityLayerWizardConfig } from './solution_layers/observability';
 import { SecurityLayerWizardConfig } from './solution_layers/security';
 import { getEnableVectorTiles } from '../../kibana_services';
+import {tileJsonLayerWizardConfig} from "../sources/tilejson_source/tilejson_layer_wizard";
 
 let registered = false;
 export function registerLayerWizards() {
@@ -62,6 +63,7 @@ export function registerLayerWizards() {
     // eslint-disable-next-line no-console
     console.warn('Vector tiles are an experimental feature and should not be used in production.');
     registerLayerWizard(mvtVectorSourceWizardConfig);
+    registerLayerWizard(tileJsonLayerWizardConfig);
   }
   registered = true;
 }
diff --git a/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js b/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js
index 02df8acbfffad..3e2009c24a2e4 100644
--- a/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js
+++ b/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js
@@ -74,8 +74,8 @@ export class TileLayer extends AbstractLayer {
         return;
       }
 
-      const sourceId = this.getId();
-      mbMap.addSource(sourceId, {
+      const mbSourceId = this._getMbSourceId();
+      mbMap.addSource(mbSourceId, {
         type: 'raster',
         tiles: [tmsSourceData.url],
         tileSize: 256,
@@ -85,7 +85,7 @@ export class TileLayer extends AbstractLayer {
       mbMap.addLayer({
         id: mbLayerId,
         type: 'raster',
-        source: sourceId,
+        source: mbSourceId,
         minzoom: this._descriptor.minZoom,
         maxzoom: this._descriptor.maxZoom,
       });
diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/__snapshots__/tiled_vector_layer.test.tsx.snap b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/__snapshots__/tiled_vector_layer.test.tsx.snap
new file mode 100644
index 0000000000000..f0ae93601ce8a
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/__snapshots__/tiled_vector_layer.test.tsx.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icon should use vector icon 1`] = `
+<div
+  data-euiicon-type="vector"
+  size="m"
+/>
+`;
diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx
new file mode 100644
index 0000000000000..1849dca8c9bc7
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx
@@ -0,0 +1,175 @@
+/*
+ * 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 { MockSyncContext } from '../__tests__/mock_sync_context';
+import sinon from 'sinon';
+
+jest.mock('ui/new_platform');
+jest.mock('../../../kibana_services', () => {
+  return {
+    getUiSettings() {
+      return {
+        get() {
+          return false;
+        },
+      };
+    },
+  };
+});
+
+import { shallow } from 'enzyme';
+
+import { Feature } from 'geojson';
+import { MVTSingleLayerVectorSource } from '../../sources/mvt_single_layer_vector_source';
+import {
+  DataRequestDescriptor,
+  TiledSingleLayerVectorSourceDescriptor,
+  VectorLayerDescriptor,
+} from '../../../../common/descriptor_types';
+import { SOURCE_TYPES } from '../../../../common/constants';
+import { TiledVectorLayer } from './tiled_vector_layer';
+
+const defaultConfig = {
+  urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf',
+  layerName: 'foobar',
+  minSourceZoom: 4,
+  maxSourceZoom: 14,
+};
+
+function createLayer(
+  layerOptions: Partial<VectorLayerDescriptor> = {},
+  sourceOptions: Partial<TiledSingleLayerVectorSourceDescriptor> = {}
+): TiledVectorLayer {
+  const sourceDescriptor: TiledSingleLayerVectorSourceDescriptor = {
+    type: SOURCE_TYPES.MVT_SINGLE_LAYER,
+    ...defaultConfig,
+    fields: [],
+    tooltipProperties: [],
+    ...sourceOptions,
+  };
+  const mvtSource = new MVTSingleLayerVectorSource(sourceDescriptor);
+
+  const defaultLayerOptions = {
+    ...layerOptions,
+    sourceDescriptor,
+  };
+  const layerDescriptor = TiledVectorLayer.createDescriptor(defaultLayerOptions);
+  return new TiledVectorLayer({ layerDescriptor, source: mvtSource });
+}
+
+describe('visiblity', () => {
+  it('should get minzoom from source', async () => {
+    const layer: TiledVectorLayer = createLayer({}, {});
+    expect(layer.getMinZoom()).toEqual(4);
+  });
+  it('should get maxzoom from default', async () => {
+    const layer: TiledVectorLayer = createLayer({}, {});
+    expect(layer.getMaxZoom()).toEqual(24);
+  });
+  it('should get maxzoom from layer options', async () => {
+    const layer: TiledVectorLayer = createLayer({ maxZoom: 10 }, {});
+    expect(layer.getMaxZoom()).toEqual(10);
+  });
+});
+
+describe('icon', () => {
+  it('should use vector icon', async () => {
+    const layer: TiledVectorLayer = createLayer({}, {});
+
+    const iconAndTooltipContent = layer.getCustomIconAndTooltipContent();
+    const component = shallow(iconAndTooltipContent.icon);
+    expect(component).toMatchSnapshot();
+  });
+});
+
+describe('getFeatureById', () => {
+  it('should echo properties with dummy geometry', async () => {
+    const layer: TiledVectorLayer = createLayer({}, {});
+
+    const properties = {
+      foo: 'bar',
+    };
+    const feature = layer.getFeatureById(undefined, { mbProperties: properties }) as Feature;
+
+    expect(feature.properties).toEqual(properties);
+    expect(feature.geometry).toEqual({
+      type: 'Point',
+      coordinates: [0, 0],
+    });
+    expect(feature.id).toEqual(undefined);
+    expect(feature.type).toEqual('Feature');
+  });
+});
+
+describe('syncData', () => {
+  it('Should sync with source-params', async () => {
+    const layer: TiledVectorLayer = createLayer({}, {});
+
+    const syncContext = new MockSyncContext({ dataFilters: {} });
+
+    await layer.syncData(syncContext);
+    // @ts-expect-error
+    sinon.assert.calledOnce(syncContext.startLoading);
+    // @ts-expect-error
+    sinon.assert.calledOnce(syncContext.stopLoading);
+
+    // @ts-expect-error
+    const call = syncContext.stopLoading.getCall(0);
+    expect(call.args[2]).toEqual(defaultConfig);
+  });
+
+  it('Should not resync when no changes to source params', async () => {
+    const layer1: TiledVectorLayer = createLayer({}, {});
+    const syncContext1 = new MockSyncContext({ dataFilters: {} });
+
+    await layer1.syncData(syncContext1);
+
+    const dataRequestDescriptor: DataRequestDescriptor = {
+      data: { ...defaultConfig },
+      dataId: 'source',
+    };
+    const layer2: TiledVectorLayer = createLayer(
+      {
+        __dataRequests: [dataRequestDescriptor],
+      },
+      {}
+    );
+    const syncContext2 = new MockSyncContext({ dataFilters: {} });
+    await layer2.syncData(syncContext2);
+    // @ts-expect-error
+    sinon.assert.notCalled(syncContext2.startLoading);
+    // @ts-expect-error
+    sinon.assert.notCalled(syncContext2.stopLoading);
+  });
+
+  it('Should resync when changes to source params', async () => {
+    const layer1: TiledVectorLayer = createLayer({}, {});
+    const syncContext1 = new MockSyncContext({ dataFilters: {} });
+
+    await layer1.syncData(syncContext1);
+
+    const dataRequestDescriptor: DataRequestDescriptor = {
+      data: defaultConfig,
+      dataId: 'source',
+    };
+    const layer2: TiledVectorLayer = createLayer(
+      {
+        __dataRequests: [dataRequestDescriptor],
+      },
+      { layerName: 'barfoo' }
+    );
+    const syncContext2 = new MockSyncContext({ dataFilters: {} });
+    await layer2.syncData(syncContext2);
+
+    // @ts-expect-error
+    sinon.assert.calledOnce(syncContext2.startLoading);
+    // @ts-expect-error
+    sinon.assert.calledOnce(syncContext2.stopLoading);
+
+    // @ts-expect-error
+    const call = syncContext2.stopLoading.getCall(0);
+    expect(call.args[2]).toEqual({ ...defaultConfig, layerName: 'barfoo' });
+  });
+});
diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx
index a00639aa5fec5..0ef1157e1e682 100644
--- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx
@@ -6,31 +6,30 @@
 
 import React from 'react';
 import { EuiIcon } from '@elastic/eui';
+import { Feature, GeoJsonProperties } from 'geojson';
 import { VectorStyle } from '../../styles/vector/vector_style';
 import { SOURCE_DATA_REQUEST_ID, LAYER_TYPE } from '../../../../common/constants';
 import { VectorLayer, VectorLayerArguments } from '../vector_layer/vector_layer';
-import { canSkipSourceUpdate } from '../../util/can_skip_fetch';
 import { ITiledSingleLayerVectorSource } from '../../sources/vector_source';
 import { DataRequestContext } from '../../../actions';
-import { ISource } from '../../sources/source';
 import {
   VectorLayerDescriptor,
   VectorSourceRequestMeta,
 } from '../../../../common/descriptor_types';
-import { MVTSingleLayerVectorSourceConfig } from '../../sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor';
+import { MVTSingleLayerVectorSourceConfig } from '../../sources/mvt_single_layer_vector_source/types';
 
 export class TiledVectorLayer extends VectorLayer {
   static type = LAYER_TYPE.TILED_VECTOR;
 
   static createDescriptor(
     descriptor: Partial<VectorLayerDescriptor>,
-    mapColors: string[]
+    mapColors?: string[]
   ): VectorLayerDescriptor {
     const layerDescriptor = super.createDescriptor(descriptor, mapColors);
     layerDescriptor.type = TiledVectorLayer.type;
 
     if (!layerDescriptor.style) {
-      const styleProperties = VectorStyle.createDefaultStyleProperties(mapColors);
+      const styleProperties = VectorStyle.createDefaultStyleProperties(mapColors ? mapColors : []);
       layerDescriptor.style = VectorStyle.createDescriptor(styleProperties);
     }
 
@@ -64,13 +63,16 @@ export class TiledVectorLayer extends VectorLayer {
     );
     const prevDataRequest = this.getSourceDataRequest();
 
-    const canSkip = await canSkipSourceUpdate({
-      source: this._source as ISource,
-      prevDataRequest,
-      nextMeta: searchFilters,
-    });
-    if (canSkip) {
-      return null;
+    if (prevDataRequest) {
+      const data: MVTSingleLayerVectorSourceConfig = prevDataRequest.getData() as MVTSingleLayerVectorSourceConfig;
+      const canSkipBecauseNoChanges =
+        data.layerName === this._source.getLayerName() &&
+        data.minSourceZoom === this._source.getMinZoom() &&
+        data.maxSourceZoom === this._source.getMaxZoom();
+
+      if (canSkipBecauseNoChanges) {
+        return null;
+      }
     }
 
     startLoading(SOURCE_DATA_REQUEST_ID, requestToken, searchFilters);
@@ -89,37 +91,41 @@ export class TiledVectorLayer extends VectorLayer {
   }
 
   _syncSourceBindingWithMb(mbMap: unknown) {
-    // @ts-ignore
-    const mbSource = mbMap.getSource(this.getId());
-    if (!mbSource) {
-      const sourceDataRequest = this.getSourceDataRequest();
-      if (!sourceDataRequest) {
-        // this is possible if the layer was invisible at startup.
-        // the actions will not perform any data=syncing as an optimization when a layer is invisible
-        // when turning the layer back into visible, it's possible the url has not been resovled yet.
-        return;
-      }
+    // @ts-expect-error
+    const mbSource = mbMap.getSource(this._getMbSourceId());
+    if (mbSource) {
+      return;
+    }
+    const sourceDataRequest = this.getSourceDataRequest();
+    if (!sourceDataRequest) {
+      // this is possible if the layer was invisible at startup.
+      // the actions will not perform any data=syncing as an optimization when a layer is invisible
+      // when turning the layer back into visible, it's possible the url has not been resovled yet.
+      return;
+    }
 
-      const sourceMeta: MVTSingleLayerVectorSourceConfig | null = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig;
-      if (!sourceMeta) {
-        return;
-      }
+    const sourceMeta: MVTSingleLayerVectorSourceConfig | null = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig;
+    if (!sourceMeta) {
+      return;
+    }
 
-      const sourceId = this.getId();
+    const mbSourceId = this._getMbSourceId();
+    // @ts-expect-error
+    mbMap.addSource(mbSourceId, {
+      type: 'vector',
+      tiles: [sourceMeta.urlTemplate],
+      minzoom: sourceMeta.minSourceZoom,
+      maxzoom: sourceMeta.maxSourceZoom,
+    });
+  }
 
-      // @ts-ignore
-      mbMap.addSource(sourceId, {
-        type: 'vector',
-        tiles: [sourceMeta.urlTemplate],
-        minzoom: sourceMeta.minSourceZoom,
-        maxzoom: sourceMeta.maxSourceZoom,
-      });
-    }
+  ownsMbSourceId(mbSourceId: string): boolean {
+    return this._getMbSourceId() === mbSourceId;
   }
 
   _syncStylePropertiesWithMb(mbMap: unknown) {
     // @ts-ignore
-    const mbSource = mbMap.getSource(this.getId());
+    const mbSource = mbMap.getSource(this._getMbSourceId());
     if (!mbSource) {
       return;
     }
@@ -129,32 +135,52 @@ export class TiledVectorLayer extends VectorLayer {
       return;
     }
     const sourceMeta: MVTSingleLayerVectorSourceConfig = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig;
+    if (sourceMeta.layerName === '') {
+      return;
+    }
 
     this._setMbPointsProperties(mbMap, sourceMeta.layerName);
     this._setMbLinePolygonProperties(mbMap, sourceMeta.layerName);
   }
 
   _requiresPrevSourceCleanup(mbMap: unknown): boolean {
-    // @ts-ignore
-    const mbTileSource = mbMap.getSource(this.getId());
+    // @ts-expect-error
+    const mbTileSource = mbMap.getSource(this._getMbSourceId());
     if (!mbTileSource) {
       return false;
     }
+
     const dataRequest = this.getSourceDataRequest();
     if (!dataRequest) {
       return false;
     }
     const tiledSourceMeta: MVTSingleLayerVectorSourceConfig | null = dataRequest.getData() as MVTSingleLayerVectorSourceConfig;
-    if (
-      mbTileSource.tiles[0] === tiledSourceMeta.urlTemplate &&
-      mbTileSource.minzoom === tiledSourceMeta.minSourceZoom &&
-      mbTileSource.maxzoom === tiledSourceMeta.maxSourceZoom
-    ) {
-      // TileURL and zoom-range captures all the state. If this does not change, no updates are required.
+
+    if (!tiledSourceMeta) {
       return false;
     }
 
-    return true;
+    const isSourceDifferent =
+      mbTileSource.tiles[0] !== tiledSourceMeta.urlTemplate ||
+      mbTileSource.minzoom !== tiledSourceMeta.minSourceZoom ||
+      mbTileSource.maxzoom !== tiledSourceMeta.maxSourceZoom;
+
+    if (isSourceDifferent) {
+      return true;
+    }
+
+    const layerIds = this.getMbLayerIds();
+    for (let i = 0; i < layerIds.length; i++) {
+      // @ts-expect-error
+      const mbLayer = mbMap.getLayer(layerIds[i]);
+      if (mbLayer && mbLayer.sourceLayer !== tiledSourceMeta.layerName) {
+        // If the source-pointer of one of the layers is stale, they will all be stale.
+        // In this case, all the mb-layers need to be removed and re-added.
+        return true;
+      }
+    }
+
+    return false;
   }
 
   syncLayerWithMB(mbMap: unknown) {
@@ -171,4 +197,20 @@ export class TiledVectorLayer extends VectorLayer {
     // higher resolution vector tiles cannot be displayed at lower-res
     return Math.max(this._source.getMinZoom(), super.getMinZoom());
   }
+
+  getFeatureById(
+    id: string | number | undefined,
+    meta: { mbProperties: GeoJsonProperties }
+  ): Feature | null {
+    const properties = this._source.getFeatureProperties(id, meta.mbProperties);
+    return {
+      type: 'Feature',
+      properties,
+      id,
+      geometry: {
+        type: 'Point',
+        coordinates: [0, 0],
+      },
+    };
+  }
 }
diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts
index e420087628bc8..74d382e0d7a80 100644
--- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts
+++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts
@@ -5,6 +5,7 @@
  */
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 
+import { Feature, GeoJsonProperties } from 'geojson';
 import { AbstractLayer } from '../layer';
 import { IVectorSource } from '../../sources/vector_source';
 import {
@@ -17,6 +18,7 @@ import { IJoin } from '../../joins/join';
 import { IVectorStyle } from '../../styles/vector/vector_style';
 import { IField } from '../../fields/field';
 import { DataRequestContext } from '../../../actions';
+import { ITooltipProperty } from '../../tooltips/tooltip_property';
 
 export type VectorLayerArguments = {
   source: IVectorSource;
@@ -31,6 +33,14 @@ export interface IVectorLayer extends ILayer {
   getValidJoins(): IJoin[];
   getSource(): IVectorSource;
   getStyle(): IVectorStyle;
+  getFeatureById(
+    id: string | number | undefined,
+    meta: { mbProperties: GeoJsonProperties }
+  ): Feature | null;
+  getPropertiesForTooltip(
+    properties: GeoJsonProperties,
+    featureId?: string | number
+  ): Promise<ITooltipProperty[]>;
 }
 
 export class VectorLayer extends AbstractLayer implements IVectorLayer {
@@ -75,4 +85,12 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer {
   _setMbLinePolygonProperties(mbMap: unknown, mvtSourceLayer?: string): void;
   getSource(): IVectorSource;
   getStyle(): IVectorStyle;
+  getFeatureById(
+    id: string | number | undefined,
+    meta: { mbProperties: GeoJsonProperties }
+  ): Feature | null;
+  getPropertiesForTooltip(
+    properties: GeoJsonProperties,
+    featureId?: string | number
+  ): Promise<ITooltipProperty[]>;
 }
diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js
index 524ab245c6760..0a4fcfc23060c 100644
--- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js
+++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js
@@ -672,10 +672,10 @@ export class VectorLayer extends AbstractLayer {
     }
 
     this.syncVisibilityWithMb(mbMap, markerLayerId);
-    mbMap.setLayerZoomRange(markerLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
+    mbMap.setLayerZoomRange(markerLayerId, this.getMinZoom(), this.getMaxZoom());
     if (markerLayerId !== textLayerId) {
       this.syncVisibilityWithMb(mbMap, textLayerId);
-      mbMap.setLayerZoomRange(textLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
+      mbMap.setLayerZoomRange(textLayerId, this.getMinZoom(), this.getMaxZoom());
     }
   }
 
@@ -802,14 +802,14 @@ export class VectorLayer extends AbstractLayer {
     });
 
     this.syncVisibilityWithMb(mbMap, fillLayerId);
-    mbMap.setLayerZoomRange(fillLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
+    mbMap.setLayerZoomRange(fillLayerId, this.getMinZoom(), this.getMaxZoom());
     const fillFilterExpr = getFillFilterExpression(hasJoins);
     if (fillFilterExpr !== mbMap.getFilter(fillLayerId)) {
       mbMap.setFilter(fillLayerId, fillFilterExpr);
     }
 
     this.syncVisibilityWithMb(mbMap, lineLayerId);
-    mbMap.setLayerZoomRange(lineLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
+    mbMap.setLayerZoomRange(lineLayerId, this.getMinZoom(), this.getMaxZoom());
     const lineFilterExpr = getLineFilterExpression(hasJoins);
     if (lineFilterExpr !== mbMap.getFilter(lineLayerId)) {
       mbMap.setFilter(lineLayerId, lineFilterExpr);
@@ -822,9 +822,9 @@ export class VectorLayer extends AbstractLayer {
   }
 
   _syncSourceBindingWithMb(mbMap) {
-    const mbSource = mbMap.getSource(this.getId());
+    const mbSource = mbMap.getSource(this._getMbSourceId());
     if (!mbSource) {
-      mbMap.addSource(this.getId(), {
+      mbMap.addSource(this._getMbSourceId(), {
         type: 'geojson',
         data: EMPTY_FEATURE_COLLECTION,
       });
@@ -891,16 +891,17 @@ export class VectorLayer extends AbstractLayer {
   }
 
   async getPropertiesForTooltip(properties) {
-    let allTooltips = await this.getSource().filterAndFormatPropertiesToHtml(properties);
-    this._addJoinsToSourceTooltips(allTooltips);
+    const vectorSource = this.getSource();
+    let allProperties = await vectorSource.filterAndFormatPropertiesToHtml(properties);
+    this._addJoinsToSourceTooltips(allProperties);
 
     for (let i = 0; i < this.getJoins().length; i++) {
       const propsFromJoin = await this.getJoins()[i].filterAndFormatPropertiesForTooltip(
         properties
       );
-      allTooltips = [...allTooltips, ...propsFromJoin];
+      allProperties = [...allProperties, ...propsFromJoin];
     }
-    return allTooltips;
+    return allProperties;
   }
 
   canShowTooltip() {
@@ -912,7 +913,7 @@ export class VectorLayer extends AbstractLayer {
   getFeatureById(id) {
     const featureCollection = this._getSourceFeatureCollection();
     if (!featureCollection) {
-      return;
+      return null;
     }
 
     return featureCollection.features.find((feature) => {
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx
index ac69505a9bed5..7021859ee9827 100644
--- a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx
@@ -15,7 +15,7 @@ import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/vi
 
 interface Props {
   layerId: string;
-  onChange: (args: OnSourceChangeArgs) => void;
+  onChange: (...args: OnSourceChangeArgs[]) => void;
   source: IEmsFileSource;
   tooltipFields: IField[];
 }
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap
new file mode 100644
index 0000000000000..befff16f33a1f
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap
@@ -0,0 +1,760 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render error for dupes 1`] = `
+<Fragment>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="0"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={true}
+        onChange={[Function]}
+        placeholder="Field name"
+        value="foo"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="String"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="1"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={false}
+        onChange={[Function]}
+        placeholder=""
+        value="bar"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="String"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="2"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={true}
+        onChange={[Function]}
+        placeholder="Field name"
+        value="foo"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="Number"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="xs"
+  />
+  <EuiFlexGroup
+    alignItems="center"
+    gutterSize="xs"
+    justifyContent="spaceAround"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiButtonEmpty
+        iconType="plusInCircleFilled"
+        onClick={[Function]}
+        size="xs"
+      >
+        Add
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Fragment>
+`;
+
+exports[`should render error for empty name 1`] = `
+<Fragment>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="0"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={false}
+        onChange={[Function]}
+        placeholder=""
+        value="foo"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="String"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="1"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={true}
+        onChange={[Function]}
+        placeholder="Field name"
+        value=""
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="String"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="2"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={false}
+        onChange={[Function]}
+        placeholder=""
+        value="fooz"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="Number"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="xs"
+  />
+  <EuiFlexGroup
+    alignItems="center"
+    gutterSize="xs"
+    justifyContent="spaceAround"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiButtonEmpty
+        iconType="plusInCircleFilled"
+        onClick={[Function]}
+        size="xs"
+      >
+        Add
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Fragment>
+`;
+
+exports[`should render field editor 1`] = `
+<Fragment>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="0"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={false}
+        onChange={[Function]}
+        placeholder=""
+        value="foo"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="String"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="1"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={false}
+        onChange={[Function]}
+        placeholder=""
+        value="food"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="String"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="xs"
+    key="2"
+  >
+    <EuiFlexItem>
+      <EuiFieldText
+        aria-label="Fieldname"
+        isInvalid={false}
+        onChange={[Function]}
+        placeholder=""
+        value="fooz"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSuperSelect
+        append={
+          <EuiButtonIcon
+            aria-label="Remove field"
+            color="danger"
+            iconType="trash"
+            onClick={[Function]}
+            title="Remove field"
+          />
+        }
+        compressed={false}
+        fullWidth={false}
+        hasDividers={false}
+        isInvalid={false}
+        isLoading={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="string"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  string
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "String",
+            },
+            Object {
+              "inputDisplay": <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <EuiFlexItem
+                  grow={null}
+                >
+                  <FieldIcon
+                    fill="none"
+                    type="number"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  number
+                </EuiFlexItem>
+              </EuiFlexGroup>,
+              "value": "Number",
+            },
+          ]
+        }
+        valueOfSelected="Number"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="xs"
+  />
+  <EuiFlexGroup
+    alignItems="center"
+    gutterSize="xs"
+    justifyContent="spaceAround"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiButtonEmpty
+        iconType="plusInCircleFilled"
+        onClick={[Function]}
+        size="xs"
+      >
+        Add
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Fragment>
+`;
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap
new file mode 100644
index 0000000000000..1fb81dc777c85
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap
@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render when no layername 1`] = `
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Name of the target data layer in the tile"
+    label="Layer name"
+    labelType="label"
+  >
+    <EuiFieldText
+      isInvalid={true}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa)."
+    label="Available levels"
+    labelType="label"
+  >
+    <ValidatedDualRange
+      allowEmptyRange={false}
+      compressed={true}
+      formRowDisplay="columnCompressed"
+      fullWidth={false}
+      label=""
+      max={24}
+      min={0}
+      onChange={[Function]}
+      prepend="Zoom"
+      showInput="inputWithPopover"
+      showLabels={true}
+      showRange={true}
+      value={
+        Array [
+          4,
+          14,
+        ]
+      }
+    />
+  </EuiFormRow>
+</Fragment>
+`;
+
+exports[`should render with fields 1`] = `
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Name of the target data layer in the tile"
+    label="Layer name"
+    labelType="label"
+  >
+    <EuiFieldText
+      isInvalid={false}
+      onChange={[Function]}
+      value="foobar"
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa)."
+    label="Available levels"
+    labelType="label"
+  >
+    <ValidatedDualRange
+      allowEmptyRange={false}
+      compressed={true}
+      formRowDisplay="columnCompressed"
+      fullWidth={false}
+      label=""
+      max={24}
+      min={0}
+      onChange={[Function]}
+      prepend="Zoom"
+      showInput="inputWithPopover"
+      showLabels={true}
+      showRange={true}
+      value={
+        Array [
+          4,
+          14,
+        ]
+      }
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Fields which are available in the \`foobar\` layer. These can be used for tooltips and dynamic styling."
+    label="Fields"
+    labelType="label"
+  >
+    <MVTFieldConfigEditor
+      fields={
+        Array [
+          Object {
+            "name": "foo",
+            "type": "String",
+          },
+          Object {
+            "name": "food",
+            "type": "String",
+          },
+          Object {
+            "name": "fooz",
+            "type": "Number",
+          },
+        ]
+      }
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</Fragment>
+`;
+
+exports[`should render without fields 1`] = `
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Name of the target data layer in the tile"
+    label="Layer name"
+    labelType="label"
+  >
+    <EuiFieldText
+      isInvalid={false}
+      onChange={[Function]}
+      value="foobar"
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa)."
+    label="Available levels"
+    labelType="label"
+  >
+    <ValidatedDualRange
+      allowEmptyRange={false}
+      compressed={true}
+      formRowDisplay="columnCompressed"
+      fullWidth={false}
+      label=""
+      max={24}
+      min={0}
+      onChange={[Function]}
+      prepend="Zoom"
+      showInput="inputWithPopover"
+      showLabels={true}
+      showRange={true}
+      value={
+        Array [
+          4,
+          14,
+        ]
+      }
+    />
+  </EuiFormRow>
+</Fragment>
+`;
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap
new file mode 100644
index 0000000000000..c700acbdb51bb
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render source creation editor (fields should _not_ be included) 1`] = `
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="URL of the .mvt vector tile service. e.g. http://company.com/{z}/{x}/{y}.pbf"
+    label="Url"
+    labelType="label"
+  >
+    <EuiFieldText
+      compressed={true}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+  <MVTSingleLayerSourceSettings
+    fields={Array []}
+    handleChange={[Function]}
+    includeFields={false}
+    layerName=""
+    maxSourceZoom={24}
+    minSourceZoom={0}
+  />
+</Fragment>
+`;
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap
new file mode 100644
index 0000000000000..e8c81783fb2b3
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render update source editor (fields _should_ be included) 1`] = `
+<Fragment>
+  <EuiPanel>
+    <EuiTitle
+      size="xs"
+    >
+      <h5>
+        <FormattedMessage
+          defaultMessage="Source settings"
+          id="xpack.maps.mvtSource.sourceSettings"
+          values={Object {}}
+        />
+      </h5>
+    </EuiTitle>
+    <EuiSpacer
+      size="m"
+    />
+    <MVTSingleLayerSourceSettings
+      fields={Array []}
+      handleChange={[Function]}
+      includeFields={true}
+      layerName="foobar"
+      maxSourceZoom={14}
+      minSourceZoom={4}
+    />
+  </EuiPanel>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiPanel>
+    <EuiTitle
+      size="xs"
+    >
+      <h5>
+        <FormattedMessage
+          defaultMessage="Tooltip fields"
+          id="xpack.maps.mvtSource.tooltipsTitle"
+          values={Object {}}
+        />
+      </h5>
+    </EuiTitle>
+    <EuiSpacer
+      size="m"
+    />
+    <TooltipSelector
+      fields={Array []}
+      onChange={[Function]}
+      tooltipFields={Array []}
+    />
+  </EuiPanel>
+  <EuiSpacer
+    size="s"
+  />
+</Fragment>
+`;
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
index 067c7f5a47ca3..32fa329be85df 100644
--- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
@@ -6,23 +6,21 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import {
-  MVTSingleLayerVectorSourceEditor,
-  MVTSingleLayerVectorSourceConfig,
-} from './mvt_single_layer_vector_source_editor';
+import { MVTSingleLayerVectorSourceEditor } from './mvt_single_layer_vector_source_editor';
 import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer';
 import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
+import { TiledSingleLayerVectorSourceSettings } from '../../../../common/descriptor_types';
 
 export const mvtVectorSourceWizardConfig: LayerWizard = {
   categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', {
-    defaultMessage: 'Vector source wizard',
+    defaultMessage: 'Data service implementing the Mapbox vector tile specification',
   }),
   icon: 'grid',
   renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
-    const onSourceConfigChange = (sourceConfig: MVTSingleLayerVectorSourceConfig) => {
+    const onSourceConfigChange = (sourceConfig: TiledSingleLayerVectorSourceSettings) => {
       const sourceDescriptor = MVTSingleLayerVectorSource.createDescriptor(sourceConfig);
       const layerDescriptor = TiledVectorLayer.createDescriptor({ sourceDescriptor }, mapColors);
       previewLayers([layerDescriptor]);
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx
new file mode 100644
index 0000000000000..73c884b2c1aaf
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+jest.mock('../../../kibana_services', () => ({}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { MVTFieldConfigEditor } from './mvt_field_config_editor';
+import { MVTFieldType } from '../../../../common/constants';
+
+test('should render field editor', async () => {
+  const fields = [
+    {
+      name: 'foo',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: 'food',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: 'fooz',
+      type: MVTFieldType.NUMBER,
+    },
+  ];
+  const component = shallow(<MVTFieldConfigEditor fields={fields} onChange={() => {}} />);
+
+  expect(component).toMatchSnapshot();
+});
+
+test('should render error for empty name', async () => {
+  const fields = [
+    {
+      name: 'foo',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: '',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: 'fooz',
+      type: MVTFieldType.NUMBER,
+    },
+  ];
+  const component = shallow(<MVTFieldConfigEditor fields={fields} onChange={() => {}} />);
+
+  expect(component).toMatchSnapshot();
+});
+
+test('should render error for dupes', async () => {
+  const fields = [
+    {
+      name: 'foo',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: 'bar',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: 'foo',
+      type: MVTFieldType.NUMBER,
+    },
+  ];
+  const component = shallow(<MVTFieldConfigEditor fields={fields} onChange={() => {}} />);
+
+  expect(component).toMatchSnapshot();
+});
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx
new file mode 100644
index 0000000000000..84c59b499aefe
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx
@@ -0,0 +1,225 @@
+/*
+ * 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.
+ */
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+
+import React, { ChangeEvent, Component, Fragment } from 'react';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiSuperSelect,
+  EuiFieldText,
+  EuiSpacer,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import _ from 'lodash';
+import { MVTFieldDescriptor } from '../../../../common/descriptor_types';
+import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public';
+import { MVTFieldType } from '../../../../common/constants';
+
+function makeOption({
+  value,
+  icon,
+  message,
+}: {
+  value: MVTFieldType;
+  icon: string;
+  message: string;
+}) {
+  return {
+    value,
+    inputDisplay: (
+      <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={null}>
+          <FieldIcon type={icon} fill="none" />
+        </EuiFlexItem>
+        <EuiFlexItem>{message}</EuiFlexItem>
+      </EuiFlexGroup>
+    ),
+  };
+}
+
+const FIELD_TYPE_OPTIONS = [
+  {
+    value: MVTFieldType.STRING,
+    icon: 'string',
+    message: i18n.translate('xpack.maps.mvtSource.stringFieldLabel', {
+      defaultMessage: 'string',
+    }),
+  },
+  {
+    value: MVTFieldType.NUMBER,
+    icon: 'number',
+    message: i18n.translate('xpack.maps.mvtSource.numberFieldLabel', {
+      defaultMessage: 'number',
+    }),
+  },
+].map(makeOption);
+
+export interface Props {
+  fields: MVTFieldDescriptor[];
+  onChange: (fields: MVTFieldDescriptor[]) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface State {
+  previousFields: MVTFieldDescriptor[];
+  currentFields: MVTFieldDescriptor[];
+}
+
+export class MVTFieldConfigEditor extends Component<Props, State> {
+  state: State = {
+    currentFields: [],
+    previousFields: [],
+  };
+
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    if (_.isEqual(nextProps.fields, prevState.previousFields)) {
+      return null;
+    }
+    const clonedFields = _.cloneDeep(nextProps.fields);
+    return {
+      currentFields: clonedFields,
+      previousFields: clonedFields,
+    };
+  }
+
+  _notifyChange = _.debounce(() => {
+    const invalid = this.state.currentFields.some((field: MVTFieldDescriptor) => {
+      return field.name === '';
+    });
+
+    if (!invalid) {
+      this.props.onChange(this.state.currentFields);
+    }
+  });
+
+  _fieldChange(newFields: MVTFieldDescriptor[]) {
+    this.setState(
+      {
+        currentFields: newFields,
+      },
+      this._notifyChange
+    );
+  }
+
+  _removeField(index: number) {
+    const newFields: MVTFieldDescriptor[] = this.state.currentFields.slice();
+    newFields.splice(index, 1);
+    this._fieldChange(newFields);
+  }
+
+  _addField = () => {
+    const newFields: MVTFieldDescriptor[] = this.state.currentFields.slice();
+    newFields.push({
+      type: MVTFieldType.STRING,
+      name: '',
+    });
+    this._fieldChange(newFields);
+  };
+
+  _renderFieldTypeDropDown(mvtFieldConfig: MVTFieldDescriptor, index: number) {
+    const onChange = (type: MVTFieldType) => {
+      const newFields = this.state.currentFields.slice();
+      newFields[index] = {
+        type,
+        name: newFields[index].name,
+      };
+      this._fieldChange(newFields);
+    };
+
+    const addButton = (
+      <EuiButtonIcon
+        iconType="trash"
+        color="danger"
+        onClick={() => {
+          this._removeField(index);
+        }}
+        title={i18n.translate('xpack.maps.mvtSource.trashButtonTitle', {
+          defaultMessage: 'Remove field',
+        })}
+        aria-label={i18n.translate('xpack.maps.mvtSource.trashButtonAriaLabel', {
+          defaultMessage: 'Remove field',
+        })}
+      />
+    );
+    return (
+      <EuiSuperSelect
+        options={FIELD_TYPE_OPTIONS}
+        valueOfSelected={mvtFieldConfig.type}
+        onChange={(value) => onChange(value)}
+        append={addButton}
+      />
+    );
+  }
+
+  _renderFieldNameInput(mvtFieldConfig: MVTFieldDescriptor, index: number) {
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const name = e.target.value;
+      const newFields = this.state.currentFields.slice();
+      newFields[index] = {
+        name,
+        type: newFields[index].type,
+      };
+      this._fieldChange(newFields);
+    };
+
+    const emptyName = mvtFieldConfig.name === '';
+    let hasDupes = false;
+    for (let i = 0; i < this.state.currentFields.length; i++) {
+      if (i !== index && mvtFieldConfig.name === this.state.currentFields[i].name) {
+        hasDupes = true;
+        break;
+      }
+    }
+    const isInvalid = emptyName || hasDupes;
+    const placeholderText = isInvalid
+      ? i18n.translate('xpack.maps.mvtSource.fieldPlaceholderText', {
+          defaultMessage: 'Field name',
+        })
+      : '';
+
+    return (
+      <EuiFieldText
+        value={mvtFieldConfig.name}
+        onChange={onChange}
+        aria-label={'Fieldname'}
+        placeholder={placeholderText}
+        isInvalid={isInvalid}
+      />
+    );
+  }
+
+  _renderFieldConfig() {
+    return this.state.currentFields.map((mvtFieldConfig: MVTFieldDescriptor, index: number) => {
+      return (
+        <EuiFlexGroup key={index} gutterSize="xs">
+          <EuiFlexItem>{this._renderFieldNameInput(mvtFieldConfig, index)}</EuiFlexItem>
+          <EuiFlexItem>{this._renderFieldTypeDropDown(mvtFieldConfig, index)}</EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        {this._renderFieldConfig()}
+        <EuiSpacer size={'xs'} />
+        <EuiFlexGroup justifyContent="spaceAround" alignItems="center" gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={this._addField} size="xs" iconType="plusInCircleFilled">
+              {i18n.translate('xpack.maps.mvtSource.addFieldLabel', {
+                defaultMessage: 'Add',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </Fragment>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx
new file mode 100644
index 0000000000000..04b83b23d36b3
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+jest.mock('../../../kibana_services', () => ({}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings';
+import { MVTFieldType } from '../../../../common/constants';
+
+const defaultSettings = {
+  handleChange: () => {},
+  layerName: 'foobar',
+  fields: [
+    {
+      name: 'foo',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: 'food',
+      type: MVTFieldType.STRING,
+    },
+    {
+      name: 'fooz',
+      type: MVTFieldType.NUMBER,
+    },
+  ],
+  minSourceZoom: 4,
+  maxSourceZoom: 14,
+  includeFields: true,
+};
+
+test('should render with fields', async () => {
+  const component = shallow(<MVTSingleLayerSourceSettings {...defaultSettings} />);
+  expect(component).toMatchSnapshot();
+});
+
+test('should render without fields', async () => {
+  const settings = { ...defaultSettings, includeFields: false };
+  const component = shallow(<MVTSingleLayerSourceSettings {...settings} />);
+  expect(component).toMatchSnapshot();
+});
+
+test('should not render when no layername', async () => {
+  const settings = { ...defaultSettings, layerName: '' };
+  const component = shallow(<MVTSingleLayerSourceSettings {...settings} />);
+  expect(component).toMatchSnapshot();
+});
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx
new file mode 100644
index 0000000000000..46a180ee59947
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx
@@ -0,0 +1,218 @@
+/*
+ * 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.
+ */
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+
+import React, { Fragment, Component, ChangeEvent } from 'react';
+import { EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import _ from 'lodash';
+import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
+import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public';
+import { MVTFieldConfigEditor } from './mvt_field_config_editor';
+import { MVTFieldDescriptor } from '../../../../common/descriptor_types';
+
+export type MVTSettings = {
+  layerName: string;
+  fields: MVTFieldDescriptor[];
+  minSourceZoom: number;
+  maxSourceZoom: number;
+};
+
+export interface State {
+  currentLayerName: string;
+  currentMinSourceZoom: number;
+  currentMaxSourceZoom: number;
+  currentFields: MVTFieldDescriptor[];
+  previousLayerName: string;
+  previousMinSourceZoom: number;
+  previousMaxSourceZoom: number;
+  previousFields: MVTFieldDescriptor[];
+}
+
+export interface Props {
+  handleChange: (args: MVTSettings) => void;
+  layerName: string;
+  fields: MVTFieldDescriptor[];
+  minSourceZoom: number;
+  maxSourceZoom: number;
+  includeFields: boolean;
+}
+
+export class MVTSingleLayerSourceSettings extends Component<Props, State> {
+  state = {
+    currentLayerName: '',
+    currentMinSourceZoom: MIN_ZOOM,
+    currentMaxSourceZoom: MAX_ZOOM,
+    currentFields: [],
+    previousLayerName: '',
+    previousMinSourceZoom: MIN_ZOOM,
+    previousMaxSourceZoom: MAX_ZOOM,
+    previousFields: [],
+  };
+
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    const newSettings = {
+      layerName: nextProps.layerName,
+      fields: nextProps.fields,
+      minSourceZoom: nextProps.minSourceZoom,
+      maxSourceZoom: nextProps.maxSourceZoom,
+    };
+
+    const previous = prevState
+      ? {
+          layerName: prevState.previousLayerName,
+          fields: prevState.previousFields,
+          minSourceZoom: prevState.previousMinSourceZoom,
+          maxSourceZoom: prevState.previousMaxSourceZoom,
+        }
+      : null;
+
+    if (_.isEqual(previous, newSettings)) {
+      return null;
+    }
+
+    const clonedFields = _.cloneDeep(nextProps.fields);
+    return {
+      currentLayerName: nextProps.layerName,
+      currentMinSourceZoom: nextProps.minSourceZoom,
+      currentMaxSourceZoom: nextProps.maxSourceZoom,
+      currentFields: clonedFields,
+      previousLayerName: nextProps.layerName,
+      previousMinSourceZoom: nextProps.minSourceZoom,
+      previousMaxSourceZoom: nextProps.maxSourceZoom,
+      previousFields: clonedFields,
+    };
+  }
+
+  _handleChange = _.debounce(() => {
+    this.props.handleChange({
+      layerName: this.state.currentLayerName,
+      minSourceZoom: this.state.currentMinSourceZoom,
+      maxSourceZoom: this.state.currentMaxSourceZoom,
+      fields: this.state.currentFields,
+    });
+  }, 200);
+
+  _handleLayerNameInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const layerName = e.target.value;
+    if (layerName === this.state.currentLayerName) {
+      return;
+    }
+    this.setState({ currentLayerName: layerName }, this._handleChange);
+  };
+
+  _handleFieldChange = (fields: MVTFieldDescriptor[]) => {
+    if (_.isEqual(this.state.currentFields, fields)) {
+      return;
+    }
+    this.setState({ currentFields: fields }, this._handleChange);
+  };
+
+  _handleZoomRangeChange = (e: Value) => {
+    const minSourceZoom = parseInt(e[0] as string, 10);
+    const maxSourceZoom = parseInt(e[1] as string, 10);
+    if (
+      this.state.currentMinSourceZoom === minSourceZoom &&
+      this.state.currentMaxSourceZoom === maxSourceZoom
+    ) {
+      return;
+    }
+    this.setState(
+      { currentMinSourceZoom: minSourceZoom, currentMaxSourceZoom: maxSourceZoom },
+      this._handleChange
+    );
+  };
+
+  render() {
+    const fieldEditor =
+      this.props.includeFields && this.state.currentLayerName !== '' ? (
+        <EuiFormRow
+          label={i18n.translate(
+            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.fieldsMessage',
+            {
+              defaultMessage: 'Fields',
+            }
+          )}
+          helpText={i18n.translate(
+            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.fieldsHelpMessage',
+            {
+              defaultMessage:
+                'Fields which are available in the `{layer}` layer. These can be used for tooltips and dynamic styling.',
+              values: {
+                layer: this.state.currentLayerName,
+              },
+            }
+          )}
+        >
+          <MVTFieldConfigEditor
+            fields={this.state.currentFields.slice()}
+            onChange={this._handleFieldChange}
+          />
+        </EuiFormRow>
+      ) : null;
+
+    return (
+      <Fragment>
+        <EuiFormRow
+          label={i18n.translate(
+            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameMessage',
+            {
+              defaultMessage: 'Layer name',
+            }
+          )}
+          helpText={i18n.translate(
+            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameHelpMessage',
+            {
+              defaultMessage: 'Name of the target data layer in the tile',
+            }
+          )}
+        >
+          <EuiFieldText
+            value={this.state.currentLayerName}
+            onChange={this._handleLayerNameInputChange}
+            isInvalid={this.state.currentLayerName === ''}
+          />
+        </EuiFormRow>
+        <EuiFormRow
+          label={i18n.translate(
+            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.zoomRangeTopMessage',
+            {
+              defaultMessage: 'Available levels',
+            }
+          )}
+          helpText={i18n.translate(
+            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.zoomRangeHelpMessage',
+            {
+              defaultMessage:
+                'Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa).',
+            }
+          )}
+        >
+          <ValidatedDualRange
+            label=""
+            formRowDisplay="columnCompressed"
+            min={MIN_ZOOM}
+            max={MAX_ZOOM}
+            value={[this.state.currentMinSourceZoom, this.state.currentMaxSourceZoom]}
+            showInput="inputWithPopover"
+            showRange
+            showLabels
+            onChange={this._handleZoomRangeChange}
+            allowEmptyRange={false}
+            compressed
+            prepend={i18n.translate(
+              'xpack.maps.source.MVTSingleLayerVectorSourceEditor.dataZoomRangeMessage',
+              {
+                defaultMessage: 'Zoom',
+              }
+            )}
+          />
+        </EuiFormRow>
+        {fieldEditor}
+      </Fragment>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx
new file mode 100644
index 0000000000000..4a31f940d793c
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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 { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source';
+import { MVTFieldType, SOURCE_TYPES } from '../../../../common/constants';
+import { TiledSingleLayerVectorSourceDescriptor } from '../../../../common/descriptor_types';
+
+const descriptor: TiledSingleLayerVectorSourceDescriptor = {
+  type: SOURCE_TYPES.MVT_SINGLE_LAYER,
+  urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf',
+  layerName: 'foobar',
+  minSourceZoom: 4,
+  maxSourceZoom: 14,
+  fields: [],
+  tooltipProperties: [],
+};
+
+describe('getUrlTemplateWithMeta', () => {
+  it('should echo configuration', async () => {
+    const source = new MVTSingleLayerVectorSource(descriptor);
+    const config = await source.getUrlTemplateWithMeta();
+    expect(config.urlTemplate).toEqual(descriptor.urlTemplate);
+    expect(config.layerName).toEqual(descriptor.layerName);
+    expect(config.minSourceZoom).toEqual(descriptor.minSourceZoom);
+    expect(config.maxSourceZoom).toEqual(descriptor.maxSourceZoom);
+  });
+});
+
+describe('canFormatFeatureProperties', () => {
+  it('false if no tooltips', async () => {
+    const source = new MVTSingleLayerVectorSource(descriptor);
+    expect(source.canFormatFeatureProperties()).toEqual(false);
+  });
+  it('true if at least one matching tooltip', async () => {
+    const descriptorWithTooltips = {
+      ...descriptor,
+      fields: [{ name: 'foobar', type: MVTFieldType.STRING }],
+      tooltipProperties: ['foo', 'foobar', 'bar'],
+    };
+    const source = new MVTSingleLayerVectorSource(descriptorWithTooltips);
+    expect(source.canFormatFeatureProperties()).toEqual(true);
+  });
+  it('false if no matching tooltip', async () => {
+    const descriptorWithTooltips = {
+      ...descriptor,
+      fields: [{ name: 'foobar', type: MVTFieldType.STRING }],
+      tooltipProperties: ['foo', 'bar'],
+    };
+    const source = new MVTSingleLayerVectorSource(descriptorWithTooltips);
+    expect(source.canFormatFeatureProperties()).toEqual(false);
+  });
+});
+
+describe('filterAndFormatPropertiesToHtml', () => {
+  const descriptorWithFields = {
+    ...descriptor,
+    fields: [
+      {
+        name: 'foo',
+        type: MVTFieldType.STRING,
+      },
+      {
+        name: 'food',
+        type: MVTFieldType.STRING,
+      },
+      {
+        name: 'fooz',
+        type: MVTFieldType.NUMBER,
+      },
+    ],
+    tooltipProperties: ['foo', 'fooz'],
+  };
+
+  it('should get tooltipproperties', async () => {
+    const source = new MVTSingleLayerVectorSource(descriptorWithFields);
+    const tooltipProperties = await source.filterAndFormatPropertiesToHtml({
+      foo: 'bar',
+      fooz: 123,
+    });
+    expect(tooltipProperties.length).toEqual(2);
+    expect(tooltipProperties[0].getPropertyName()).toEqual('foo');
+    expect(tooltipProperties[0].getHtmlDisplayValue()).toEqual('bar');
+    expect(tooltipProperties[1].getPropertyName()).toEqual('fooz');
+    expect(tooltipProperties[1].getHtmlDisplayValue()).toEqual('123');
+  });
+});
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts
deleted file mode 100644
index 03b91df22d3ca..0000000000000
--- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import uuid from 'uuid/v4';
-import { AbstractSource, ImmutableSourceProperty } from '../source';
-import { BoundsFilters, GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source';
-import { MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES, VECTOR_SHAPE_TYPE } from '../../../../common/constants';
-import { IField } from '../../fields/field';
-import { registerSource } from '../source_registry';
-import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters';
-import {
-  MapExtent,
-  TiledSingleLayerVectorSourceDescriptor,
-  VectorSourceSyncMeta,
-} from '../../../../common/descriptor_types';
-import { MVTSingleLayerVectorSourceConfig } from './mvt_single_layer_vector_source_editor';
-import { ITooltipProperty } from '../../tooltips/tooltip_property';
-
-export const sourceTitle = i18n.translate(
-  'xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle',
-  {
-    defaultMessage: 'Vector Tile Layer',
-  }
-);
-
-export class MVTSingleLayerVectorSource extends AbstractSource
-  implements ITiledSingleLayerVectorSource {
-  static createDescriptor({
-    urlTemplate,
-    layerName,
-    minSourceZoom,
-    maxSourceZoom,
-  }: MVTSingleLayerVectorSourceConfig) {
-    return {
-      type: SOURCE_TYPES.MVT_SINGLE_LAYER,
-      id: uuid(),
-      urlTemplate,
-      layerName,
-      minSourceZoom: Math.max(MIN_ZOOM, minSourceZoom),
-      maxSourceZoom: Math.min(MAX_ZOOM, maxSourceZoom),
-    };
-  }
-
-  readonly _descriptor: TiledSingleLayerVectorSourceDescriptor;
-
-  constructor(
-    sourceDescriptor: TiledSingleLayerVectorSourceDescriptor,
-    inspectorAdapters?: object
-  ) {
-    super(sourceDescriptor, inspectorAdapters);
-    this._descriptor = sourceDescriptor;
-  }
-
-  renderSourceSettingsEditor() {
-    return null;
-  }
-
-  getFieldNames(): string[] {
-    return [];
-  }
-
-  getGeoJsonWithMeta(
-    layerName: 'string',
-    searchFilters: unknown[],
-    registerCancelCallback: (callback: () => void) => void
-  ): Promise<GeoJsonWithMeta> {
-    // todo: remove this method
-    // This is a consequence of ITiledSingleLayerVectorSource extending IVectorSource.
-    throw new Error('Does not implement getGeoJsonWithMeta');
-  }
-
-  async getFields(): Promise<IField[]> {
-    return [];
-  }
-
-  async getImmutableProperties(): Promise<ImmutableSourceProperty[]> {
-    return [
-      { label: getDataSourceLabel(), value: sourceTitle },
-      { label: getUrlLabel(), value: this._descriptor.urlTemplate },
-      {
-        label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.layerNameMessage', {
-          defaultMessage: 'Layer name',
-        }),
-        value: this._descriptor.layerName,
-      },
-      {
-        label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.minZoomMessage', {
-          defaultMessage: 'Min zoom',
-        }),
-        value: this._descriptor.minSourceZoom.toString(),
-      },
-      {
-        label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.maxZoomMessage', {
-          defaultMessage: 'Max zoom',
-        }),
-        value: this._descriptor.maxSourceZoom.toString(),
-      },
-    ];
-  }
-
-  async getDisplayName(): Promise<string> {
-    return this._descriptor.layerName;
-  }
-
-  async getUrlTemplateWithMeta() {
-    return {
-      urlTemplate: this._descriptor.urlTemplate,
-      layerName: this._descriptor.layerName,
-      minSourceZoom: this._descriptor.minSourceZoom,
-      maxSourceZoom: this._descriptor.maxSourceZoom,
-    };
-  }
-
-  async getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPE[]> {
-    return [VECTOR_SHAPE_TYPE.POINT, VECTOR_SHAPE_TYPE.LINE, VECTOR_SHAPE_TYPE.POLYGON];
-  }
-
-  canFormatFeatureProperties() {
-    return false;
-  }
-
-  getMinZoom() {
-    return this._descriptor.minSourceZoom;
-  }
-
-  getMaxZoom() {
-    return this._descriptor.maxSourceZoom;
-  }
-
-  getBoundsForFilters(
-    boundsFilters: BoundsFilters,
-    registerCancelCallback: (requestToken: symbol, callback: () => void) => void
-  ): MapExtent | null {
-    return null;
-  }
-
-  getFieldByName(fieldName: string): IField | null {
-    return null;
-  }
-
-  getSyncMeta(): VectorSourceSyncMeta {
-    return null;
-  }
-
-  getApplyGlobalQuery(): boolean {
-    return false;
-  }
-
-  async filterAndFormatPropertiesToHtml(properties: unknown): Promise<ITooltipProperty[]> {
-    return [];
-  }
-}
-
-registerSource({
-  ConstructorFunction: MVTSingleLayerVectorSource,
-  type: SOURCE_TYPES.MVT_SINGLE_LAYER,
-});
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx
new file mode 100644
index 0000000000000..930702d944302
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx
@@ -0,0 +1,276 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import uuid from 'uuid/v4';
+import React from 'react';
+import { GeoJsonProperties, Geometry } from 'geojson';
+import { AbstractSource, ImmutableSourceProperty, SourceEditorArgs } from '../source';
+import { BoundsFilters, GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source';
+import {
+  FIELD_ORIGIN,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  SOURCE_TYPES,
+  VECTOR_SHAPE_TYPE,
+} from '../../../../common/constants';
+import { registerSource } from '../source_registry';
+import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters';
+import {
+  MapExtent,
+  MVTFieldDescriptor,
+  TiledSingleLayerVectorSourceDescriptor,
+  VectorSourceSyncMeta,
+} from '../../../../common/descriptor_types';
+import { MVTField } from '../../fields/mvt_field';
+import { UpdateSourceEditor } from './update_source_editor';
+import { ITooltipProperty, TooltipProperty } from '../../tooltips/tooltip_property';
+
+export const sourceTitle = i18n.translate(
+  'xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle',
+  {
+    defaultMessage: '.pbf vector tiles',
+  }
+);
+
+export class MVTSingleLayerVectorSource extends AbstractSource
+  implements ITiledSingleLayerVectorSource {
+  static createDescriptor({
+    urlTemplate,
+    layerName,
+    minSourceZoom,
+    maxSourceZoom,
+    fields,
+    tooltipProperties,
+  }: Partial<TiledSingleLayerVectorSourceDescriptor>) {
+    return {
+      type: SOURCE_TYPES.MVT_SINGLE_LAYER,
+      id: uuid(),
+      urlTemplate: urlTemplate ? urlTemplate : '',
+      layerName: layerName ? layerName : '',
+      minSourceZoom:
+        typeof minSourceZoom === 'number' ? Math.max(MIN_ZOOM, minSourceZoom) : MIN_ZOOM,
+      maxSourceZoom:
+        typeof maxSourceZoom === 'number' ? Math.min(MAX_ZOOM, maxSourceZoom) : MAX_ZOOM,
+      fields: fields ? fields : [],
+      tooltipProperties: tooltipProperties ? tooltipProperties : [],
+    };
+  }
+
+  readonly _descriptor: TiledSingleLayerVectorSourceDescriptor;
+  readonly _tooltipFields: MVTField[];
+
+  constructor(
+    sourceDescriptor: TiledSingleLayerVectorSourceDescriptor,
+    inspectorAdapters?: object
+  ) {
+    super(sourceDescriptor, inspectorAdapters);
+    this._descriptor = MVTSingleLayerVectorSource.createDescriptor(sourceDescriptor);
+
+    this._tooltipFields = this._descriptor.tooltipProperties
+      .map((fieldName) => {
+        return this.getFieldByName(fieldName);
+      })
+      .filter((f) => f !== null) as MVTField[];
+  }
+
+  async supportsFitToBounds() {
+    return false;
+  }
+
+  renderSourceSettingsEditor({ onChange }: SourceEditorArgs) {
+    return (
+      <UpdateSourceEditor onChange={onChange} tooltipFields={this._tooltipFields} source={this} />
+    );
+  }
+
+  getFieldNames(): string[] {
+    return this._descriptor.fields.map((field: MVTFieldDescriptor) => {
+      return field.name;
+    });
+  }
+
+  getMVTFields(): MVTField[] {
+    return this._descriptor.fields.map((field: MVTFieldDescriptor) => {
+      return new MVTField({
+        fieldName: field.name,
+        type: field.type,
+        source: this,
+        origin: FIELD_ORIGIN.SOURCE,
+      });
+    });
+  }
+
+  getFieldByName(fieldName: string): MVTField | null {
+    try {
+      return this.createField({ fieldName });
+    } catch (e) {
+      return null;
+    }
+  }
+
+  createField({ fieldName }: { fieldName: string }): MVTField {
+    const field = this._descriptor.fields.find((f: MVTFieldDescriptor) => {
+      return f.name === fieldName;
+    });
+    if (!field) {
+      throw new Error(`Cannot create field for fieldName ${fieldName}`);
+    }
+    return new MVTField({
+      fieldName: field.name,
+      type: field.type,
+      source: this,
+      origin: FIELD_ORIGIN.SOURCE,
+    });
+  }
+
+  getGeoJsonWithMeta(
+    layerName: 'string',
+    searchFilters: unknown[],
+    registerCancelCallback: (callback: () => void) => void
+  ): Promise<GeoJsonWithMeta> {
+    // Having this method here is a consequence of ITiledSingleLayerVectorSource extending IVectorSource.
+    throw new Error('Does not implement getGeoJsonWithMeta');
+  }
+
+  async getFields(): Promise<MVTField[]> {
+    return this.getMVTFields();
+  }
+
+  getLayerName(): string {
+    return this._descriptor.layerName;
+  }
+
+  async getImmutableProperties(): Promise<ImmutableSourceProperty[]> {
+    return [
+      { label: getDataSourceLabel(), value: sourceTitle },
+      { label: getUrlLabel(), value: this._descriptor.urlTemplate },
+      {
+        label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.layerNameMessage', {
+          defaultMessage: 'Layer name',
+        }),
+        value: this._descriptor.layerName,
+      },
+      {
+        label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.minZoomMessage', {
+          defaultMessage: 'Min zoom',
+        }),
+        value: this._descriptor.minSourceZoom.toString(),
+      },
+      {
+        label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.maxZoomMessage', {
+          defaultMessage: 'Max zoom',
+        }),
+        value: this._descriptor.maxSourceZoom.toString(),
+      },
+      {
+        label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.fields', {
+          defaultMessage: 'Fields',
+        }),
+        value: this._descriptor.fields.map(({ name, type }) => `${name}(${type})`).join(', '),
+      },
+    ];
+  }
+
+  async getDisplayName(): Promise<string> {
+    return this.getLayerName();
+  }
+
+  async getUrlTemplateWithMeta() {
+    return {
+      urlTemplate: this._descriptor.urlTemplate,
+      layerName: this._descriptor.layerName,
+      minSourceZoom: this._descriptor.minSourceZoom,
+      maxSourceZoom: this._descriptor.maxSourceZoom,
+    };
+  }
+
+  async getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPE[]> {
+    return [VECTOR_SHAPE_TYPE.POINT, VECTOR_SHAPE_TYPE.LINE, VECTOR_SHAPE_TYPE.POLYGON];
+  }
+
+  canFormatFeatureProperties() {
+    if (!this._tooltipFields.length) {
+      return false;
+    }
+
+    for (let i = 0; i < this._tooltipFields.length; i++) {
+      const tooltip: MVTField = this._tooltipFields[i];
+      for (let j = 0; j < this._descriptor.fields.length; j++) {
+        if (tooltip.getName() === this._descriptor.fields[j].name) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  getMinZoom() {
+    return this._descriptor.minSourceZoom;
+  }
+
+  getMaxZoom() {
+    return this._descriptor.maxSourceZoom;
+  }
+
+  getFeatureProperties(
+    id: string | number | undefined,
+    mbProperties: GeoJsonProperties
+  ): GeoJsonProperties | null {
+    return mbProperties;
+  }
+  getFeatureGeometry(
+    id: string | number | undefined,
+    mbProperties: GeoJsonProperties
+  ): Geometry | null {
+    // Cannot get the raw geometry for a simple tiled service
+    return null;
+  }
+
+  getBoundsForFilters(
+    boundsFilters: BoundsFilters,
+    registerCancelCallback: (requestToken: symbol, callback: () => void) => void
+  ): MapExtent | null {
+    return null;
+  }
+
+  getSyncMeta(): VectorSourceSyncMeta {
+    return null;
+  }
+
+  getApplyGlobalQuery(): boolean {
+    return false;
+  }
+
+  supportsFieldMeta(): boolean {
+    return false;
+  }
+
+  async filterAndFormatPropertiesToHtml(
+    properties: GeoJsonProperties,
+    featureId?: string | number
+  ): Promise<ITooltipProperty[]> {
+    const tooltips = [];
+    for (const key in properties) {
+      if (properties.hasOwnProperty(key)) {
+        const field = this._tooltipFields.find((mvtField: MVTField) => {
+          return mvtField.getName() === key;
+        });
+
+        if (field) {
+          const tooltip = new TooltipProperty(key, key, properties[key]);
+          tooltips.push(tooltip);
+        }
+      }
+    }
+    return tooltips;
+  }
+}
+
+registerSource({
+  ConstructorFunction: MVTSingleLayerVectorSource,
+  type: SOURCE_TYPES.MVT_SINGLE_LAYER,
+});
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.test.tsx
new file mode 100644
index 0000000000000..986756f840014
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.test.tsx
@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+jest.mock('../../../kibana_services', () => ({}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { MVTSingleLayerVectorSourceEditor } from './mvt_single_layer_vector_source_editor';
+
+test('should render source creation editor (fields should _not_ be included)', async () => {
+  const component = shallow(<MVTSingleLayerVectorSourceEditor onSourceConfigChange={() => {}} />);
+
+  expect(component).toMatchSnapshot();
+});
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx
index 7a4b8d43811da..2292f434dee3e 100644
--- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx
@@ -10,17 +10,14 @@ import _ from 'lodash';
 import { EuiFieldText, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
-import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public';
-
-export type MVTSingleLayerVectorSourceConfig = {
-  urlTemplate: string;
-  layerName: string;
-  minSourceZoom: number;
-  maxSourceZoom: number;
-};
+import {
+  MVTFieldDescriptor,
+  TiledSingleLayerVectorSourceSettings,
+} from '../../../../common/descriptor_types';
+import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings';
 
 export interface Props {
-  onSourceConfigChange: (sourceConfig: MVTSingleLayerVectorSourceConfig) => void;
+  onSourceConfigChange: (sourceConfig: TiledSingleLayerVectorSourceSettings) => void;
 }
 
 interface State {
@@ -28,6 +25,7 @@ interface State {
   layerName: string;
   minSourceZoom: number;
   maxSourceZoom: number;
+  fields?: MVTFieldDescriptor[];
 }
 
 export class MVTSingleLayerVectorSourceEditor extends Component<Props, State> {
@@ -36,6 +34,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component<Props, State> {
     layerName: '',
     minSourceZoom: MIN_ZOOM,
     maxSourceZoom: MAX_ZOOM,
+    fields: [],
   };
 
   _sourceConfigChange = _.debounce(() => {
@@ -50,6 +49,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component<Props, State> {
         layerName: this.state.layerName,
         minSourceZoom: this.state.minSourceZoom,
         maxSourceZoom: this.state.maxSourceZoom,
+        fields: this.state.fields,
       });
     }
   }, 200);
@@ -64,23 +64,13 @@ export class MVTSingleLayerVectorSourceEditor extends Component<Props, State> {
     );
   };
 
-  _handleLayerNameInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const layerName = e.target.value;
-    this.setState(
-      {
-        layerName,
-      },
-      () => this._sourceConfigChange()
-    );
-  };
-
-  _handleZoomRangeChange = (e: Value) => {
-    const minSourceZoom = parseInt(e[0] as string, 10);
-    const maxSourceZoom = parseInt(e[1] as string, 10);
-
-    if (this.state.minSourceZoom !== minSourceZoom || this.state.maxSourceZoom !== maxSourceZoom) {
-      this.setState({ minSourceZoom, maxSourceZoom }, () => this._sourceConfigChange());
-    }
+  _handleChange = (state: {
+    layerName: string;
+    fields: MVTFieldDescriptor[];
+    minSourceZoom: number;
+    maxSourceZoom: number;
+  }) => {
+    this.setState(state, () => this._sourceConfigChange());
   };
 
   render() {
@@ -90,37 +80,30 @@ export class MVTSingleLayerVectorSourceEditor extends Component<Props, State> {
           label={i18n.translate('xpack.maps.source.MVTSingleLayerVectorSourceEditor.urlMessage', {
             defaultMessage: 'Url',
           })}
-        >
-          <EuiFieldText value={this.state.urlTemplate} onChange={this._handleUrlTemplateChange} />
-        </EuiFormRow>
-        <EuiFormRow
-          label={i18n.translate(
-            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameMessage',
+          helpText={i18n.translate(
+            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.urlHelpMessage',
             {
-              defaultMessage: 'Layer name',
+              defaultMessage: 'URL of the .mvt vector tile service. e.g. {url}',
+              values: {
+                url: 'http://company.com/{z}/{x}/{y}.pbf',
+              },
             }
           )}
         >
-          <EuiFieldText value={this.state.layerName} onChange={this._handleLayerNameInputChange} />
+          <EuiFieldText
+            value={this.state.urlTemplate}
+            onChange={this._handleUrlTemplateChange}
+            compressed
+          />
         </EuiFormRow>
-        <ValidatedDualRange
-          label=""
-          formRowDisplay="columnCompressed"
-          min={MIN_ZOOM}
-          max={MAX_ZOOM}
-          value={[this.state.minSourceZoom, this.state.maxSourceZoom]}
-          showInput="inputWithPopover"
-          showRange
-          showLabels
-          onChange={this._handleZoomRangeChange}
-          allowEmptyRange={false}
-          compressed
-          prepend={i18n.translate(
-            'xpack.maps.source.MVTSingleLayerVectorSourceEditor.dataZoomRangeMessage',
-            {
-              defaultMessage: 'Zoom levels',
-            }
-          )}
+
+        <MVTSingleLayerSourceSettings
+          handleChange={this._handleChange}
+          layerName={this.state.layerName}
+          fields={this.state.fields}
+          minSourceZoom={this.state.minSourceZoom}
+          maxSourceZoom={this.state.maxSourceZoom}
+          includeFields={false}
         />
       </Fragment>
     );
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/types.ts b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/types.ts
new file mode 100644
index 0000000000000..599eaea73c9a0
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/types.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { MVTFieldDescriptor } from '../../../../common/descriptor_types';
+
+export interface MVTSingleLayerVectorSourceConfig {
+  urlTemplate: string;
+  layerName: string;
+  minSourceZoom: number;
+  maxSourceZoom: number;
+  fields?: MVTFieldDescriptor[];
+  tooltipProperties?: string[];
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx
new file mode 100644
index 0000000000000..fd19379058e3b
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+jest.mock('../../../kibana_services', () => ({}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { UpdateSourceEditor } from './update_source_editor';
+import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source';
+import { TiledSingleLayerVectorSourceDescriptor } from '../../../../common/descriptor_types';
+import { SOURCE_TYPES } from '../../../../common/constants';
+
+const descriptor: TiledSingleLayerVectorSourceDescriptor = {
+  type: SOURCE_TYPES.MVT_SINGLE_LAYER,
+  urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf',
+  layerName: 'foobar',
+  minSourceZoom: 4,
+  maxSourceZoom: 14,
+  fields: [],
+  tooltipProperties: [],
+};
+
+test('should render update source editor (fields _should_ be included)', async () => {
+  const source = new MVTSingleLayerVectorSource(descriptor);
+
+  const component = shallow(
+    <UpdateSourceEditor source={source} tooltipFields={[]} onChange={() => {}} />
+  );
+
+  expect(component).toMatchSnapshot();
+});
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx
new file mode 100644
index 0000000000000..8262eec47fb15
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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 React, { Component, Fragment } from 'react';
+import { EuiTitle, EuiPanel, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { TooltipSelector } from '../../../components/tooltip_selector';
+import { MVTField } from '../../fields/mvt_field';
+import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source';
+import { MVTSettings, MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings';
+import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view';
+import { MVTFieldDescriptor } from '../../../../common/descriptor_types';
+
+export interface Props {
+  tooltipFields: MVTField[];
+  onChange: (...args: OnSourceChangeArgs[]) => void;
+  source: MVTSingleLayerVectorSource;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface State {}
+
+export class UpdateSourceEditor extends Component<Props, State> {
+  _onTooltipPropertiesSelect = (propertyNames: string[]) => {
+    this.props.onChange({ propName: 'tooltipProperties', value: propertyNames });
+  };
+
+  _handleChange = (settings: MVTSettings) => {
+    const changes: OnSourceChangeArgs[] = [];
+    if (settings.layerName !== this.props.source.getLayerName()) {
+      changes.push({ propName: 'layerName', value: settings.layerName });
+    }
+    if (settings.minSourceZoom !== this.props.source.getMinZoom()) {
+      changes.push({ propName: 'minSourceZoom', value: settings.minSourceZoom });
+    }
+    if (settings.maxSourceZoom !== this.props.source.getMaxZoom()) {
+      changes.push({ propName: 'maxSourceZoom', value: settings.maxSourceZoom });
+    }
+    if (!_.isEqual(settings.fields, this._getFieldDescriptors())) {
+      changes.push({ propName: 'fields', value: settings.fields });
+    }
+    this.props.onChange(...changes);
+  };
+
+  _getFieldDescriptors(): MVTFieldDescriptor[] {
+    return this.props.source.getMVTFields().map((field: MVTField) => {
+      return field.getMVTFieldDescriptor();
+    });
+  }
+
+  _renderSourceSettingsCard() {
+    const fieldDescriptors: MVTFieldDescriptor[] = this._getFieldDescriptors();
+    return (
+      <Fragment>
+        <EuiPanel>
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.maps.mvtSource.sourceSettings"
+                defaultMessage="Source settings"
+              />
+            </h5>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          <MVTSingleLayerSourceSettings
+            handleChange={this._handleChange}
+            layerName={this.props.source.getLayerName() || ''}
+            fields={fieldDescriptors}
+            minSourceZoom={this.props.source.getMinZoom()}
+            maxSourceZoom={this.props.source.getMaxZoom()}
+            includeFields={true}
+          />
+        </EuiPanel>
+
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  }
+
+  _renderTooltipSelectionCard() {
+    return (
+      <Fragment>
+        <EuiPanel>
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.maps.mvtSource.tooltipsTitle"
+                defaultMessage="Tooltip fields"
+              />
+            </h5>
+          </EuiTitle>
+
+          <EuiSpacer size="m" />
+
+          <TooltipSelector
+            tooltipFields={this.props.tooltipFields} // selected fields in the tooltip
+            onChange={this._onTooltipPropertiesSelect}
+            fields={this.props.source.getMVTFields()} // all the fields in the source
+          />
+        </EuiPanel>
+
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <Fragment>
+        {this._renderSourceSettingsCard()}
+        {this._renderTooltipSelectionCard()}
+      </Fragment>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/source.ts b/x-pack/plugins/maps/public/classes/sources/source.ts
index a7bf6a19103f3..4ed1b2151b94c 100644
--- a/x-pack/plugins/maps/public/classes/sources/source.ts
+++ b/x-pack/plugins/maps/public/classes/sources/source.ts
@@ -17,7 +17,7 @@ import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 import { OnSourceChangeArgs } from '../../connected_components/layer_panel/view';
 
 export type SourceEditorArgs = {
-  onChange: (args: OnSourceChangeArgs) => void;
+  onChange: (...args: OnSourceChangeArgs[]) => void;
 };
 
 export type ImmutableSourceProperty = {
diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejon_loader_util.ts b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejon_loader_util.ts
new file mode 100644
index 0000000000000..6b39f80d57b28
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejon_loader_util.ts
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+const tileJsonDocCache = new Map();
+
+export async function loadTileJsonDocument(url: string): any {
+  if (tileJsonDocCache.has(url)) {
+    return tileJsonDocCache.get(url);
+  }
+
+  let document;
+  try {
+    document = await fetch(url);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    throw new Error(`Cannot load ${url}: ${e.message}`);
+  }
+
+  let docJson;
+  try {
+    docJson = await document.json();
+  } catch (e) {
+    console.error(e);
+    throw new Error(`Cannot parse contents as json: ${e.message}`);
+  }
+
+  tileJsonDocCache.set(url, docJson);
+  return docJson;
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_layer_wizard.tsx
new file mode 100644
index 0000000000000..24cf78c8380f0
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_layer_wizard.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import React from 'react';
+import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
+import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
+import { TileJsonSourceEditor } from './tilejson_source_editor';
+import {
+  TileJsonVectorSourceDescriptor,
+  TileJsonVectorSourceSettings,
+} from '../../../../common/descriptor_types';
+import { TileJsonSource, tilejsonSourceTitle } from './tilejson_source';
+
+export const tileJsonLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
+  description: i18n.translate('xpack.maps.source.tilejsonSourceWizard', {
+    defaultMessage:
+      'Data service implementing the TileJSON 2.0.0 specification, with vector_layers extension',
+  }),
+  icon: 'grid',
+  renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
+    const onSourceConfigChange = (sourceConfig: TileJsonVectorSourceSettings) => {
+      const sourceDescriptor: TileJsonVectorSourceDescriptor = TileJsonSource.createDescriptor(
+        sourceConfig
+      );
+      const layerDescriptor = TiledVectorLayer.createDescriptor({ sourceDescriptor }, mapColors);
+      previewLayers([layerDescriptor]);
+    };
+
+    return <TileJsonSourceEditor onSourceConfigChange={onSourceConfigChange} />;
+  },
+  title: tilejsonSourceTitle,
+};
diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx
new file mode 100644
index 0000000000000..a0e7b80a518ad
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx
@@ -0,0 +1,179 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import uuid from 'uuid/v4';
+import React from 'react';
+import { GeoJsonProperties } from 'geojson';
+import { ImmutableSourceProperty, SourceEditorArgs } from '../source';
+import { FIELD_ORIGIN, MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants';
+import { registerSource } from '../source_registry';
+import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters';
+import {
+  TiledSingleLayerVectorSourceDescriptor,
+  TileJsonVectorSourceDescriptor,
+} from '../../../../common/descriptor_types';
+import { MVTField } from '../../fields/mvt_field';
+import { ITooltipProperty } from '../../tooltips/tooltip_property';
+import { MVTSingleLayerVectorSource } from '../mvt_single_layer_vector_source';
+import { loadTileJsonDocument } from './tilejon_loader_util';
+import { TileJsonUpdateSourceEditor } from './tilejson_update_source_editor';
+import { TileJsonField } from '../../fields/tilejson_field';
+
+export const tilejsonSourceTitle = i18n.translate('xpack.maps.source.tileJsonSource.sourceTitle', {
+  defaultMessage: 'TileJSON Layer',
+});
+
+export interface TileJsonVectorLayerConfig {
+  id: string;
+  description: string;
+  minzoom: number;
+  maxzoom: number;
+  fields: Record<string, string>;
+}
+
+// todo: dont inherit, implement interface
+export class TileJsonSource extends MVTSingleLayerVectorSource {
+  static createDescriptor({
+    url,
+    layerName,
+    tooltipProperties,
+  }: Partial<TileJsonVectorSourceDescriptor>): TileJsonVectorSourceDescriptor {
+    return {
+      type: SOURCE_TYPES.TILEJSON_SINGLE_LAYER,
+      id: uuid(),
+      url: url ? url : '',
+      layerName: layerName ? layerName : '',
+      tooltipProperties: tooltipProperties ? tooltipProperties : [],
+    };
+  }
+
+  static getLayerConfigsFromTileJson(tileJsonDoc: any): TileJsonVectorLayerConfig[] {
+    return tileJsonDoc.vector_layers || [];
+  }
+
+  readonly _descriptor: TiledSingleLayerVectorSourceDescriptor;
+
+  constructor(
+    sourceDescriptor: TiledSingleLayerVectorSourceDescriptor,
+    inspectorAdapters?: object
+  ) {
+    super(sourceDescriptor, inspectorAdapters);
+    this._descriptor = TileJsonSource.createDescriptor(sourceDescriptor);
+
+    // todo deal with tooltipProperties
+  }
+
+  renderSourceSettingsEditor({ onChange }: SourceEditorArgs) {
+    return <TileJsonUpdateSourceEditor onChange={onChange} tooltipFields={[]} source={this} />;
+  }
+
+  getFieldNames(): string[] {
+    return [];
+  }
+
+  getMVTFields(): MVTField[] {
+    throw new Error('Cannot synchronously getMVTFieldNames');
+  }
+
+  // todo: breaks inheritance., shouldnt inherit from mvt_sinfle_layer
+  getFieldByName(fieldName: string): TileJsonField | null {
+    try {
+      return this.createField({ fieldName });
+    } catch (e) {
+      return null;
+    }
+  }
+
+  createField({ fieldName }: { fieldName: string }): TileJsonField {
+    return new TileJsonField({
+      fieldName,
+      source: this,
+      origin: FIELD_ORIGIN.SOURCE,
+    });
+  }
+
+  async getFields(): Promise<TileJsonField[]> {
+    const layer = await this.getLayerConfig();
+
+    const fields = [];
+    for (const key in layer.fields) {
+      if (layer.fields.hasOwnProperty(key)) {
+        const f = new TileJsonField({
+          fieldName: key,
+          source: this,
+          origin: FIELD_ORIGIN.SOURCE,
+        });
+        fields.push(f);
+      }
+    }
+
+    return fields;
+  }
+
+  getUrl(): string {
+    return this._descriptor.url;
+  }
+
+  async getImmutableProperties(): Promise<ImmutableSourceProperty[]> {
+    return [
+      { label: getDataSourceLabel(), value: tilejsonSourceTitle },
+      { label: getUrlLabel(), value: this._descriptor.url },
+      {
+        label: i18n.translate('xpack.maps.source.tilejsonSource.layerNameMessage', {
+          defaultMessage: 'Layer name',
+        }),
+        value: this._descriptor.layerName,
+      },
+    ];
+  }
+
+  async getLayerConfig(): Promise<TileJsonVectorLayerConfig> {
+    const tileJsonDoc = await loadTileJsonDocument(this._descriptor.url);
+    const layers = TileJsonSource.getLayerConfigsFromTileJson(tileJsonDoc);
+    return layers.find((l) => l.id === this._descriptor.layerName);
+  }
+  async getUrlTemplateWithMeta() {
+    const layer = await this.getLayerConfig();
+    // todo: EMS does not preserve licesing param
+    const tileJsonDoc = await loadTileJsonDocument(this._descriptor.url);
+    const tileUrl = tileJsonDoc.tiles[0];
+    return {
+      urlTemplate: tileUrl,
+      layerName: this._descriptor.layerName,
+      minSourceZoom: layer.minzoom,
+      maxSourceZoom: layer.maxzoom,
+    };
+  }
+
+  getFeatureProperties(
+    id: string | number | undefined,
+    mbProperties: GeoJsonProperties
+  ): GeoJsonProperties | null {
+    return mbProperties;
+  }
+
+  getMinZoom() {
+    return MIN_ZOOM;
+  }
+
+  getMaxZoom() {
+    return MAX_ZOOM;
+  }
+
+  async filterAndFormatPropertiesToHtml(
+    properties: GeoJsonProperties,
+    featureId?: string | number
+  ): Promise<ITooltipProperty[]> {
+    // todo
+    return [];
+  }
+}
+
+registerSource({
+  ConstructorFunction: TileJsonSource,
+  type: SOURCE_TYPES.TILEJSON_SINGLE_LAYER,
+});
diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx
new file mode 100644
index 0000000000000..4615037237c93
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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.
+ */
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+
+import React, { Fragment, Component, ChangeEvent } from 'react';
+import _ from 'lodash';
+import { EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { TileJsonVectorSourceSettings } from '../../../../common/descriptor_types';
+import { TileJsonSourceSettings } from './tilejson_source_settings';
+
+export interface Props {
+  onSourceConfigChange: (sourceConfig: TileJsonVectorSourceSettings) => void;
+}
+
+interface State {
+  url: string;
+  layerName: string;
+}
+
+export class TileJsonSourceEditor extends Component<Props, State> {
+  state = {
+    url: '',
+    layerName: '',
+  };
+
+  _sourceConfigChange = _.debounce(() => {
+    if (this.state.layerName && this.state.url) {
+      this.props.onSourceConfigChange({
+        url: this.state.url,
+        layerName: this.state.layerName,
+      });
+    }
+  }, 200);
+
+  _handleUrlChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const url = e.target.value;
+
+    if (this.state.url === url) {
+      return;
+    }
+
+    this.setState(
+      {
+        url,
+      },
+      () => this._sourceConfigChange()
+    );
+  };
+
+  _handleLayerNameChange = (layerName: string) => {
+    if (this.state.layerName === layerName) {
+      return;
+    }
+    this.setState({ layerName }, () => this._sourceConfigChange());
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiFormRow
+          label={i18n.translate('xpack.maps.source.TileJson.urlMessage', {
+            defaultMessage: 'Url',
+          })}
+          helpText={i18n.translate('xpack.maps.source.TileJson.urlHelpMessage', {
+            defaultMessage: 'URL of the .mvt vector tile service. e.g. {url}',
+            values: {
+              url: 'https://tiles.maps.elastic.co/data/v3.json',
+            },
+          })}
+        >
+          <EuiFieldText value={this.state.url} onChange={this._handleUrlChange} compressed />
+        </EuiFormRow>
+
+        <TileJsonSourceSettings
+          handleChange={this._handleLayerNameChange}
+          layerName={this.state.layerName}
+          url={this.state.url}
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx
new file mode 100644
index 0000000000000..558c43b2fed7f
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx
@@ -0,0 +1,148 @@
+/*
+ * 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.
+ */
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+
+import React, { Fragment, Component, ChangeEvent } from 'react';
+import { EuiSelect, EuiFormRow, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import _ from 'lodash';
+import { loadTileJsonDocument } from './tilejon_loader_util';
+import { TileJsonSource, TileJsonVectorLayerConfig } from './tilejson_source';
+
+export interface State {
+  currentLayerName: string;
+  previousLayerName: string;
+  urlForDoc: string;
+  tileJsonDoc: any;
+}
+
+export interface Props {
+  handleChange: (layerName: string) => void;
+  layerName: string;
+  url: string[];
+}
+
+export class TileJsonSourceSettings extends Component<Props, State> {
+  state = {
+    currentLayerName: '',
+    previousLayerName: '',
+    urlForDoc: '',
+    tileJsonDoc: null,
+  };
+
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    if (_.isEqual(nextProps.layerName, prevState.previousLayerName)) {
+      return null;
+    }
+
+    return {
+      currentLayerName: nextProps.layerName,
+      previousLayerName: nextProps.layerName,
+      urlForDoc: prevState.urlForDoc,
+      tileJsonDoc: prevState.tileJsonDoc,
+    };
+  }
+
+  _isMounted: boolean = false;
+
+  componentDidMount(): void {
+    this._isMounted = true;
+    this._loadUrl();
+  }
+
+  componentWillUnmount(): void {
+    this._isMounted = false;
+  }
+
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): void {
+    this._loadUrl();
+  }
+
+  async _loadUrl() {
+    if (!this.props.url) {
+      return;
+    }
+    if (this.state.urlForDoc === this.props.url) {
+      return;
+    }
+    const url = this.props.url;
+    let tileJsonDoc;
+    try {
+      tileJsonDoc = await loadTileJsonDocument(url);
+    } catch (e) {
+      console.error(e);
+      this.setState({
+        urlForDoc: '',
+        tileJsonDoc: null,
+      });
+      return;
+    }
+    if (this._isMounted && this.props.url === url) {
+      this.setState({
+        urlForDoc: url,
+        tileJsonDoc,
+      });
+    }
+  }
+
+  _handleChange = _.debounce(() => {
+    this.props.handleChange(this.state.currentLayerName);
+  }, 200);
+
+  _handleLayerNameInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const layerName = e.target.value;
+    if (layerName === this.state.currentLayerName) {
+      return;
+    }
+    this.setState({ currentLayerName: layerName }, this._handleChange);
+  };
+
+  render() {
+    if (!this.state.tileJsonDoc) {
+      return null;
+    }
+
+    const description = this.state.tileJsonDoc.description;
+
+    const layers: TileJsonVectorLayerConfig[] = TileJsonSource.getLayerConfigsFromTileJson(
+      this.state.tileJsonDoc
+    );
+    const layerOptions = layers.map((layer: TileJsonVectorLayerConfig) => {
+      return {
+        text: layer.id,
+        value: layer.id,
+      };
+    });
+    return (
+      <Fragment>
+        <EuiFormRow
+          label={i18n.translate('xpack.maps.source.TileJsonSourceSettings.description', {
+            defaultMessage: 'Description',
+          })}
+        >
+          <EuiText size={'xs'}>{description}</EuiText>
+        </EuiFormRow>
+        <EuiFormRow
+          label={i18n.translate('xpack.maps.source.TileJsonSourceSettings.layerNameMessage', {
+            defaultMessage: 'Layer name',
+          })}
+          helpText={i18n.translate(
+            'xpack.maps.source.TileJsonSourceSettings.layerNameHelpMessage',
+            {
+              defaultMessage: 'Name of the target data layer in the tile',
+            }
+          )}
+        >
+          <EuiSelect
+            value={this.state.currentLayerName}
+            onChange={this._handleLayerNameInputChange}
+            options={layerOptions}
+          />
+        </EuiFormRow>
+      </Fragment>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx
new file mode 100644
index 0000000000000..40c148504a98c
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx
@@ -0,0 +1,99 @@
+/*
+ * 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 React, { Component, Fragment } from 'react';
+import { EuiTitle, EuiPanel, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+// import { TooltipSelector } from '../../../components/tooltip_selector';
+import { MVTField } from '../../fields/mvt_field';
+import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view';
+import { TileJsonSourceSettings } from './tilejson_source_settings';
+import { TileJsonSource } from './tilejson_source';
+
+export interface Props {
+  tooltipFields: MVTField[];
+  onChange: (...args: OnSourceChangeArgs[]) => void;
+  source: TileJsonSource;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface State {}
+
+export class TileJsonUpdateSourceEditor extends Component<Props, State> {
+  // _onTooltipPropertiesSelect = (propertyNames: string[]) => {
+  //   this.props.onChange({ propName: 'tooltipProperties', value: propertyNames });
+  // };
+
+  _handleChange = (layerName: string) => {
+    const changes: OnSourceChangeArgs[] = [];
+    if (layerName !== this.props.source.getLayerName()) {
+      changes.push({ propName: 'layerName', value: layerName });
+    }
+    this.props.onChange(...changes);
+  };
+
+  _renderSourceSettingsCard() {
+    return (
+      <Fragment>
+        <EuiPanel>
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.maps.tileJson.sourceSettings"
+                defaultMessage="Source settings"
+              />
+            </h5>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          <TileJsonSourceSettings
+            handleChange={this._handleChange}
+            layerName={this.props.source.getLayerName() || ''}
+            url={this.props.source.getUrl()}
+          />
+        </EuiPanel>
+
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  }
+
+  // _renderTooltipSelectionCard() {
+  //   return (
+  //     <Fragment>
+  //       <EuiPanel>
+  //         <EuiTitle size="xs">
+  //           <h5>
+  //             <FormattedMessage
+  //               id="xpack.maps.mvtSource.tooltipsTitle"
+  //               defaultMessage="Tooltip fields"
+  //             />
+  //           </h5>
+  //         </EuiTitle>
+  //
+  //         <EuiSpacer size="m" />
+  //
+  //         <TooltipSelector
+  //           tooltipFields={this.props.tooltipFields} // selected fields in the tooltip
+  //           onChange={this._onTooltipPropertiesSelect}
+  //           fields={this.props.source.getMVTFields()} // all the fields in the source
+  //         />
+  //       </EuiPanel>
+  //
+  //       <EuiSpacer size="s" />
+  //     </Fragment>
+  //   );
+  // }
+
+  render() {
+    return (
+      <Fragment>
+        {this._renderSourceSettingsCard()}
+        {/* {this._renderTooltipSelectionCard()}*/}
+      </Fragment>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts
index 99a7478cd8362..e4e9a20d7fcd0 100644
--- a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts
+++ b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts
@@ -5,7 +5,7 @@
  */
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 
-import { FeatureCollection } from 'geojson';
+import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
 import { Filter, TimeRange } from 'src/plugins/data/public';
 import { AbstractSource, ISource } from '../source';
 import { IField } from '../../fields/field';
@@ -35,7 +35,7 @@ export type BoundsFilters = {
 };
 
 export interface IVectorSource extends ISource {
-  filterAndFormatPropertiesToHtml(properties: unknown): Promise<ITooltipProperty[]>;
+  filterAndFormatPropertiesToHtml(properties: GeoJsonProperties): Promise<ITooltipProperty[]>;
   getBoundsForFilters(
     boundsFilters: BoundsFilters,
     registerCancelCallback: (requestToken: symbol, callback: () => void) => void
@@ -51,10 +51,13 @@ export interface IVectorSource extends ISource {
   getSyncMeta(): VectorSourceSyncMeta;
   getFieldNames(): string[];
   getApplyGlobalQuery(): boolean;
+  createField({ fieldName }: { fieldName: string }): IField;
+  supportsFieldMeta(): boolean;
+  canFormatFeatureProperties(): boolean;
 }
 
 export class AbstractVectorSource extends AbstractSource implements IVectorSource {
-  filterAndFormatPropertiesToHtml(properties: unknown): Promise<ITooltipProperty[]>;
+  filterAndFormatPropertiesToHtml(properties: GeoJsonProperties): Promise<ITooltipProperty[]>;
   getBoundsForFilters(
     boundsFilters: BoundsFilters,
     registerCancelCallback: (requestToken: symbol, callback: () => void) => void
@@ -72,6 +75,8 @@ export class AbstractVectorSource extends AbstractSource implements IVectorSourc
   canFormatFeatureProperties(): boolean;
   getApplyGlobalQuery(): boolean;
   getFieldNames(): string[];
+  createField({ fieldName }: { fieldName: string }): IField;
+  supportsFieldMeta(): boolean;
 }
 
 export interface ITiledSingleLayerVectorSource extends IVectorSource {
@@ -83,4 +88,13 @@ export interface ITiledSingleLayerVectorSource extends IVectorSource {
   }>;
   getMinZoom(): number;
   getMaxZoom(): number;
+  getLayerName(): string;
+  getFeatureProperties(
+    id: string | number | undefined,
+    mbProperties: GeoJsonProperties
+  ): GeoJsonProperties | null;
+  getFeatureGeometry(
+    id: string | number | undefined,
+    mbProperties: GeoJsonProperties
+  ): Geometry | null;
 }
diff --git a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.js b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.js
index ecb13bb875721..9fb46ddd2f8f8 100644
--- a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.js
+++ b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.js
@@ -137,4 +137,8 @@ export class AbstractVectorSource extends AbstractSource {
   getSyncMeta() {
     return {};
   }
+
+  supportsFieldMeta() {
+    return true;
+  }
 }
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js
index b7a80562f10ca..9042800a1ed03 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js
@@ -89,7 +89,7 @@ export class ColorMapSelect extends Component {
   };
 
   _renderColorStopsInput() {
-    if (!this.props.useCustomColorMap) {
+    if (this.props.supportsAutoDomain && !this.props.useCustomColorMap) {
       return null;
     }
 
@@ -102,7 +102,7 @@ export class ColorMapSelect extends Component {
           swatches={this.props.swatches}
         />
       );
-    } else
+    } else {
       colorStopEditor = (
         <ColorStopsCategorical
           colorStops={this.state.customColorMap}
@@ -112,6 +112,7 @@ export class ColorMapSelect extends Component {
           swatches={this.props.swatches}
         />
       );
+    }
 
     return (
       <EuiFlexGroup>
@@ -127,11 +128,11 @@ export class ColorMapSelect extends Component {
         inputDisplay: this.props.customOptionLabel,
         'data-test-subj': `colorMapSelectOption_${CUSTOM_COLOR_MAP}`,
       },
-      ...this.props.colorMapOptions,
+      ...(this.props.supportsAutoDomain ? this.props.colorMapOptions : []),
     ];
 
     let valueOfSelected;
-    if (this.props.useCustomColorMap) {
+    if (this.props.useCustomColorMap || !this.props.supportsAutoDomain) {
       valueOfSelected = CUSTOM_COLOR_MAP;
     } else {
       valueOfSelected = this.props.colorMapOptions.find(
@@ -150,6 +151,7 @@ export class ColorMapSelect extends Component {
         {toggle}
         <EuiFlexItem>
           <EuiSuperSelect
+            disabled={!this.props.supportsAutoDomain}
             compressed
             options={colorMapOptionsWithCustom}
             onChange={this._onColorMapSelect}
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js
index fa13e1cf66664..17a4ec0a11254 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js
@@ -90,6 +90,7 @@ export function DynamicColorForm({
     if (styleProperty.isOrdinal()) {
       return (
         <ColorMapSelect
+          supportsAutoDomain={field.supportsAutoDomain}
           colorMapOptions={COLOR_GRADIENTS}
           customOptionLabel={i18n.translate('xpack.maps.style.customColorRampLabel', {
             defaultMessage: 'Custom color ramp',
@@ -99,7 +100,9 @@ export function DynamicColorForm({
           colorMapType={COLOR_MAP_TYPE.ORDINAL}
           color={styleOptions.color}
           customColorMap={styleOptions.customColorRamp}
-          useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
+          useCustomColorMap={
+            !field.supportsAutoDomain || _.get(styleOptions, 'useCustomColorRamp', false)
+          }
           styleProperty={styleProperty}
           showColorMapTypeToggle={showColorMapTypeToggle}
           swatches={swatches}
@@ -108,6 +111,7 @@ export function DynamicColorForm({
     } else if (styleProperty.isCategorical()) {
       return (
         <ColorMapSelect
+          supportsAutoDomain={field.supportsAutoDomain}
           colorMapOptions={COLOR_PALETTES}
           customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
             defaultMessage: 'Custom color palette',
@@ -117,7 +121,9 @@ export function DynamicColorForm({
           colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
           color={styleOptions.colorCategory}
           customColorMap={styleOptions.customColorPalette}
-          useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
+          useCustomColorMap={
+            !field.supportsAutoDomain || _.get(styleOptions, 'useCustomColorPalette', false)
+          }
           styleProperty={styleProperty}
           showColorMapTypeToggle={showColorMapTypeToggle}
           swatches={swatches}
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js
index 51700a5e83394..dcc1f1eadbd54 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js
@@ -81,9 +81,16 @@ export function FieldSelect({ fields, selectedFieldName, onChange, styleName, ..
 
   let selectedOption;
   if (selectedFieldName) {
-    selectedOption = fields.find((field) => {
+    const field = fields.find((field) => {
       return field.name === selectedFieldName;
     });
+    //Do not spread in all the other unused values (e.g. type, supportsAutoDomain etc...)
+    if (field) {
+      selectedOption = {
+        value: field.value,
+        label: field.label,
+      };
+    }
   }
 
   return (
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js
index 08f5dfe4f4ba0..1fe2fd99afd98 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js
@@ -41,15 +41,18 @@ export function IconMapSelect({
     );
   }
 
+  const field = styleProperty.getField();
+  const defaultOptions = field.supportsAutoDomain() ? getIconPaletteOptions(isDarkMode) : [];
+
   return (
     <StyleMapSelect
       onChange={onMapSelectChange}
       customOptionLabel={i18n.translate('xpack.maps.styles.icon.customMapLabel', {
         defaultMessage: 'Custom icon palette',
       })}
-      options={getIconPaletteOptions(isDarkMode)}
+      options={defaultOptions}
       customMapStops={customIconStops}
-      useCustomMap={useCustomIconMap}
+      useCustomMap={field.supportsAutoDomain() ? useCustomIconMap : true}
       selectedMapId={iconPaletteId}
       renderCustomStopsInput={renderCustomIconStopsInput}
     />
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js
index 7856a4ddaff39..6528648eff552 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js
@@ -62,6 +62,7 @@ export class VectorStyleEditor extends Component {
         name: field.getName(),
         origin: field.getOrigin(),
         type: await field.getDataType(),
+        supportsAutoDomain: field.supportsAutoDomain(),
       };
     };
 
@@ -109,7 +110,9 @@ export class VectorStyleEditor extends Component {
   }
 
   _getOrdinalFields() {
-    return [...this.state.dateFields, ...this.state.numberFields];
+    return [...this.state.dateFields, ...this.state.numberFields].filter((field) => {
+      return field.supportsAutoDomain;
+    });
   }
 
   _handleSelectedFeatureChange = (selectedFeature) => {
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js
index ae4d935e2457b..bba6c49a1db95 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js
@@ -11,10 +11,9 @@ import { VECTOR_STYLES } from '../../../../../common/constants';
 export class DynamicOrientationProperty extends DynamicStyleProperty {
   syncIconRotationWithMb(symbolLayerId, mbMap) {
     if (this._options.field && this._options.field.name) {
-      const targetName = getComputedFieldName(
-        VECTOR_STYLES.ICON_ORIENTATION,
-        this._options.field.name
-      );
+      const targetName = this._field.supportsAutoDomain()
+        ? getComputedFieldName(VECTOR_STYLES.ICON_ORIENTATION, this._field.getName())
+        : this._field.getName();
       // 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 {
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js
index de868f3f92650..ffe0d73a19bb5 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js
@@ -10,7 +10,11 @@ import { getComputedFieldName } from '../style_util';
 export class DynamicTextProperty extends DynamicStyleProperty {
   syncTextFieldWithMb(mbLayerId, mbMap) {
     if (this._field && this._field.isValid()) {
-      const targetName = getComputedFieldName(this._styleName, this._options.field.name);
+      // Fields that support auto-domain are normalized with a field-formatter and stored into a computed-field
+      // Otherwise, the raw value is just carried over and no computed field is created.
+      const targetName = this._field.supportsAutoDomain()
+        ? getComputedFieldName(this._styleName, this._field.getName())
+        : this._field.getName();
       mbMap.setLayoutProperty(mbLayerId, 'text-field', ['coalesce', ['get', targetName], '']);
     } else {
       mbMap.setLayoutProperty(mbLayerId, 'text-field', null);
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js
index 14252dcfc067d..10ba8d7cf1170 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js
+++ b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js
@@ -31,6 +31,7 @@ import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_reac
 import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
 
 import { getData, getCore } from '../../kibana_services';
+import _ from 'lodash';
 
 const localStorage = new Storage(window.localStorage);
 
@@ -52,6 +53,10 @@ export class LayerPanel extends React.Component {
     this._isMounted = false;
   }
 
+  componentDidUpdate() {
+    this.loadImmutableSourceProperties();
+  }
+
   loadDisplayName = async () => {
     if (!this.props.selectedLayer) {
       return;
@@ -70,7 +75,9 @@ export class LayerPanel extends React.Component {
 
     const immutableSourceProps = await this.props.selectedLayer.getImmutableSourceProperties();
     if (this._isMounted) {
-      this.setState({ immutableSourceProps });
+      if (!_.isEqual(this.state.immutableSourceProps, immutableSourceProps)) {
+        this.setState({ immutableSourceProps });
+      }
     }
   };
 
@@ -97,8 +104,11 @@ export class LayerPanel extends React.Component {
     }
   }
 
-  _onSourceChange = ({ propName, value, newLayerType }) => {
-    this.props.updateSourceProp(this.props.selectedLayer.getId(), propName, value, newLayerType);
+  _onSourceChange = (...args) => {
+    for (let i = 0; i < args.length; i++) {
+      const { propName, value, newLayerType } = args[i];
+      this.props.updateSourceProp(this.props.selectedLayer.getId(), propName, value, newLayerType);
+    }
   };
 
   _renderFilterSection() {
diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js
index 362186a8f5549..3edfd833ed226 100644
--- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js
+++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js
@@ -31,14 +31,15 @@ export class FeatureProperties extends React.Component {
     this._isMounted = false;
   }
 
-  _loadProperties = () => {
+  _loadProperties = async () => {
     this._fetchProperties({
       nextFeatureId: this.props.featureId,
       nextLayerId: this.props.layerId,
+      meta: this.props.meta,
     });
   };
 
-  _fetchProperties = async ({ nextLayerId, nextFeatureId }) => {
+  _fetchProperties = async ({ nextLayerId, nextFeatureId, meta }) => {
     if (this.prevLayerId === nextLayerId && this.prevFeatureId === nextFeatureId) {
       // do not reload same feature properties
       return;
@@ -64,6 +65,7 @@ export class FeatureProperties extends React.Component {
       properties = await this.props.loadFeatureProperties({
         layerId: nextLayerId,
         featureId: nextFeatureId,
+        meta: meta,
       });
     } catch (error) {
       if (this._isMounted) {
diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js
index e5b97947602b0..1d26ec732112c 100644
--- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js
+++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js
@@ -104,6 +104,7 @@ export class FeaturesTooltip extends React.Component {
     const currentFeatureGeometry = this.props.loadFeatureGeometry({
       layerId: this.state.currentFeature.layerId,
       featureId: this.state.currentFeature.id,
+      meta: this.state.currentFeature.meta,
     });
     const geoFields = this._filterGeoFields(currentFeatureGeometry);
 
@@ -132,6 +133,7 @@ export class FeaturesTooltip extends React.Component {
         <FeatureProperties
           featureId={this.state.currentFeature.id}
           layerId={this.state.currentFeature.layerId}
+          meta={this.state.currentFeature.meta}
           loadFeatureProperties={this.props.loadFeatureProperties}
           showFilterButtons={!!this.props.addFilters && this.props.isLocked}
           onCloseTooltip={this.props.closeTooltip}
diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js
index 7c86d729577e2..1e22573f7e2cf 100644
--- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js
+++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js
@@ -53,7 +53,7 @@ export class TooltipControl extends React.Component {
     });
   }
 
-  _getIdsForFeatures(mbFeatures) {
+  _getIdsAndFeaturesMeta(mbFeatures) {
     const uniqueFeatures = [];
     //there may be duplicates in the results from mapbox
     //this is because mapbox returns the results per tile
@@ -72,9 +72,13 @@ export class TooltipControl extends React.Component {
         }
       }
       if (!match) {
+        //This keeps track of first properties (assuming these will be identical for features in different tiles
         uniqueFeatures.push({
           id: featureId,
           layerId: layerId,
+          meta: {
+            mbProperties: mbFeature.properties,
+          },
         });
       }
     }
@@ -89,7 +93,7 @@ export class TooltipControl extends React.Component {
 
     this._updateHoverTooltipState.cancel(); //ignore any possible moves
 
-    const mbFeatures = this._getFeaturesUnderPointer(e.point);
+    const mbFeatures = this._getMbFeaturesUnderPointer(e.point);
     if (!mbFeatures.length) {
       // No features at click location so there is no tooltip to open
       return;
@@ -98,7 +102,7 @@ export class TooltipControl extends React.Component {
     const targetMbFeataure = mbFeatures[0];
     const popupAnchorLocation = justifyAnchorLocation(e.lngLat, targetMbFeataure);
 
-    const features = this._getIdsForFeatures(mbFeatures);
+    const features = this._getIdsAndFeaturesMeta(mbFeatures);
     this.props.openOnClickTooltip({
       features: features,
       location: popupAnchorLocation,
@@ -111,7 +115,7 @@ export class TooltipControl extends React.Component {
       return;
     }
 
-    const mbFeatures = this._getFeaturesUnderPointer(e.point);
+    const mbFeatures = this._getMbFeaturesUnderPointer(e.point);
     if (!mbFeatures.length) {
       this.props.closeOnHoverTooltip();
       return;
@@ -127,9 +131,10 @@ export class TooltipControl extends React.Component {
     }
 
     const popupAnchorLocation = justifyAnchorLocation(e.lngLat, targetMbFeature);
-    const features = this._getIdsForFeatures(mbFeatures);
+    const featuresAndMeta = this._getIdsAndFeaturesMeta(mbFeatures);
     this.props.openOnHoverTooltip({
-      features: features,
+      mbFeatures,
+      features: featuresAndMeta,
       location: popupAnchorLocation,
     });
   }, 100);
@@ -149,7 +154,7 @@ export class TooltipControl extends React.Component {
     });
   }
 
-  _getFeaturesUnderPointer(mbLngLatPoint) {
+  _getMbFeaturesUnderPointer(mbLngLatPoint) {
     if (!this.props.mbMap) {
       return [];
     }
diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js
index 31964c3395417..741088b4c428b 100644
--- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js
+++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js
@@ -236,7 +236,7 @@ describe('TooltipControl', () => {
 
       sinon.assert.notCalled(closeOnClickTooltipStub);
       sinon.assert.calledWith(openOnClickTooltipStub, {
-        features: [{ id: 1, layerId: 'tfi3f' }],
+        features: [{ id: 1, layerId: 'tfi3f', meta: { mbProperties: { __kbn__feature_id__: 1 } } }],
         location: [100, 30],
       });
     });
diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js
index 03c2aeb2edd0a..bb5085417f1da 100644
--- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js
+++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js
@@ -56,13 +56,13 @@ export class TooltipPopover extends Component {
 
   // Must load original geometry instead of using geometry from mapbox feature.
   // Mapbox feature geometry is from vector tile and is not the same as the original geometry.
-  _loadFeatureGeometry = ({ layerId, featureId }) => {
+  _loadFeatureGeometry = ({ layerId, featureId, meta }) => {
     const tooltipLayer = this._findLayerById(layerId);
     if (!tooltipLayer) {
       return null;
     }
 
-    const targetFeature = tooltipLayer.getFeatureById(featureId);
+    const targetFeature = tooltipLayer.getFeatureById(featureId, meta);
     if (!targetFeature) {
       return null;
     }
@@ -70,16 +70,17 @@ export class TooltipPopover extends Component {
     return targetFeature.geometry;
   };
 
-  _loadFeatureProperties = async ({ layerId, featureId }) => {
+  _loadFeatureProperties = async ({ layerId, featureId, meta }) => {
     const tooltipLayer = this._findLayerById(layerId);
     if (!tooltipLayer) {
       return [];
     }
 
-    const targetFeature = tooltipLayer.getFeatureById(featureId);
+    const targetFeature = tooltipLayer.getFeatureById(featureId, meta);
     if (!targetFeature) {
       return [];
     }
+
     return await tooltipLayer.getPropertiesForTooltip(targetFeature.properties);
   };
 
@@ -89,7 +90,7 @@ export class TooltipPopover extends Component {
       return null;
     }
 
-    const targetFeature = tooltipLayer.getFeatureById(featureId);
+    const targetFeature = tooltipLayer.getFeatureById(featureId, { mbProperties: {} });
     if (!targetFeature) {
       return null;
     }