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

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.

Author: thomasneirynck

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', () => {});