@elastic/ems-client 8.2.0 → 8.3.2

package/target/web/tms_service.js

@@ -1,5 +1,13 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -44,11 +52,22 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  */
 import _ from 'lodash';
 import { AbstractEmsService } from './ems_service';
+import { colorizeColor } from './utils';
 export var TMSService = /*#__PURE__*/function (_AbstractEmsService) {
   _inherits(TMSService, _AbstractEmsService);
 
   var _super = _createSuper(TMSService);
 
+  /*
+  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
+  */
   function TMSService(config, emsClient, proxyPath) {
     var _this;
 
@@ -230,6 +249,11 @@ export var TMSService = /*#__PURE__*/function (_AbstractEmsService) {
     _this._config = config;
     return _this;
   }
+  /*
+  This method returns an array of objects with the layers and the new
+  layout['text-field'] to apply using map.setLayoutProperty
+  */
+
 
   _createClass(TMSService, [{
     key: "getDefaultRasterStyle",
@@ -572,28 +596,71 @@ export var TMSService = /*#__PURE__*/function (_AbstractEmsService) {
     key: "getMinZoom",
     value: function () {
       var _getMinZoom = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
-        var tileJson;
+        var format,
+            _ref4,
+            sources,
+            _ref6,
+            minzoom,
+            _args12 = arguments;
+
         return regeneratorRuntime.wrap(function _callee12$(_context12) {
           while (1) {
             switch (_context12.prev = _context12.next) {
               case 0:
-                _context12.next = 2;
+                format = _args12.length > 0 && _args12[0] !== undefined ? _args12[0] : 'vector';
+                _context12.t0 = format;
+                _context12.next = _context12.t0 === 'vector' ? 4 : _context12.t0 === 'raster' ? 12 : 20;
+                break;
+
+              case 4:
+                _context12.next = 6;
+                return this._getVectorStyleJsonInlined();
+
+              case 6:
+                _context12.t1 = _context12.sent;
+
+                if (_context12.t1) {
+                  _context12.next = 9;
+                  break;
+                }
+
+                _context12.t1 = {
+                  sources: {}
+                };
+
+              case 9:
+                _ref4 = _context12.t1;
+                sources = _ref4.sources;
+                return _context12.abrupt("return", Math.min.apply(Math, _toConsumableArray(Object.values(sources).map(function (_ref5) {
+                  var minzoom = _ref5.minzoom;
+                  return minzoom;
+                }).filter(function (minzoom) {
+                  return Number.isFinite(minzoom);
+                }))));
+
+              case 12:
+                _context12.next = 14;
                 return this._getRasterStyleJson();
 
-              case 2:
-                tileJson = _context12.sent;
+              case 14:
+                _context12.t2 = _context12.sent;
 
-                if (!tileJson) {
-                  _context12.next = 7;
+                if (_context12.t2) {
+                  _context12.next = 17;
                   break;
                 }
 
-                return _context12.abrupt("return", tileJson.minzoom);
+                _context12.t2 = {};
 
-              case 7:
+              case 17:
+                _ref6 = _context12.t2;
+                minzoom = _ref6.minzoom;
+                return _context12.abrupt("return", minzoom);
+
+              case 20:
                 return _context12.abrupt("return");
 
-              case 8:
+              case 21:
               case "end":
                 return _context12.stop();
             }
@@ -611,28 +678,71 @@ export var TMSService = /*#__PURE__*/function (_AbstractEmsService) {
     key: "getMaxZoom",
     value: function () {
       var _getMaxZoom = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
-        var tileJson;
+        var format,
+            _ref7,
+            sources,
+            _ref9,
+            maxzoom,
+            _args13 = arguments;
+
         return regeneratorRuntime.wrap(function _callee13$(_context13) {
           while (1) {
             switch (_context13.prev = _context13.next) {
               case 0:
-                _context13.next = 2;
+                format = _args13.length > 0 && _args13[0] !== undefined ? _args13[0] : 'vector';
+                _context13.t0 = format;
+                _context13.next = _context13.t0 === 'vector' ? 4 : _context13.t0 === 'raster' ? 12 : 20;
+                break;
+
+              case 4:
+                _context13.next = 6;
+                return this._getVectorStyleJsonInlined();
+
+              case 6:
+                _context13.t1 = _context13.sent;
+
+                if (_context13.t1) {
+                  _context13.next = 9;
+                  break;
+                }
+
+                _context13.t1 = {
+                  sources: {}
+                };
+
+              case 9:
+                _ref7 = _context13.t1;
+                sources = _ref7.sources;
+                return _context13.abrupt("return", Math.max.apply(Math, _toConsumableArray(Object.values(sources).map(function (_ref8) {
+                  var maxzoom = _ref8.maxzoom;
+                  return maxzoom;
+                }).filter(function (maxzoom) {
+                  return Number.isFinite(maxzoom);
+                }))));
+
+              case 12:
+                _context13.next = 14;
                 return this._getRasterStyleJson();
 
-              case 2:
-                tileJson = _context13.sent;
+              case 14:
+                _context13.t2 = _context13.sent;
 
-                if (!tileJson) {
-                  _context13.next = 7;
+                if (_context13.t2) {
+                  _context13.next = 17;
                   break;
                 }
 
-                return _context13.abrupt("return", tileJson.maxzoom);
+                _context13.t2 = {};
 
-              case 7:
+              case 17:
+                _ref9 = _context13.t2;
+                maxzoom = _ref9.maxzoom;
+                return _context13.abrupt("return", maxzoom);
+
+              case 20:
                 return _context13.abrupt("return");
 
-              case 8:
+              case 21:
               case "end":
                 return _context13.stop();
             }
@@ -767,7 +877,264 @@ export var TMSService = /*#__PURE__*/function (_AbstractEmsService) {
 
       return _getUrlTemplateForGlyphs;
     }()
+  }], [{
+    key: "transformLanguageProperty",
+    value: function transformLanguageProperty(layer, lang) {
+      var supportedLang = this.SupportedLanguages.find(function (l) {
+        return l.key === lang;
+      });
+
+      if (layer.type === 'symbol' && layer.layout !== undefined && supportedLang !== undefined) {
+        var omtLang = supportedLang.omt;
+        var 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
+    */
+
+  }, {
+    key: "transformColorProperties",
+    value: function transformColorProperties(layer, color, operation, percentage) {
+      if (['background', 'fill', 'line', 'symbol'].indexOf(layer.type) !== -1 && layer.paint) {
+        var paint = layer.paint;
+
+        if (layer.type === 'symbol' && Object.keys(paint).length === 0) {
+          paint['text-color'] = 'rgb(0,0,0)';
+        }
+
+        var types = Object.keys(paint).filter(function (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(function (type) {
+          var paintColor = paint[type];
+          return {
+            property: type,
+            color: paintColor ? colorizeColor(paintColor, color, operation, percentage) : paintColor
+          };
+        });
+      } else {
+        return [];
+      }
+    }
+  }, {
+    key: "_getTextField",
+    value: function _getTextField(label, lang) {
+      // Capture {name:xx} labels
+      var labelMatch = label.match(/\{name([:_])(.{2})\}/);
+
+      if (labelMatch && labelMatch[1] != lang) {
+        // Only apply if the languages are different
+        return ['coalesce', ['get', "name:".concat(lang)], ['get', "name".concat(labelMatch[1]).concat(labelMatch[2])]];
+      } else if (label.includes('latin') && label.includes('nonlatin')) {
+        // Capture the common pattern {name:latin}\n{name:nonlatin}
+        return ['coalesce', ['get', "name:".concat(lang)], ['concat', ['get', 'name:latin'], '\n', ['get', 'name:nonlatin']]];
+      } // If no case is found, return the input label
+
+
+      return label;
+    }
   }]);
 
   return TMSService;
-}(AbstractEmsService);
+}(AbstractEmsService);
+
+_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/web/utils.js

@@ -1,9 +1,18 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import chroma from 'chroma-js';
 
 /**
  * Resolves a target URL path relative to the host.
@@ -25,4 +34,58 @@ export 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') {
+    var modifiedColor = func(paintColor);
+    return "rgba(".concat(modifiedColor.rgba().join(','), ")");
+  } else if (_typeof(paintColor) == 'object' && 'stops' in paintColor && Array.isArray(paintColor === null || paintColor === void 0 ? void 0 : paintColor.stops)) {
+    var stops = paintColor['stops'].map(function (stop) {
+      var newColor = transformColor(stop[1], func);
+      return [stop[0], newColor];
+    });
+
+    var newPaintColor = _objectSpread(_objectSpread({}, paintColor), stops);
+
+    return newPaintColor;
+  } else return paintColor;
+}
+/*
+This is the function used to generate the current EMS desaturated roadmap
+*/
+
+
+export function desaturateColor(paintColor) {
+  return transformColor(paintColor, function (color) {
+    return chroma(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
+*/
+
+export function colorizeColor(sourceColor, destColor) {
+  var operation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'screen';
+  var percentage = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.5;
+  return transformColor(sourceColor, function (color) {
+    if (operation !== 'mix') {
+      return chroma.blend(chroma(color), destColor, operation);
+    } else {
+      return chroma.mix(chroma(color), destColor, percentage);
+    }
+  });
 }

package/test/ems_client.test.ts

@@ -52,8 +52,15 @@ it('should get the tile service', async () => {
     'https://tiles.foobar/raster/styles/osm-bright/{z}/{x}/{y}.png?elastic_tile_service_tos=agree&my_app_name=tester&my_app_version=7.x.x'
   );
 
-  expect(await tileService.getMinZoom()).toBe(0);
-  expect(await tileService.getMaxZoom()).toBe(10);
+  expect(await tileService.getUrlTemplateForVector('openmaptiles')).toBe(
+    'https://tiles.foobar/data/v3/{z}/{x}/{y}.pbf?elastic_tile_service_tos=agree&my_app_name=tester&my_app_version=7.x.x'
+  );
+
+  expect(await tileService.getMinZoom('raster')).toBe(0);
+  expect(await tileService.getMaxZoom('raster')).toBe(10);
+
+  expect(await tileService.getMinZoom('vector')).toBe(3);
+  expect(await tileService.getMaxZoom('vector')).toBe(15);
   expect(tileService.hasId('road_map')).toBe(true);
 });
 
@@ -73,8 +80,8 @@ it('tile service- localized (fallback)', async () => {
     'https://tiles.foobar/raster/styles/osm-bright/{z}/{x}/{y}.png?elastic_tile_service_tos=agree&my_app_name=tester&my_app_version=7.x.x'
   );
 
-  expect(await tileService.getMinZoom()).toBe(0);
-  expect(await tileService.getMaxZoom()).toBe(10);
+  expect(await tileService.getMinZoom('raster')).toBe(0);
+  expect(await tileService.getMaxZoom('raster')).toBe(10);
   expect(tileService.hasId('road_map')).toBe(true);
 });
 

package/test/ems_client_colour.test.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { LayerSpecification } from 'maplibre-gl';
+import { TMSService } from '../src';
+import { mlLayerTypes } from './ems_client_util';
+import chroma from 'chroma-js';
+
+function chroma2css(color: chroma.Color): string {
+  return `rgba(${color.rgba().join(',')})`;
+}
+
+describe('Transform colours', () => {
+  it('should return an empty array for non symbol layers without any paint property to update', () => {
+    mlLayerTypes
+      .filter((l) => l != 'symbol')
+      .forEach((type) => {
+        const layer = {
+          id: 'layer',
+          type,
+          layout: {},
+        } as LayerSpecification;
+        expect(TMSService.transformColorProperties(layer, '#FF0000', 'burn', 0)).toEqual([]);
+      });
+  });
+
+  it('should return an empty array for non symbol layer with an empty paint property', () => {
+    const layer = {
+      id: 'layer',
+      type: 'fill',
+      paint: {},
+    } as LayerSpecification;
+
+    expect(TMSService.transformColorProperties(layer, '#FF0000', 'lighten', 0)).toEqual([]);
+  });
+
+  it('should return a text-color for symbol layers without a paint property', () => {
+    const inColor = chroma('#D36086');
+    const textColor = chroma('rgba(0,0,0,1)');
+    const inOp = 'lighten';
+    const outColor = chroma.blend(textColor, inColor, inOp);
+
+    const transform = TMSService.transformColorProperties;
+
+    const layerWithTextColor = {
+      id: 'layer',
+      type: 'symbol',
+      paint: {
+        'text-color': chroma2css(textColor),
+      },
+    } as LayerSpecification;
+
+    const layerWithoutTextColor = {
+      id: 'layer',
+      type: 'symbol',
+      paint: {},
+    } as LayerSpecification;
+
+    const resultWithTextColor = transform(layerWithTextColor, inColor.hex('rgba'), inOp, 0);
+    const resultWithoutTextColor = transform(layerWithoutTextColor, inColor.hex('rgba'), inOp, 0);
+
+    expect(resultWithTextColor).toEqual([
+      {
+        color: chroma2css(outColor),
+        property: 'text-color',
+      },
+    ]);
+    expect(resultWithoutTextColor).toEqual([
+      {
+        color: chroma2css(outColor),
+        property: 'text-color',
+      },
+    ]);
+  });
+});