[Maps] Add TileJson support

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 {

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';

x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts → 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;
 

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(

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;
+  }
 }

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;
+  }
+}

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;
+  }
+}

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;
   }

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();
+  }
+}

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() {

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');
   }
 

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;
 }

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,
       });