From b469fe270d56cd73f5a830456e2a77943e42d0ef Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 21 Apr 2020 08:53:53 -0400 Subject: [PATCH] [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 --- src/plugins/kibana_react/public/index.ts | 2 +- .../public/validated_range/index.ts | 2 +- x-pack/legacy/plugins/maps/index.js | 2 + .../layer_addpanel/view.js | 4 +- .../layer_panel/layer_settings/index.js | 3 + .../layer_settings/layer_settings.js | 10 +- .../connected_components/map/mb/view.js | 9 +- x-pack/legacy/plugins/maps/public/plugin.ts | 7 - .../maps/public/selectors/map_selectors.js | 4 + .../public/selectors/map_selectors.test.js | 1 + x-pack/plugins/maps/common/constants.ts | 4 +- .../data_request_descriptor_types.d.ts | 4 +- .../descriptor_types/descriptor_types.d.ts | 16 +- x-pack/plugins/maps/public/kibana_services.js | 4 +- x-pack/plugins/maps/public/layers/layer.d.ts | 15 +- x-pack/plugins/maps/public/layers/layer.js | 36 +++- .../maps/public/layers/load_layer_wizards.js | 30 --- .../maps/public/layers/load_layer_wizards.ts | 66 +++++++ .../es_geo_grid_source.d.ts | 1 + .../es_search_source/es_search_source.d.ts | 1 + .../index.ts} | 7 +- .../layer_wizard.tsx | 42 +++++ .../mvt_single_layer_vector_source.ts | 175 ++++++++++++++++++ .../mvt_single_layer_vector_source_editor.tsx | 128 +++++++++++++ .../maps/public/layers/sources/source.d.ts | 6 +- .../maps/public/layers/sources/source.js | 19 +- .../public/layers/sources/source_registry.ts | 2 +- .../layers/sources/vector_feature_types.ts | 11 ++ .../sources/vector_source/vector_source.d.ts | 22 ++- .../sources/vector_source/vector_source.js | 4 + .../vector/components/vector_style_editor.js | 24 +-- .../layers/styles/vector/vector_style.d.ts | 10 +- .../maps/public/layers/tiled_vector_layer.tsx | 170 +++++++++++++++++ .../maps/public/layers/vector_layer.d.ts | 24 ++- .../maps/public/layers/vector_layer.js | 53 ++++-- .../maps/public/layers/vector_tile_layer.js | 14 +- x-pack/plugins/maps/public/plugin.ts | 2 + 37 files changed, 816 insertions(+), 118 deletions(-) delete mode 100644 x-pack/plugins/maps/public/layers/load_layer_wizards.js create mode 100644 x-pack/plugins/maps/public/layers/load_layer_wizards.ts rename x-pack/plugins/maps/public/layers/sources/{vector_feature_types.js => mvt_single_layer_vector_source/index.ts} (71%) create mode 100644 x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx create mode 100644 x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts create mode 100644 x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx create mode 100644 x-pack/plugins/maps/public/layers/sources/vector_feature_types.ts create mode 100644 x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index 9ad9f14ac5659..9bec91b859ab7 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/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'; diff --git a/src/plugins/kibana_react/public/validated_range/index.ts b/src/plugins/kibana_react/public/validated_range/index.ts index bc643373f5e60..7d720ec842a43 100644 --- a/src/plugins/kibana_react/public/validated_range/index.ts +++ b/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'; diff --git a/x-pack/legacy/plugins/maps/index.js b/x-pack/legacy/plugins/maps/index.js index 1a7f478d3bbad..f4e01efc05f45 100644 --- a/x-pack/legacy/plugins/maps/index.js +++ b/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(); }, diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js index a54df69471aa0..92fcf01f3901f 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js +++ b/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) { diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/index.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/index.js index 73c98db8e429d..e8f980bbbf2b4 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/index.js +++ b/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(), diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js index bd27450943638..1d352913e54a3 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js @@ -13,8 +13,6 @@ 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; @@ -22,8 +20,8 @@ export function LayerSettings(props) { }; 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 diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js index 1fe3d0d493ee7..a36e1d7048e92 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js +++ b/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) { diff --git a/x-pack/legacy/plugins/maps/public/plugin.ts b/x-pack/legacy/plugins/maps/public/plugin.ts index 4ec068ff44029..71f1a30c1fbef 100644 --- a/x-pack/legacy/plugins/maps/public/plugin.ts +++ b/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'; diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js index f350a2c944756..1e71025935519 100644 --- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js +++ b/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}`); } diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.test.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.test.js index b83be301653b8..72cc748617540 100644 --- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.test.js +++ b/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', () => {}); diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts index 160f9d8dbc83f..a4006732224ce 100644 --- a/x-pack/plugins/maps/common/constants.ts +++ b/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 { 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.d.ts index 26044d28d53a3..e94dc6694b38d 100644 --- 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.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; }; diff --git a/x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts b/x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts index ff285877750c5..f8175b0ed3f10 100644 --- a/x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts +++ b/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[]; diff --git a/x-pack/plugins/maps/public/kibana_services.js b/x-pack/plugins/maps/public/kibana_services.js index 2a79314380330..dcbd54a09381f 100644 --- a/x-pack/plugins/maps/public/kibana_services.js +++ b/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; diff --git a/x-pack/plugins/maps/public/layers/layer.d.ts b/x-pack/plugins/maps/public/layers/layer.d.ts index 8fb69734d3d06..e8fc5d473626c 100644 --- a/x-pack/plugins/maps/public/layers/layer.d.ts +++ b/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; + 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; + isVisible(): boolean; + showAtZoomLevel(zoomLevel: number): boolean; + getMinZoom(): number; + getMaxZoom(): number; + getMinSourceZoom(): number; + getQuery(): MapQuery; + _removeStaleMbSourcesAndLayers(mbMap: unknown): void; + _requiresPrevSourceCleanup(mbMap: unknown): boolean; } diff --git a/x-pack/plugins/maps/public/layers/layer.js b/x-pack/plugins/maps/public/layers/layer.js index 26bce872b3c2c..19dcbaf1dfcfd 100644 --- a/x-pack/plugins/maps/public/layers/layer.js +++ b/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 = ; 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; } diff --git a/x-pack/plugins/maps/public/layers/load_layer_wizards.js b/x-pack/plugins/maps/public/layers/load_layer_wizards.js deleted file mode 100644 index d0169165eaa35..0000000000000 --- a/x-pack/plugins/maps/public/layers/load_layer_wizards.js +++ /dev/null @@ -1,30 +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 { registerLayerWizard } from './layer_wizard_registry'; -import { uploadLayerWizardConfig } from './sources/client_file_source'; -import { esDocumentsLayerWizardConfig } from './sources/es_search_source'; -import { clustersLayerWizardConfig, heatmapLayerWizardConfig } from './sources/es_geo_grid_source'; -import { point2PointLayerWizardConfig } from './sources/es_pew_pew_source/es_pew_pew_source'; -import { emsBoundariesLayerWizardConfig } from './sources/ems_file_source'; -import { emsBaseMapLayerWizardConfig } from './sources/ems_tms_source'; -import { kibanaRegionMapLayerWizardConfig } from './sources/kibana_regionmap_source'; -import { kibanaBasemapLayerWizardConfig } from './sources/kibana_tilemap_source'; -import { tmsLayerWizardConfig } from './sources/xyz_tms_source'; -import { wmsLayerWizardConfig } from './sources/wms_source'; - -// Registration order determines display order -registerLayerWizard(uploadLayerWizardConfig); -registerLayerWizard(esDocumentsLayerWizardConfig); -registerLayerWizard(clustersLayerWizardConfig); -registerLayerWizard(heatmapLayerWizardConfig); -registerLayerWizard(point2PointLayerWizardConfig); -registerLayerWizard(emsBoundariesLayerWizardConfig); -registerLayerWizard(emsBaseMapLayerWizardConfig); -registerLayerWizard(kibanaRegionMapLayerWizardConfig); -registerLayerWizard(kibanaBasemapLayerWizardConfig); -registerLayerWizard(tmsLayerWizardConfig); -registerLayerWizard(wmsLayerWizardConfig); diff --git a/x-pack/plugins/maps/public/layers/load_layer_wizards.ts b/x-pack/plugins/maps/public/layers/load_layer_wizards.ts new file mode 100644 index 0000000000000..49d128257fe20 --- /dev/null +++ b/x-pack/plugins/maps/public/layers/load_layer_wizards.ts @@ -0,0 +1,66 @@ +/* + * 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 { registerLayerWizard } from './layer_wizard_registry'; +// @ts-ignore +import { uploadLayerWizardConfig } from './sources/client_file_source'; +// @ts-ignore +import { esDocumentsLayerWizardConfig } from './sources/es_search_source'; +// @ts-ignore +import { clustersLayerWizardConfig, heatmapLayerWizardConfig } from './sources/es_geo_grid_source'; +// @ts-ignore +import { point2PointLayerWizardConfig } from './sources/es_pew_pew_source/es_pew_pew_source'; +// @ts-ignore +import { emsBoundariesLayerWizardConfig } from './sources/ems_file_source'; +// @ts-ignore +import { emsBaseMapLayerWizardConfig } from './sources/ems_tms_source'; +// @ts-ignore +import { kibanaRegionMapLayerWizardConfig } from './sources/kibana_regionmap_source'; +// @ts-ignore +import { kibanaBasemapLayerWizardConfig } from './sources/kibana_tilemap_source'; +import { tmsLayerWizardConfig } from './sources/xyz_tms_source'; +// @ts-ignore +import { wmsLayerWizardConfig } from './sources/wms_source'; +import { mvtVectorSourceWizardConfig } from './sources/mvt_single_layer_vector_source'; +// @ts-ignore +import { getInjectedVarFunc } from '../kibana_services'; + +// Registration order determines display order +let registered = false; +export function registerLayerWizards() { + if (registered) { + return; + } + // @ts-ignore + registerLayerWizard(uploadLayerWizardConfig); + // @ts-ignore + registerLayerWizard(esDocumentsLayerWizardConfig); + // @ts-ignore + registerLayerWizard(clustersLayerWizardConfig); + // @ts-ignore + registerLayerWizard(heatmapLayerWizardConfig); + // @ts-ignore + registerLayerWizard(point2PointLayerWizardConfig); + // @ts-ignore + registerLayerWizard(emsBoundariesLayerWizardConfig); + // @ts-ignore + registerLayerWizard(emsBaseMapLayerWizardConfig); + // @ts-ignore + registerLayerWizard(kibanaRegionMapLayerWizardConfig); + // @ts-ignore + registerLayerWizard(kibanaBasemapLayerWizardConfig); + registerLayerWizard(tmsLayerWizardConfig); + // @ts-ignore + registerLayerWizard(wmsLayerWizardConfig); + + const getInjectedVar = getInjectedVarFunc(); + if (getInjectedVar && getInjectedVar('enableVectorTiles', false)) { + // eslint-disable-next-line no-console + console.warn('Vector tiles are an experimental feature and should not be used in production.'); + registerLayerWizard(mvtVectorSourceWizardConfig); + } + registered = true; +} diff --git a/x-pack/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.d.ts b/x-pack/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.d.ts index 3f596cea1ae39..96347c444dd5b 100644 --- a/x-pack/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.d.ts +++ b/x-pack/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.d.ts @@ -23,6 +23,7 @@ export class ESGeoGridSource extends AbstractESAggSource { constructor(sourceDescriptor: ESGeoGridSourceDescriptor, inspectorAdapters: unknown); + getFieldNames(): string[]; getGridResolution(): GRID_RESOLUTION; getGeoGridPrecision(zoom: number): number; } diff --git a/x-pack/plugins/maps/public/layers/sources/es_search_source/es_search_source.d.ts b/x-pack/plugins/maps/public/layers/sources/es_search_source/es_search_source.d.ts index 0a4e48a195ec6..c904280a38c85 100644 --- a/x-pack/plugins/maps/public/layers/sources/es_search_source/es_search_source.d.ts +++ b/x-pack/plugins/maps/public/layers/sources/es_search_source/es_search_source.d.ts @@ -9,4 +9,5 @@ import { ESSearchSourceDescriptor } from '../../../../common/descriptor_types'; export class ESSearchSource extends AbstractESSource { constructor(sourceDescriptor: Partial, inspectorAdapters: unknown); + getFieldNames(): string[]; } diff --git a/x-pack/plugins/maps/public/layers/sources/vector_feature_types.js b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/index.ts similarity index 71% rename from x-pack/plugins/maps/public/layers/sources/vector_feature_types.js rename to x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/index.ts index cc5f30389c4f3..89b7e76a7e359 100644 --- a/x-pack/plugins/maps/public/layers/sources/vector_feature_types.js +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/index.ts @@ -4,8 +4,5 @@ * you may not use this file except in compliance with the Elastic License. */ -export const VECTOR_SHAPE_TYPES = { - POINT: 'POINT', - LINE: 'LINE', - POLYGON: 'POLYGON', -}; +export * from './mvt_single_layer_vector_source'; +export * from './layer_wizard'; diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx new file mode 100644 index 0000000000000..dfdea1489d50c --- /dev/null +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -0,0 +1,42 @@ +/* + * 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 { + MVTSingleLayerVectorSourceEditor, + MVTSingleLayerVectorSourceConfig, +} from './mvt_single_layer_vector_source_editor'; +import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source'; +import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry'; +import { SOURCE_TYPES } from '../../../../common/constants'; + +export const mvtVectorSourceWizardConfig: LayerWizard = { + description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', { + defaultMessage: 'Vector source wizard', + }), + icon: 'grid', + renderWizard: ({ onPreviewSource, inspectorAdapters }: RenderWizardArguments) => { + const onSourceConfigChange = ({ + urlTemplate, + layerName, + minSourceZoom, + maxSourceZoom, + }: MVTSingleLayerVectorSourceConfig) => { + const sourceDescriptor = MVTSingleLayerVectorSource.createDescriptor({ + urlTemplate, + layerName, + minSourceZoom, + maxSourceZoom, + type: SOURCE_TYPES.MVT_SINGLE_LAYER, + }); + const source = new MVTSingleLayerVectorSource(sourceDescriptor, inspectorAdapters); + onPreviewSource(source); + }; + return ; + }, + title: sourceTitle, +}; diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts new file mode 100644 index 0000000000000..0bfda6be72203 --- /dev/null +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts @@ -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 { i18n } from '@kbn/i18n'; +import uuid from 'uuid/v4'; +import { AbstractSource, ImmutableSourceProperty } from '../source'; +import { TiledVectorLayer } from '../../tiled_vector_layer'; +import { GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; +import { MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; +import { VECTOR_SHAPE_TYPES } from '../vector_feature_types'; +import { IField } from '../../fields/field'; +import { registerSource } from '../source_registry'; +import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters'; +import { + LayerDescriptor, + MapExtent, + TiledSingleLayerVectorSourceDescriptor, + VectorSourceRequestMeta, + VectorSourceSyncMeta, +} from '../../../../common/descriptor_types'; +import { VectorLayerArguments } from '../../vector_layer'; + +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, + }: TiledSingleLayerVectorSourceDescriptor) { + 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 []; + } + + createDefaultLayer(options: LayerDescriptor): TiledVectorLayer { + const layerDescriptor = { + sourceDescriptor: this._descriptor, + ...options, + }; + const normalizedLayerDescriptor = TiledVectorLayer.createDescriptor(layerDescriptor, []); + const vectorLayerArguments: VectorLayerArguments = { + layerDescriptor: normalizedLayerDescriptor, + source: this, + }; + return new TiledVectorLayer(vectorLayerArguments); + } + + getGeoJsonWithMeta( + layerName: 'string', + searchFilters: unknown[], + registerCancelCallback: (callback: () => void) => void + ): Promise { + // todo: remove this method + // This is a consequence of ITiledSingleLayerVectorSource extending IVectorSource. + throw new Error('Does not implement getGeoJsonWithMeta'); + } + + async getFields(): Promise { + return []; + } + + async getImmutableProperties(): Promise { + 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 { + 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 { + return [VECTOR_SHAPE_TYPES.POINT, VECTOR_SHAPE_TYPES.LINE, VECTOR_SHAPE_TYPES.POLYGON]; + } + + canFormatFeatureProperties() { + return false; + } + + getMinZoom() { + return this._descriptor.minSourceZoom; + } + + getMaxZoom() { + return this._descriptor.maxSourceZoom; + } + + getBoundsForFilters(searchFilters: VectorSourceRequestMeta): MapExtent { + return { + maxLat: 90, + maxLon: 180, + minLat: -90, + minLon: -180, + }; + } + + getFieldByName(fieldName: string): IField | null { + return null; + } + + getSyncMeta(): VectorSourceSyncMeta { + return null; + } + + getApplyGlobalQuery(): boolean { + return false; + } +} + +registerSource({ + ConstructorFunction: MVTSingleLayerVectorSource, + type: SOURCE_TYPES.MVT_SINGLE_LAYER, +}); diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx new file mode 100644 index 0000000000000..7a4b8d43811da --- /dev/null +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -0,0 +1,128 @@ +/* + * 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 { 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; +}; + +export interface Props { + onSourceConfigChange: (sourceConfig: MVTSingleLayerVectorSourceConfig) => void; +} + +interface State { + urlTemplate: string; + layerName: string; + minSourceZoom: number; + maxSourceZoom: number; +} + +export class MVTSingleLayerVectorSourceEditor extends Component { + state = { + urlTemplate: '', + layerName: '', + minSourceZoom: MIN_ZOOM, + maxSourceZoom: MAX_ZOOM, + }; + + _sourceConfigChange = _.debounce(() => { + const canPreview = + this.state.urlTemplate.indexOf('{x}') >= 0 && + this.state.urlTemplate.indexOf('{y}') >= 0 && + this.state.urlTemplate.indexOf('{z}') >= 0; + + if (canPreview && this.state.layerName) { + this.props.onSourceConfigChange({ + urlTemplate: this.state.urlTemplate, + layerName: this.state.layerName, + minSourceZoom: this.state.minSourceZoom, + maxSourceZoom: this.state.maxSourceZoom, + }); + } + }, 200); + + _handleUrlTemplateChange = (e: ChangeEvent) => { + const url = e.target.value; + this.setState( + { + urlTemplate: url, + }, + () => this._sourceConfigChange() + ); + }; + + _handleLayerNameInputChange = (e: ChangeEvent) => { + 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()); + } + }; + + render() { + return ( + + + + + + + + + + ); + } +} diff --git a/x-pack/plugins/maps/public/layers/sources/source.d.ts b/x-pack/plugins/maps/public/layers/sources/source.d.ts index a1581b826d9a6..5a01da02adaae 100644 --- a/x-pack/plugins/maps/public/layers/sources/source.d.ts +++ b/x-pack/plugins/maps/public/layers/sources/source.d.ts @@ -19,7 +19,7 @@ export type Attribution = { }; export interface ISource { - createDefaultLayer(): ILayer; + createDefaultLayer(options?: LayerDescriptor): ILayer; destroy(): void; getDisplayName(): Promise; getInspectorAdapters(): object; @@ -31,6 +31,8 @@ export interface ISource { isTimeAware(): Promise; getImmutableProperties(): Promise; getAttributions(): Promise; + getMinZoom(): number; + getMaxZoom(): number; } export class AbstractSource implements ISource { @@ -49,4 +51,6 @@ export class AbstractSource implements ISource { isTimeAware(): Promise; getImmutableProperties(): Promise; getAttributions(): Promise; + getMinZoom(): number; + getMaxZoom(): number; } diff --git a/x-pack/plugins/maps/public/layers/sources/source.js b/x-pack/plugins/maps/public/layers/sources/source.js index 3029a5c091202..555b8999d6284 100644 --- a/x-pack/plugins/maps/public/layers/sources/source.js +++ b/x-pack/plugins/maps/public/layers/sources/source.js @@ -6,6 +6,7 @@ // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { copyPersistentState } from '../../reducers/util'; +import { MIN_ZOOM, MAX_ZOOM } from '../../../common/constants'; export class AbstractSource { static isIndexingSource = false; @@ -79,7 +80,7 @@ export class AbstractSource { return false; } - isQueryAware() { + async isTimeAware() { return false; } @@ -107,6 +108,14 @@ export class AbstractSource { return []; } + isFilterByMapBounds() { + return false; + } + + isQueryAware() { + return false; + } + getGeoGridPrecision() { return 0; } @@ -140,4 +149,12 @@ export class AbstractSource { async getValueSuggestions(/* field, query */) { return []; } + + getMinZoom() { + return MIN_ZOOM; + } + + getMaxZoom() { + return MAX_ZOOM; + } } diff --git a/x-pack/plugins/maps/public/layers/sources/source_registry.ts b/x-pack/plugins/maps/public/layers/sources/source_registry.ts index d16b16af74e9d..3b334d45092ad 100644 --- a/x-pack/plugins/maps/public/layers/sources/source_registry.ts +++ b/x-pack/plugins/maps/public/layers/sources/source_registry.ts @@ -10,7 +10,7 @@ import { ISource } from './source'; type SourceRegistryEntry = { ConstructorFunction: new ( sourceDescriptor: any, // this is the source-descriptor that corresponds specifically to the particular ISource instance - inspectorAdapters: unknown + inspectorAdapters?: object ) => ISource; type: string; }; diff --git a/x-pack/plugins/maps/public/layers/sources/vector_feature_types.ts b/x-pack/plugins/maps/public/layers/sources/vector_feature_types.ts new file mode 100644 index 0000000000000..9f03357e17dad --- /dev/null +++ b/x-pack/plugins/maps/public/layers/sources/vector_feature_types.ts @@ -0,0 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export enum VECTOR_SHAPE_TYPES { + POINT = 'POINT', + LINE = 'LINE', + POLYGON = 'POLYGON', +} diff --git a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts index 63429830d9f4f..804915dd73052 100644 --- a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts +++ b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts @@ -14,6 +14,7 @@ import { VectorSourceRequestMeta, VectorSourceSyncMeta, } from '../../../../common/descriptor_types'; +import { VECTOR_SHAPE_TYPES } from '../vector_feature_types'; export type GeoJsonFetchMeta = ESSearchSourceResponseMeta; @@ -31,8 +32,10 @@ export interface IVectorSource extends ISource { ): Promise; getFields(): Promise; - getFieldByName(fieldName: string): IField; + getFieldByName(fieldName: string): IField | null; getSyncMeta(): VectorSourceSyncMeta; + getFieldNames(): string[]; + getApplyGlobalQuery(): boolean; } export class AbstractVectorSource extends AbstractSource implements IVectorSource { @@ -44,6 +47,21 @@ export class AbstractVectorSource extends AbstractSource implements IVectorSourc ): Promise; getFields(): Promise; - getFieldByName(fieldName: string): IField; + getFieldByName(fieldName: string): IField | null; getSyncMeta(): VectorSourceSyncMeta; + getSupportedShapeTypes(): Promise; + canFormatFeatureProperties(): boolean; + getApplyGlobalQuery(): boolean; + getFieldNames(): string[]; +} + +export interface ITiledSingleLayerVectorSource extends IVectorSource { + getUrlTemplateWithMeta(): Promise<{ + layerName: string; + urlTemplate: string; + minSourceZoom: number; + maxSourceZoom: number; + }>; + getMinZoom(): number; + getMaxZoom(): number; } diff --git a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js index bb37175b48655..509584cbc415a 100644 --- a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js +++ b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js @@ -60,6 +60,10 @@ export class AbstractVectorSource extends AbstractSource { throw new Error(`Should implemement ${this.constructor.type} ${this}`); } + getFieldNames() { + return []; + } + /** * Retrieves a field. This may be an existing instance. * @param fieldName diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js b/x-pack/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js index 6cece5efb3a5d..c46dc2cb4b73e 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js @@ -37,7 +37,7 @@ export class VectorStyleEditor extends Component { defaultDynamicProperties: getDefaultDynamicProperties(), defaultStaticProperties: getDefaultStaticProperties(), supportedFeatures: undefined, - selectedFeatureType: undefined, + selectedFeature: null, }; componentWillUnmount() { @@ -91,18 +91,20 @@ export class VectorStyleEditor extends Component { return; } - let selectedFeature = VECTOR_SHAPE_TYPES.POLYGON; - if (this.props.isPointsOnly) { - selectedFeature = VECTOR_SHAPE_TYPES.POINT; - } else if (this.props.isLinesOnly) { - selectedFeature = VECTOR_SHAPE_TYPES.LINE; + if (!_.isEqual(supportedFeatures, this.state.supportedFeatures)) { + this.setState({ supportedFeatures }); } - if ( - !_.isEqual(supportedFeatures, this.state.supportedFeatures) || - selectedFeature !== this.state.selectedFeature - ) { - this.setState({ supportedFeatures, selectedFeature }); + if (this.state.selectedFeature === null) { + let selectedFeature = VECTOR_SHAPE_TYPES.POLYGON; + if (this.props.isPointsOnly) { + selectedFeature = VECTOR_SHAPE_TYPES.POINT; + } else if (this.props.isLinesOnly) { + selectedFeature = VECTOR_SHAPE_TYPES.LINE; + } + this.setState({ + selectedFeature: selectedFeature, + }); } } diff --git a/x-pack/plugins/maps/public/layers/styles/vector/vector_style.d.ts b/x-pack/plugins/maps/public/layers/styles/vector/vector_style.d.ts index 77ea44ac26bf9..e010d5ac7d7a3 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/vector_style.d.ts +++ b/x-pack/plugins/maps/public/layers/styles/vector/vector_style.d.ts @@ -7,17 +7,23 @@ import { IStyleProperty } from './properties/style_property'; import { IDynamicStyleProperty } from './properties/dynamic_style_property'; import { IVectorLayer } from '../../vector_layer'; import { IVectorSource } from '../../sources/vector_source'; -import { VectorStyleDescriptor } from '../../../../common/descriptor_types'; +import { + VectorStyleDescriptor, + VectorStylePropertiesDescriptor, +} from '../../../../common/descriptor_types'; export interface IVectorStyle { getAllStyleProperties(): IStyleProperty[]; getDescriptor(): VectorStyleDescriptor; getDynamicPropertiesArray(): IDynamicStyleProperty[]; + getSourceFieldNames(): string[]; } export class VectorStyle implements IVectorStyle { + static createDescriptor(properties: VectorStylePropertiesDescriptor): VectorStyleDescriptor; + static createDefaultStyleProperties(mapColors: string[]): VectorStylePropertiesDescriptor; constructor(descriptor: VectorStyleDescriptor, source: IVectorSource, layer: IVectorLayer); - + getSourceFieldNames(): string[]; getAllStyleProperties(): IStyleProperty[]; getDescriptor(): VectorStyleDescriptor; getDynamicPropertiesArray(): IDynamicStyleProperty[]; diff --git a/x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx new file mode 100644 index 0000000000000..c47cae5641e56 --- /dev/null +++ b/x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx @@ -0,0 +1,170 @@ +/* + * 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 from 'react'; +import { EuiIcon } from '@elastic/eui'; +import { VectorStyle } from './styles/vector/vector_style'; +import { SOURCE_DATA_ID_ORIGIN, LAYER_TYPE } from '../../common/constants'; +import { VectorLayer, VectorLayerArguments } from './vector_layer'; +import { canSkipSourceUpdate } from './util/can_skip_fetch'; +import { ITiledSingleLayerVectorSource } from './sources/vector_source'; +import { SyncContext } from '../actions/map_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'; + +export class TiledVectorLayer extends VectorLayer { + static type = LAYER_TYPE.TILED_VECTOR; + + static createDescriptor( + descriptor: VectorLayerDescriptor, + mapColors: string[] + ): VectorLayerDescriptor { + const layerDescriptor = super.createDescriptor(descriptor, mapColors); + layerDescriptor.type = TiledVectorLayer.type; + + if (!layerDescriptor.style) { + const styleProperties = VectorStyle.createDefaultStyleProperties(mapColors); + layerDescriptor.style = VectorStyle.createDescriptor(styleProperties); + } + + return layerDescriptor; + } + + readonly _source: ITiledSingleLayerVectorSource; // downcast to the more specific type + + constructor({ layerDescriptor, source }: VectorLayerArguments) { + super({ layerDescriptor, source }); + this._source = source as ITiledSingleLayerVectorSource; + } + + getCustomIconAndTooltipContent() { + return { + icon: , + }; + } + + async _syncMVTUrlTemplate({ startLoading, stopLoading, onLoadError, dataFilters }: SyncContext) { + const requestToken: symbol = Symbol(`layer-${this.getId()}-${SOURCE_DATA_ID_ORIGIN}`); + const searchFilters: VectorSourceRequestMeta = this._getSearchFilters( + dataFilters, + this.getSource(), + this._style + ); + const prevDataRequest = this.getSourceDataRequest(); + + const canSkip = await canSkipSourceUpdate({ + source: this._source as ISource, + prevDataRequest, + nextMeta: searchFilters, + }); + if (canSkip) { + return null; + } + + startLoading(SOURCE_DATA_ID_ORIGIN, requestToken, searchFilters); + try { + const templateWithMeta = await this._source.getUrlTemplateWithMeta(); + stopLoading(SOURCE_DATA_ID_ORIGIN, requestToken, templateWithMeta, {}); + } catch (error) { + onLoadError(SOURCE_DATA_ID_ORIGIN, requestToken, error.message); + } + } + + async syncData(syncContext: SyncContext) { + if (!this.isVisible() || !this.showAtZoomLevel(syncContext.dataFilters.zoom)) { + return; + } + + await this._syncSourceStyleMeta(syncContext, this._source, this._style); + await this._syncSourceFormatters(syncContext, this._source, this._style); + await this._syncMVTUrlTemplate(syncContext); + } + + _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; + } + + const sourceMeta: MVTSingleLayerVectorSourceConfig | null = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; + if (!sourceMeta) { + return; + } + + const sourceId = this.getId(); + + // @ts-ignore + mbMap.addSource(sourceId, { + type: 'vector', + tiles: [sourceMeta.urlTemplate], + minzoom: sourceMeta.minSourceZoom, + maxzoom: sourceMeta.maxSourceZoom, + }); + } + } + + _syncStylePropertiesWithMb(mbMap: unknown) { + // @ts-ignore + const mbSource = mbMap.getSource(this.getId()); + if (!mbSource) { + return; + } + + const sourceDataRequest = this.getSourceDataRequest(); + if (!sourceDataRequest) { + return; + } + const sourceMeta: MVTSingleLayerVectorSourceConfig = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; + + this._setMbPointsProperties(mbMap, sourceMeta.layerName); + this._setMbLinePolygonProperties(mbMap, sourceMeta.layerName); + } + + _requiresPrevSourceCleanup(mbMap: unknown): boolean { + // @ts-ignore + const mbTileSource = mbMap.getSource(this.getId()); + 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. + return false; + } + + return true; + } + + syncLayerWithMB(mbMap: unknown) { + this._removeStaleMbSourcesAndLayers(mbMap); + this._syncSourceBindingWithMb(mbMap); + this._syncStylePropertiesWithMb(mbMap); + } + + getJoins() { + return []; + } + + getMinZoom() { + // higher resolution vector tiles cannot be displayed at lower-res + return Math.max(this._source.getMinZoom(), super.getMinZoom()); + } +} diff --git a/x-pack/plugins/maps/public/layers/vector_layer.d.ts b/x-pack/plugins/maps/public/layers/vector_layer.d.ts index 88b1a1ce8535e..3d5b8054ff3fd 100644 --- a/x-pack/plugins/maps/public/layers/vector_layer.d.ts +++ b/x-pack/plugins/maps/public/layers/vector_layer.d.ts @@ -9,6 +9,7 @@ import { AbstractLayer } from './layer'; import { IVectorSource } from './sources/vector_source'; import { MapFilters, + LayerDescriptor, VectorLayerDescriptor, VectorSourceRequestMeta, } from '../../common/descriptor_types'; @@ -20,7 +21,7 @@ import { SyncContext } from '../actions/map_actions'; type VectorLayerArguments = { source: IVectorSource; - joins: IJoin[]; + joins?: IJoin[]; layerDescriptor: VectorLayerDescriptor; }; @@ -28,11 +29,12 @@ export interface IVectorLayer extends ILayer { getFields(): Promise; getStyleEditorFields(): Promise; getValidJoins(): IJoin[]; + getSource(): IVectorSource; } export class VectorLayer extends AbstractLayer implements IVectorLayer { static createDescriptor( - options: Partial, + options: Partial, mapColors?: string[] ): VectorLayerDescriptor; @@ -40,14 +42,30 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { protected readonly _style: IVectorStyle; constructor(options: VectorLayerArguments); - + getLayerTypeIconName(): string; getFields(): Promise; getStyleEditorFields(): Promise; getValidJoins(): IJoin[]; + _syncSourceStyleMeta( + syncContext: SyncContext, + source: IVectorSource, + style: IVectorStyle + ): Promise; + _syncSourceFormatters( + syncContext: SyncContext, + source: IVectorSource, + style: IVectorStyle + ): Promise; + syncLayerWithMB(mbMap: unknown): void; _getSearchFilters( dataFilters: MapFilters, source: IVectorSource, style: IVectorStyle ): VectorSourceRequestMeta; _syncData(syncContext: SyncContext, source: IVectorSource, style: IVectorStyle): Promise; + ownsMbSourceId(sourceId: string): boolean; + ownsMbLayerId(sourceId: string): boolean; + _setMbPointsProperties(mbMap: unknown, mvtSourceLayer?: string): void; + _setMbLinePolygonProperties(mbMap: unknown, mvtSourceLayer?: string): void; + getSource(): IVectorSource; } diff --git a/x-pack/plugins/maps/public/layers/vector_layer.js b/x-pack/plugins/maps/public/layers/vector_layer.js index d606420909281..c5947a63587ea 100644 --- a/x-pack/plugins/maps/public/layers/vector_layer.js +++ b/x-pack/plugins/maps/public/layers/vector_layer.js @@ -641,7 +641,7 @@ export class VectorLayer extends AbstractLayer { } } - _setMbPointsProperties(mbMap) { + _setMbPointsProperties(mbMap, mvtSourceLayer) { const pointLayerId = this._getMbPointLayerId(); const symbolLayerId = this._getMbSymbolLayerId(); const pointLayer = mbMap.getLayer(pointLayerId); @@ -658,7 +658,7 @@ export class VectorLayer extends AbstractLayer { if (symbolLayer) { mbMap.setLayoutProperty(symbolLayerId, 'visibility', 'none'); } - this._setMbCircleProperties(mbMap); + this._setMbCircleProperties(mbMap, mvtSourceLayer); } else { markerLayerId = symbolLayerId; textLayerId = symbolLayerId; @@ -666,7 +666,7 @@ export class VectorLayer extends AbstractLayer { mbMap.setLayoutProperty(pointLayerId, 'visibility', 'none'); mbMap.setLayoutProperty(this._getMbTextLayerId(), 'visibility', 'none'); } - this._setMbSymbolProperties(mbMap); + this._setMbSymbolProperties(mbMap, mvtSourceLayer); } this.syncVisibilityWithMb(mbMap, markerLayerId); @@ -677,27 +677,36 @@ export class VectorLayer extends AbstractLayer { } } - _setMbCircleProperties(mbMap) { + _setMbCircleProperties(mbMap, mvtSourceLayer) { const sourceId = this.getId(); const pointLayerId = this._getMbPointLayerId(); const pointLayer = mbMap.getLayer(pointLayerId); if (!pointLayer) { - mbMap.addLayer({ + const mbLayer = { id: pointLayerId, type: 'circle', source: sourceId, paint: {}, - }); + }; + + if (mvtSourceLayer) { + mbLayer['source-layer'] = mvtSourceLayer; + } + mbMap.addLayer(mbLayer); } const textLayerId = this._getMbTextLayerId(); const textLayer = mbMap.getLayer(textLayerId); if (!textLayer) { - mbMap.addLayer({ + const mbLayer = { id: textLayerId, type: 'symbol', source: sourceId, - }); + }; + if (mvtSourceLayer) { + mbLayer['source-layer'] = mvtSourceLayer; + } + mbMap.addLayer(mbLayer); } const filterExpr = getPointFilterExpression(this._hasJoins()); @@ -719,17 +728,21 @@ export class VectorLayer extends AbstractLayer { }); } - _setMbSymbolProperties(mbMap) { + _setMbSymbolProperties(mbMap, mvtSourceLayer) { const sourceId = this.getId(); const symbolLayerId = this._getMbSymbolLayerId(); const symbolLayer = mbMap.getLayer(symbolLayerId); if (!symbolLayer) { - mbMap.addLayer({ + const mbLayer = { id: symbolLayerId, type: 'symbol', source: sourceId, - }); + }; + if (mvtSourceLayer) { + mbLayer['source-layer'] = mvtSourceLayer; + } + mbMap.addLayer(mbLayer); } const filterExpr = getPointFilterExpression(this._hasJoins()); @@ -750,26 +763,34 @@ export class VectorLayer extends AbstractLayer { }); } - _setMbLinePolygonProperties(mbMap) { + _setMbLinePolygonProperties(mbMap, mvtSourceLayer) { const sourceId = this.getId(); const fillLayerId = this._getMbPolygonLayerId(); const lineLayerId = this._getMbLineLayerId(); const hasJoins = this._hasJoins(); if (!mbMap.getLayer(fillLayerId)) { - mbMap.addLayer({ + const mbLayer = { id: fillLayerId, type: 'fill', source: sourceId, paint: {}, - }); + }; + if (mvtSourceLayer) { + mbLayer['source-layer'] = mvtSourceLayer; + } + mbMap.addLayer(mbLayer); } if (!mbMap.getLayer(lineLayerId)) { - mbMap.addLayer({ + const mbLayer = { id: lineLayerId, type: 'line', source: sourceId, paint: {}, - }); + }; + if (mvtSourceLayer) { + mbLayer['source-layer'] = mvtSourceLayer; + } + mbMap.addLayer(mbLayer); } this.getCurrentStyle().setMBPaintProperties({ alpha: this.getAlpha(), diff --git a/x-pack/plugins/maps/public/layers/vector_tile_layer.js b/x-pack/plugins/maps/public/layers/vector_tile_layer.js index 44987fd3e78f0..c620ec6c56dc3 100644 --- a/x-pack/plugins/maps/public/layers/vector_tile_layer.js +++ b/x-pack/plugins/maps/public/layers/vector_tile_layer.js @@ -161,19 +161,7 @@ export class VectorTileLayer extends TileLayer { return; } - 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); - } - }); - } + this._removeStaleMbSourcesAndLayers(mbMap); let initialBootstrapCompleted = false; const sourceIds = Object.keys(vectorStyle.sources); diff --git a/x-pack/plugins/maps/public/plugin.ts b/x-pack/plugins/maps/public/plugin.ts index 649627690ec9a..d3b9626dc8366 100644 --- a/x-pack/plugins/maps/public/plugin.ts +++ b/x-pack/plugins/maps/public/plugin.ts @@ -33,6 +33,7 @@ import { setVisualizations, // @ts-ignore } from './kibana_services'; +import { registerLayerWizards } from './layers/load_layer_wizards'; export interface MapsPluginSetupDependencies { inspector: InspectorSetupContract; @@ -72,6 +73,7 @@ export const bindStartCoreAndPlugins = (core: CoreStart, plugins: any) => { setUiActions(plugins.uiActions); setNavigation(plugins.navigation); setCoreI18n(core.i18n); + registerLayerWizards(); }; /**