[Vis: Default editor] EUIficate coordinate map (tile map) options tab (#42517) (#42671)

* EUIficate tile_map_vis_options * Add basic options * Get rid of vislib_basic_options * Move wms_options directive to region_map * Get rid if TileMapVisParams directive * Update region_map namespaces * Support of injecting of any dependency
2025-04-23 17:28:26 -04:00 · 2019-08-07 16:40:45 +03:00 · 2019-08-07 16:40:45 +03:00 · 4535f2d686
commit 4535f2d686
parent c76b0c18e1
22 changed files with 603 additions and 250 deletions
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/range.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/range.tsx
@ -0,0 +1,50 @@
+/*
+ * 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 from 'react';
+import { EuiFormRow, EuiRange } from '@elastic/eui';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
+
+interface RangeOptionProps {
+  label: string;
+  max: number;
+  min: number;
+  paramName: string;
+  step?: number;
+  value: string | number;
+  setValue: VisOptionsSetValue;
+}
+
+function RangeOption({ label, max, min, step, paramName, value, setValue }: RangeOptionProps) {
+  return (
+    <EuiFormRow label={label} fullWidth={true} compressed>
+      <EuiRange
+        fullWidth
+        showValue
+        max={max}
+        min={min}
+        step={step}
+        value={value}
+        onChange={ev => setValue(paramName, ev.target.value)}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { RangeOption };
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/switch.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/switch.tsx
@ -19,7 +19,7 @@

 import React from 'react';

-import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
+import { EuiSwitch, EuiToolTip } from '@elastic/eui';
 import { VisOptionsSetValue } from 'ui/vis/editors/default';

 interface SwitchOptionProps {
@ -42,7 +42,7 @@ function SwitchOption({
  setValue,
 }: SwitchOptionProps) {
  return (
-    <EuiFormRow fullWidth={true} compressed>
+    <div className="visEditorSidebar__switchOptionFormRow">
      <EuiToolTip content={tooltip} delay="long" position="right">
        <EuiSwitch
          label={label}
@ -52,7 +52,7 @@ function SwitchOption({
          onChange={ev => setValue(paramName, ev.target.checked)}
        />
      </EuiToolTip>
-    </EuiFormRow>
+    </div>
  );
 }

--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/text_input.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/text_input.tsx
@ -17,22 +17,30 @@
 * under the License.
 */

-import { once } from 'lodash';
-// @ts-ignore
-import { uiModules } from 'ui/modules';
+import React from 'react';
+import { EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';

-import 'ui/vis/map/service_settings';
-import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
+interface TextInputOptionProps {
+  helpText?: React.ReactNode;
+  label?: React.ReactNode;
+  paramName: string;
+  value?: string;
+  setValue: VisOptionsSetValue;
+}

-// @ts-ignore
-import { TileMapVisParams } from '../editors/tile_map_vis_params';
-// @ts-ignore
-import { WmsOptions } from '../editors/wms_options';
+function TextInputOption({
+  helpText,
+  label,
+  paramName,
+  value = '',
+  setValue,
+}: TextInputOptionProps) {
+  return (
+    <EuiFormRow helpText={helpText} label={label} fullWidth compressed>
+      <EuiFieldText fullWidth value={value} onChange={ev => setValue(paramName, ev.target.value)} />
+    </EuiFormRow>
+  );
+}

-/** @internal */
-export const initTileMapLegacyModule = once((): void => {
-  uiModules
-    .get('kibana/tile_map', ['kibana'])
-    .directive('tileMapVisParams', TileMapVisParams)
-    .directive('wmsOptions', WmsOptions);
-});
+export { TextInputOption };
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html
@ -1,31 +0,0 @@
-<div class="form-group">
-  <div class="visEditorSidebar__formRow">
-    <label
-      class="visEditorSidebar__formLabel"
-      for="visualizeBasicSettingsLegendPosition"
-      i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.legendPositionLabel"
-      i18n-default-message="Legend position"
-    ></label>
-    <div class="visEditorSidebar__formControl">
-      <select
-        id="visualizeBasicSettingsLegendPosition"
-        class="form-control"
-        ng-model="editorState.params.legendPosition"
-        ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
-      >
-      </select>
-    </div>
-  </div>
-
-  <div class="visEditorSidebar__formRow">
-    <label
-      class="visEditorSidebar__formLabel"
-      for="showTooltip"
-      i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.showTooltipLabel"
-      i18n-default-message="Show tooltip"
-    ></label>
-    <div class="visEditorSidebar__formControl">
-      <input id="showTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
-    </div>
-  </div>
-</div>
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/with_injected_dependencies.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/with_injected_dependencies.tsx
@ -17,14 +17,19 @@
 * under the License.
 */

-import { uiModules } from 'ui/modules';
-import vislibBasicOptionsTemplate from './vislib_basic_options.html';
-const module = uiModules.get('kibana');
+import React from 'react';
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import { ServiceSettings } from 'ui/vis/map/service_settings';

-module.directive('vislibBasicOptions', function () {
-  return {
-    restrict: 'E',
-    template: vislibBasicOptionsTemplate,
-    replace: true
-  };
-});
+export interface InjectedDependencies {
+  serviceSettings: ServiceSettings;
+}
+
+export type ExtendedVisOptionsProps = VisOptionsProps & InjectedDependencies;
+
+const withInjectedDependencies = (
+  Component: React.ComponentType<ExtendedVisOptionsProps>,
+  dependencies: InjectedDependencies
+) => (props: VisOptionsProps) => <Component {...props} {...dependencies} />;
+
+export { withInjectedDependencies };
--- a/src/legacy/core_plugins/region_map/public/shim/region_map_legacy_module.ts
+++ b/src/legacy/core_plugins/region_map/public/shim/region_map_legacy_module.ts
@ -22,16 +22,18 @@ import { once } from 'lodash';
 import { uiModules } from 'ui/modules';

 import 'ui/vis/map/service_settings';
-import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';

 // @ts-ignore
 import { RegionMapVisParams } from '../region_map_vis_params';
+// @ts-ignore
+import { WmsOptions } from '../wms_options';

 /** @internal */
 export const initTileMapLegacyModule = once((): void => {
  uiModules
    // TODO: Region Map Plugin uses wmsOptions directive from the kibana/tile_map module.
    // in future this reference should be removed
-    .get('kibana/region_map', ['kibana', 'kibana/tile_map'])
-    .directive('regionMapVisParams', RegionMapVisParams);
+    .get('kibana/region_map', ['kibana'])
+    .directive('regionMapVisParams', RegionMapVisParams)
+    .directive('wmsOptions', WmsOptions);
 });
--- a/src/legacy/core_plugins/region_map/public/wms_options/index.js
+++ b/src/legacy/core_plugins/region_map/public/wms_options/index.js
@ -30,7 +30,7 @@ export function WmsOptions(serviceSettings) {
      collections: '=',
    },
    link: function ($scope) {
-      $scope.wmsLinkText = i18n.translate('tileMap.wmsOptions.wmsLinkText', { defaultMessage: 'here' });
+      $scope.wmsLinkText = i18n.translate('regionMap.wmsOptions.wmsLinkText', { defaultMessage: 'here' });

      new Promise((resolve, reject) => {
        serviceSettings
--- a/src/legacy/core_plugins/region_map/public/wms_options/wms_options.html
+++ b/src/legacy/core_plugins/region_map/public/wms_options/wms_options.html
@ -4,8 +4,8 @@
  <div class="visEditorSidebar__section">
    <div class="visEditorSidebar__sectionTitle">
      <div
-        i18n-id="tileMap.wmsOptions.baseLayerSettingsTitle"
-        i18n-default-message="Base Layer Settings"
+        i18n-id="regionMap.wmsOptions.baseLayerSettingsTitle"
+        i18n-default-message="Base layer settings"
      ></div>
    </div>

@ -14,7 +14,7 @@
      <label
        class="visEditorSidebar__formLabel"
        for="tmsLayers"
-        i18n-id="tileMap.wmsOptions.layersLabel"
+        i18n-id="regionMap.wmsOptions.layersLabel"
        i18n-default-message="Layers"
      ></label>
      <div class="visEditorSidebar__formControl">
@ -31,7 +31,7 @@
      <label
        class="visEditorSidebar__formLabel"
        for="wmsCompliantMapServer"
-        i18n-id="tileMap.wmsOptions.wmsMapServerLabel"
+        i18n-id="regionMap.wmsOptions.wmsMapServerLabel"
        i18n-default-message="WMS map server"
      ></label>

@ -44,7 +44,7 @@
        >
        &nbsp;
        <icon-tip
-          content="::'tileMap.wmsOptions.useWMSCompliantMapTileServerTip' | i18n: {
+          content="::'regionMap.wmsOptions.useWMSCompliantMapTileServerTip' | i18n: {
            defaultMessage: 'Use WMS compliant map tile server. For advanced users only.'
          }"
          position="'right'"
@ -55,7 +55,7 @@
    <div ng-show="options.enabled">
      <div class="form-group">
        <p
-          i18n-id="tileMap.wmsOptions.wmsDescription"
+          i18n-id="regionMap.wmsOptions.wmsDescription"
          i18n-default-message="WMS is an OGC standard for map image services. For more information, go {wmsLink}."
          i18n-values="{
            html_wmsLink:  '<a href=\'http://www.opengeospatial.org/standards/wms\'>' + wmsLinkText + '</a>'
@ -64,11 +64,11 @@
 		<br>
        <label>
          <span
-            i18n-id="tileMap.wmsOptions.wmsUrlLabel"
+            i18n-id="regionMap.wmsOptions.wmsUrlLabel"
            i18n-default-message="WMS url*"
          ></span>
          <icon-tip
-            content="::'tileMap.wmsOptions.urlOfWMSWebServiceTip' | i18n: {
+            content="::'regionMap.wmsOptions.urlOfWMSWebServiceTip' | i18n: {
              defaultMessage: 'The URL of the WMS web service'
            }"
            position="'right'"
@ -82,11 +82,11 @@
      <div class="form-group">
        <label>
          <span
-            i18n-id="tileMap.wmsOptions.wmsLayersLabel"
+            i18n-id="regionMap.wmsOptions.wmsLayersLabel"
            i18n-default-message="WMS layers*"
          ></span>
          <icon-tip
-            content="::'tileMap.wmsOptions.listOfLayersToUseTip' | i18n: {
+            content="::'regionMap.wmsOptions.listOfLayersToUseTip' | i18n: {
              defaultMessage: 'A comma separated list of layers to use'
            }"
            position="'right'"
@ -101,11 +101,11 @@
      <div class="form-group">
        <label>
          <span
-            i18n-id="tileMap.wmsOptions.wmsVersionLabel"
+            i18n-id="regionMap.wmsOptions.wmsVersionLabel"
            i18n-default-message="WMS version*"
          ></span>
          <icon-tip
-            content="::'tileMap.wmsOptions.versionOfWMSserverSupportsTip' | i18n: {
+            content="::'regionMap.wmsOptions.versionOfWMSserverSupportsTip' | i18n: {
              defaultMessage: 'The version of WMS the server supports'
            }"
            position="'right'"
@ -119,11 +119,11 @@
      <div class="form-group">
        <label>
          <span
-            i18n-id="tileMap.wmsOptions.wmsFormatLabel"
+            i18n-id="regionMap.wmsOptions.wmsFormatLabel"
            i18n-default-message="WMS format*"
          ></span>
          <icon-tip
-            content="::'tileMap.wmsOptions.imageFormatToUseTip' | i18n: {
+            content="::'regionMap.wmsOptions.imageFormatToUseTip' | i18n: {
              defaultMessage: 'Usually image/png or image/jpeg. Use png if the server will return transparent layers.'
            }"
            position="'right'"
@ -137,11 +137,11 @@
      <div class="form-group">
        <label>
          <span
-            i18n-id="tileMap.wmsOptions.wmsAttributionLabel"
+            i18n-id="regionMap.wmsOptions.wmsAttributionLabel"
            i18n-default-message="WMS attribution"
          ></span>
          <icon-tip
-            content="::'tileMap.wmsOptions.attributionStringTip' | i18n: {
+            content="::'regionMap.wmsOptions.attributionStringTip' | i18n: {
              defaultMessage: 'Attribution string for the lower right corner'
            }"
            position="'right'"
@ -155,11 +155,11 @@
      <div class="form-group">
        <label>
          <span
-            i18n-id="tileMap.wmsOptions.wmsStylesLabel"
+            i18n-id="regionMap.wmsOptions.wmsStylesLabel"
            i18n-default-message="WMS styles*"
          ></span>
          <icon-tip
-            content="::'tileMap.wmsOptions.wmsServerSupportedStylesListTip' | i18n: {
+            content="::'regionMap.wmsOptions.wmsServerSupportedStylesListTip' | i18n: {
              defaultMessage: 'A comma separated list of WMS server supported styles to use. Blank in most cases.'
            }"
            position="'right'"
@ -171,7 +171,7 @@
      </div>

      <p
-        i18n-id="tileMap.wmsOptions.mapLoadFailDescription"
+        i18n-id="regionMap.wmsOptions.mapLoadFailDescription"
        i18n-default-message="* if this parameter is incorrect, maps will fail to load."
      ></p>

--- a/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx
+++ b/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx
@ -0,0 +1,101 @@
+/*
+ * 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, { useEffect } from 'react';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { ExtendedVisOptionsProps } from '../../../kbn_vislib_vis_types/public/utils/with_injected_dependencies';
+import { SelectOption } from '../../../kbn_vislib_vis_types/public/controls/select';
+import { RangeOption } from '../../../kbn_vislib_vis_types/public/controls/range';
+import { BasicOptions } from '../../../kbn_vislib_vis_types/public/controls/basic_options';
+import { SwitchOption } from '../../../kbn_vislib_vis_types/public/controls/switch';
+import { WmsOptions } from './wms_options';
+
+function TileMapOptions(props: ExtendedVisOptionsProps) {
+  const { stateParams, setValue, vis } = props;
+
+  useEffect(() => {
+    if (!stateParams.mapType) {
+      setValue('mapType', vis.type.editorConfig.collections.mapTypes[0]);
+    }
+  }, []);
+
+  return (
+    <>
+      <EuiPanel paddingSize="s">
+        <SelectOption
+          label={i18n.translate('tileMap.visParams.mapTypeLabel', {
+            defaultMessage: 'Map type',
+          })}
+          options={vis.type.editorConfig.collections.mapTypes}
+          paramName="mapType"
+          value={stateParams.mapType}
+          setValue={setValue}
+        />
+
+        <SelectOption
+          label={i18n.translate('tileMap.visParams.colorSchemaLabel', {
+            defaultMessage: 'Color schema',
+          })}
+          options={vis.type.editorConfig.collections.colorSchemas}
+          paramName="colorSchema"
+          value={stateParams.colorSchema}
+          setValue={setValue}
+        />
+
+        {stateParams.mapType === 'Heatmap' && (
+          <RangeOption
+            label={i18n.translate('tileMap.visParams.clusterSizeLabel', {
+              defaultMessage: 'Cluster size',
+            })}
+            max={3}
+            min={1}
+            paramName="heatClusterSize"
+            step={0.1}
+            value={stateParams.heatClusterSize}
+            setValue={setValue}
+          />
+        )}
+
+        <BasicOptions {...props} />
+
+        <SwitchOption
+          disabled={!vis.type.visConfig.canDesaturate}
+          label={i18n.translate('tileMap.visParams.desaturateTilesLabel', {
+            defaultMessage: 'Desaturate tiles',
+          })}
+          tooltip={i18n.translate('tileMap.visParams.reduceVibrancyOfTileColorsTip', {
+            defaultMessage:
+              'Reduce the vibrancy of tile colors. This does not work in any version of Internet Explorer.',
+          })}
+          paramName="isDesaturated"
+          value={stateParams.isDesaturated}
+          setValue={setValue}
+        />
+      </EuiPanel>
+
+      <EuiSpacer size="s" />
+
+      <WmsOptions {...props} />
+    </>
+  );
+}
+
+export { TileMapOptions };
--- a/src/legacy/core_plugins/tile_map/public/components/wms_internal_options.tsx
+++ b/src/legacy/core_plugins/tile_map/public/components/wms_internal_options.tsx
@ -0,0 +1,218 @@
+/*
+ * 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 from 'react';
+import { EuiLink, EuiSpacer, EuiText, EuiScreenReaderOnly } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
+import { TmsLayer } from 'ui/vis/map/service_settings';
+import { TextInputOption } from '../../../kbn_vislib_vis_types/public/controls/text_input';
+
+interface WmsOptions {
+  enabled: boolean;
+  url: string;
+  selectedTmsLayer: TmsLayer;
+  options: {
+    attribution: string;
+    format: string;
+    layers: string;
+    styles: string;
+    version: string;
+  };
+}
+
+interface WmsInternalOptions {
+  wms: WmsOptions;
+  setValue: VisOptionsSetValue;
+}
+
+function WmsInternalOptions({ wms, setValue }: WmsInternalOptions) {
+  const wmsLink = (
+    <EuiLink href="http://www.opengeospatial.org/standards/wms" target="_blank">
+      <FormattedMessage id="tileMap.wmsOptions.wmsLinkText" defaultMessage="OGC standard" />
+    </EuiLink>
+  );
+  const footnoteText = (
+    <>
+      <span aria-hidden="true">*</span>
+      <FormattedMessage
+        id="tileMap.wmsOptions.mapLoadFailDescription"
+        defaultMessage="If this parameter is incorrect, maps will fail to load."
+      />
+    </>
+  );
+  const footnote = (
+    <EuiScreenReaderOnly>
+      <p>{footnoteText}</p>
+    </EuiScreenReaderOnly>
+  );
+
+  const setOptions: VisOptionsSetValue = (paramName, value) =>
+    setValue('options', {
+      ...wms.options,
+      [paramName]: value,
+    });
+
+  return (
+    <>
+      <EuiSpacer size="xs" />
+      <EuiText size="xs">
+        <FormattedMessage
+          id="tileMap.wmsOptions.wmsDescription"
+          defaultMessage="WMS is an {wmsLink} for map image services."
+          values={{ wmsLink }}
+        />
+      </EuiText>
+      <EuiSpacer size="m" />
+
+      <TextInputOption
+        label={
+          <>
+            <FormattedMessage id="tileMap.wmsOptions.wmsUrlLabel" defaultMessage="WMS url" />
+            <span aria-hidden="true">*</span>
+          </>
+        }
+        helpText={
+          <>
+            <FormattedMessage
+              id="tileMap.wmsOptions.urlOfWMSWebServiceTip"
+              defaultMessage="The URL of the WMS web service."
+            />
+            {footnote}
+          </>
+        }
+        paramName="url"
+        value={wms.url}
+        setValue={setValue}
+      />
+
+      <TextInputOption
+        label={
+          <>
+            <FormattedMessage id="tileMap.wmsOptions.wmsLayersLabel" defaultMessage="WMS layers" />
+            <span aria-hidden="true">*</span>
+          </>
+        }
+        helpText={
+          <>
+            <FormattedMessage
+              id="tileMap.wmsOptions.listOfLayersToUseTip"
+              defaultMessage="A comma separated list of layers to use."
+            />
+            {footnote}
+          </>
+        }
+        paramName="layers"
+        value={wms.options.layers}
+        setValue={setOptions}
+      />
+
+      <TextInputOption
+        label={
+          <>
+            <FormattedMessage
+              id="tileMap.wmsOptions.wmsVersionLabel"
+              defaultMessage="WMS version"
+            />
+            <span aria-hidden="true">*</span>
+          </>
+        }
+        helpText={
+          <>
+            <FormattedMessage
+              id="tileMap.wmsOptions.versionOfWMSserverSupportsTip"
+              defaultMessage="The version of WMS the server supports."
+            />
+            {footnote}
+          </>
+        }
+        paramName="version"
+        value={wms.options.version}
+        setValue={setOptions}
+      />
+
+      <TextInputOption
+        label={
+          <>
+            <FormattedMessage id="tileMap.wmsOptions.wmsFormatLabel" defaultMessage="WMS format" />
+            <span aria-hidden="true">*</span>
+          </>
+        }
+        helpText={
+          <>
+            <FormattedMessage
+              id="tileMap.wmsOptions.imageFormatToUseTip"
+              defaultMessage="Usually image/png or image/jpeg. Use png if the server will return transparent layers."
+            />
+            {footnote}
+          </>
+        }
+        paramName="format"
+        value={wms.options.format}
+        setValue={setOptions}
+      />
+
+      <TextInputOption
+        label={
+          <FormattedMessage
+            id="tileMap.wmsOptions.wmsAttributionLabel"
+            defaultMessage="WMS attribution"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            id="tileMap.wmsOptions.attributionStringTip"
+            defaultMessage="Attribution string for the lower right corner."
+          />
+        }
+        paramName="attribution"
+        value={wms.options.attribution}
+        setValue={setOptions}
+      />
+
+      <TextInputOption
+        label={
+          <>
+            <FormattedMessage id="tileMap.wmsOptions.wmsStylesLabel" defaultMessage="WMS styles" />
+            <span aria-hidden="true">*</span>
+          </>
+        }
+        helpText={
+          <>
+            <FormattedMessage
+              id="tileMap.wmsOptions.wmsServerSupportedStylesListTip"
+              defaultMessage="A comma separated list of WMS server supported styles to use. Blank in most cases."
+            />
+            {footnote}
+          </>
+        }
+        paramName="styles"
+        value={wms.options.styles}
+        setValue={setOptions}
+      />
+
+      <EuiText size="xs">
+        <p aria-hidden="true">{footnoteText}</p>
+      </EuiText>
+    </>
+  );
+}
+
+export { WmsInternalOptions };
--- a/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx
+++ b/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx
@ -0,0 +1,110 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { toastNotifications } from 'ui/notify';
+import { VisOptionsSetValue } from 'ui/vis/editors/default';
+import { TmsLayer } from 'ui/vis/map/service_settings';
+import { ExtendedVisOptionsProps } from '../../../kbn_vislib_vis_types/public/utils/with_injected_dependencies';
+import { SelectOption } from '../../../kbn_vislib_vis_types/public/controls/select';
+import { SwitchOption } from '../../../kbn_vislib_vis_types/public/controls/switch';
+import { WmsInternalOptions } from './wms_internal_options';
+
+const mapLayerForOption = ({ id }: TmsLayer) => ({ text: id });
+
+function WmsOptions({ serviceSettings, stateParams, setValue, vis }: ExtendedVisOptionsProps) {
+  const { wms } = stateParams;
+  const { tmsLayers } = vis.type.editorConfig.collections;
+  const [tmsLayerOptions, setTmsLayersOptions] = useState(
+    vis.type.editorConfig.collections.tmsLayers.map(mapLayerForOption)
+  );
+
+  const setWmsOption: VisOptionsSetValue = (paramName, value) =>
+    setValue('wms', {
+      ...wms,
+      [paramName]: value,
+    });
+
+  useEffect(() => {
+    serviceSettings
+      .getTMSServices()
+      .then(services => {
+        const newBaseLayers = [
+          ...tmsLayers,
+          ...services.filter(service => !tmsLayers.some(({ id }: TmsLayer) => service.id === id)),
+        ];
+
+        setTmsLayersOptions(newBaseLayers.map(mapLayerForOption));
+
+        if (!wms.selectedTmsLayer && newBaseLayers.length) {
+          setWmsOption('selectedTmsLayer', newBaseLayers[0]);
+        }
+      })
+      .catch((error: Error) => toastNotifications.addWarning(error.message));
+  }, []);
+
+  return (
+    <EuiPanel paddingSize="s">
+      <EuiTitle size="xs">
+        <div>
+          <FormattedMessage
+            id="tileMap.wmsOptions.baseLayerSettingsTitle"
+            defaultMessage="Base layer settings"
+          />
+        </div>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+
+      <SwitchOption
+        label={i18n.translate('tileMap.wmsOptions.wmsMapServerLabel', {
+          defaultMessage: 'WMS map server',
+        })}
+        tooltip={i18n.translate('tileMap.wmsOptions.useWMSCompliantMapTileServerTip', {
+          defaultMessage: 'Use WMS compliant map tile server. For advanced users only.',
+        })}
+        paramName="enabled"
+        value={wms.enabled}
+        setValue={setWmsOption}
+      />
+
+      {!wms.enabled && (
+        <>
+          <EuiSpacer size="s" />
+          <SelectOption
+            label={i18n.translate('tileMap.wmsOptions.layersLabel', {
+              defaultMessage: 'Layers',
+            })}
+            options={tmsLayerOptions}
+            paramName="selectedTmsLayer"
+            value={wms.selectedTmsLayer && wms.selectedTmsLayer.id}
+            setValue={setWmsOption}
+          />
+        </>
+      )}
+
+      {wms.enabled && <WmsInternalOptions wms={wms} setValue={setWmsOption} />}
+    </EuiPanel>
+  );
+}
+
+export { WmsOptions };
--- a/src/legacy/core_plugins/tile_map/public/editors/tile_map_vis_params.html
+++ b/src/legacy/core_plugins/tile_map/public/editors/tile_map_vis_params.html
@ -1,92 +0,0 @@
-<!-- vis type specific options -->
-<div class="visEditorSidebar__section">
-  <div class="form-group">
-    <label
-      for="coordinateMapOptionsMapType"
-      i18n-id="tileMap.visParams.mapTypeLabel"
-      i18n-default-message="Map type"
-    ></label>
-      <select
-        id="coordinateMapOptionsMapType"
-        name="agg"
-      class="form-control"
-      ng-model="editorState.params.mapType"
-      ng-init="editorState.params.mapType || vis.type.editorConfig.collections.mapTypes[0]"
-      ng-options="mapType as mapType for mapType in vis.type.editorConfig.collections.mapTypes"
-      >
-    </select>
-  </div>
-
-
-  <div class="visEditorSidebar__formRow" >
-    <label
-      class="visEditorSidebar__formLabel"
-      for="colorSchema"
-      i18n-id="tileMap.visParams.colorSchemaLabel"
-      i18n-default-message="Color Schema"
-    ></label>
-    <div class="visEditorSidebar__formControl">
-      <select
-        id="colorSchema"
-        class="kuiSelect visEditorSidebar__select"
-        ng-model="editorState.params.colorSchema"
-        ng-options="mode.id as mode.label for mode in vis.type.editorConfig.collections.colorSchemas"
-      ></select>
-    </div>
-  </div>
-
-  <div ng-if="editorState.params.mapType === 'Heatmap'" class="form-group">
-    <div>
-      <label
-        i18n-id="tileMap.visParams.clusterSizeLabel"
-        i18n-default-message="Cluster size"
-      ></label>
-      <div class="visEditorAgg__formRow--flex">
-        <input
-          name="heatClusterSize"
-          ng-model="editorState.params.heatClusterSize"
-          required
-          class="form-control"
-          type="range"
-          min="1.0"
-          max="3.0"
-          step="0.1"
-          >
-        <div class="visEditorAgg__sliderValue">
-          {{editorState.params.heatClusterSize}}
-        </div>
-      </div>
-    </div>
-
-  </div>
-
-  <vislib-basic-options></vislib-basic-options>
-
-  <div class="visEditorSidebar__formRow">
-    <label
-      class="visEditorSidebar__formLabel"
-      for="desaturateMapTiles"
-      i18n-id="tileMap.visParams.desaturateTilesLabel"
-      i18n-default-message="Desaturate tiles"
-    ></label>
-
-    <div class="visEditorSidebar__formControl">
-      <input
-        type="checkbox"
-        id="desaturateMapTiles"
-        name="isDesaturated"
-        ng-disabled="!vis.type.visConfig.canDesaturate"
-        ng-model="editorState.params.isDesaturated"
-      >
-      &nbsp;
-      <icon-tip
-        content="::'tileMap.visParams.reduceVibrancyOfTileColorsTip' | i18n: {
-          defaultMessage: 'Reduce the vibrancy of tile colors. This does not work in any version of Internet Explorer.'
-        }"
-        position="'right'"
-      ></icon-tip>
-    </div>
-  </div>
-</div>
-
-<wms-options options="editorState.params.wms" collections="vis.type.editorConfig.collections"></wms-options>
--- a/src/legacy/core_plugins/tile_map/public/shim/legacy_dependencies_plugin.ts
+++ b/src/legacy/core_plugins/tile_map/public/shim/legacy_dependencies_plugin.ts
@ -18,8 +18,8 @@
 */

 import chrome from 'ui/chrome';
+import 'ui/vis/map/service_settings';
 import { CoreStart, Plugin } from 'kibana/public';
-import { initTileMapLegacyModule } from './tile_map_legacy_module';

 /** @internal */
 export interface LegacyDependenciesPluginSetup {
@ -30,8 +30,6 @@ export interface LegacyDependenciesPluginSetup {
 export class LegacyDependenciesPlugin
  implements Plugin<Promise<LegacyDependenciesPluginSetup>, void> {
  public async setup() {
-    initTileMapLegacyModule();
-
    const $injector = await chrome.dangerouslyGetActiveInjector();

    return {
--- a/src/legacy/core_plugins/tile_map/public/tile_map_type.js
+++ b/src/legacy/core_plugins/tile_map/public/tile_map_type.js
@ -27,10 +27,12 @@ import { convertToGeoJson } from 'ui/vis/map/convert_to_geojson';

 import { createTileMapVisualization } from './tile_map_visualization';
 import { visFactory } from '../../visualizations/public';
+import { TileMapOptions } from './components/tile_map_options';
+import { withInjectedDependencies } from '../../kbn_vislib_vis_types/public/utils/with_injected_dependencies';

 export function createTileMapTypeDefinition(dependencies) {
  const CoordinateMapsVisualization = createTileMapVisualization(dependencies);
-  const { uiSettings } = dependencies;
+  const { uiSettings, serviceSettings } = dependencies;

  return visFactory.createBaseVisualization({
    name: 'tile_map',
@ -61,37 +63,57 @@ export function createTileMapTypeDefinition(dependencies) {
    responseHandler: convertToGeoJson,
    editorConfig: {
      collections: {
-        colorSchemas: Object.values(truncatedColorMaps).map(value => ({ id: value.id, label: value.label })),
+        colorSchemas: Object.values(truncatedColorMaps).map(({ id, label }) => ({ value: id, text: label })),
        legendPositions: [{
          value: 'bottomleft',
-          text: i18n.translate('tileMap.vis.map.editorConfig.legendPositions.bottomLeftText', {
-            defaultMessage: 'bottom left',
+          text: i18n.translate('tileMap.vis.editorConfig.legendPositions.bottomLeftText', {
+            defaultMessage: 'Bottom left',
          }),
        }, {
          value: 'bottomright',
-          text: i18n.translate('tileMap.vis.map.editorConfig.legendPositions.bottomRightText', {
-            defaultMessage: 'bottom right',
+          text: i18n.translate('tileMap.vis.editorConfig.legendPositions.bottomRightText', {
+            defaultMessage: 'Bottom right',
          }),
        }, {
          value: 'topleft',
-          text: i18n.translate('tileMap.vis.map.editorConfig.legendPositions.topLeftText', {
-            defaultMessage: 'top left',
+          text: i18n.translate('tileMap.vis.editorConfig.legendPositions.topLeftText', {
+            defaultMessage: 'Top left',
          }),
        }, {
          value: 'topright',
-          text: i18n.translate('tileMap.vis.map.editorConfig.legendPositions.topRightText', {
-            defaultMessage: 'top right',
+          text: i18n.translate('tileMap.vis.editorConfig.legendPositions.topRightText', {
+            defaultMessage: 'Top right',
          }),
        }],
        mapTypes: [
-          'Scaled Circle Markers',
-          'Shaded Circle Markers',
-          'Shaded Geohash Grid',
-          'Heatmap',
+          {
+            value: 'Scaled Circle Markers',
+            text: i18n.translate('tileMap.vis.editorConfig.mapTypes.scaledCircleMarkersText', {
+              defaultMessage: 'Scaled circle markers',
+            }),
+          },
+          {
+            value: 'Shaded Circle Markers',
+            text: i18n.translate('tileMap.vis.editorConfig.mapTypes.shadedCircleMarkersText', {
+              defaultMessage: 'Shaded circle markers',
+            }),
+          },
+          {
+            value: 'Shaded Geohash Grid',
+            text: i18n.translate('tileMap.vis.editorConfig.mapTypes.shadedGeohashGridText', {
+              defaultMessage: 'Shaded geohash grid',
+            }),
+          },
+          {
+            value: 'Heatmap',
+            text: i18n.translate('tileMap.vis.editorConfig.mapTypes.heatmapText', {
+              defaultMessage: 'Heatmap',
+            }),
+          },
        ],
        tmsLayers: [],
      },
-      optionsTemplate: '<tile-map-vis-params></tile-map-vis-params>',
+      optionsTemplate: withInjectedDependencies(TileMapOptions, { serviceSettings }),
      schemas: new Schemas([
        {
          group: 'metrics',
--- a/src/legacy/ui/public/vis/editors/default/_agg.scss
+++ b/src/legacy/ui/public/vis/editors/default/_agg.scss
@ -4,7 +4,7 @@

 .visEditorAgg__rangesTable {
  td {
-    padding: 0 $vis-editor-agg-editor-spacing $vis-editor-agg-editor-spacing 0;
+    padding: 0 $euiSizeS $euiSizeS 0;

    &:last-child {
      padding-right: 0;
@ -12,29 +12,10 @@
  }
 }

-.visEditorAgg__formRow--flex {
-  display: flex;
-
-  > * {
-    flex: 1 1 auto;
-    margin-right: $vis-editor-agg-editor-spacing;
-
-    &:last-child {
-      margin-right: 0px;
-    }
-  }
-}
-
-.visEditorAgg__sliderValue {
-  @include euiFontSize;
-  align-self: center;
-  margin: 0 0 0 $vis-editor-agg-editor-spacing;
-}
-
 .visEditorAgg__subAgg {
  border: $euiBorderThick;
  border-radius: $euiBorderRadius;
  background-color: transparent;
-  margin: $vis-editor-agg-editor-spacing 0;
-  padding: $vis-editor-agg-editor-spacing;
+  margin: $euiSizeS 0;
+  padding: $euiSizeS;
 }
--- a/src/legacy/ui/public/vis/editors/default/_index.scss
+++ b/src/legacy/ui/public/vis/editors/default/_index.scss
@ -1,6 +1,5 @@
 $vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
 $vis-editor-sidebar-min-width: 350px;
-$vis-editor-agg-editor-spacing: $euiSizeS;
 $vis-editor-resizer-width: $euiSizeM;

 // Main layout
--- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss
+++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@ -227,3 +227,8 @@
    color: $euiColorDarkShade;
  }
 }
+
+.visEditorSidebar__switchOptionFormRow {
+  margin-top: $euiSizeS;
+  padding-bottom: $euiSizeS;
+}
--- a/src/legacy/ui/public/vis/editors/default/vis_options_props.tsx
+++ b/src/legacy/ui/public/vis/editors/default/vis_options_props.tsx
@ -20,6 +20,7 @@
 import { Vis, VisParams } from 'ui/vis';

 export type VisOptionsSetValue = (paramName: string, value: unknown) => void;
+
 export interface VisOptionsProps {
  stateParams: VisParams;
  vis: Vis;
--- a/src/legacy/core_plugins/tile_map/public/editors/tile_map_vis_params.js
+++ b/src/legacy/core_plugins/tile_map/public/editors/tile_map_vis_params.js
@ -17,11 +17,14 @@
 * under the License.
 */

-import tileMapTemplate from './tile_map_vis_params.html';
-
-export function TileMapVisParams() {
-  return {
-    restrict: 'E',
-    template: tileMapTemplate,
-  };
+export interface TmsLayer {
+  id: string;
+  origin: string;
+  minZoom: string;
+  maxZoom: number;
+  attribution: string;
+}
+
+export interface ServiceSettings {
+  getTMSServices(): Promise<TmsLayer[]>;
 }
--- a/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js
+++ b/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js
@ -17,7 +17,6 @@
 * under the License.
 */

-import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
 import 'plugins/kbn_vislib_vis_types/controls/point_series_options';
 import 'plugins/kbn_vislib_vis_types/controls/line_interpolation_option';
 import 'plugins/kbn_vislib_vis_types/controls/heatmap_options';
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -2787,16 +2787,11 @@
    "tileMap.geohashLayer.mapTitle": "{mapType} マップタイプが認識されません",
    "tileMap.tooltipFormatter.latitudeLabel": "緯度",
    "tileMap.tooltipFormatter.longitudeLabel": "経度",
-    "tileMap.vis.map.editorConfig.legendPositions.bottomLeftText": "左下",
-    "tileMap.vis.map.editorConfig.legendPositions.bottomRightText": "右下",
-    "tileMap.vis.map.editorConfig.legendPositions.topLeftText": "左上",
-    "tileMap.vis.map.editorConfig.legendPositions.topRightText": "右上",
    "tileMap.vis.map.editorConfig.schemas.geoCoordinatesTitle": "座標",
    "tileMap.vis.map.editorConfig.schemas.metricTitle": "値",
    "tileMap.vis.mapDescription": "マップ上に緯度と経度の座標を表示します。",
    "tileMap.vis.mapTitle": "座標マップ",
    "tileMap.visParams.clusterSizeLabel": "クラスターサイズ",
-    "tileMap.visParams.colorSchemaLabel": "カラースキーム",
    "tileMap.visParams.desaturateTilesLabel": "タイルを不飽和化",
    "tileMap.visParams.mapTypeLabel": "マップタイプ",
    "tileMap.visParams.reduceVibrancyOfTileColorsTip": "色の鮮明度を下げます。この機能は Internet Explorer ではバージョンにかかわらず利用できません。",
@ -2805,20 +2800,12 @@
    "tileMap.wmsOptions.imageFormatToUseTip": "通常画像/png または画像/jpeg です。サーバーが透明レイヤーを返す場合は png を使用します。",
    "tileMap.wmsOptions.layersLabel": "レイヤー",
    "tileMap.wmsOptions.listOfLayersToUseTip": "使用するレイヤーのコンマ区切りのリストです",
-    "tileMap.wmsOptions.mapLoadFailDescription": "* このパラメーターが正しくないと、マップが正常に読み込まれません。",
    "tileMap.wmsOptions.urlOfWMSWebServiceTip": "WMS web サービスの URL です",
    "tileMap.wmsOptions.useWMSCompliantMapTileServerTip": "WMS 対応のマップタイルサーバーを使用します。上級者向けです。",
    "tileMap.wmsOptions.versionOfWMSserverSupportsTip": "サーバーがサポートする WMS のバージョンです",
    "tileMap.wmsOptions.wmsAttributionLabel": "WMS 属性",
-    "tileMap.wmsOptions.wmsDescription": "WMS は、マップイメージサービスの OGC 基準です。詳細は {wmsLink} をご覧ください。",
-    "tileMap.wmsOptions.wmsFormatLabel": "WMS フォーマット*",
-    "tileMap.wmsOptions.wmsLayersLabel": "WMS レイヤー*",
-    "tileMap.wmsOptions.wmsLinkText": "こちら",
    "tileMap.wmsOptions.wmsMapServerLabel": "WMS マップサーバー",
    "tileMap.wmsOptions.wmsServerSupportedStylesListTip": "WMS サーバーがサポートしている使用スタイルのコンマ区切りのリストです。大抵は空白のままです。",
-    "tileMap.wmsOptions.wmsStylesLabel": "WMS スタイル*",
-    "tileMap.wmsOptions.wmsUrlLabel": "WMS url*",
-    "tileMap.wmsOptions.wmsVersionLabel": "WMS バージョン*",
    "timelion.badge.readOnly.text": "読み込み専用",
    "timelion.badge.readOnly.tooltip": "Timelion シートを保存できません",
    "timelion.breadcrumbs.create": "作成",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -2788,16 +2788,11 @@
    "tileMap.geohashLayer.mapTitle": "{mapType} 地图类型无法识别",
    "tileMap.tooltipFormatter.latitudeLabel": "纬度",
    "tileMap.tooltipFormatter.longitudeLabel": "经度",
-    "tileMap.vis.map.editorConfig.legendPositions.bottomLeftText": "左下方",
-    "tileMap.vis.map.editorConfig.legendPositions.bottomRightText": "右下方",
-    "tileMap.vis.map.editorConfig.legendPositions.topLeftText": "左上方",
-    "tileMap.vis.map.editorConfig.legendPositions.topRightText": "右上方",
    "tileMap.vis.map.editorConfig.schemas.geoCoordinatesTitle": "地理坐标",
    "tileMap.vis.map.editorConfig.schemas.metricTitle": "值",
    "tileMap.vis.mapDescription": "在地图上绘制纬度和经度坐标",
    "tileMap.vis.mapTitle": "坐标地图",
    "tileMap.visParams.clusterSizeLabel": "集群大小",
-    "tileMap.visParams.colorSchemaLabel": "颜色模式",
    "tileMap.visParams.desaturateTilesLabel": "降低平铺地图饱和度",
    "tileMap.visParams.mapTypeLabel": "地图类型",
    "tileMap.visParams.reduceVibrancyOfTileColorsTip": "降低平铺地图颜色的亮度。此设置在任何版本的 IE 浏览器中均不起作用。",
@ -2806,20 +2801,12 @@
    "tileMap.wmsOptions.imageFormatToUseTip": "通常为 image/png 或 image/jpeg。如果服务器返回透明图层，则使用 png。",
    "tileMap.wmsOptions.layersLabel": "图层",
    "tileMap.wmsOptions.listOfLayersToUseTip": "要使用的图层逗号分隔列表",
-    "tileMap.wmsOptions.mapLoadFailDescription": "* 如果此参数不正确，将无法加载地图。",
    "tileMap.wmsOptions.urlOfWMSWebServiceTip": "WMS Web 服务的 URL",
    "tileMap.wmsOptions.useWMSCompliantMapTileServerTip": "使用符合 WMS 规范的平铺地图服务器。仅适用于高级用户。",
    "tileMap.wmsOptions.versionOfWMSserverSupportsTip": "服务器支持的 WMS 版本",
    "tileMap.wmsOptions.wmsAttributionLabel": "WMS 属性",
-    "tileMap.wmsOptions.wmsDescription": "WMS 是针对地图图像服务的 OGC 标准。有关更多信息，请转到 {wmsLink}。",
-    "tileMap.wmsOptions.wmsFormatLabel": "WMS 格式*",
-    "tileMap.wmsOptions.wmsLayersLabel": "WMS 图层*",
-    "tileMap.wmsOptions.wmsLinkText": "此处",
    "tileMap.wmsOptions.wmsMapServerLabel": "WMS 地图服务器",
    "tileMap.wmsOptions.wmsServerSupportedStylesListTip": "要使用的以逗号分隔的 WMS 服务器支持的样式列表。在大部分情况下为空。",
-    "tileMap.wmsOptions.wmsStylesLabel": "WMS 样式*",
-    "tileMap.wmsOptions.wmsUrlLabel": "WMS url*",
-    "tileMap.wmsOptions.wmsVersionLabel": "WMS 版本*",
    "timelion.badge.readOnly.text": "只读",
    "timelion.badge.readOnly.tooltip": "无法保存 Timelion 工作表",
    "timelion.breadcrumbs.create": "创建",