[Maps] Use ES mvt

docs/maps/vector-layer.asciidoc

@@ -27,9 +27,9 @@ Results exceeding `index.max_result_window` are not displayed.
 
 * *Show clusters when results exceed 10,000* When results exceed `index.max_result_window`, the layer uses {ref}/search-aggregations-bucket-geotilegrid-aggregation.html[GeoTile grid aggregation] to group your documents into clusters and displays metrics for each cluster. When results are less then `index.max_result_window`, the layer displays features from individual documents.
 
-* *Use vector tiles.* Vector tiles partition your map into 6 to 8 tiles.
+* *Use vector tiles.* Vector tiles partition your map into tiles.
 Each tile request is limited to the `index.max_result_window` index setting.
-Tiles exceeding `index.max_result_window` have a visual indicator when there are too many features to display.
+When a tile exceeds `index.max_result_window`, results exceeding `index.max_result_window` are not contained in the tile and a dashed rectangle outlining the bounding box containing all geo values within the tile is displayed.
 
 *EMS Boundaries*:: Administrative boundaries from https://www.elastic.co/elastic-maps-service[Elastic Maps Service].
 

package.json

@@ -166,7 +166,6 @@
     "@mapbox/geojson-rewind": "^0.5.0",
     "@mapbox/mapbox-gl-draw": "1.3.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
-    "@mapbox/vector-tile": "1.3.1",
     "@reduxjs/toolkit": "^1.6.1",
     "@slack/webhook": "^5.0.4",
     "@turf/along": "6.0.1",
@@ -460,6 +459,7 @@
     "@kbn/test": "link:bazel-bin/packages/kbn-test",
     "@kbn/test-subj-selector": "link:bazel-bin/packages/kbn-test-subj-selector",
     "@loaders.gl/polyfills": "^2.3.5",
+    "@mapbox/vector-tile": "1.3.1",
     "@microsoft/api-documenter": "7.7.2",
     "@microsoft/api-extractor": "7.7.0",
     "@octokit/rest": "^16.35.0",

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

@@ -47,14 +47,7 @@ export const CHECK_IS_DRAWING_INDEX = `/${GIS_API_PATH}/checkIsDrawingIndex`;
 
 export const MVT_GETTILE_API_PATH = 'mvt/getTile';
 export const MVT_GETGRIDTILE_API_PATH = 'mvt/getGridTile';
-export const MVT_SOURCE_LAYER_NAME = 'source_layer';
-// Identifies vector tile "too many features" feature.
-// "too many features" feature is a box showing area that contains too many features for single ES search response
-export const KBN_METADATA_FEATURE = '__kbn_metadata_feature__';
-export const KBN_FEATURE_COUNT = '__kbn_feature_count__';
-export const KBN_IS_TILE_COMPLETE = '__kbn_is_tile_complete__';
-export const KBN_VECTOR_SHAPE_TYPE_COUNTS = '__kbn_vector_shape_type_counts__';
-export const KBN_TOO_MANY_FEATURES_IMAGE_ID = '__kbn_too_many_features_image_id__';
+
 // Identifies centroid feature.
 // Centroids are a single point for representing lines, multiLines, polygons, and multiPolygons
 export const KBN_IS_CENTROID_FEATURE = '__kbn_is_centroid_feature__';
@@ -119,7 +112,6 @@ export const DEFAULT_MAX_RESULT_WINDOW = 10000;
 export const DEFAULT_MAX_INNER_RESULT_WINDOW = 100;
 export const DEFAULT_MAX_BUCKETS_LIMIT = 65535;
 
-export const FEATURE_ID_PROPERTY_NAME = '__kbn__feature_id__';
 export const FEATURE_VISIBLE_PROPERTY_NAME = '__kbn_isvisibleduetojoin__';
 
 export const MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER = '_';

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

@@ -10,21 +10,13 @@
 import { Query } from 'src/plugins/data/public';
 import { Feature } from 'geojson';
 import {
-  FieldMeta,
   HeatmapStyleDescriptor,
   StyleDescriptor,
   VectorStyleDescriptor,
 } from './style_property_descriptor_types';
 import { DataRequestDescriptor } from './data_request_descriptor_types';
 import { AbstractSourceDescriptor, TermJoinSourceDescriptor } from './source_descriptor_types';
-import { VectorShapeTypeCounts } from '../get_geometry_counts';
-import {
-  KBN_FEATURE_COUNT,
-  KBN_IS_TILE_COMPLETE,
-  KBN_METADATA_FEATURE,
-  KBN_VECTOR_SHAPE_TYPE_COUNTS,
-  LAYER_TYPE,
-} from '../constants';
+import { LAYER_TYPE } from '../constants';
 
 export type Attribution = {
   label: string;
@@ -38,11 +30,8 @@ export type JoinDescriptor = {
 
 export type TileMetaFeature = Feature & {
   properties: {
-    [KBN_METADATA_FEATURE]: true;
-    [KBN_IS_TILE_COMPLETE]: boolean;
-    [KBN_FEATURE_COUNT]: number;
-    [KBN_VECTOR_SHAPE_TYPE_COUNTS]: VectorShapeTypeCounts;
-    fieldMeta?: FieldMeta;
+    'hits.total.relation': string;
+    'hits.total.value': number;
   };
 };
 

x-pack/plugins/maps/common/elasticsearch_util/index.ts

@@ -6,7 +6,6 @@
  */
 
 export * from './es_agg_utils';
-export * from './convert_to_geojson';
 export * from './elasticsearch_geo_utils';
 export * from './spatial_filter_utils';
 export * from './types';

x-pack/plugins/maps/public/actions/data_request_actions.ts

@@ -282,10 +282,10 @@ function endDataLoad(
 
     if (dataId === SOURCE_DATA_REQUEST_ID) {
       const features = data && 'features' in data ? (data as FeatureCollection).features : [];
+      const layer = getLayerById(layerId, getState());
 
       const eventHandlers = getEventHandlers(getState());
       if (eventHandlers && eventHandlers.onDataLoadEnd) {
-        const layer = getLayerById(layerId, getState());
         const resultMeta: ResultMeta = {};
         if (layer && layer.getType() === LAYER_TYPE.VECTOR) {
           const featuresWithoutCentroids = features.filter((feature) => {
@@ -301,7 +301,9 @@ function endDataLoad(
         });
       }
 
-      dispatch(updateTooltipStateForLayer(layerId, features));
+      if (layer) {
+        dispatch(updateTooltipStateForLayer(layer, features));
+      }
     }
 
     dispatch({
@@ -344,7 +346,10 @@ function onDataLoadError(
         });
       }
 
-      dispatch(updateTooltipStateForLayer(layerId));
+      const layer = getLayerById(layerId, getState());
+      if (layer) {
+        dispatch(updateTooltipStateForLayer(layer));
+      }
     }
 
     dispatch({
@@ -359,7 +364,10 @@ function onDataLoadError(
 }
 
 export function updateSourceDataRequest(layerId: string, newData: object) {
-  return (dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) => {
+  return (
+    dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
+    getState: () => MapStoreState
+  ) => {
     dispatch({
       type: UPDATE_SOURCE_DATA_REQUEST,
       dataId: SOURCE_DATA_REQUEST_ID,
@@ -368,7 +376,10 @@ export function updateSourceDataRequest(layerId: string, newData: object) {
     });
 
     if ('features' in newData) {
-      dispatch(updateTooltipStateForLayer(layerId, (newData as FeatureCollection).features));
+      const layer = getLayerById(layerId, getState());
+      if (layer) {
+        dispatch(updateTooltipStateForLayer(layer, (newData as FeatureCollection).features));
+      }
     }
 
     dispatch(updateStyleMeta(layerId));

x-pack/plugins/maps/public/actions/layer_actions.ts

@@ -51,6 +51,7 @@ import {
 } from '../../common/descriptor_types';
 import { ILayer } from '../classes/layers/layer';
 import { IVectorLayer } from '../classes/layers/vector_layer';
+import { OnSourceChangeArgs } from '../classes/sources/source';
 import { DRAW_MODE, LAYER_STYLE_TYPE, LAYER_TYPE } from '../../common/constants';
 import { IVectorStyle } from '../classes/styles/vector/vector_style';
 import { notifyLicensedFeatureUsage } from '../licensed_features';
@@ -217,7 +218,7 @@ export function setLayerVisibility(layerId: string, makeVisible: boolean) {
     }
 
     if (!makeVisible) {
-      dispatch(updateTooltipStateForLayer(layerId));
+      dispatch(updateTooltipStateForLayer(layer));
     }
 
     dispatch({
@@ -323,18 +324,17 @@ function updateMetricsProp(layerId: string, value: unknown) {
   ) => {
     const layer = getLayerById(layerId, getState());
     const previousFields = await (layer as IVectorLayer).getFields();
-    await dispatch({
+    dispatch({
       type: UPDATE_SOURCE_PROP,
       layerId,
       propName: 'metrics',
       value,
     });
     await dispatch(updateStyleProperties(layerId, previousFields as IESAggField[]));
-    dispatch(syncDataForLayerId(layerId, false));
   };
 }
 
-export function updateSourceProp(
+function updateSourcePropWithoutSync(
   layerId: string,
   propName: string,
   value: unknown,
@@ -356,6 +356,28 @@ export function updateSourceProp(
     if (newLayerType) {
       dispatch(updateLayerType(layerId, newLayerType));
     }
+  };
+}
+
+export function updateSourceProp(
+  layerId: string,
+  propName: string,
+  value: unknown,
+  newLayerType?: LAYER_TYPE
+) {
+  return async (dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) => {
+    await dispatch(updateSourcePropWithoutSync(layerId, propName, value, newLayerType));
+    dispatch(syncDataForLayerId(layerId, false));
+  };
+}
+
+export function updateSourceProps(layerId: string, sourcePropChanges: OnSourceChangeArgs[]) {
+  return async (dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) => {
+    // Using for loop to ensure update completes before starting next update
+    for (let i = 0; i < sourcePropChanges.length; i++) {
+      const { propName, value, newLayerType } = sourcePropChanges[i];
+      await dispatch(updateSourcePropWithoutSync(layerId, propName, value, newLayerType));
+    }
     dispatch(syncDataForLayerId(layerId, false));
   };
 }
@@ -504,7 +526,7 @@ function removeLayerFromLayerList(layerId: string) {
     layerGettingRemoved.getInFlightRequestTokens().forEach((requestToken) => {
       dispatch(cancelRequest(requestToken));
     });
-    dispatch(updateTooltipStateForLayer(layerId));
+    dispatch(updateTooltipStateForLayer(layerGettingRemoved));
     layerGettingRemoved.destroy();
     dispatch({
       type: REMOVE_LAYER,

x-pack/plugins/maps/public/actions/map_actions.ts

@@ -63,7 +63,7 @@ import { INITIAL_LOCATION } from '../../common/constants';
 import { updateTooltipStateForLayer } from './tooltip_actions';
 import { VectorLayer } from '../classes/layers/vector_layer';
 import { SET_DRAW_MODE } from './ui_actions';
-import { expandToTileBoundaries } from '../../common/geo_tile_utils';
+import { expandToTileBoundaries } from '../classes/util/geo_tile_utils';
 import { getToasts } from '../kibana_services';
 
 export function setMapInitError(errorMessage: string) {
@@ -171,7 +171,7 @@ export function mapExtentChanged(mapExtentState: MapExtentState) {
     if (prevZoom !== nextZoom) {
       getLayerList(getState()).map((layer) => {
         if (!layer.showAtZoomLevel(nextZoom)) {
-          dispatch(updateTooltipStateForLayer(layer.getId()));
+          dispatch(updateTooltipStateForLayer(layer));
         }
       });
     }