@elastic/ems-client 8.3.0 → 8.3.1

package/target/node/tms_service.js

@@ -9,11 +9,23 @@ var _lodash = _interopRequireDefault(require("lodash"));
 
 var _ems_service = require("./ems_service");
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 class TMSService extends _ems_service.AbstractEmsService {
+  /*
+  List of supported languages with labels and OMT codes extracted
+  from https://openmaptiles.org/languages
+   Keys are values for i18.locale from Kibana settings
+  and OMT codes for the rest. 
+  */
+
+  /*
+  Suggested default operations for the different EMS styles
+  */
   constructor(config, emsClient, proxyPath) {
     super(config, emsClient, proxyPath);
 
@@ -91,6 +103,70 @@ class TMSService extends _ems_service.AbstractEmsService {
 
     this._config = config;
   }
+  /*
+  This method returns an array of objects with the layers and the new
+  layout['text-field'] to apply using map.setLayoutProperty
+  */
+
+
+  static transformLanguageProperty(layer, lang) {
+    const supportedLang = this.SupportedLanguages.find(l => l.key === lang);
+
+    if (layer.type === 'symbol' && layer.layout !== undefined && supportedLang !== undefined) {
+      const omtLang = supportedLang.omt;
+      const textField = layer.layout['text-field'];
+
+      if (textField && typeof textField === 'string') {
+        return TMSService._getTextField(textField, omtLang);
+      }
+    }
+
+    return;
+  }
+  /*
+  This method returns an array of objects per layer, containing a list of
+  properties with new colors to apply using map.setPaintProperty
+  */
+
+
+  static transformColorProperties(layer, color, operation, percentage) {
+    if (['background', 'fill', 'line', 'symbol'].indexOf(layer.type) !== -1 && layer.paint) {
+      const paint = layer.paint;
+
+      if (layer.type === 'symbol' && Object.keys(paint).length === 0) {
+        paint['text-color'] = 'rgb(0,0,0)';
+      }
+
+      const types = Object.keys(paint).filter(key => {
+        return ['background-color', 'circle-color', 'circle-stroke-color', 'fill-color', 'fill-extrusion-color', 'fill-outline-color', 'icon-color', 'icon-halo-color', 'line-color', 'text-color', 'text-halo-color'].indexOf(key) !== -1;
+      });
+      return types.map(type => {
+        const paintColor = paint[type];
+        return {
+          property: type,
+          color: paintColor ? (0, _utils.colorizeColor)(paintColor, color, operation, percentage) : paintColor
+        };
+      });
+    } else {
+      return [];
+    }
+  }
+
+  static _getTextField(label, lang) {
+    // Capture {name:xx} labels
+    const labelMatch = label.match(/\{name([:_])(.{2})\}/);
+
+    if (labelMatch && labelMatch[1] != lang) {
+      // Only apply if the languages are different
+      return ['coalesce', ['get', `name:${lang}`], ['get', `name${labelMatch[1]}${labelMatch[2]}`]];
+    } else if (label.includes('latin') && label.includes('nonlatin')) {
+      // Capture the common pattern {name:latin}\n{name:nonlatin}
+      return ['coalesce', ['get', `name:${lang}`], ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']]];
+    } // If no case is found, return the input label
+
+
+    return label;
+  }
 
   async getDefaultRasterStyle() {
     const tileJson = await this._getRasterStyleJson();
@@ -185,23 +261,49 @@ class TMSService extends _ems_service.AbstractEmsService {
     return this._emsClient.getValueInLanguage(this._config.name);
   }
 
-  async getMinZoom() {
-    const tileJson = await this._getRasterStyleJson();
+  async getMinZoom(format = 'vector') {
+    switch (format) {
+      case 'vector':
+        const {
+          sources
+        } = (await this._getVectorStyleJsonInlined()) || {
+          sources: {}
+        };
+        return Math.min(...Object.values(sources).map(({
+          minzoom
+        }) => minzoom).filter(minzoom => Number.isFinite(minzoom)));
 
-    if (tileJson) {
-      return tileJson.minzoom;
-    } else {
-      return;
+      case 'raster':
+        const {
+          minzoom
+        } = (await this._getRasterStyleJson()) || {};
+        return minzoom;
+
+      default:
+        return;
     }
   }
 
-  async getMaxZoom() {
-    const tileJson = await this._getRasterStyleJson();
+  async getMaxZoom(format = 'vector') {
+    switch (format) {
+      case 'vector':
+        const {
+          sources
+        } = (await this._getVectorStyleJsonInlined()) || {
+          sources: {}
+        };
+        return Math.max(...Object.values(sources).map(({
+          maxzoom
+        }) => maxzoom).filter(maxzoom => Number.isFinite(maxzoom)));
 
-    if (tileJson) {
-      return tileJson.maxzoom;
-    } else {
-      return;
+      case 'raster':
+        const {
+          maxzoom
+        } = (await this._getRasterStyleJson()) || {};
+        return maxzoom;
+
+      default:
+        return;
     }
   }
 
@@ -263,4 +365,197 @@ class TMSService extends _ems_service.AbstractEmsService {
 
 }
 
-exports.TMSService = TMSService;
+exports.TMSService = TMSService;
+
+_defineProperty(TMSService, "SupportedLanguages", [{
+  key: 'ar',
+  omt: 'ar'
+}, {
+  key: 'az',
+  omt: 'az'
+}, {
+  key: 'be',
+  omt: 'be'
+}, {
+  key: 'bg',
+  omt: 'bg'
+}, {
+  key: 'br',
+  omt: 'br'
+}, {
+  key: 'bs',
+  omt: 'bs'
+}, {
+  key: 'ca',
+  omt: 'ca'
+}, {
+  key: 'cs',
+  omt: 'cs'
+}, {
+  key: 'cy',
+  omt: 'cy'
+}, {
+  key: 'da',
+  omt: 'da'
+}, {
+  key: 'de',
+  omt: 'de'
+}, {
+  key: 'el',
+  omt: 'el'
+}, {
+  key: 'en',
+  omt: 'en'
+}, {
+  key: 'eo',
+  omt: 'eo'
+}, {
+  key: 'es',
+  omt: 'es'
+}, {
+  key: 'et',
+  omt: 'et'
+}, {
+  key: 'fi',
+  omt: 'fi'
+}, {
+  key: 'fr-fr',
+  omt: 'fr'
+}, {
+  key: 'fy',
+  omt: 'fy'
+}, {
+  key: 'ga',
+  omt: 'ga'
+}, {
+  key: 'gd',
+  omt: 'gd'
+}, {
+  key: 'he',
+  omt: 'he'
+}, {
+  key: 'hi-in',
+  omt: 'hi'
+}, {
+  key: 'hr',
+  omt: 'hr'
+}, {
+  key: 'hu',
+  omt: 'hu'
+}, {
+  key: 'hy',
+  omt: 'hy'
+}, {
+  key: 'is',
+  omt: 'is'
+}, {
+  key: 'it',
+  omt: 'it'
+}, {
+  key: 'ja_kana',
+  omt: 'ja_kana'
+}, {
+  key: 'ja_rm',
+  omt: 'ja_rm'
+}, {
+  key: 'ja-jp',
+  omt: 'ja'
+}, {
+  key: 'ka',
+  omt: 'ka'
+}, {
+  key: 'kk',
+  omt: 'kk'
+}, {
+  key: 'kn',
+  omt: 'kn'
+}, {
+  key: 'ko_rm',
+  omt: 'ko_rm'
+}, {
+  key: 'ko',
+  omt: 'ko'
+}, {
+  key: 'la',
+  omt: 'la'
+}, {
+  key: 'lb',
+  omt: 'lb'
+}, {
+  key: 'lt',
+  omt: 'lt'
+}, {
+  key: 'lv',
+  omt: 'lv'
+}, {
+  key: 'mk',
+  omt: 'mk'
+}, {
+  key: 'mt',
+  omt: 'mt'
+}, {
+  key: 'nl',
+  omt: 'nl'
+}, {
+  key: 'no',
+  omt: 'no'
+}, {
+  key: 'pl',
+  omt: 'pl'
+}, {
+  key: 'pt-pt',
+  omt: 'pt'
+}, {
+  key: 'rm',
+  omt: 'rm'
+}, {
+  key: 'ro',
+  omt: 'ro'
+}, {
+  key: 'ru-ru',
+  omt: 'ru'
+}, {
+  key: 'sk',
+  omt: 'sk'
+}, {
+  key: 'sl',
+  omt: 'sl'
+}, {
+  key: 'sq',
+  omt: 'sq'
+}, {
+  key: 'sr-Ltn',
+  omt: 'sr-Ltn'
+}, {
+  key: 'sr',
+  omt: 'sr'
+}, {
+  key: 'sv',
+  omt: 'sv'
+}, {
+  key: 'th',
+  omt: 'th'
+}, {
+  key: 'tr',
+  omt: 'tr'
+}, {
+  key: 'uk',
+  omt: 'uk'
+}, {
+  key: 'zh-cn',
+  omt: 'zh'
+}]);
+
+_defineProperty(TMSService, "colorOperationDefaults", [{
+  style: 'road_map',
+  operation: 'mix',
+  percentage: 0.25
+}, {
+  style: 'road_map_desaturated',
+  operation: 'screen',
+  percentage: 0.25
+}, {
+  style: 'dark_map',
+  operation: 'dodge',
+  percentage: 0.25
+}]);

package/target/node/utils.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.colorizeColor = colorizeColor;
+exports.desaturateColor = desaturateColor;
 exports.toAbsoluteUrl = toAbsoluteUrl;
 
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,4 +38,58 @@ function toAbsoluteUrl(host, path) {
   } else {
     return host + '/' + path;
   }
+}
+/*
+Type with the possible ways to define a color in maplibre
+*/
+
+
+/*
+Function to transform a maplibre color definition by a given function.
+*/
+function transformColor(paintColor, func) {
+  if (typeof paintColor == 'string') {
+    const modifiedColor = func(paintColor);
+    return `rgba(${modifiedColor.rgba().join(',')})`;
+  } else if (typeof paintColor == 'object' && 'stops' in paintColor && Array.isArray(paintColor === null || paintColor === void 0 ? void 0 : paintColor.stops)) {
+    const stops = paintColor['stops'].map(stop => {
+      const newColor = transformColor(stop[1], func);
+      return [stop[0], newColor];
+    });
+    const newPaintColor = { ...paintColor,
+      ...stops
+    };
+    return newPaintColor;
+  } else return paintColor;
+}
+/*
+This is the function used to generate the current EMS desaturated roadmap
+*/
+
+
+function desaturateColor(paintColor) {
+  return transformColor(paintColor, color => {
+    return (0, _chromaJs.default)(color).desaturate(1.1).brighten(0.33);
+  });
+}
+/*
+Blends an original maplibre color definition with a destination
+color. Accepts different blending modes and an additional `mix`
+option that needs a percentage.
+
+More details: 
+
+https://gka.github.io/chroma.js/#chroma-blend
+https://gka.github.io/chroma.js/#chroma-mix
+*/
+
+
+function colorizeColor(sourceColor, destColor, operation = 'screen', percentage = 0.5) {
+  return transformColor(sourceColor, color => {
+    if (operation !== 'mix') {
+      return _chromaJs.default.blend((0, _chromaJs.default)(color), destColor, operation);
+    } else {
+      return _chromaJs.default.mix((0, _chromaJs.default)(color), destColor, percentage);
+    }
+  });
 }

package/target/tms_service.d.ts

@@ -1,6 +1,7 @@
-import { StyleSpecification, VectorSourceSpecification } from 'maplibre-gl';
+import { DataDrivenPropertyValueSpecification, FormattedSpecification, LayerSpecification, StyleSpecification, VectorSourceSpecification } from 'maplibre-gl';
 import { EMSClient, TMSServiceConfig } from './ems_client';
 import { AbstractEmsService } from './ems_service';
+import { layerPaintProperty, blendMode, mbColorDefinition } from './utils';
 export declare type EmsSprite = {
     height: number;
     pixelRatio: number;
@@ -31,11 +32,26 @@ declare type EmsRasterStyle = {
     center: number[];
 };
 export declare class TMSService extends AbstractEmsService {
+    static SupportedLanguages: {
+        key: string;
+        omt: string;
+    }[];
+    static colorOperationDefaults: {
+        style: string;
+        operation: string;
+        percentage: number;
+    }[];
     protected readonly _config: TMSServiceConfig;
     private _getRasterStyleJson;
     private _getVectorStyleJsonRaw;
     private _getVectorStyleJsonInlined;
     constructor(config: TMSServiceConfig, emsClient: EMSClient, proxyPath: string);
+    static transformLanguageProperty(layer: LayerSpecification, lang: string): DataDrivenPropertyValueSpecification<FormattedSpecification> | undefined;
+    static transformColorProperties(layer: LayerSpecification, color: string, operation: blendMode, percentage: number): {
+        property: keyof layerPaintProperty;
+        color: mbColorDefinition | undefined;
+    }[];
+    private static _getTextField;
     getDefaultRasterStyle(): Promise<EmsRasterStyle | undefined>;
     getUrlTemplate(): Promise<string>;
     getUrlTemplateForVector(sourceId: string): Promise<string>;
@@ -48,8 +64,8 @@ export declare class TMSService extends AbstractEmsService {
     getSpriteSheetJsonPath(isRetina?: boolean): Promise<string>;
     getSpriteSheetPngPath(isRetina?: boolean): Promise<string>;
     getDisplayName(): string;
-    getMinZoom(): Promise<number | undefined>;
-    getMaxZoom(): Promise<number | undefined>;
+    getMinZoom(format?: string): Promise<number | undefined>;
+    getMaxZoom(format?: string): Promise<number | undefined>;
     getId(): string;
     hasId(id: string): boolean;
     getApiUrl(): string;

package/target/utils.d.ts

@@ -1,6 +1,25 @@
+import { ChromaStatic } from 'chroma-js';
+import { ColorSpecification, DataDrivenPropertyValueSpecification, PropertyValueSpecification } from 'maplibre-gl';
 /**
  * Resolves a target URL path relative to the host.
  * This is specifically useed by the Kibana proxy re-routing.
  * It also handles trailing slashes in tileApiUrl and fileApiUrl parameters.
  */
 export declare function toAbsoluteUrl(host: string | undefined, path: string): string;
+export declare type mbColorDefinition = PropertyValueSpecification<ColorSpecification> | DataDrivenPropertyValueSpecification<ColorSpecification>;
+export declare type layerPaintProperty = {
+    'background-color'?: PropertyValueSpecification<ColorSpecification>;
+    'circle-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'circle-stroke-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'fill-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'fill-extrusion-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'fill-outline-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'icon-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'icon-halo-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'line-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'text-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+    'text-halo-color'?: DataDrivenPropertyValueSpecification<ColorSpecification>;
+};
+export declare type blendMode = Parameters<ChromaStatic['blend']>[2] | 'mix';
+export declare function desaturateColor(paintColor: mbColorDefinition): mbColorDefinition;
+export declare function colorizeColor(sourceColor: mbColorDefinition, destColor: string, operation?: blendMode, percentage?: number): mbColorDefinition;