[Maps] Add 3rd party vector tile support (#62084) (#63761)

Adds support for adding an external vector tile service to Maps. This is experimental functionality. To enable, add `xpack.maps.enableVectorTiles: true` to the `kibana.yml`configuration file.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/kibana_react/public/index.ts

@@ -25,7 +25,7 @@ export * from './ui_settings';
 export * from './field_icon';
 export * from './table_list_view';
 export * from './split_panel';
-export { ValidatedDualRange } from './validated_range';
+export { ValidatedDualRange, Value } from './validated_range';
 export * from './notifications';
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';

src/plugins/kibana_react/public/validated_range/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { ValidatedDualRange } from './validated_dual_range';
+export { ValidatedDualRange, Value } from './validated_dual_range';

x-pack/legacy/plugins/maps/index.js

@@ -38,6 +38,7 @@ export function maps(kibana) {
         return {
           showMapVisualizationTypes: serverConfig.get('xpack.maps.showMapVisualizationTypes'),
           showMapsInspectorAdapter: serverConfig.get('xpack.maps.showMapsInspectorAdapter'),
+          enableVectorTiles: serverConfig.get('xpack.maps.enableVectorTiles'),
           preserveDrawingBuffer: serverConfig.get('xpack.maps.preserveDrawingBuffer'),
           isEmsEnabled: mapConfig.includeElasticMapsService,
           emsFontLibraryUrl: mapConfig.emsFontLibraryUrl,
@@ -85,6 +86,7 @@ export function maps(kibana) {
         showMapVisualizationTypes: Joi.boolean().default(false),
         showMapsInspectorAdapter: Joi.boolean().default(false), // flag used in functional testing
         preserveDrawingBuffer: Joi.boolean().default(false), // flag used in functional testing
+        enableVectorTiles: Joi.boolean().default(false), // flag used to enable/disable vector-tiles
       }).default();
     },
 

x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js

@@ -63,13 +63,13 @@ export class AddLayerPanel extends Component {
       return;
     }
 
-    const style =
+    const styleDescriptor =
       this.state.layer && this.state.layer.getCurrentStyle()
         ? this.state.layer.getCurrentStyle().getDescriptor()
         : null;
     const layerInitProps = {
       ...options,
-      style: style,
+      style: styleDescriptor,
     };
     const newLayer = source.createDefaultLayer(layerInitProps, this.props.mapColors);
     if (!this._isMounted) {

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/index.js

@@ -13,10 +13,13 @@ import {
   updateLayerMinZoom,
   updateLayerAlpha,
 } from '../../../actions/map_actions';
+import { MAX_ZOOM } from '../../../../../../../plugins/maps/common/constants';
 
 function mapStateToProps(state = {}) {
   const selectedLayer = getSelectedLayer(state);
   return {
+    minVisibilityZoom: selectedLayer.getMinSourceZoom(),
+    maxVisibilityZoom: MAX_ZOOM,
     alpha: selectedLayer.getAlpha(),
     label: selectedLayer.getLabel(),
     layerId: selectedLayer.getId(),

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js

@@ -13,17 +13,15 @@ import { ValidatedRange } from '../../../../../../../plugins/maps/public/compone
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ValidatedDualRange } from '../../../../../../../../src/plugins/kibana_react/public';
-import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
-
 export function LayerSettings(props) {
   const onLabelChange = event => {
     const label = event.target.value;
     props.updateLabel(props.layerId, label);
   };
 
   const onZoomChange = ([min, max]) => {
-    props.updateMinZoom(props.layerId, Math.max(MIN_ZOOM, parseInt(min, 10)));
-    props.updateMaxZoom(props.layerId, Math.min(MAX_ZOOM, parseInt(max, 10)));
+    props.updateMinZoom(props.layerId, Math.max(props.minVisibilityZoom, parseInt(min, 10)));
+    props.updateMaxZoom(props.layerId, Math.min(props.maxVisibilityZoom, parseInt(max, 10)));
   };
 
   const onAlphaChange = alpha => {
@@ -38,8 +36,8 @@ export function LayerSettings(props) {
           defaultMessage: 'Visibility',
         })}
         formRowDisplay="columnCompressed"
-        min={MIN_ZOOM}
-        max={MAX_ZOOM}
+        min={props.minVisibilityZoom}
+        max={props.maxVisibilityZoom}
         value={[props.minZoom, props.maxZoom]}
         showInput="inputWithPopover"
         showRange

x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js

@@ -14,7 +14,12 @@ import {
 } from './utils';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { getGlyphUrl, isRetina } from '../../../../../../../plugins/maps/public/meta';
-import { DECIMAL_DEGREES_PRECISION, ZOOM_PRECISION } from '../../../../common/constants';
+import {
+  DECIMAL_DEGREES_PRECISION,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  ZOOM_PRECISION,
+} from '../../../../common/constants';
 import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
 import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
 import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js';
@@ -132,6 +137,8 @@ export class MBMapContainer extends React.Component {
         scrollZoom: this.props.scrollZoom,
         preserveDrawingBuffer: getInjectedVarFunc()('preserveDrawingBuffer', false),
         interactive: !this.props.disableInteractive,
+        minZoom: MIN_ZOOM,
+        maxZoom: MAX_ZOOM,
       };
       const initialView = _.get(this.props.goto, 'center');
       if (initialView) {

x-pack/legacy/plugins/maps/public/plugin.ts

@@ -4,13 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import '../../../../plugins/maps/public/layers/layer_wizard_registry';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import '../../../../plugins/maps/public/layers/sources/source_registry';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import '../../../../plugins/maps/public/layers/load_layer_wizards';
-
 import { Plugin, CoreStart, CoreSetup } from 'src/core/public';
 // @ts-ignore
 import { Start as InspectorStartContract } from 'src/plugins/inspector/public';

x-pack/legacy/plugins/maps/public/selectors/map_selectors.js

@@ -19,6 +19,8 @@ import { BlendedVectorLayer } from '../../../../../plugins/maps/public/layers/bl
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { getTimeFilter } from '../../../../../plugins/maps/public/kibana_services';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { TiledVectorLayer } from '../../../../../plugins/maps/public/layers/tiled_vector_layer';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { getInspectorAdapters } from '../../../../../plugins/maps/public/reducers/non_serializable_instances';
 import {
   copyPersistentState,
@@ -51,6 +53,8 @@ function createLayerInstance(layerDescriptor, inspectorAdapters) {
       return new HeatmapLayer({ layerDescriptor, source });
     case BlendedVectorLayer.type:
       return new BlendedVectorLayer({ layerDescriptor, source });
+    case TiledVectorLayer.type:
+      return new TiledVectorLayer({ layerDescriptor, source });
     default:
       throw new Error(`Unrecognized layerType ${layerDescriptor.type}`);
   }

x-pack/legacy/plugins/maps/public/selectors/map_selectors.test.js

@@ -5,6 +5,7 @@
  */
 
 jest.mock('../../../../../plugins/maps/public/layers/vector_layer', () => {});
+jest.mock('../../../../../plugins/maps/public/layers/tiled_vector_layer', () => {});
 jest.mock('../../../../../plugins/maps/public/layers/blended_vector_layer', () => {});
 jest.mock('../../../../../plugins/maps/public/layers/heatmap_layer', () => {});
 jest.mock('../../../../../plugins/maps/public/layers/vector_tile_layer', () => {});

x-pack/plugins/maps/common/constants.ts

@@ -40,9 +40,10 @@ export function createMapPath(id: string) {
 export enum LAYER_TYPE {
   TILE = 'TILE',
   VECTOR = 'VECTOR',
-  VECTOR_TILE = 'VECTOR_TILE',
+  VECTOR_TILE = 'VECTOR_TILE', // for static display of mvt vector tiles with a mapbox stylesheet. Does not support any ad-hoc configurations. Used for consuming EMS vector tiles.
   HEATMAP = 'HEATMAP',
   BLENDED_VECTOR = 'BLENDED_VECTOR',
+  TILED_VECTOR = 'TILED_VECTOR', // similar to a regular vector-layer, but it consumes the data as .mvt tilea iso GeoJson. It supports similar ad-hoc configurations like a regular vector layer (E.g. using IVectorStyle), although there is some loss of functionality  e.g. does not support term joining
 }
 
 export enum SORT_ORDER {
@@ -61,6 +62,7 @@ export enum SOURCE_TYPES {
   KIBANA_TILEMAP = 'KIBANA_TILEMAP',
   REGIONMAP_FILE = 'REGIONMAP_FILE',
   GEOJSON_FILE = 'GEOJSON_FILE',
+  MVT_SINGLE_LAYER = 'MVT_SINGLE_LAYER',
 }
 
 export enum FIELD_ORIGIN {

x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.d.ts

@@ -31,12 +31,12 @@ type ESGeoGridSourceSyncMeta = {
   requestType: RENDER_AS;
 };
 
-export type VectorSourceSyncMeta = ESSearchSourceSyncMeta | ESGeoGridSourceSyncMeta;
+export type VectorSourceSyncMeta = ESSearchSourceSyncMeta | ESGeoGridSourceSyncMeta | null;
 
 export type VectorSourceRequestMeta = MapFilters & {
   applyGlobalQuery: boolean;
   fieldNames: string[];
-  geogridPrecision: number;
+  geogridPrecision?: number;
   sourceQuery: MapQuery;
   sourceMeta: VectorSourceSyncMeta;
 };

x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts

@@ -94,6 +94,18 @@ export type XYZTMSSourceDescriptor = AbstractSourceDescriptor &
     urlTemplate: string;
   };
 
+export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & {
+  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
+  minSourceZoom: number;
+  maxSourceZoom: number;
+};
+
 export type JoinDescriptor = {
   leftField: string;
   right: ESTermSourceDescriptor;
@@ -107,7 +119,9 @@ export type SourceDescriptor =
   | ESTermSourceDescriptor
   | ESSearchSourceDescriptor
   | ESGeoGridSourceDescriptor
-  | EMSFileSourceDescriptor;
+  | EMSFileSourceDescriptor
+  | ESPewPewSourceDescriptor
+  | TiledSingleLayerVectorSourceDescriptor;
 
 export type LayerDescriptor = {
   __dataRequests?: DataRequestDescriptor[];

x-pack/plugins/maps/public/kibana_services.js

@@ -38,7 +38,9 @@ export const getFileUploadComponent = () => {
 };
 
 let getInjectedVar;
-export const setInjectedVarFunc = getInjectedVarFunc => (getInjectedVar = getInjectedVarFunc);
+export const setInjectedVarFunc = getInjectedVarFunc => {
+  getInjectedVar = getInjectedVarFunc;
+};
 export const getInjectedVarFunc = () => getInjectedVar;
 
 let uiSettings;

x-pack/plugins/maps/public/layers/layer.d.ts

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { LayerDescriptor, MapExtent, MapFilters } from '../../common/descriptor_types';
+import { LayerDescriptor, MapExtent, MapFilters, MapQuery } from '../../common/descriptor_types';
 import { ISource } from './sources/source';
 import { DataRequest } from './util/data_request';
 import { SyncContext } from '../actions/map_actions';
@@ -17,6 +17,11 @@ export interface ILayer {
   getSource(): ISource;
   getSourceForEditing(): ISource;
   syncData(syncContext: SyncContext): Promise<void>;
+  isVisible(): boolean;
+  showAtZoomLevel(zoomLevel: number): boolean;
+  getMinZoom(): number;
+  getMaxZoom(): number;
+  getMinSourceZoom(): number;
 }
 
 export interface ILayerArguments {
@@ -35,4 +40,12 @@ export class AbstractLayer implements ILayer {
   getSource(): ISource;
   getSourceForEditing(): ISource;
   syncData(syncContext: SyncContext): Promise<void>;
+  isVisible(): boolean;
+  showAtZoomLevel(zoomLevel: number): boolean;
+  getMinZoom(): number;
+  getMaxZoom(): number;
+  getMinSourceZoom(): number;
+  getQuery(): MapQuery;
+  _removeStaleMbSourcesAndLayers(mbMap: unknown): void;
+  _requiresPrevSourceCleanup(mbMap: unknown): boolean;
 }

x-pack/plugins/maps/public/layers/layer.js

@@ -141,7 +141,8 @@ export class AbstractLayer {
         defaultMessage: `Layer is hidden.`,
       });
     } else if (!this.showAtZoomLevel(zoomLevel)) {
-      const { minZoom, maxZoom } = this.getZoomConfig();
+      const minZoom = this.getMinZoom();
+      const maxZoom = this.getMaxZoom();
       icon = <EuiIcon size="m" type="expand" />;
       tooltipContent = i18n.translate('xpack.maps.layer.zoomFeedbackTooltip', {
         defaultMessage: `Layer is visible between zoom levels {minZoom} and {maxZoom}.`,
@@ -203,7 +204,7 @@ export class AbstractLayer {
   }
 
   showAtZoomLevel(zoom) {
-    return zoom >= this._descriptor.minZoom && zoom <= this._descriptor.maxZoom;
+    return zoom >= this.getMinZoom() && zoom <= this.getMaxZoom();
   }
 
   getMinZoom() {
@@ -214,6 +215,30 @@ export class AbstractLayer {
     return this._descriptor.maxZoom;
   }
 
+  getMinSourceZoom() {
+    return this._source.getMinZoom();
+  }
+
+  _requiresPrevSourceCleanup() {
+    return false;
+  }
+
+  _removeStaleMbSourcesAndLayers(mbMap) {
+    if (this._requiresPrevSourceCleanup(mbMap)) {
+      const mbStyle = mbMap.getStyle();
+      mbStyle.layers.forEach(mbLayer => {
+        if (this.ownsMbLayerId(mbLayer.id)) {
+          mbMap.removeLayer(mbLayer.id);
+        }
+      });
+      Object.keys(mbStyle.sources).some(mbSourceId => {
+        if (this.ownsMbSourceId(mbSourceId)) {
+          mbMap.removeSource(mbSourceId);
+        }
+      });
+    }
+  }
+
   getAlpha() {
     return this._descriptor.alpha;
   }
@@ -222,13 +247,6 @@ export class AbstractLayer {
     return this._descriptor.query;
   }
 
-  getZoomConfig() {
-    return {
-      minZoom: this._descriptor.minZoom,
-      maxZoom: this._descriptor.maxZoom,
-    };
-  }
-
   getCurrentStyle() {
     return this._style;
   }