[TileMap][RegionMap] Implement custom renderers and expression builders

src/plugins/expressions/public/render.ts

@@ -110,7 +110,7 @@ export class ExpressionRenderHandler {
     };
   }
 
-  render = async (value: any, uiState: any = {}) => {
+  render = async (value: any, uiState?: any) => {
     if (!value || typeof value !== 'object') {
       return this.handleRenderError(new Error('invalid data provided to the expression renderer'));
     }

src/plugins/maps_legacy/public/common/types/external_basemap_types.ts → src/plugins/maps_legacy/public/common/types.ts

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { TmsLayer } from '../../index';
-import { MapTypes } from './map_types';
+import { TmsLayer } from '..';
 
 export interface WMSOptions {
   selectedTmsLayer?: TmsLayer;
@@ -33,15 +32,3 @@ export interface WMSOptions {
     styles?: string;
   };
 }
-
-export interface TileMapVisParams {
-  colorSchema: string;
-  mapType: MapTypes;
-  isDesaturated: boolean;
-  addTooltip: boolean;
-  heatClusterSize: number;
-  legendPosition: 'bottomright' | 'bottomleft' | 'topright' | 'topleft';
-  mapZoom: number;
-  mapCenter: [number, number];
-  wms: WMSOptions;
-}

src/plugins/maps_legacy/public/components/wms_internal_options.tsx

@@ -22,7 +22,7 @@ import { EuiLink, EuiSpacer, EuiText, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { TextInputOption } from '../../../vis_default_editor/public';
-import { WMSOptions } from '../common/types/external_basemap_types';
+import { WMSOptions } from '../common/types';
 
 interface WmsInternalOptions {
   wms: WMSOptions;

src/plugins/maps_legacy/public/components/wms_options.tsx

@@ -23,20 +23,19 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { TmsLayer } from '../index';
 import { Vis } from '../../../visualizations/public';
-import { RegionMapVisParams } from '../common/types/region_map_types';
 import { SelectOption, SwitchOption } from '../../../vis_default_editor/public';
 import { WmsInternalOptions } from './wms_internal_options';
-import { WMSOptions, TileMapVisParams } from '../common/types/external_basemap_types';
+import { WMSOptions } from '../common/types';
 
-interface Props {
-  stateParams: TileMapVisParams | RegionMapVisParams;
+interface Props<K> {
+  stateParams: K;
   setValue: (title: 'wms', options: WMSOptions) => void;
   vis: Vis;
 }
 
 const mapLayerForOption = ({ id }: TmsLayer) => ({ text: id, value: id });
 
-function WmsOptions({ stateParams, setValue, vis }: Props) {
+function WmsOptions<K extends { wms: WMSOptions }>({ stateParams, setValue, vis }: Props<K>) {
   const { wms } = stateParams;
   const { tmsLayers } = vis.type.editorConfig.collections;
   const tmsLayerOptions = useMemo(() => tmsLayers.map(mapLayerForOption), [tmsLayers]);

src/plugins/maps_legacy/public/index.ts

@@ -17,17 +17,12 @@
  * under the License.
  */
 
-// @ts-ignore
 import { PluginInitializerContext } from 'kibana/public';
 import { MapsLegacyPlugin } from './plugin';
 // @ts-ignore
 import * as colorUtil from './map/color_util';
 // @ts-ignore
 import { KibanaMapLayer } from './map/kibana_map_layer';
-// @ts-ignore
-import { convertToGeoJson } from './map/convert_to_geojson';
-// @ts-ignore
-import { getPrecision, geoContains } from './map/decode_geo_hash';
 import {
   VectorLayer,
   FileLayerField,
@@ -46,10 +41,7 @@ export function plugin(initializerContext: PluginInitializerContext) {
 
 /** @public */
 export {
-  getPrecision,
-  geoContains,
   colorUtil,
-  convertToGeoJson,
   IServiceSettings,
   KibanaMapLayer,
   VectorLayer,

src/plugins/maps_legacy/public/map/base_maps_visualization.js

@@ -34,8 +34,9 @@ export function BaseMapsVisualizationProvider() {
    * @constructor
    */
   return class BaseMapsVisualization {
-    constructor(element, vis) {
-      this.vis = vis;
+    constructor(element, handlers, initialVisParams) {
+      this.handlers = handlers;
+      this._params = initialVisParams;
       this._container = element;
       this._kibanaMap = null;
       this._chartData = null; //reference to data currently on the map.
@@ -61,37 +62,43 @@ export function BaseMapsVisualizationProvider() {
      * @param status
      * @return {Promise}
      */
-    async render(esResponse, visParams) {
+    async render(esResponse = this._esResponse, visParams = this._params) {
+      await this._mapIsLoaded;
+
       if (!this._kibanaMap) {
         //the visualization has been destroyed;
         return;
       }
 
-      await this._mapIsLoaded;
       this._kibanaMap.resize();
       this._params = visParams;
       await this._updateParams();
 
       if (this._hasESResponseChanged(esResponse)) {
+        this._esResponse = esResponse;
         await this._updateData(esResponse);
       }
-      this._kibanaMap.useUiStateFromVisualization(this.vis);
+      this._kibanaMap.useUiStateFromVisualization(this.handlers.uiState);
 
       await this._whenBaseLayerIsLoaded();
     }
 
+    resize() {
+      this._kibanaMap?.resize();
+    }
+
     /**
      * Creates an instance of a kibana-map with a single baselayer and assigns it to the this._kibanaMap property.
      * Clients can override this method to customize the initialization.
      * @private
      */
     async _makeKibanaMap() {
       const options = {};
-      const uiState = this.vis.getUiState();
-      const zoomFromUiState = parseInt(uiState.get('mapZoom'));
-      const centerFromUIState = uiState.get('mapCenter');
-      options.zoom = !isNaN(zoomFromUiState) ? zoomFromUiState : this.vis.params.mapZoom;
-      options.center = centerFromUIState ? centerFromUIState : this.vis.params.mapCenter;
+      const zoomFromUiState = parseInt(this.handlers.uiState?.get('mapZoom'));
+      const centerFromUIState = this.handlers.uiState?.get('mapCenter');
+      const { mapZoom, mapCenter } = this._getMapsParams();
+      options.zoom = !isNaN(zoomFromUiState) ? zoomFromUiState : mapZoom;
+      options.center = centerFromUIState ? centerFromUIState : mapCenter;
 
       const modules = await lazyLoadMapsLegacyModules();
       this._kibanaMap = new modules.KibanaMap(this._container, options);
@@ -100,7 +107,7 @@ export function BaseMapsVisualizationProvider() {
 
       this._kibanaMap.addLegendControl();
       this._kibanaMap.addFitControl();
-      this._kibanaMap.persistUiStateForVisualization(this.vis);
+      this._kibanaMap.persistUiStateForVisualization(this.handlers.uiState);
 
       this._kibanaMap.on('baseLayer:loaded', () => {
         this._baseLayerDirty = false;
@@ -212,7 +219,7 @@ export function BaseMapsVisualizationProvider() {
     }
 
     _hasESResponseChanged(data) {
-      return this._chartData !== data;
+      return this._esResponse !== data;
     }
 
     /**
@@ -223,15 +230,11 @@ export function BaseMapsVisualizationProvider() {
       await this._updateBaseLayer();
       this._kibanaMap.setLegendPosition(mapParams.legendPosition);
       this._kibanaMap.setShowTooltip(mapParams.addTooltip);
-      this._kibanaMap.useUiStateFromVisualization(this.vis);
+      this._kibanaMap.useUiStateFromVisualization(this.handlers.uiState);
     }
 
     _getMapsParams() {
-      return {
-        ...this.vis.type.visConfig.defaults,
-        type: this.vis.type.name,
-        ...this._params,
-      };
+      return this._params;
     }
 
     _whenBaseLayerIsLoaded() {

src/plugins/maps_legacy/public/map/decode_geo_hash.test.ts

@@ -17,18 +17,11 @@
  * under the License.
  */
 
-import { geohashColumns, decodeGeoHash } from './decode_geo_hash';
+import { geohashColumns } from './decode_geo_hash';
 
 test('geohashColumns', () => {
   expect(geohashColumns(1)).toBe(8);
   expect(geohashColumns(2)).toBe(8 * 4);
   expect(geohashColumns(3)).toBe(8 * 4 * 8);
   expect(geohashColumns(4)).toBe(8 * 4 * 8 * 4);
 });
-
-test('decodeGeoHash', () => {
-  expect(decodeGeoHash('drm3btev3e86')).toEqual({
-    latitude: [41.119999922811985, 41.12000009045005, 41.12000000663102],
-    longitude: [-71.34000029414892, -71.3399999588728, -71.34000012651086],
-  });
-});

src/plugins/maps_legacy/public/map/decode_geo_hash.ts

@@ -17,58 +17,6 @@
  * under the License.
  */
 
-interface DecodedGeoHash {
-  latitude: number[];
-  longitude: number[];
-}
-
-/**
- * Decodes geohash to object containing
- * top-left and bottom-right corners of
- * rectangle and center point.
- */
-export function decodeGeoHash(geohash: string): DecodedGeoHash {
-  const BITS: number[] = [16, 8, 4, 2, 1];
-  const BASE32: string = '0123456789bcdefghjkmnpqrstuvwxyz';
-  let isEven: boolean = true;
-  const lat: number[] = [];
-  const lon: number[] = [];
-  lat[0] = -90.0;
-  lat[1] = 90.0;
-  lon[0] = -180.0;
-  lon[1] = 180.0;
-  let latErr: number = 90.0;
-  let lonErr: number = 180.0;
-  [...geohash].forEach((nextChar: string) => {
-    const cd: number = BASE32.indexOf(nextChar);
-    for (let j = 0; j < 5; j++) {
-      const mask: number = BITS[j];
-      if (isEven) {
-        lonErr = lonErr /= 2;
-        refineInterval(lon, cd, mask);
-      } else {
-        latErr = latErr /= 2;
-        refineInterval(lat, cd, mask);
-      }
-      isEven = !isEven;
-    }
-  });
-  lat[2] = (lat[0] + lat[1]) / 2;
-  lon[2] = (lon[0] + lon[1]) / 2;
-  return {
-    latitude: lat,
-    longitude: lon,
-  } as DecodedGeoHash;
-}
-
-function refineInterval(interval: number[], cd: number, mask: number) {
-  if (cd & mask) { /* eslint-disable-line */
-    interval[0] = (interval[0] + interval[1]) / 2;
-  } else {
-    interval[1] = (interval[0] + interval[1]) / 2;
-  }
-}
-
 export function geohashColumns(precision: number): number {
   return geohashCells(precision, 0);
 }
@@ -88,32 +36,3 @@ function geohashCells(precision: number, axis: number) {
   }
   return cells;
 }
-
-interface GeoBoundingBoxCoordinate {
-  lat: number;
-  lon: number;
-}
-
-interface GeoBoundingBox {
-  top_left: GeoBoundingBoxCoordinate;
-  bottom_right: GeoBoundingBoxCoordinate;
-}
-
-export function geoContains(collar?: GeoBoundingBox, bounds?: GeoBoundingBox) {
-  if (!bounds || !collar) return false;
-  // test if bounds top_left is outside collar
-  if (bounds.top_left.lat > collar.top_left.lat || bounds.top_left.lon < collar.top_left.lon) {
-    return false;
-  }
-
-  // test if bounds bottom_right is outside collar
-  if (
-    bounds.bottom_right.lat < collar.bottom_right.lat ||
-    bounds.bottom_right.lon > collar.bottom_right.lon
-  ) {
-    return false;
-  }
-
-  // both corners are inside collar so collar contains bounds
-  return true;
-}

src/plugins/maps_legacy/public/map/kibana_map.js

@@ -672,39 +672,31 @@ export class KibanaMap extends EventEmitter {
     }
   }
 
-  persistUiStateForVisualization(visualization) {
+  persistUiStateForVisualization(uiState) {
     function persistMapStateInUiState() {
-      const uiState = visualization.getUiState();
       const centerFromUIState = uiState.get('mapCenter');
       const zoomFromUiState = parseInt(uiState.get('mapZoom'));
 
       if (isNaN(zoomFromUiState) || this.getZoomLevel() !== zoomFromUiState) {
-        visualization.uiStateVal('mapZoom', this.getZoomLevel());
+        uiState.set('mapZoom', this.getZoomLevel());
       }
       const centerFromMap = this.getCenter();
       if (
         !centerFromUIState ||
         centerFromMap.lon !== centerFromUIState[1] ||
         centerFromMap.lat !== centerFromUIState[0]
       ) {
-        visualization.uiStateVal('mapCenter', [centerFromMap.lat, centerFromMap.lon]);
+        uiState.set('mapCenter', [centerFromMap.lat, centerFromMap.lon]);
       }
     }
 
-    this._leafletMap.on('resize', () => {
-      visualization.sessionState.mapBounds = this.getBounds();
-    });
-    this._leafletMap.on('load', () => {
-      visualization.sessionState.mapBounds = this.getBounds();
-    });
     this.on('dragend', persistMapStateInUiState);
     this.on('zoomend', persistMapStateInUiState);
   }
 
-  useUiStateFromVisualization(visualization) {
-    const uiState = visualization.getUiState();
-    const zoomFromUiState = parseInt(uiState.get('mapZoom'));
-    const centerFromUIState = uiState.get('mapCenter');
+  useUiStateFromVisualization(uiState) {
+    const zoomFromUiState = parseInt(uiState?.get('mapZoom'));
+    const centerFromUIState = uiState?.get('mapCenter');
     if (!isNaN(zoomFromUiState)) {
       this.setZoomLevel(zoomFromUiState);
     }

src/plugins/region_map/public/components/index.tsx

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { lazy } from 'react';
+import { IServiceSettings } from 'src/plugins/maps_legacy/public';
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { RegionMapVisParams } from '../region_map_types';
+
+const RegionMapOptions = lazy(() => import('./region_map_options'));
+
+export const createRegionMapOptions = (getServiceSettings: () => Promise<IServiceSettings>) => (
+  props: VisOptionsProps<RegionMapVisParams>
+) => <RegionMapOptions {...props} getServiceSettings={getServiceSettings} />;