[Vega] user should be able to set a specific tilemap service using the mapStyle property (#88440)

* [Vega] user should be able to set a specific tilemap service using the mapStyle property

* Update vega-reference.asciidoc

* fix PR comments

* rename mapStyle -> emsTileServiceId

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

docs/user/dashboard/vega-reference.asciidoc

@@ -251,9 +251,14 @@ experimental[] To enable *Maps*, the graph must specify `type=map` in the host c
       "longitude": -74,   // default 0
       "zoom": 7,          // default 2
 
-      // defaults to "default". Use false to disable base layer.
+      // Defaults to 'true', disables the base map layer.
       "mapStyle": false,
 
+      // When 'mapStyle' is 'undefined' or 'true', sets the EMS-layer for the map.
+      // May either be: "road_map", "road_map_desaturated", "dark_map".
+      // If 'emsTileServiceId' is 'undefined', it falls back to the auto-switch-dark-light behavior.
+      "emsTileServiceId": "road_map",
+
       // default 0
       "minZoom": 5,
 
@@ -261,7 +266,7 @@ experimental[] To enable *Maps*, the graph must specify `type=map` in the host c
       // or 25 when base is disabled
       "maxZoom": 13,
 
-      // defaults to true, shows +/- buttons to zoom in/out
+      // Defaults to 'true', shows +/- buttons to zoom in/out
       "zoomControl": false,
 
       // Defaults to 'false', disables mouse wheel zoom. If set to

src/plugins/vis_type_vega/public/data_model/vega_parser.test.js

@@ -279,7 +279,27 @@ describe('VegaParser._parseMapConfig', () => {
         delayRepaint: true,
         latitude: 0,
         longitude: 0,
-        mapStyle: 'default',
+        mapStyle: true,
+        zoomControl: true,
+        scrollWheelZoom: false,
+      },
+      0
+    )
+  );
+
+  test(
+    'emsTileServiceId',
+    check(
+      {
+        mapStyle: true,
+        emsTileServiceId: 'dark_map',
+      },
+      {
+        delayRepaint: true,
+        latitude: 0,
+        longitude: 0,
+        mapStyle: true,
+        emsTileServiceId: 'dark_map',
         zoomControl: true,
         scrollWheelZoom: false,
       },
@@ -294,7 +314,7 @@ describe('VegaParser._parseMapConfig', () => {
         delayRepaint: true,
         latitude: 0,
         longitude: 0,
-        mapStyle: 'default',
+        mapStyle: true,
         zoomControl: true,
         scrollWheelZoom: false,
         maxBounds: [1, 2, 3, 4],
@@ -303,7 +323,7 @@ describe('VegaParser._parseMapConfig', () => {
         delayRepaint: true,
         latitude: 0,
         longitude: 0,
-        mapStyle: 'default',
+        mapStyle: true,
         zoomControl: true,
         scrollWheelZoom: false,
         maxBounds: [1, 2, 3, 4],
@@ -311,31 +331,6 @@ describe('VegaParser._parseMapConfig', () => {
       0
     )
   );
-
-  test(
-    'warnings',
-    check(
-      {
-        delayRepaint: true,
-        latitude: 0,
-        longitude: 0,
-        zoom: 'abc', // ignored
-        mapStyle: 'abc',
-        zoomControl: 'abc',
-        scrollWheelZoom: 'abc',
-        maxBounds: [2, 3, 4],
-      },
-      {
-        delayRepaint: true,
-        latitude: 0,
-        longitude: 0,
-        mapStyle: 'default',
-        zoomControl: true,
-        scrollWheelZoom: false,
-      },
-      5
-    )
-  );
 });
 
 describe('VegaParser._parseConfig', () => {

src/plugins/vis_type_vega/public/data_model/vega_parser.ts

@@ -465,21 +465,10 @@ The URL is an identifier only. Kibana and your browser will never access this UR
     validate(`minZoom`, true);
     validate(`maxZoom`, true);
 
-    // `false` is a valid value
-    res.mapStyle = this._config?.mapStyle === undefined ? `default` : this._config.mapStyle;
-    if (res.mapStyle !== `default` && res.mapStyle !== false) {
-      this._onWarning(
-        i18n.translate('visTypeVega.vegaParser.mapStyleValueTypeWarningMessage', {
-          defaultMessage:
-            '{mapStyleConfigName} may either be {mapStyleConfigFirstAllowedValue} or {mapStyleConfigSecondAllowedValue}',
-          values: {
-            mapStyleConfigName: 'config.kibana.mapStyle',
-            mapStyleConfigFirstAllowedValue: 'false',
-            mapStyleConfigSecondAllowedValue: '"default"',
-          },
-        })
-      );
-      res.mapStyle = `default`;
+    this._parseBool('mapStyle', res, true);
+
+    if (res.mapStyle) {
+      res.emsTileServiceId = this._config?.emsTileServiceId;
     }
 
     this._parseBool('zoomControl', res, true);

src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.ts

@@ -52,12 +52,14 @@ async function updateVegaView(mapBoxInstance: Map, vegaView: View) {
 
 export class VegaMapView extends VegaBaseView {
   private mapServiceSettings: MapServiceSettings = getMapServiceSettings();
-  private mapStyle = this.getMapStyle();
+  private emsTileLayer = this.getEmsTileLayer();
 
-  private getMapStyle() {
-    const { mapStyle } = this._parser.mapConfig;
+  private getEmsTileLayer() {
+    const { mapStyle, emsTileServiceId } = this._parser.mapConfig;
 
-    return mapStyle === 'default' ? this.mapServiceSettings.defaultTmsLayer() : mapStyle;
+    if (mapStyle) {
+      return emsTileServiceId ?? this.mapServiceSettings.defaultTmsLayer();
+    }
   }
 
   private get shouldShowZoomControl() {
@@ -83,14 +85,14 @@ export class VegaMapView extends VegaBaseView {
       maxZoom: defaultMapConfig.maxZoom,
     };
 
-    if (this.mapStyle && this.mapStyle !== userConfiguredLayerId) {
-      const tmsService = await this.mapServiceSettings.getTmsService(this.mapStyle);
+    if (this.emsTileLayer && this.emsTileLayer !== userConfiguredLayerId) {
+      const tmsService = await this.mapServiceSettings.getTmsService(this.emsTileLayer);
 
       if (!tmsService) {
         this.onWarn(
           i18n.translate('visTypeVega.mapView.mapStyleNotFoundWarningMessage', {
             defaultMessage: '{mapStyleParam} was not found',
-            values: { mapStyleParam: `"mapStyle":${this.mapStyle}` },
+            values: { mapStyleParam: `"emsTileServiceId":${this.emsTileLayer}` },
           })
         );
         return;
@@ -138,7 +140,7 @@ export class VegaMapView extends VegaBaseView {
   }
 
   private initLayers(mapBoxInstance: Map, vegaView: View) {
-    const shouldShowUserConfiguredLayer = this.mapStyle === userConfiguredLayerId;
+    const shouldShowUserConfiguredLayer = this.emsTileLayer === userConfiguredLayerId;
 
     if (shouldShowUserConfiguredLayer) {
       const { url, options } = this.mapServiceSettings.config.tilemap;

x-pack/plugins/translations/translations/ja-JP.json

@@ -4553,7 +4553,6 @@
     "visTypeVega.inspector.vegaAdapter.value": "値",
     "visTypeVega.inspector.vegaDebugLabel": "Vegaデバッグ",
     "visTypeVega.mapView.experimentalMapLayerInfo": "マップレイヤーはまだ実験段階であり、オフィシャルGA機能のサポートSLAが適用されません。フィードバックがある場合は、{githubLink}で問題を報告してください。",
-    "visTypeVega.mapView.mapStyleNotFoundWarningMessage": "{mapStyleParam} が見つかりませんでした",
     "visTypeVega.mapView.minZoomAndMaxZoomHaveBeenSwappedWarningMessage": "{minZoomPropertyName} と {maxZoomPropertyName} が交換されました",
     "visTypeVega.mapView.resettingPropertyToMaxValueWarningMessage": "{name} を {max} にリセットしています",
     "visTypeVega.mapView.resettingPropertyToMinValueWarningMessage": "{name} を {min} にリセットしています",
@@ -4575,7 +4574,6 @@
     "visTypeVega.vegaParser.inputSpecDoesNotSpecifySchemaErrorMessage": "仕様に基づき、{schemaParam}フィールドには、\nVega（{vegaSchemaUrl}を参照）または\nVega-Lite（{vegaLiteSchemaUrl}を参照）の有効なURLを入力する必要があります。\nURLは識別子にすぎません。Kibanaやご使用のブラウザーがこのURLにアクセスすることはありません。",
     "visTypeVega.vegaParser.invalidVegaSpecErrorMessage": "無効な Vega 仕様",
     "visTypeVega.vegaParser.kibanaConfigValueTypeErrorMessage": "{configName} が含まれている場合、オブジェクトでなければなりません",
-    "visTypeVega.vegaParser.mapStyleValueTypeWarningMessage": "{mapStyleConfigName} は {mapStyleConfigFirstAllowedValue} か {mapStyleConfigSecondAllowedValue} のどちらかです",
     "visTypeVega.vegaParser.maxBoundsValueTypeWarningMessage": "{maxBoundsConfigName} は 4 つの数字の配列でなければなりません",
     "visTypeVega.vegaParser.notSupportedUrlTypeErrorMessage": "{urlObject} はサポートされていません",
     "visTypeVega.vegaParser.notValidLibraryVersionForInputSpecWarningMessage": "インプット仕様に {schemaLibrary} {schemaVersion} が使用されていますが、現在のバージョンの {schemaLibrary} は {libraryVersion} です。’",

x-pack/plugins/translations/translations/zh-CN.json

@@ -4558,7 +4558,6 @@
     "visTypeVega.inspector.vegaAdapter.value": "值",
     "visTypeVega.inspector.vegaDebugLabel": "Vega 调试",
     "visTypeVega.mapView.experimentalMapLayerInfo": "地图图层处于试验状态，不受正式发行版功能的支持 SLA 的约束。如欲提供反馈，请在 {githubLink} 中创建问题。",
-    "visTypeVega.mapView.mapStyleNotFoundWarningMessage": "找不到 {mapStyleParam}",
     "visTypeVega.mapView.minZoomAndMaxZoomHaveBeenSwappedWarningMessage": "已互换 {minZoomPropertyName} 和 {maxZoomPropertyName}",
     "visTypeVega.mapView.resettingPropertyToMaxValueWarningMessage": "将 {name} 重置为 {max}",
     "visTypeVega.mapView.resettingPropertyToMinValueWarningMessage": "将 {name} 重置为 {min}",
@@ -4580,7 +4579,6 @@
     "visTypeVega.vegaParser.inputSpecDoesNotSpecifySchemaErrorMessage": "您的规范要求 {schemaParam} 字段包含\nVega（请参见 {vegaSchemaUrl}）或\nVega-Lite（请参见 {vegaLiteSchemaUrl}）的有效 URL。\n该 URL 仅限标识符。Kibana 和您的浏览器将不访问此 URL。",
     "visTypeVega.vegaParser.invalidVegaSpecErrorMessage": "Vega 规范无效",
     "visTypeVega.vegaParser.kibanaConfigValueTypeErrorMessage": "如果存在，{configName} 必须为对象",
-    "visTypeVega.vegaParser.mapStyleValueTypeWarningMessage": "{mapStyleConfigName} 可能为 {mapStyleConfigFirstAllowedValue} 或 {mapStyleConfigSecondAllowedValue}",
     "visTypeVega.vegaParser.maxBoundsValueTypeWarningMessage": "{maxBoundsConfigName} 必须为具有四个数字的数组",
     "visTypeVega.vegaParser.notSupportedUrlTypeErrorMessage": "不支持 {urlObject}",
     "visTypeVega.vegaParser.notValidLibraryVersionForInputSpecWarningMessage": "输入规范使用 {schemaLibrary} {schemaVersion}，但 {schemaLibrary} 的当前版本为 {libraryVersion}。",