@splunk/visualizations 24.7.0 → 25.0.0

package/Map.config.js

@@ -87,24 +87,24 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 51);
+/******/ 	return __webpack_require__(__webpack_require__.s = 50);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 0:
+/******/ ([
+/* 0 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
-
-/***/ 1:
+/* 1 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _toConsumableArray = __webpack_require__(2);
+
 var _defineProperty = __webpack_require__(6);
 
 var __rest = this && this.__rest || function (s, e) {
@@ -123,13 +123,13 @@ var __rest = this && this.__rest || function (s, e) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+exports.insertLayout = exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
 
-var lodash_1 = __webpack_require__(4);
+var lodash_1 = __webpack_require__(5);
 
-var schemaUtils_1 = __webpack_require__(3);
+var schemaUtils_1 = __webpack_require__(4);
 
-var VizBehavior_1 = __webpack_require__(2);
+var VizBehavior_1 = __webpack_require__(3);
 
 var dynamicOptionsDSLType = {
   type: 'string',
@@ -288,31 +288,33 @@ function generatePrecisionValues(numPrecisionValues) {
 }
 
 exports.generatePrecisionValues = generatePrecisionValues;
+/**
+ * insert layout in layout array, return a new layout array instead of updating the original
+ *
+ * @param {EditorLayoutConfig[][]} layout - editor layout
+ * @param {Number} index - the index to insert layout item(s)
+ * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
+ * @returns {EditorLayoutConfig[][]} new editor layout with insertion
+ */
 
-/***/ }),
-
-/***/ 10:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-icons");
-
-/***/ }),
+var insertLayout = function insertLayout(layout, index) {
+  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    layoutItems[_key - 2] = arguments[_key];
+  }
 
-/***/ 11:
-/***/ (function(module, exports) {
+  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
+};
 
-module.exports = require("@splunk/visualization-color-palettes");
+exports.insertLayout = insertLayout;
 
 /***/ }),
-
-/***/ 18:
+/* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
-
-/***/ 2:
+/* 3 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -349,22 +351,25 @@ var VizBehavior;
 })(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
-
-/***/ 3:
+/* 4 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
-
-/***/ 4:
+/* 5 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash");
 
 /***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
-/***/ 5:
+/***/ }),
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -392,8 +397,69 @@ var VizCategory;
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
 /***/ }),
+/* 8 */,
+/* 9 */,
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-icons/placeholders");
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-icons");
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-color-palettes");
+
+/***/ }),
+/* 13 */,
+/* 14 */,
+/* 15 */,
+/* 16 */,
+/* 17 */,
+/* 18 */,
+/* 19 */,
+/* 20 */,
+/* 21 */,
+/* 22 */,
+/* 23 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
 
-/***/ 51:
+/***/ }),
+/* 24 */,
+/* 25 */,
+/* 26 */,
+/* 27 */,
+/* 28 */,
+/* 29 */,
+/* 30 */,
+/* 31 */,
+/* 32 */,
+/* 33 */,
+/* 34 */,
+/* 35 */,
+/* 36 */,
+/* 37 */,
+/* 38 */,
+/* 39 */,
+/* 40 */,
+/* 41 */,
+/* 42 */,
+/* 43 */,
+/* 44 */,
+/* 45 */,
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */,
+/* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -403,24 +469,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var visualization_icons_1 = __webpack_require__(10);
+var visualization_icons_1 = __webpack_require__(11);
 
-var placeholders_1 = __webpack_require__(7);
+var placeholders_1 = __webpack_require__(10);
 
-var schemaUtils_1 = __webpack_require__(3);
+var schemaUtils_1 = __webpack_require__(4);
 
-var visualization_color_palettes_1 = __webpack_require__(11);
+var visualization_color_palettes_1 = __webpack_require__(12);
 
-var themes_1 = __webpack_require__(18);
+var themes_1 = __webpack_require__(23);
 
 var i18n_1 = __webpack_require__(0);
 
-var VizBehavior_1 = __webpack_require__(2);
+var VizBehavior_1 = __webpack_require__(3);
 
-var VizCategory_1 = __webpack_require__(5);
+var VizCategory_1 = __webpack_require__(7);
 
 var configUtils_1 = __webpack_require__(1);
 
+var MapUtils_1 = __webpack_require__(51);
+
 var defaultContext = {
   colorRangeConfig: [{
     to: 20,
@@ -477,7 +545,7 @@ var optionsSchema = {
     // The option merging of defaults and data binding with editing UI happens with the default defined below.
     // The inner defaults for properties within anyOf objects is used only for code intellisense in UDF to populate options.
     default: [{
-      type: 'bubble',
+      type: MapUtils_1.LAYER_TYPE.Bubble,
       latitude: '> primary | seriesByName("latitude")',
       longitude: '> primary | seriesByName("longitude")',
       seriesColors: visualization_color_palettes_1.VIZ_CATEGORICAL,
@@ -485,12 +553,19 @@ var optionsSchema = {
       additionalTooltipFields: [],
       resultLimit: 1000
     }, {
-      type: 'marker',
+      type: MapUtils_1.LAYER_TYPE.Marker,
       latitude: '> primary | seriesByName("latitude")',
       longitude: '> primary | seriesByName("longitude")',
       seriesColors: visualization_color_palettes_1.VIZ_CATEGORICAL,
       additionalTooltipFields: [],
       resultLimit: 1000
+    }, {
+      type: MapUtils_1.LAYER_TYPE.Choropleth,
+      areaIds: '> primary | seriesByType("string")',
+      areaValues: '> primary | seriesByType("number")',
+      dataColors: '> areaValues | gradient()',
+      additionalTooltipFields: [],
+      resultLimit: 1000
     }],
     type: 'array',
     description: 'Specify the optional data visualization layers over the base map. If empty, only the base map appears.',
@@ -499,13 +574,13 @@ var optionsSchema = {
         type: 'object',
         properties: {
           type: {
-            description: 'Specify the type of data layer method to display points on the map. For example, “bubble” or “marker”.',
+            description: 'Specify the type of data layer method to display points on the map. For example, “bubble”, “marker”, or "choropleth".',
             type: 'string',
-            pattern: schemaUtils_1.getPattern(['marker', 'bubble']),
-            default: 'marker'
+            pattern: schemaUtils_1.getPattern([MapUtils_1.LAYER_TYPE.Marker, MapUtils_1.LAYER_TYPE.Bubble, MapUtils_1.LAYER_TYPE.Choropleth]),
+            default: MapUtils_1.LAYER_TYPE.Marker
           },
           latitude: {
-            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map.',
+            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
             type: ['string', 'array'],
             items: {
               type: 'number'
@@ -513,31 +588,78 @@ var optionsSchema = {
             default: '> primary | seriesByName("latitude")'
           },
           longitude: {
-            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map.',
+            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
             type: ['string', 'array'],
             items: {
               type: 'number'
             },
             default: '> primary | seriesByName("longitude")'
           },
+          seriesColors: {
+            description: 'Specify the colors to use for data points. If the dataColors option is specified, the seriesColors option is ignored. The seriesColors option applies to layers where type: "bubble" or type: "marker".',
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+            },
+            default: visualization_color_palettes_1.VIZ_CATEGORICAL
+          },
           dataColors: {
-            description: 'Specify the colors used for data points. If specified, this option overrides the seriesColors option. You may use an array of colors to be picked from, or you may use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. ',
+            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default, and the opacities are shown at 80% of maximum to allow textual information to be visible in the map. By default, the dataColors option is not defined for type "bubble" or "marker".',
             type: ['string', 'array'],
             items: {
               type: 'string'
             }
           },
-          seriesColors: {
-            description: 'Specify the colors used for data points. If the dataColors option is specified, the seriesColors option is ignored.',
+          additionalTooltipFields: {
+            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values are shown in addition to the ones displayed by default.',
             type: 'array',
             items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+              type: 'string'
             },
-            default: visualization_color_palettes_1.VIZ_CATEGORICAL
+            default: []
+          },
+          resultLimit: {
+            description: 'Specify the maximum number of data points to render on the map. Adjust the value to improve performance.',
+            type: 'number',
+            default: 1000
+          }
+        }
+      }, {
+        type: 'object',
+        properties: {
+          type: {
+            description: 'Specify the type of data layer method to display points on the map. For example, “bubble”, “marker”, or "choropleth".',
+            type: 'string',
+            pattern: schemaUtils_1.getPattern([MapUtils_1.LAYER_TYPE.Marker, MapUtils_1.LAYER_TYPE.Bubble, MapUtils_1.LAYER_TYPE.Choropleth]),
+            default: MapUtils_1.LAYER_TYPE.Choropleth
+          },
+          areaIds: {
+            description: 'Specify a dataSource series to identify each area in the choropleth map layer. This applies to layers where type: "choropleth".',
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            default: '> primary | seriesByType("string")'
+          },
+          areaValues: {
+            description: 'Specify a dataSource series that indicates the values for the choropleth map areas. This applies to layers where type: "choropleth".',
+            type: 'array',
+            items: {
+              type: 'number'
+            },
+            default: '> primary | seriesByType("number")'
+          },
+          dataColors: {
+            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default, and the opacities are shown at 80% of maximum to allow textual information to be visible in the map. By default, the dataColors option is not defined for type "bubble" or "marker".',
+            type: ['string', 'array'],
+            items: {
+              type: 'string'
+            },
+            default: '> areaValues | gradient()'
           },
           additionalTooltipFields: {
-            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values will be shown in addition to the ones displayed by default.',
+            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values are shown in addition to the ones displayed by default.',
             type: 'array',
             items: {
               type: 'string'
@@ -554,10 +676,10 @@ var optionsSchema = {
         type: 'object',
         properties: {
           type: {
-            description: 'Specify the type of data layer method to display points on the map. For example, “bubble” or “marker”.',
+            description: 'Specify the type of data layer method to display points on the map. For example, “bubble”, “marker”, or "choropleth".',
             type: 'string',
-            pattern: schemaUtils_1.getPattern(['marker', 'bubble']),
-            default: 'bubble'
+            pattern: schemaUtils_1.getPattern([MapUtils_1.LAYER_TYPE.Marker, MapUtils_1.LAYER_TYPE.Bubble, MapUtils_1.LAYER_TYPE.Choropleth]),
+            default: MapUtils_1.LAYER_TYPE.Bubble
           },
           bubbleSize: {
             description: 'Specify the data column to encode bubble size. This applies to layers where type: "bubble".',
@@ -568,7 +690,7 @@ var optionsSchema = {
             default: '> primary | frameWithoutSeriesNames("geobin", "latitude", "longitude") | frameBySeriesTypes("number")'
           },
           latitude: {
-            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map.',
+            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
             type: ['string', 'array'],
             items: {
               type: 'number'
@@ -576,22 +698,15 @@ var optionsSchema = {
             default: '> primary | seriesByName("latitude")'
           },
           longitude: {
-            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map.',
+            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
             type: ['string', 'array'],
             items: {
               type: 'number'
             },
             default: '> primary | seriesByName("longitude")'
           },
-          dataColors: {
-            description: 'Specify the colors used for data points. If specified, this option overrides the seriesColors option. You may use an array of colors to be picked from, or you may use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. ',
-            type: ['string', 'array'],
-            items: {
-              type: 'string'
-            }
-          },
           seriesColors: {
-            description: 'Specify the colors used for data points. If the dataColors option is specified, the seriesColors option is ignored.',
+            description: 'Specify the colors to use for data points. If the dataColors option is specified, the seriesColors option is ignored. The seriesColors option applies to layers where type: "bubble" or type: "marker".',
             type: 'array',
             items: {
               type: 'string',
@@ -599,8 +714,15 @@ var optionsSchema = {
             },
             default: visualization_color_palettes_1.VIZ_CATEGORICAL
           },
+          dataColors: {
+            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default, and the opacities are shown at 80% of maximum to allow textual information to be visible in the map. By default, the dataColors option is not defined for type "bubble" or "marker".',
+            type: ['string', 'array'],
+            items: {
+              type: 'string'
+            }
+          },
           additionalTooltipFields: {
-            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values will be shown in addition to the ones displayed by default.',
+            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values are shown in addition to the ones displayed by default.',
             type: 'array',
             items: {
               type: 'string'
@@ -673,6 +795,11 @@ var themes = {
     })(props);
   }
 };
+
+var checkTypeIsChoropleth = function checkTypeIsChoropleth(options) {
+  return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth;
+};
+
 var editorConfig = [{
   label: i18n_1._('Data Layer Formatting'),
   layout: [[{
@@ -682,16 +809,49 @@ var editorConfig = [{
     editorProps: {
       values: [{
         label: i18n_1._('Marker'),
-        value: 'marker'
+        value: MapUtils_1.LAYER_TYPE.Marker
       }, {
         label: i18n_1._('Bubble'),
-        value: 'bubble'
+        value: MapUtils_1.LAYER_TYPE.Bubble
+      }, {
+        label: i18n_1._('Choropleth'),
+        value: MapUtils_1.LAYER_TYPE.Choropleth
       }]
     }
+  }], [{
+    label: i18n_1._('Region Area IDs'),
+    option: 'layers[0].areaIds',
+    editor: 'editor.columnSelector',
+    showEditor: function showEditor(_ref) {
+      var options = _ref.options;
+      return checkTypeIsChoropleth(options);
+    },
+    editorProps: {
+      dataSourceKey: 'primary',
+      shouldShowInternalFields: false,
+      filterByTypes: ['string']
+    }
+  }], [{
+    label: i18n_1._('Values'),
+    option: 'layers[0].areaValues',
+    editor: 'editor.columnSelector',
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return checkTypeIsChoropleth(options);
+    },
+    editorProps: {
+      dataSourceKey: 'primary',
+      shouldShowInternalFields: false,
+      filterByTypes: ['number']
+    }
   }], [{
     label: i18n_1._('Latitude'),
     option: 'layers[0].latitude',
     editor: 'editor.columnSelector',
+    showEditor: function showEditor(_ref3) {
+      var options = _ref3.options;
+      return !(options.layers && options.layers.length && options.layers[0].type === 'choropleth');
+    },
     editorProps: {
       dataSourceKey: 'primary',
       shouldShowInternalFields: false
@@ -700,6 +860,10 @@ var editorConfig = [{
     label: i18n_1._('Longitude'),
     option: 'layers[0].longitude',
     editor: 'editor.columnSelector',
+    showEditor: function showEditor(_ref4) {
+      var options = _ref4.options;
+      return !(options.layers && options.layers.length && options.layers[0].type === 'choropleth');
+    },
     editorProps: {
       dataSourceKey: 'primary',
       shouldShowInternalFields: false
@@ -708,9 +872,9 @@ var editorConfig = [{
     label: i18n_1._('Size'),
     option: 'layers[0].bubbleSize',
     editor: 'editor.columnMultiSelector',
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return !(options.layers && options.layers.length && options.layers[0].type === 'marker');
+    showEditor: function showEditor(_ref5) {
+      var options = _ref5.options;
+      return !(options.layers && options.layers.length && (options.layers[0].type === 'marker' || options.layers[0].type === 'choropleth'));
     },
     editorProps: {
       dataSourceKey: 'primary',
@@ -761,20 +925,565 @@ var config = {
 exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
+/* 51 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _defineProperty = __webpack_require__(6);
+
+var _slicedToArray = __webpack_require__(52);
+
+var _toConsumableArray = __webpack_require__(2);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatMetadata = exports.compareBaseStyles = exports.getScaledOpacities = exports.getGlobalLayerBoundaries = exports.isValidLatLon = exports.bakeBubbleData = exports.sanitizeValues = exports.transposeArray = exports.matchBubbleSize = exports.getStaticColors = exports.getZoomLevelFromGeobin = exports.getZoomConstraintsFromTileConfig = exports.getMapStyle = exports.getTilePreset = exports.LAYER_TYPE = exports.DEFAULT_OPACITY = exports.MAX_BUBBLE_RADIUS = exports.MIN_BUBBLE_RADIUS = exports.MAP_STYLE_VERSION_NUMBER = exports.DEFAULT_SERIES_COLORS = exports.DEFAULT_CLUSTER_COLOR = exports.DEFAULT_RESULT_LIMIT = exports.MIN_LONGITUDE = exports.MAX_LONGITUDE = exports.MIN_LATITUDE = exports.MAX_LATITUDE = void 0;
+
+var lodash_1 = __webpack_require__(5);
+
+var d3_scale_1 = __webpack_require__(53);
+
+var chroma = __webpack_require__(54);
+
+var colorUtils_1 = __webpack_require__(55);
+
+var visualization_color_palettes_1 = __webpack_require__(12);
+
+exports.MAX_LATITUDE = 90;
+exports.MIN_LATITUDE = -90;
+exports.MAX_LONGITUDE = 180;
+exports.MIN_LONGITUDE = -180;
+exports.DEFAULT_RESULT_LIMIT = 1000;
+exports.DEFAULT_CLUSTER_COLOR = '#909090';
+exports.DEFAULT_SERIES_COLORS = visualization_color_palettes_1.VIZ_CATEGORICAL; // MapLibre requires a map style specification number which is always 8
+
+exports.MAP_STYLE_VERSION_NUMBER = 8; // currently using one [min, max] value set for bubbles across all zoom levels
+// TODO: design choices on [min, max] bubble size for different zoom levels
+
+exports.MIN_BUBBLE_RADIUS = 7.11; // 10px
+
+exports.MAX_BUBBLE_RADIUS = 45.26; // 85px
+
+exports.DEFAULT_OPACITY = 0.8;
+var LONGITUDE = 'longitude';
+var LATITUDE = 'latitude';
+var LAYER_TYPE;
+
+(function (LAYER_TYPE) {
+  LAYER_TYPE["Marker"] = "marker";
+  LAYER_TYPE["Bubble"] = "bubble";
+  LAYER_TYPE["Choropleth"] = "choropleth";
+})(LAYER_TYPE = exports.LAYER_TYPE || (exports.LAYER_TYPE = {}));
+/**
+ * Construct a tile preset {key: config} by combining the default + custom tile configs
+ * Also returns the default tile config for each theme - light/dark
+ * @param {MapContextInterface} args
+ * @param {BaseTileConfig[]} args.defaultTileConfig
+ * @param {BaseTileConfig[]} args.customTileConfig
+ * @returns {Object} tile preset
+ */
+
+
+var getTilePreset = function getTilePreset(_ref) {
+  var _ref$defaultTileConfi = _ref.defaultTileConfig,
+      defaultTileConfig = _ref$defaultTileConfi === void 0 ? [] : _ref$defaultTileConfi,
+      _ref$customTileConfig = _ref.customTileConfig,
+      customTileConfig = _ref$customTileConfig === void 0 ? [] : _ref$customTileConfig;
+
+  var _a, _b;
+
+  var tilePreset = {};
+  var defaultTileLight = {};
+  var defaultTileDark = {};
+  var tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
+  lodash_1.forEach(tileConfigs, function (tileConfig) {
+    var key = tileConfig === null || tileConfig === void 0 ? void 0 : tileConfig.key;
+    var updatedConfig = Object.assign(Object.assign({
+      theme: 'all'
+    }, tileConfig), {
+      version: exports.MAP_STYLE_VERSION_NUMBER
+    });
+    tilePreset[key] = updatedConfig;
+  });
+
+  if (defaultTileConfig.length > 0) {
+    defaultTileLight = (_a = defaultTileConfig.find(function (config) {
+      return config.theme === 'light';
+    })) !== null && _a !== void 0 ? _a : defaultTileConfig.find(function (config) {
+      return config.theme === undefined;
+    });
+    defaultTileDark = (_b = defaultTileConfig.find(function (config) {
+      return config.theme === 'dark';
+    })) !== null && _b !== void 0 ? _b : defaultTileConfig.find(function (config) {
+      return config.theme === undefined;
+    });
+  }
+
+  return {
+    tilePreset: tilePreset,
+    defaultTileLight: defaultTileLight,
+    defaultTileDark: defaultTileDark
+  };
+};
+
+exports.getTilePreset = getTilePreset;
+/**
+ * Check if baseLayerTileServer is in tilePreset and config matches current theme, if yes, return.
+ * If no, construct a mapStyle with baseLayerTilerServer and baseLayerTileServerType
+ * Else return default tile config based on current theme
+ * @param {Object} args
+ * @param {BaseTileConfig[]} args.tilePreset
+ * @param {String} args.baseLayerTilerServer
+ * @param {String} args.baseLayerTileServerType
+ * @param {String} args.colorScheme
+ * @param {BaseTileConfig} args.defaultTileDark
+ * @param {BaseTileConfig} args.defaultTileLight
+ * @returns {BaseTileConfig} mapStyle
+ */
+
+var getMapStyle = function getMapStyle(_ref2) {
+  var _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
+      baseLayerTileServer = _ref2$baseLayerTileSe === void 0 ? '' : _ref2$baseLayerTileSe,
+      _ref2$baseLayerTileSe2 = _ref2.baseLayerTileServerType,
+      baseLayerTileServerType = _ref2$baseLayerTileSe2 === void 0 ? '' : _ref2$baseLayerTileSe2,
+      _ref2$tilePreset = _ref2.tilePreset,
+      tilePreset = _ref2$tilePreset === void 0 ? {} : _ref2$tilePreset,
+      _ref2$colorScheme = _ref2.colorScheme,
+      colorScheme = _ref2$colorScheme === void 0 ? 'light' : _ref2$colorScheme,
+      _ref2$defaultTileLigh = _ref2.defaultTileLight,
+      defaultTileLight = _ref2$defaultTileLigh === void 0 ? {} : _ref2$defaultTileLigh,
+      _ref2$defaultTileDark = _ref2.defaultTileDark,
+      defaultTileDark = _ref2$defaultTileDark === void 0 ? {} : _ref2$defaultTileDark;
+
+  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === 'all')) {
+    return tilePreset[baseLayerTileServer];
+  }
+
+  if (baseLayerTileServer && baseLayerTileServerType) {
+    var tiles = [];
+    /**
+     * Tile Server URLs (eg: http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png) can specify the variable {s} which refers to a subdomain
+     * Subdomains are used to help with browser parallel requests per domain limitation. These subdomains are typically single letters 'a', 'b' and 'c'
+     * Refer to https://leafletjs.com/SlavaUkraini/reference.html#tilelayer and https://wiki.openstreetmap.org/wiki/Tile_servers
+     */
+
+    if (baseLayerTileServer.match(/^(https?):\/\/{(s|S)}\../)) {
+      /**
+       * sXML (Leaflet) allows users to define their own tile server URLs + list of available subdomains
+       * In order to preserve this behavior during conversion to splunk.map,
+       * if the variable {s} or {S} is detected, replace it with 'a', 'b' and 'c' - default values for subdomains
+       * TODO: in the future, add an additional prop - baseLayerTileServerSubdomains: ['x', 'y', 'z'], default being ['a', 'b', 'c']
+       */
+      tiles = [baseLayerTileServer.replace(/{(s|S)}/, 'a'), baseLayerTileServer.replace(/{(s|S)}/, 'b'), baseLayerTileServer.replace(/{(s|S)}/, 'c')];
+    } else {
+      tiles = [baseLayerTileServer];
+    } // TODO: remove hardcoded style when we allow users to pass in layer style through Viz options
+
+
+    var mapStyle = {
+      version: exports.MAP_STYLE_VERSION_NUMBER,
+      sources: {
+        'base-tiles': {
+          type: baseLayerTileServerType,
+          tiles: tiles,
+          tileSize: 256
+        }
+      },
+      layers: [{
+        id: 'base-layer',
+        type: 'raster',
+        source: 'base-tiles',
+        minzoom: 0,
+        maxzoom: 10
+      }]
+    };
+    return mapStyle;
+  } // if tile server is not present in the preset AND we can't construct a mapStyle, fall back on defaults
+
+
+  return colorScheme === 'light' ? defaultTileLight : defaultTileDark;
+};
+
+exports.getMapStyle = getMapStyle;
+
+var getZoomConstraintsFromTileConfig = function getZoomConstraintsFromTileConfig(tileConfig) {
+  var sources = tileConfig.sources,
+      layers = tileConfig.layers; // check sources for minzoom maxzoom first
+
+  var sourceKeys = Object.keys(sources);
+
+  for (var i = 0; i < sourceKeys.length; i += 1) {
+    var _sources$sourceKeys$i = sources[sourceKeys[i]],
+        minzoom = _sources$sourceKeys$i.minzoom,
+        maxzoom = _sources$sourceKeys$i.maxzoom;
+
+    if (lodash_1.isNumber(minzoom) && lodash_1.isNumber(maxzoom)) {
+      return {
+        minZoom: minzoom,
+        maxZoom: maxzoom
+      };
+    }
+  } // then check layers
+
+
+  for (var _i = 0; _i < layers.length; _i += 1) {
+    var _layers$_i = layers[_i],
+        _minzoom = _layers$_i.minzoom,
+        _maxzoom = _layers$_i.maxzoom;
+
+    if (lodash_1.isNumber(_minzoom) && lodash_1.isNumber(_maxzoom)) {
+      return {
+        minZoom: _minzoom,
+        maxZoom: _maxzoom
+      };
+    }
+  } // Maplibre default - would reset previous min/maxZoom
+
+
+  return {
+    minZoom: 0,
+    maxZoom: 22
+  };
+};
+
+exports.getZoomConstraintsFromTileConfig = getZoomConstraintsFromTileConfig;
+
+var getZoomLevelFromGeobin = function getZoomLevelFromGeobin(geobinStr) {
+  var _a;
+
+  if (!geobinStr) {
+    return null;
+  } // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range
+
+
+  var geobinPattern = /bin_id_zl_([0-9]{0,2})?_y_/g;
+  var match = geobinPattern.exec(geobinStr);
+  return (_a = (match === null || match === void 0 ? void 0 : match.length) && parseInt(match[1], 10)) !== null && _a !== void 0 ? _a : null;
+};
+
+exports.getZoomLevelFromGeobin = getZoomLevelFromGeobin; // Bubble colors - static
+
+var getStaticColors = function getStaticColors(colorCount, colorArray) {
+  if (colorCount < 0 || !colorCount) {
+    return [exports.DEFAULT_CLUSTER_COLOR];
+  }
+
+  if (!colorArray || !colorArray.length) {
+    return _toConsumableArray(Array(colorCount).keys()).map(function (i) {
+      return exports.DEFAULT_SERIES_COLORS[i];
+    });
+  } // loop through colorArray to pick the first $colorCount colors
+  // start from begining again if colorCount > colorArray.length
+
+
+  return _toConsumableArray(Array(colorCount).keys()).map(function (i) {
+    return colorUtils_1.isColor(colorArray[i % colorArray.length]) ? colorArray[i % colorArray.length] : exports.DEFAULT_CLUSTER_COLOR;
+  });
+};
+
+exports.getStaticColors = getStaticColors; // Bubble size
+
+var matchBubbleSize = function matchBubbleSize(dataRange, data) {
+  var size = d3_scale_1.scalePow().exponent(0.2).domain(dataRange).range([exports.MIN_BUBBLE_RADIUS, exports.MAX_BUBBLE_RADIUS])(data);
+
+  if (size > exports.MAX_BUBBLE_RADIUS) {
+    return exports.MAX_BUBBLE_RADIUS;
+  }
+
+  if (size < exports.MIN_BUBBLE_RADIUS) {
+    return exports.MIN_BUBBLE_RADIUS;
+  }
+
+  return size;
+};
+
+exports.matchBubbleSize = matchBubbleSize;
+
+var transposeArray = function transposeArray(array) {
+  if (!array || !array.length || !array[0] || !array[0].length) {
+    return [];
+  }
+
+  return array[0].map(function (_, i) {
+    return array.map(function (row) {
+      return row[i];
+    });
+  });
+};
+
+exports.transposeArray = transposeArray; // sanitize values: update all null, undefined, or negative values to 0
+
+var sanitizeValues = function sanitizeValues(values) {
+  // null / undefined
+  if (!values) {
+    return 0;
+  } // number
+
+
+  if (!Array.isArray(values)) {
+    return values > 0 ? values : 0;
+  } // array
+
+
+  return values.map(function (arr) {
+    return exports.sanitizeValues(arr);
+  });
+};
+
+exports.sanitizeValues = sanitizeValues;
+
+var bakeBubbleData = function bakeBubbleData(layer) {
+  var _a;
+
+  if (!layer || !((_a = layer.bubbleSize) === null || _a === void 0 ? void 0 : _a.length) || !layer.geobin || !layer.geobin.length || !layer.latitude || !layer.latitude.length || !layer.longitude || !layer.longitude.length) {
+    return null;
+  } // if bubbleSize is passed as an array of single number array (data series)
+  // e.g. [value0, value1, ...]
+  // format each value as an array to unify data operations for data series and frames
+
+
+  var sanitizedBubbleSize = exports.sanitizeValues(layer.bubbleSize);
+  var transposedBubbleSize;
+  var transposedSanitizedBubbleSize;
+  var isPie = false; // format array if bubbleSize is passed as an array of array (data frame)
+
+  if (Array.isArray(layer.bubbleSize[0])) {
+    // one-time array transpose,
+    // e.g. from [column0data, column0data] (multi series)
+    // to [[column0datum0, column1datum0], [column0datum1, column1data1], ...]
+    // or e.g. from [column0data] (single series)
+    // to [[column0data]]
+    // for easy access of values at each geo location,
+    // and min max pie size computation
+    transposedBubbleSize = exports.transposeArray(layer.bubbleSize);
+    transposedSanitizedBubbleSize = exports.transposeArray(sanitizedBubbleSize); // if multiple series in the dataframe, set isPie to true
+
+    if (layer.bubbleSize.length > 1) {
+      isPie = true;
+    }
+  } else {
+    transposedBubbleSize = layer.bubbleSize.map(function (n) {
+      return [n];
+    });
+    transposedSanitizedBubbleSize = sanitizedBubbleSize.map(function (n) {
+      return [n];
+    });
+  }
+
+  if (!transposedBubbleSize || !transposedBubbleSize.length) {
+    return null;
+  }
+
+  var data = layer.latitude.map(function (lat, i) {
+    return {
+      zoom: exports.getZoomLevelFromGeobin(layer.geobin[i]),
+      values: transposedBubbleSize[i],
+      sanitizedValues: transposedSanitizedBubbleSize[i],
+      coordinates: [layer.longitude[i], lat],
+      metadata: layer.metadata ? layer.metadata[i] : {}
+    };
+  }).filter(function (d) {
+    return Boolean(d.values);
+  }); // compute the min/max value to encode min/max pie or bubble size
+
+  var min = lodash_1.sum(transposedSanitizedBubbleSize[0]);
+  var max = lodash_1.sum(transposedSanitizedBubbleSize[1]);
+  transposedSanitizedBubbleSize.forEach(function (row) {
+    var bubbleSize = lodash_1.sum(row);
+    max = bubbleSize > max ? bubbleSize : max;
+    min = bubbleSize < min ? bubbleSize : min;
+  });
+  return {
+    data: data,
+    dataRange: [min, max],
+    isPie: isPie,
+    resultLimit: layer.resultLimit,
+    bubbleSizeFields: layer.bubbleSizeFields
+  };
+};
+
+exports.bakeBubbleData = bakeBubbleData;
+
+var isValidLatLon = function isValidLatLon(latlon) {
+  if (!latlon || !Array.isArray(latlon) || latlon.length !== 2) {
+    return false;
+  }
+
+  var _latlon = _slicedToArray(latlon, 2),
+      lat = _latlon[0],
+      lon = _latlon[1];
+
+  if (typeof lat !== 'number' || !(lat >= exports.MIN_LATITUDE && lat <= exports.MAX_LATITUDE)) {
+    return false;
+  }
+
+  if (typeof lon !== 'number' || !(lon >= exports.MIN_LONGITUDE && lon <= exports.MAX_LONGITUDE)) {
+    return false;
+  }
+
+  return true;
+};
+
+exports.isValidLatLon = isValidLatLon;
+/**
+ * Returns a list of all lat or lon coordinates used in a specified layer
+ * @param {LayerType[]} layer
+ * @param {string} field
+ * @returns {number[]} list of lat coordinates or lon coordinates
+ */
+
+var getLatOrLonCoordinates = function getLatOrLonCoordinates(layer, field) {
+  var getClusterValues = function getClusterValues(clusterLayer) {
+    return lodash_1.get(clusterLayer, field, []).slice(0, clusterLayer.type === LAYER_TYPE.Marker && clusterLayer.resultLimit ? clusterLayer.resultLimit : exports.DEFAULT_RESULT_LIMIT);
+  };
+
+  var getChoroplethValues = function getChoroplethValues(choroplethLayer) {
+    var slicedGeomList = choroplethLayer.geom.slice(0, choroplethLayer.resultLimit);
+    var flatCoordinates = slicedGeomList.flatMap(function (geomObject) {
+      return geomObject.coordinates.flat(2);
+    });
+    return flatCoordinates.map(function (coord) {
+      return coord[field === LONGITUDE ? 0 : 1];
+    });
+  };
+
+  return layer.type === LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
+};
+/**
+ * Returns the min and max LongLat pairs to determine the layer boundaries to fit all markers/bubbles
+ * @param {LayerType[]} layers
+ * @returns {LngLatBoundsLike}
+ */
+
+
+var getGlobalLayerBoundaries = function getGlobalLayerBoundaries(layers) {
+  var isLayerValid = function isLayerValid(field) {
+    return layers.every(function (layer) {
+      return layer[field] || layer.geom;
+    });
+  };
+
+  var getDefaultMax = function getDefaultMax(field) {
+    return field === LONGITUDE ? exports.MAX_LONGITUDE : exports.MAX_LATITUDE;
+  };
+
+  var getDefaultMin = function getDefaultMin(field) {
+    return field === LONGITUDE ? exports.MIN_LONGITUDE : exports.MIN_LATITUDE;
+  };
+
+  if (!layers || !Array.isArray(layers) || !layers.length) {
+    return null;
+  }
+
+  var getMin = function getMin(field) {
+    if (!isLayerValid(field)) {
+      return getDefaultMin(field);
+    }
+
+    return layers.reduce(function (prevVal, layer) {
+      return lodash_1.min([prevVal].concat(_toConsumableArray(getLatOrLonCoordinates(layer, field))));
+    }, getDefaultMax(field));
+  };
+
+  var getMax = function getMax(field) {
+    if (!isLayerValid(field)) {
+      return getDefaultMax(field);
+    }
+
+    return layers.reduce(function (prevVal, layer) {
+      return lodash_1.max([prevVal].concat(_toConsumableArray(getLatOrLonCoordinates(layer, field))));
+    }, getDefaultMin(field));
+  };
+
+  return [[getMin(LONGITUDE), getMin(LATITUDE)], [getMax(LONGITUDE), getMax(LATITUDE)]];
+};
+
+exports.getGlobalLayerBoundaries = getGlobalLayerBoundaries;
+
+var getScaledOpacities = function getScaledOpacities(colors) {
+  // extract opacity information from 8 digit hex codes
+  var opacities = colors === null || colors === void 0 ? void 0 : colors.map(function (color) {
+    var _a;
+
+    return (color === null || color === void 0 ? void 0 : color.length) === 9 ? (_a = chroma(color).alpha()) !== null && _a !== void 0 ? _a : exports.DEFAULT_OPACITY : exports.DEFAULT_OPACITY;
+  }); // opacity cannot be greater than 0.8, otherwise it will block map labels
+
+  return (opacities === null || opacities === void 0 ? void 0 : opacities.filter(function (opacity) {
+    return opacity > exports.DEFAULT_OPACITY;
+  }).length) > 0 ? opacities.map(function (opacity) {
+    return opacity * exports.DEFAULT_OPACITY;
+  }) : opacities;
+};
+
+exports.getScaledOpacities = getScaledOpacities;
+
+var compareBaseStyles = function compareBaseStyles(curr, next) {
+  var _a, _b, _c, _d, _e, _f;
+
+  var currBaseLayer = (_a = curr === null || curr === void 0 ? void 0 : curr.layers) === null || _a === void 0 ? void 0 : _a.find(function (layer) {
+    return (layer === null || layer === void 0 ? void 0 : layer.id) === 'base-layer';
+  });
+  var nextBaseLayer = (_b = next === null || next === void 0 ? void 0 : next.layers) === null || _b === void 0 ? void 0 : _b.find(function (layer) {
+    return (layer === null || layer === void 0 ? void 0 : layer.id) === 'base-layer';
+  });
+  var currBaseSource = lodash_1.get(curr === null || curr === void 0 ? void 0 : curr.sources, (_d = (_c = currBaseLayer) === null || _c === void 0 ? void 0 : _c.source) !== null && _d !== void 0 ? _d : '');
+  var nextBaseSource = lodash_1.get(next === null || next === void 0 ? void 0 : next.sources, (_f = (_e = nextBaseLayer) === null || _e === void 0 ? void 0 : _e.source) !== null && _f !== void 0 ? _f : '');
+
+  if (!currBaseLayer || !nextBaseLayer || !currBaseSource || !nextBaseSource) {
+    return false;
+  }
+
+  return lodash_1.isEqual(currBaseLayer, nextBaseLayer) && lodash_1.isEqual(currBaseSource, nextBaseSource);
+};
+
+exports.compareBaseStyles = compareBaseStyles;
+
+var formatMetadata = function formatMetadata(choroplethLayer, i) {
+  if (!choroplethLayer || !choroplethLayer.areaIds || !choroplethLayer.areaValues) return {};
+  if (i >= choroplethLayer.areaIds.length) return {};
+  var metadata = choroplethLayer.metadata ? choroplethLayer.metadata[i] : {};
+  var name = choroplethLayer.areaIds[i];
+  var value = choroplethLayer.areaValues[i];
+  var base = {
+    name: name,
+    value: String(value)
+  };
+  return Object.keys(metadata).reduce(function (result, curr) {
+    var key = "row.".concat(curr, ".value");
+    var val = lodash_1.isObject(metadata[curr]) ? JSON.stringify(metadata[curr]) : String(metadata[curr]);
+    return Object.assign(Object.assign({}, result), _defineProperty({}, key, val));
+  }, base);
+};
+
+exports.formatMetadata = formatMetadata;
+
+/***/ }),
+/* 52 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
-/***/ 6:
+/***/ }),
+/* 53 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("d3-scale");
 
 /***/ }),
+/* 54 */
+/***/ (function(module, exports) {
 
-/***/ 7:
+module.exports = require("chroma-js");
+
+/***/ }),
+/* 55 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons/placeholders");
+module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ })
-
-/******/ });
+/******/ ]);
 //# sourceMappingURL=Map.config.js.map