[Maps] Use EMS vector tiles (#42846)

elastic · Aug 16, 2019 · d0e4849 · d0e4849
1 parent b92bb8c
commit d0e4849
Show file tree

Hide file tree

Showing 28 changed files with 12,110 additions and 153 deletions.
diff --git a/src/legacy/core_plugins/tile_map/common/tms_service.js b/src/legacy/core_plugins/tile_map/common/tms_service.js
@@ -23,32 +23,63 @@ import { ORIGIN } from './origin';
 export class TMSService {
 
   _getRasterStyleJson = _.once(async () => {
-    const rasterUrl = this._getRasterStyleUrl();
+    const rasterUrl = this._getStyleUrlForLocale('raster');
     const url = this._proxyPath + rasterUrl;
     return this._emsClient.getManifest(this._emsClient.extendUrlWithParams(url));
   });
 
+  _getVectorStyleJsonRaw = _.once(async () => {
+    const vectorUrl = this._getStyleUrlForLocale('vector');
+    const url = this._proxyPath + vectorUrl;
+    const vectorJson =  await this._emsClient.getManifest(this._emsClient.extendUrlWithParams(url));
+    return { ...vectorJson };
+  });
+
+  _getVectorStyleJsonInlined = _.once(async () => {
+    const vectorJson = await this._getVectorStyleJsonRaw();
+    const inlinedSources = {};
+    for (const sourceName of Object.getOwnPropertyNames(vectorJson.sources)) {
+      const sourceUrl = this._proxyPath + vectorJson.sources[sourceName].url;
+      const extendedUrl =  this._emsClient.extendUrlWithParams(sourceUrl);
+      const sourceJson = await this._emsClient.getManifest(extendedUrl);
+
+      const extendedTileUrls = sourceJson.tiles.map(tileUrl => {
+        const url = this._proxyPath + tileUrl;
+        return this._emsClient.extendUrlWithParams(url);
+      });
+      inlinedSources[sourceName] = {
+        type: 'vector',
+        ...sourceJson,
+        tiles: extendedTileUrls
+      };
+    }
+    return {
+      ...vectorJson,
+      sources: inlinedSources,
+      sprite: await this._getSpriteSheetRootPath(),
+    };
+  });
+
   constructor(config, emsClient, proxyPath) {
     this._config = config;
     this._emsClient = emsClient;
     this._proxyPath = proxyPath;
   }
 
-  _getRasterFormats(locale) {
-    return this._config.formats.filter(format => {
-      return format.locale === locale && format.format === 'raster';
-    });
+  _getFormats(formatType, locale) {
+    return this._config.formats.filter(format => format.locale === locale && format.format === formatType);
   }
 
-  _getRasterStyleUrl() {
-    let rasterFormats = this._getRasterFormats(this._emsClient.getLocale());
-    if (!rasterFormats.length) {//fallback to default locale
-      rasterFormats = this._getRasterFormats(this._emsClient.getDefaultLocale());
+  _getStyleUrlForLocale(formatType) {
+    let vectorFormats = this._getFormats(formatType, this._emsClient.getLocale());
+    if (!vectorFormats.length) {//fallback to default locale
+      vectorFormats = this._getFormats(formatType, this._emsClient.getDefaultLocale());
     }
-    if (!rasterFormats.length) {
-      throw new Error(`Cannot find raster tile layer for locale ${this._emsClient.getLocale()} or ${this._emsClient.getDefaultLocale()}`);
+    if (!vectorFormats.length) {
+      // eslint-disable-next-line max-len
+      throw new Error(`Cannot find ${formatType} tile layer for locale ${this._emsClient.getLocale()} or ${this._emsClient.getDefaultLocale()}`);
     }
-    const defaultStyle = rasterFormats[0];
+    const defaultStyle = vectorFormats[0];
     if (defaultStyle && defaultStyle.hasOwnProperty('url')) {
       return defaultStyle.url;
     }
@@ -64,6 +95,52 @@ export class TMSService {
     return this._emsClient.extendUrlWithParams(directUrl);
   }
 
+  async getUrlTemplateForVector(sourceId) {
+    const tileJson = await this._getVectorStyleJsonInlined();
+    if (!tileJson.sources[sourceId] || !tileJson.sources[sourceId].tiles) {
+      return null;
+    }
+    const directUrl = this._proxyPath + tileJson.sources[sourceId].tiles[0];
+    return this._emsClient.extendUrlWithParams(directUrl);
+  }
+
+  async getVectorStyleSheet() {
+    return await this._getVectorStyleJsonInlined();
+  }
+
+  async getVectorStyleSheetRaw() {
+    return await this._getVectorStyleJsonRaw();
+  }
+
+  async getSpriteSheetMeta(isRetina = false) {
+    const metaUrl = await this.getSpriteSheetJsonPath(isRetina);
+    const spritePngs =  await this.getSpriteSheetPngPath(isRetina);
+    const metaUrlExtended = this._emsClient.extendUrlWithParams(metaUrl);
+    const jsonMeta = await this._emsClient.getManifest(metaUrlExtended);
+    return {
+      png: spritePngs,
+      json: jsonMeta
+    };
+  }
+
+  async _getSpriteSheetRootPath() {
+    const vectorStyleJson = await this._getVectorStyleJsonRaw();
+    return this._proxyPath + vectorStyleJson.sprite;
+  }
+
+  async getSpriteSheetJsonPath(isRetina = false) {
+    const spriteSheetRootPath = await this._getSpriteSheetRootPath();
+    const suffix = isRetina ? '@2x' : '';
+    return  spriteSheetRootPath + suffix + '.json';
+  }
+
+
+  async getSpriteSheetPngPath(isRetina = false) {
+    const spriteSheetRootPath = await this._getSpriteSheetRootPath();
+    const suffix = isRetina ? '@2x' : '';
+    return spriteSheetRootPath + suffix + '.png';
+  }
+
   getDisplayName() {
     return this._emsClient.getValueInLanguage(this._config.name);
   }

diff --git a/src/legacy/server/config/schema.js b/src/legacy/server/config/schema.js
@@ -239,6 +239,7 @@ export default () => Joi.object({
     }).default(),
     manifestServiceUrl: Joi.string().default('https://catalogue.maps.elastic.co/v7.2/manifest'),
     emsLandingPageUrl: Joi.string().default('https://maps.elastic.co/v7.2'),
+    emsFontLibraryUrl: Joi.string().default('https://tiles.maps.elastic.co/fonts/{fontstack}/{range}.pbf'),
     emsTileLayerId: Joi.object({
       bright: Joi.string().default('road_map'),
       desaturated: Joi.string().default('road_map_desaturated'),
@@ -247,7 +248,7 @@ export default () => Joi.object({
       bright: 'road_map',
       desaturated: 'road_map_desaturated',
       dark: 'dark_map',
-    }),
+    })
   }).default(),
 
   i18n: Joi.object({

diff --git a/src/legacy/ui/public/vis/__tests__/map/ems_client.js b/src/legacy/ui/public/vis/__tests__/map/ems_client.js
@@ -20,6 +20,7 @@
 import expect from '@kbn/expect';
 import { getEMSClient } from './ems_client_util';
 import EMS_STYLE_BRIGHT_PROXIED  from './ems_mocks/sample_style_bright_proxied.json';
+import EMS_STYLE_BRIGHT_VECTOR_PROXIED  from './ems_mocks/sample_style_bright_vector_proxied.json';
 
 describe('ems_client', () => {
 
@@ -188,7 +189,6 @@ describe('ems_client', () => {
 
   it('should prepend proxypath', async () => {
 
-
     const emsClient = getEMSClient({
       proxyPath: 'http://proxy.com/foobar',
       manifestServiceUrl: 'http://proxy.com/foobar/manifest'
@@ -211,6 +211,47 @@ describe('ems_client', () => {
 
   });
 
+  it('should retrieve vectorstylesheet with all sources inlined)', async () => {
+
+    const emsClient = getEMSClient({});
+
+    const tmsServices = await emsClient.getTMSServices();
+    expect(tmsServices.length).to.be(3);
+    const tmsService = tmsServices[0];
+
+    const styleSheet = await tmsService.getVectorStyleSheet();
+
+    expect(styleSheet.layers.length).to.be(111);
+    expect(styleSheet.sprite).to.be('https://tiles.maps.elastic.co/styles/osm-bright/sprite');
+    expect(styleSheet.sources.openmaptiles.tiles.length).to.be(1);
+    expect(styleSheet.sources.openmaptiles.tiles[0]).to.be('https://tiles.maps.elastic.co/data/v3/{z}/{x}/{y}.pbf?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=7.x.x');
+
+  });
+
+  it('should retrieve vectorstylesheet with all sources inlined) (proxy)', async () => {
+
+    const emsClient = getEMSClient({
+      proxyPath: 'http://proxy.com/foobar',
+      manifestServiceUrl: 'http://proxy.com/foobar/manifest'
+    });
+
+    const tmsServices = await emsClient.getTMSServices();
+    expect(tmsServices.length).to.be(1);
+    const tmsService = tmsServices[0];
+
+    tmsService._getVectorStyleJsonRaw = () => {
+      return EMS_STYLE_BRIGHT_VECTOR_PROXIED;
+    };
+
+    const styleSheet = await tmsService.getVectorStyleSheet();
+
+    expect(styleSheet.layers.length).to.be(111);
+    expect(styleSheet.sprite).to.be('http://proxy.com/foobar/styles/osm-bright/sprite');
+    expect(styleSheet.sources.openmaptiles.tiles.length).to.be(1);
+    expect(styleSheet.sources.openmaptiles.tiles[0]).to.be('http://proxy.com/foobar/data/v3/{z}/{x}/{y}.pbf?elastic_tile_service_tos=agree&my_app_name=kibana&my_app_version=7.x.x');
+
+  });
+
 
 });
 
diff --git a/src/legacy/ui/public/vis/__tests__/map/ems_client_util.js b/src/legacy/ui/public/vis/__tests__/map/ems_client_util.js
@@ -27,6 +27,10 @@ import EMS_STYLE_ROAD_MAP_BRIGHT from './ems_mocks/sample_style_bright';
 import EMS_STYLE_ROAD_MAP_DESATURATED from './ems_mocks/sample_style_desaturated';
 import EMS_STYLE_DARK_MAP from './ems_mocks/sample_style_dark';
 
+import EMS_STYLE_ROAD_MAP_BRIGHT_VECTOR from './ems_mocks/sample_style_bright_vector';
+import EMS_STYLE_ROAD_MAP_BRIGHT_VECTOR_SOURCE from './ems_mocks/sample_style_bright_vector_source';
+import EMS_STYLE_ROAD_MAP_BRIGHT_VECTOR_SOURCE_PROXIED from './ems_mocks/sample_style_bright_vector_source_proxied';
+
 import EMS_CATALOGUE_PROXIED from './ems_mocks/sample_manifest_proxied.json';
 import EMS_FILES_PROXIED from './ems_mocks/sample_files_proxied.json';
 import EMS_TILES_PROXIED from './ems_mocks/sample_tiles_proxied.json';
@@ -64,6 +68,16 @@ export function getEMSClient(options = {}) {
       return EMS_FILES_PROXIED;
     } else if (url.startsWith('http://proxy.com/foobar/tiles')) {
       return EMS_TILES_PROXIED;
+    } else if (url.startsWith('https://vector-style.foobar/styles')) {
+      if (url.includes('osm-bright')) {
+        return EMS_STYLE_ROAD_MAP_BRIGHT_VECTOR;
+      }
+    } else if (url.startsWith('https://tiles.maps.elastic.co/data/v3.json')) {
+      return EMS_STYLE_ROAD_MAP_BRIGHT_VECTOR_SOURCE;
+    } else if (url.startsWith('http://proxy.com/foobar/data/v3.json')) {
+      return EMS_STYLE_ROAD_MAP_BRIGHT_VECTOR_SOURCE_PROXIED;
+    } else {
+      throw new Error(`url unexecpted: ${url}`);
     }
   };
   return emsClient;