@splunk/visualizations 24.3.5 → 24.4.0

package/Map.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 189);
+/******/ 	return __webpack_require__(__webpack_require__.s = 193);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -186,7 +186,7 @@ exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOp
 
 var lodash_1 = __webpack_require__(2);
 
-var schemaUtils_1 = __webpack_require__(14);
+var schemaUtils_1 = __webpack_require__(15);
 
 var VizBehavior_1 = __webpack_require__(5);
 
@@ -498,10 +498,16 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 /* 11 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 /* 12 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -515,11 +521,11 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(16);
+var SizeAwareWrapper_1 = __webpack_require__(17);
 
-var style_1 = __webpack_require__(13);
+var style_1 = __webpack_require__(14);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -576,7 +582,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.3.5 - 8d7f16f22",
+      "data-splunk-visualization-version": "24.4.0 - 98920928c",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -597,31 +603,30 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 exports.default = withFixedSizeContainer;
 
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
-/* 17 */,
 /* 18 */,
 /* 19 */,
 /* 20 */
@@ -638,6 +643,39 @@ module.exports = require("@babel/runtime/helpers/typeof");
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickFieldFromJSONSchema = void 0;
+
+var lodash_1 = __webpack_require__(2);
+
+var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
+  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  return Object.keys(optionsSchema).reduce(function (accum, k) {
+    if (lodash_1.has(optionsSchema[k], fieldName)) {
+      accum[k] = optionsSchema[k][fieldName];
+    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
+      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
+
+      if (!lodash_1.isEmpty(nestedSchema)) {
+        accum[k] = nestedSchema;
+      }
+    }
+
+    return accum;
+  }, {});
+};
+
+exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
+
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 var _defineProperty = __webpack_require__(8);
 
 Object.defineProperty(exports, "__esModule", {
@@ -702,7 +740,7 @@ var getSortingParams = function getSortingParams(_ref) {
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -765,39 +803,6 @@ var getPaginationParams = function getPaginationParams(_ref) {
 
 exports.getPaginationParams = getPaginationParams;
 
-/***/ }),
-/* 25 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.pickFieldFromJSONSchema = void 0;
-
-var lodash_1 = __webpack_require__(2);
-
-var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
-  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
-  return Object.keys(optionsSchema).reduce(function (accum, k) {
-    if (lodash_1.has(optionsSchema[k], fieldName)) {
-      accum[k] = optionsSchema[k][fieldName];
-    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
-      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
-
-      if (!lodash_1.isEmpty(nestedSchema)) {
-        accum[k] = nestedSchema;
-      }
-    }
-
-    return accum;
-  }, {});
-};
-
-exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
-
 /***/ }),
 /* 26 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -820,7 +825,7 @@ var i18n_1 = __webpack_require__(3);
 
 var Message_1 = __webpack_require__(9);
 
-var FixedSizeContainer_1 = __webpack_require__(12);
+var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
  * @param {object} dataSources
@@ -844,7 +849,8 @@ var propTypes = {
   width: T.oneOfType([T.string, T.number]),
   height: T.oneOfType([T.string, T.number]),
   // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string
+  backgroundColor: T.string,
+  iconColor: T.string
 };
 /**
  * @method IconPlaceholder
@@ -855,14 +861,16 @@ var propTypes = {
 var IconPlaceholder = function IconPlaceholder(props) {
   var width = props.width,
       height = props.height,
-      icon = props.icon;
+      icon = props.icon,
+      iconColor = props.iconColor;
 
   if (icon) {
     return React.createElement(icon, {
       style: {
         left: '50%',
         top: '50%',
-        color: 'grey',
+        color: iconColor,
+        opacity: 0.15,
         position: 'absolute',
         transform: 'translate(-50%, -50%)'
       },
@@ -941,13 +949,13 @@ var SplunkVisualization_1 = __webpack_require__(32);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var getSorting_1 = __webpack_require__(23);
+var getSorting_1 = __webpack_require__(24);
 
-var getPagination_1 = __webpack_require__(24);
+var getPagination_1 = __webpack_require__(25);
 
 var useDeepMemo_1 = __webpack_require__(35);
 
-var JSONSchemaUtils_1 = __webpack_require__(25);
+var JSONSchemaUtils_1 = __webpack_require__(23);
 
 var MissingPropsMessage_1 = __webpack_require__(36);
 
@@ -1316,7 +1324,7 @@ exports.default = SplunkVisualization;
 
 var _classCallCheck = __webpack_require__(10);
 
-var _createClass = __webpack_require__(15);
+var _createClass = __webpack_require__(16);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1422,7 +1430,7 @@ var i18n_1 = __webpack_require__(3);
 
 var Message_1 = __webpack_require__(9);
 
-var FixedSizeContainer_1 = __webpack_require__(12);
+var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
@@ -1504,7 +1512,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.3.5 - 8d7f16f22"
+  'data-splunk-visualization-version': "24.4.0 - 98920928c"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1547,7 +1555,9 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
+
+var variables_1 = __webpack_require__(11);
 
 var IconPlaceholder_1 = __webpack_require__(26);
 
@@ -1561,7 +1571,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
   var themes = config.themes;
 
   var Wrapper = function Wrapper(props) {
-    var _a;
+    var _a, _b;
 
     var dataSources = props.dataSources,
         loading = props.loading,
@@ -1570,14 +1580,17 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
     var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
+    var iconColor = variables_1.default.contentColorActive(props);
 
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
       return React.createElement(IconPlaceholder_1.default, {
         "data-test": "icon-placeholder",
-        icon: config.icon,
+        icon: icon,
         width: width,
         height: height,
-        backgroundColor: bgColorFromTheme
+        backgroundColor: bgColorFromTheme,
+        iconColor: iconColor
       });
     }
 
@@ -1610,10 +1623,15 @@ module.exports = require("@splunk/visualization-color-palettes");
 /* 42 */
 /***/ (function(module, exports) {
 
+module.exports = require("@splunk/visualization-icons/placeholders");
+
+/***/ }),
+/* 43 */
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
-/* 43 */,
 /* 44 */,
 /* 45 */,
 /* 46 */,
@@ -1644,19 +1662,19 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 /* 66 */,
 /* 67 */,
 /* 68 */,
-/* 69 */
+/* 69 */,
+/* 70 */
 /***/ (function(module, exports) {
 
 module.exports = require("d3-scale");
 
 /***/ }),
-/* 70 */
+/* 71 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes");
 
 /***/ }),
-/* 71 */,
 /* 72 */,
 /* 73 */,
 /* 74 */,
@@ -1685,337 +1703,474 @@ module.exports = require("@splunk/themes");
 /* 97 */,
 /* 98 */,
 /* 99 */,
-/* 100 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Popover");
-
-/***/ }),
-/* 101 */,
-/* 102 */,
-/* 103 */,
-/* 104 */,
-/* 105 */,
-/* 106 */,
-/* 107 */,
-/* 108 */,
-/* 109 */,
-/* 110 */,
-/* 111 */,
-/* 112 */,
-/* 113 */,
-/* 114 */,
-/* 115 */,
-/* 116 */,
-/* 117 */,
-/* 118 */,
-/* 119 */,
-/* 120 */,
-/* 121 */,
-/* 122 */,
-/* 123 */
+/* 100 */,
+/* 101 */
 /***/ (function(module, exports) {
 
-module.exports = require("maplibre-gl");
+module.exports = require("@splunk/visualization-encoding/utils/dsl");
 
 /***/ }),
-/* 124 */,
-/* 125 */,
-/* 126 */,
-/* 127 */,
-/* 128 */,
-/* 129 */,
-/* 130 */,
-/* 131 */,
-/* 132 */,
-/* 133 */,
-/* 134 */,
-/* 135 */,
-/* 136 */,
-/* 137 */,
-/* 138 */,
-/* 139 */,
-/* 140 */,
-/* 141 */,
-/* 142 */,
-/* 143 */,
-/* 144 */,
-/* 145 */,
-/* 146 */,
-/* 147 */,
-/* 148 */,
-/* 149 */,
-/* 150 */,
-/* 151 */,
-/* 152 */,
-/* 153 */,
-/* 154 */,
-/* 155 */,
-/* 156 */,
-/* 157 */,
-/* 158 */,
-/* 159 */,
-/* 160 */,
-/* 161 */,
-/* 162 */,
-/* 163 */,
-/* 164 */,
-/* 165 */,
-/* 166 */,
-/* 167 */,
-/* 168 */,
-/* 169 */,
-/* 170 */,
-/* 171 */,
-/* 172 */,
-/* 173 */,
-/* 174 */,
-/* 175 */,
-/* 176 */,
-/* 177 */,
-/* 178 */,
-/* 179 */,
-/* 180 */,
-/* 181 */,
-/* 182 */,
-/* 183 */,
-/* 184 */,
-/* 185 */,
-/* 186 */,
-/* 187 */,
-/* 188 */,
-/* 189 */
+/* 102 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
+var _slicedToArray = __webpack_require__(49);
 
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
+var _toConsumableArray = __webpack_require__(39);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PureMap = exports.config = exports.themes = exports.computeVizProps = void 0;
-/* eslint-disable no-sequences */
+exports.getGlobalLayerBoundaries = exports.isValidLatLon = exports.bakeBubbleData = exports.sanitizeValues = exports.transposeArray = exports.matchBubbleSize = exports.getStaticColors = exports.getZoomLevelFromGeobin = exports.getZoomConstraintsFromTileConfig = exports.getMapStyle = exports.getTilePreset = 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 React = __webpack_require__(1);
+var lodash_1 = __webpack_require__(2);
 
-var colorUtils_1 = __webpack_require__(11);
+var d3_scale_1 = __webpack_require__(70);
 
-var types_1 = __webpack_require__(190);
+var colorUtils_1 = __webpack_require__(12);
 
-var dsl_1 = __webpack_require__(191);
+var visualization_color_palettes_1 = __webpack_require__(41);
 
-var JSONSchemaUtils_1 = __webpack_require__(25);
+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
 
-var hocUtils_1 = __webpack_require__(7);
+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
 
-var PureMap_1 = __webpack_require__(192);
+exports.MIN_BUBBLE_RADIUS = 4;
+exports.MAX_BUBBLE_RADIUS = 50;
+/**
+ * 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
+ */
 
-exports.PureMap = PureMap_1.default;
+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 config_1 = __webpack_require__(200);
+  var _a, _b;
 
-exports.config = config_1.default;
+  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;
+  });
 
-var withDashboardViz_1 = __webpack_require__(28);
+  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;
+    });
+  }
 
-var computeVizProps = function computeVizProps(_ref) {
-  var themeFunc = _ref.themeFunc,
-      theme = _ref.theme,
-      layers = _ref.layers,
-      dataSources = _ref.dataSources;
-  var themeColorVariables = ['controlBackgroundColor', 'controlForegroundColor'];
-  var themeColors = {};
-  themeColorVariables.forEach(function (variable) {
-    themeColors[variable] = themeFunc(variable);
-  }); // Markers use different icons, Bubbles has different styles for light and dark theme
-  // this prop is passed for that
+  return {
+    tilePreset: tilePreset,
+    defaultTileLight: defaultTileLight,
+    defaultTileDark: defaultTileDark
+  };
+};
 
-  var themeColorScheme = (theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1) ? theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1.colorScheme : 'dark';
-  layers.forEach(function (l) {
-    var _a, _b, _c, _d; // add key `geobin` to the layer object if the data is returned from geostats commands
-    // to distinguish geostats commands from table commands
+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;
 
-    var dataSourceData = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {};
-    var geobinIdx = ((_c = dataSourceData.fields) !== null && _c !== void 0 ? _c : []).map(function (field) {
-      return typeof field === 'string' ? field : field.name;
-    }).indexOf('geobin');
-    var layer = l;
+  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === 'all')) {
+    return tilePreset[baseLayerTileServer];
+  }
 
-    if (geobinIdx > -1) {
-      layer.geobin = dataSourceData.columns[geobinIdx];
-    }
+  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
+     */
 
-    layer.bubbleSizeFields = ((_d = dataSourceData.fields) !== null && _d !== void 0 ? _d : []).map(function (field) {
-      return typeof field === 'string' ? field : field.name;
-    }).filter(function (field, index) {
-      var _a, _b;
+    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
 
-      return !['latitude', 'longitude', 'geobin'].includes(field) && types_1.inferDataTypeFromData((_b = (_a = dataSourceData.columns) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : []) === 'number';
-    }); // Sanitize colors within layers
 
-    layer.seriesColors = Array.isArray(layer.seriesColors) ? colorUtils_1.sanitizeArrayOfColors(layer.seriesColors) : undefined;
-    layer.dataColors = Array.isArray(layer.dataColors) ? colorUtils_1.sanitizeArrayOfColors(layer.dataColors) : undefined;
-  });
-  return Object.assign(Object.assign(Object.assign({}, themeColors), {
-    themeColorScheme: themeColorScheme
-  }), layers);
+    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.computeVizProps = computeVizProps; // HOC for stripping the internal fields for Maps
+exports.getMapStyle = getMapStyle;
 
-var withoutInternalFields = function withoutInternalFields(Viz) {
-  // eslint-disable-next-line react/display-name
-  var VizWithoutInternalFields = function VizWithoutInternalFields(_a) {
-    var dataSources = _a.dataSources,
-        otherProps = __rest(_a, ["dataSources"]);
+var getZoomConstraintsFromTileConfig = function getZoomConstraintsFromTileConfig(tileConfig) {
+  var sources = tileConfig.sources,
+      layers = tileConfig.layers; // check sources for minzoom maxzoom first
 
-    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
-      return React.createElement(Viz, Object.assign({}, otherProps));
+  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
 
-    var primary = dataSources.primary;
-    var _primary$data = primary.data,
-        columns = _primary$data.columns,
-        fields = _primary$data.fields;
-    var newColumns = [];
-    var newFields = [];
 
-    if (fields && columns && fields.length === columns.length) {
-      // computed sorted index for removal
-      var indicesToRemove = new Set(fields.reduce(function (arr, e, i) {
-        return (typeof e === 'string' ? e.startsWith('_') : e.name.toString().startsWith('_')) && arr.push(i), arr;
-      }, []));
-      newFields = fields.filter(function (d, i) {
-        return !indicesToRemove.has(i);
-      });
-      newColumns = columns.filter(function (d, i) {
-        return !indicesToRemove.has(i);
-      });
+  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
 
-    var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
-      primary: Object.assign(Object.assign({}, primary), {
-        data: Object.assign(Object.assign({}, primary.data), {
-          columns: newColumns,
-          fields: newFields
-        })
-      })
-    });
-    return React.createElement(Viz, Object.assign({
-      dataSources: modifiedDatasources
-    }, otherProps));
+
+  return {
+    minZoom: 0,
+    maxZoom: 22
   };
+};
 
-  VizWithoutInternalFields.propTypes = Viz.propTypes;
-  VizWithoutInternalFields.defaultProps = Viz.defaultProps;
-  VizWithoutInternalFields.config = Viz.config;
-  return VizWithoutInternalFields;
-}; // HOC for updating all null values in data columns to zeros
-// excluding 'latitude', 'longitude' and 'geobin'
+exports.getZoomConstraintsFromTileConfig = getZoomConstraintsFromTileConfig;
 
+var getZoomLevelFromGeobin = function getZoomLevelFromGeobin(geobinStr) {
+  var _a;
 
-var withNullToZeros = function withNullToZeros(Viz) {
-  // eslint-disable-next-line react/display-name
-  var VizWithColumnsNullToZeros = function VizWithColumnsNullToZeros(_a) {
-    var dataSources = _a.dataSources,
-        options = _a.options,
-        otherProps = __rest(_a, ["dataSources", "options"]);
+  if (!geobinStr) {
+    return null;
+  } // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range
 
-    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
-      return React.createElement(Viz, Object.assign({}, otherProps));
+
+  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 = layer.bubbleSize.map(function (n) {
+    return [n];
+  });
+  var transposedSanitizedBubbleSize = sanitizedBubbleSize.map(function (n) {
+    return [n];
+  });
+  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;
     }
+  }
 
-    var primary = dataSources.primary;
-    var _primary$data2 = primary.data,
-        columns = _primary$data2.columns,
-        fields = _primary$data2.fields;
-    var newColumns = columns;
-    var mergedOptions = hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, JSONSchemaUtils_1.pickFieldFromJSONSchema(config_1.default.optionsSchema, 'default'));
+  if (!transposedBubbleSize || !transposedBubbleSize.length) {
+    return null;
+  }
 
-    if (mergedOptions.layers && mergedOptions.layers.length && mergedOptions.layers[0].type === 'bubble') {
-      var latitudeField = dsl_1.getFieldsFromDSL(mergedOptions.layers[0].latitude, dataSources)[0] || '';
-      var longitudeField = dsl_1.getFieldsFromDSL(mergedOptions.layers[0].longitude, dataSources)[0] || '';
-      var excludedFields = [latitudeField, longitudeField, 'geobin'];
-      var indicesToEvaluate = new Set(fields.reduce(function (arr, e, i) {
-        var field = typeof e === 'string' ? e : e.name.toString();
+  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
 
-        if (!excludedFields.includes(field)) {
-          arr.push(i);
-        }
+  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
+  };
+};
 
-        return arr;
-      }, []));
-      newColumns = columns.map(function (column, i) {
-        if (indicesToEvaluate.has(i)) {
-          return column.map(function (value) {
-            return !value ? 0 : value;
-          });
-        }
+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 the min and max LongLat pairs to determine the layer boundaries to fit all markers/bubbles
+
+var getGlobalLayerBoundaries = function getGlobalLayerBoundaries(layers) {
+  if (!layers || !Array.isArray(layers) || !layers.length) {
+    return null;
+  }
 
-        return column;
-      });
+  var LONGITUDE = 'longitude';
+  var LATITUDE = 'latitude';
+
+  var getMin = function getMin(field) {
+    if (!layers.every(function (layer) {
+      return layer[field];
+    })) {
+      return field === LONGITUDE ? exports.MIN_LONGITUDE : exports.MIN_LATITUDE;
     }
 
-    var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
-      primary: Object.assign(Object.assign({}, primary), {
-        data: Object.assign(Object.assign({}, primary.data), {
-          columns: newColumns
-        })
-      })
-    });
-    return React.createElement(Viz, Object.assign({
-      dataSources: modifiedDatasources,
-      options: options
-    }, otherProps));
+    return layers.reduce(function (prevVal, layer) {
+      var _a;
+
+      return lodash_1.min([prevVal].concat(_toConsumableArray(((_a = lodash_1.get(layer, field)) !== null && _a !== void 0 ? _a : []).slice(0, layer.type === 'marker' && layer.resultLimit ? layer.resultLimit : exports.DEFAULT_RESULT_LIMIT))));
+    }, field === LONGITUDE ? exports.MAX_LONGITUDE : exports.MAX_LATITUDE);
   };
 
-  VizWithColumnsNullToZeros.propTypes = Viz.propTypes;
-  VizWithColumnsNullToZeros.defaultProps = Viz.defaultProps;
-  VizWithColumnsNullToZeros.config = Viz.config;
-  return VizWithColumnsNullToZeros;
+  var getMax = function getMax(field) {
+    if (!layers.every(function (layer) {
+      return layer[field];
+    })) {
+      return field === LONGITUDE ? exports.MAX_LONGITUDE : exports.MAX_LATITUDE;
+    }
+
+    return layers.reduce(function (prevVal, layer) {
+      var _a;
+
+      return lodash_1.max([prevVal].concat(_toConsumableArray(((_a = lodash_1.get(layer, field)) !== null && _a !== void 0 ? _a : []).slice(0, layer.type === 'marker' && layer.resultLimit ? layer.resultLimit : exports.DEFAULT_RESULT_LIMIT))));
+    }, field === LONGITUDE ? exports.MIN_LONGITUDE : exports.MIN_LATITUDE);
+  };
+
+  return [[getMin(LONGITUDE), getMin(LATITUDE)], [getMax(LONGITUDE), getMax(LATITUDE)]];
 };
 
-var Map = withoutInternalFields(withNullToZeros(withDashboardViz_1.default({
-  ReactViz: PureMap_1.default,
-  vizConfig: config_1.default,
-  computeVizProps: exports.computeVizProps,
-  disableEditModeCover: true,
-  useIconPlaceholder: function useIconPlaceholder() {
-    return false;
-  }
-})));
-var themes = config_1.default.themes;
-exports.themes = themes;
-exports.default = Map;
+exports.getGlobalLayerBoundaries = getGlobalLayerBoundaries;
 
 /***/ }),
-/* 190 */
+/* 103 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/utils/types");
+module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
-/* 191 */
+/* 104 */,
+/* 105 */,
+/* 106 */,
+/* 107 */,
+/* 108 */,
+/* 109 */,
+/* 110 */,
+/* 111 */,
+/* 112 */,
+/* 113 */,
+/* 114 */,
+/* 115 */,
+/* 116 */,
+/* 117 */,
+/* 118 */,
+/* 119 */,
+/* 120 */,
+/* 121 */,
+/* 122 */,
+/* 123 */,
+/* 124 */,
+/* 125 */,
+/* 126 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/utils/dsl");
+module.exports = require("maplibre-gl");
 
 /***/ }),
-/* 192 */
+/* 127 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2023,393 +2178,420 @@ module.exports = require("@splunk/visualization-encoding/utils/dsl");
 
 var _slicedToArray = __webpack_require__(49);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isLatLng = exports.formatColor = exports.DEFAULT_ZOOM = exports.DEFAULT_SHOW_SCALE = exports.DEFAULT_SCALE_UNIT = exports.DEFAULT_CONTROL_FOREGROUND_COLOR = exports.DEFAULT_CONTROL_BACKGROUND_COLOR = exports.DEFAULT_CENTER = void 0;
-
-var React = __webpack_require__(1);
-
-var lodash_1 = __webpack_require__(2);
-
-var react_1 = __webpack_require__(1);
-
-var T = __webpack_require__(0);
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
 
-var chroma = __webpack_require__(193);
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
 
-var maplibre_gl_1 = __webpack_require__(123);
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 
-var MapContext_1 = __webpack_require__(194);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-var PureMapContainer_1 = __webpack_require__(195);
+var maplibre_gl_1 = __webpack_require__(126);
 
-__webpack_require__(196);
+var React = __webpack_require__(1);
 
-var MapUtils_1 = __webpack_require__(197);
+var Tooltip_1 = __webpack_require__(202);
 
-var Tooltip_1 = __webpack_require__(199);
+var MarkerWrapper = function MarkerWrapper(_a) {
+  var longitude = _a.longitude,
+      latitude = _a.latitude,
+      bubbleSize = _a.bubbleSize,
+      map = _a.map,
+      children = _a.children,
+      otherProps = __rest(_a, ["longitude", "latitude", "bubbleSize", "map", "children"]);
 
-exports.DEFAULT_CENTER = [0, 0];
-exports.DEFAULT_CONTROL_BACKGROUND_COLOR = '#2b3033';
-exports.DEFAULT_CONTROL_FOREGROUND_COLOR = '#B5B5B5';
-exports.DEFAULT_SCALE_UNIT = 'imperial';
-exports.DEFAULT_SHOW_SCALE = true;
-exports.DEFAULT_ZOOM = 0; // convert rgb/rgba/hex color to encoded color & opacity for SVG strings
+  var container = React.useRef();
+  var marker = React.useRef();
 
-var formatColor = function formatColor(color) {
-  var chromaColor = chroma(color);
-  return {
-    color: chroma(chromaColor.rgb()).hex().replace('#', '%23'),
-    opacity: chromaColor.alpha()
-  };
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTooltipOpen = _React$useState2[0],
+      setTooltipOpenStatus = _React$useState2[1];
+
+  var openTooltip = React.useCallback(function () {
+    return setTooltipOpenStatus(true);
+  }, []);
+  var closeTooltip = React.useCallback(function () {
+    return setTooltipOpenStatus(false);
+  }, []);
+  var cleanupMarker = React.useCallback(function () {
+    if (marker.current) {
+      marker.current.remove();
+      marker.current = undefined;
+    }
+  }, []);
+  React.useEffect(function () {
+    try {
+      if (marker.current) {
+        marker.current.setLngLat([longitude, latitude]);
+      } else {
+        marker.current = new maplibre_gl_1.Marker(container.current);
+        marker.current.setLngLat([longitude, latitude]);
+        marker.current.addTo(map.current);
+      }
+    } catch (error) {
+      console.error(error);
+      cleanupMarker();
+    }
+  }, [latitude, longitude, map]);
+  React.useEffect(function () {
+    return cleanupMarker;
+  }, []);
+  return React.createElement("div", null, React.createElement("div", Object.assign({
+    ref: container,
+    "data-test": "map-marker",
+    onMouseOver: openTooltip,
+    onMouseLeave: closeTooltip,
+    onFocus: openTooltip,
+    onBlur: closeTooltip
+  }, otherProps), children), React.createElement(Tooltip_1.default, {
+    open: isTooltipOpen,
+    anchor: container.current,
+    latitude: latitude,
+    longitude: longitude,
+    bubbleSize: bubbleSize
+  }));
 };
 
-exports.formatColor = formatColor;
-PureMapContainer_1.default.displayName = 'PureMapContainer';
-
-var PureMap = function PureMap(props) {
-  var width = props.width,
-      height = props.height,
-      backgroundColor = props.backgroundColor,
-      baseLayerTileServer = props.baseLayerTileServer,
-      baseLayerTileServerType = props.baseLayerTileServerType,
-      center = props.center,
-      controlBackgroundColor = props.controlBackgroundColor,
-      controlForegroundColor = props.controlForegroundColor,
-      layers = props.layers,
-      scaleUnit = props.scaleUnit,
-      showScale = props.showScale,
-      themeColorScheme = props.themeColorScheme,
-      zoom = props.zoom,
-      onMapLoad = props.onMapLoad;
-
-  var _react_1$useContext = react_1.useContext(MapContext_1.default),
-      defaultTileConfig = _react_1$useContext.defaultTileConfig,
-      customTileConfig = _react_1$useContext.customTileConfig;
-
-  var basemapContainer = react_1.useRef(null);
-  var map = react_1.useRef(null);
-  var scaleControl = react_1.useRef(null);
-  var zoomControl = react_1.useRef(null);
+exports.default = MarkerWrapper;
 
-  var _react_1$useMemo = react_1.useMemo(function () {
-    return MapUtils_1.getTilePreset({
-      defaultTileConfig: defaultTileConfig,
-      customTileConfig: customTileConfig
-    });
-  }, [defaultTileConfig, customTileConfig]),
-      tilePreset = _react_1$useMemo.tilePreset,
-      defaultTileLight = _react_1$useMemo.defaultTileLight,
-      defaultTileDark = _react_1$useMemo.defaultTileDark;
+/***/ }),
+/* 128 */,
+/* 129 */,
+/* 130 */,
+/* 131 */,
+/* 132 */,
+/* 133 */,
+/* 134 */,
+/* 135 */,
+/* 136 */,
+/* 137 */,
+/* 138 */,
+/* 139 */,
+/* 140 */,
+/* 141 */,
+/* 142 */,
+/* 143 */,
+/* 144 */,
+/* 145 */,
+/* 146 */,
+/* 147 */,
+/* 148 */,
+/* 149 */,
+/* 150 */,
+/* 151 */,
+/* 152 */,
+/* 153 */,
+/* 154 */,
+/* 155 */,
+/* 156 */,
+/* 157 */,
+/* 158 */,
+/* 159 */,
+/* 160 */,
+/* 161 */,
+/* 162 */,
+/* 163 */,
+/* 164 */,
+/* 165 */,
+/* 166 */,
+/* 167 */,
+/* 168 */,
+/* 169 */,
+/* 170 */,
+/* 171 */,
+/* 172 */,
+/* 173 */,
+/* 174 */,
+/* 175 */,
+/* 176 */,
+/* 177 */,
+/* 178 */,
+/* 179 */,
+/* 180 */,
+/* 181 */,
+/* 182 */,
+/* 183 */,
+/* 184 */,
+/* 185 */,
+/* 186 */,
+/* 187 */,
+/* 188 */,
+/* 189 */,
+/* 190 */,
+/* 191 */,
+/* 192 */,
+/* 193 */
+/***/ (function(module, exports, __webpack_require__) {
 
-  var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tooltipProps = _React$useState2[0],
-      setTooltipProps = _React$useState2[1];
+"use strict";
 
-  var lngLatCenter = react_1.useMemo(function () {
-    return [center[1], center[0]];
-  }, [center]);
-  var initializeMap = react_1.useCallback(function (mapStyle) {
-    map.current = new maplibre_gl_1.Map(Object.assign({
-      container: basemapContainer.current,
-      style: mapStyle,
-      center: lngLatCenter,
-      zoom: zoom
-    }, MapUtils_1.getZoomConstraintsFromTileConfig(mapStyle))); // Fired immediately after all necessary resources have been downloaded
-    // and the first visually complete rendering of the map has occurred.
 
-    map.current.on('load', function () {
-      onMapLoad();
-    }); // zoom
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
 
-    zoomControl.current = new maplibre_gl_1.NavigationControl({
-      showCompass: false
-    });
-    map.current.addControl(zoomControl.current, 'top-left');
-  }, [lngLatCenter, zoom]);
-  var initializeScale = react_1.useCallback(function () {
-    scaleControl.current = new maplibre_gl_1.ScaleControl({
-      maxWidth: 70,
-      unit: scaleUnit
-    });
-    map.current.addControl(scaleControl.current);
-  }, [scaleUnit]);
-  var updateScale = react_1.useCallback(function () {
-    var _a;
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
 
-    if (showScale) {
-      (_a = scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.current) === null || _a === void 0 ? void 0 : _a.setUnit(scaleUnit);
-    }
-  }, [scaleUnit, showScale]);
-  react_1.useEffect(function () {
-    if (map.current) {
-      map.current.resize();
-    }
-  }, [width, height]);
-  react_1.useEffect(function () {
-    // do not render when defaultTileConfig, customTileConfig and tileset are not configured
-    if (Object.keys(tilePreset).length === 0 && (!baseLayerTileServer || !baseLayerTileServerType)) {
-      // eslint-disable-next-line no-console
-      console.warn('Map Tile Server configuration is missing or invalid. Please provide a valid configuration');
-      return;
-    }
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 
-    var mapStyle = MapUtils_1.getMapStyle({
-      baseLayerTileServer: baseLayerTileServer,
-      baseLayerTileServerType: baseLayerTileServerType,
-      tilePreset: tilePreset,
-      colorScheme: themeColorScheme,
-      defaultTileLight: defaultTileLight,
-      defaultTileDark: defaultTileDark
-    });
-    mapStyle.version = MapUtils_1.MAP_STYLE_VERSION_NUMBER; // If the map has already been initialized, we update the styles
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PureMap = exports.config = exports.themes = exports.computeVizProps = exports.convertToArrOfObjects = void 0;
+/* eslint-disable no-sequences */
 
-    if (map.current) {
-      // Refer to https://maplibre.org/maplibre-gl-js-docs/api/map/#setstyle-example for options.diff (default is true)
-      map.current.setStyle(lodash_1.omit(mapStyle, ['theme', 'name', 'key']));
+var React = __webpack_require__(1);
 
-      var _MapUtils_1$getZoomCo = MapUtils_1.getZoomConstraintsFromTileConfig(mapStyle),
-          minZoom = _MapUtils_1$getZoomCo.minZoom,
-          maxZoom = _MapUtils_1$getZoomCo.maxZoom;
+var colorUtils_1 = __webpack_require__(12);
 
-      map.current.setMinZoom(minZoom);
-      map.current.setMaxZoom(maxZoom);
-      updateScale();
-    } else {
-      // initialize the map only once with a constructed style from user configured options
-      // or default configs from the map context
-      initializeMap(lodash_1.omit(mapStyle, ['theme', 'name', 'key']));
-      initializeScale();
-      return;
-    } // eslint-disable-next-line consistent-return
+var types_1 = __webpack_require__(194);
 
+var dsl_1 = __webpack_require__(101);
 
-    return function () {
-      // free resources
-      map === null || map === void 0 ? void 0 : map.current.remove();
-      map.current = undefined;
-    };
-  }, [tilePreset, initializeMap, initializeScale, updateScale, defaultTileLight, defaultTileDark, baseLayerTileServer, baseLayerTileServerType, themeColorScheme]);
-  react_1.useEffect(function () {
-    if (map.current) {
-      map.current.flyTo({
-        center: lngLatCenter,
-        zoom: zoom
-      });
-    }
-  }, [lngLatCenter, zoom]);
-  react_1.useEffect(function () {
-    var cleanupLayer = function cleanupLayer() {};
+var JSONSchemaUtils_1 = __webpack_require__(23);
 
-    var markers = [];
-    var bubbles = [];
+var hocUtils_1 = __webpack_require__(7);
 
-    if (map.current && layers && layers.length && map.current.isStyleLoaded) {
-      try {
-        if (layers[0].type === 'marker' && !('geobin' in layers[0])) {
-          // support for only single layer
-          var markerLayer = layers[0];
-          markerLayer.seriesColors = markerLayer.seriesColors ? markerLayer.seriesColors : MapUtils_1.DEFAULT_SERIES_COLORS;
-
-          cleanupLayer = function cleanupLayer() {
-            if (markers) {
-              markers.forEach(function (marker) {
-                return marker === null || marker === void 0 ? void 0 : marker.remove();
-              });
-              markers = [];
-            }
-          };
+var PureMap_1 = __webpack_require__(195);
 
-          if (markerLayer) {
-            // Remove any existing markers
-            cleanupLayer();
-            var renderedMarkerLayer = MapUtils_1.renderMarkerLayer(markerLayer, themeColorScheme, map, setTooltipProps);
-            markers = renderedMarkerLayer && renderedMarkerLayer.markers;
-          }
-        }
+exports.PureMap = PureMap_1.default;
 
-        if (layers[0].type === 'bubble') {
-          // support for only single layer
-          var bubbleLayer = layers[0];
-          bubbleLayer.seriesColors = bubbleLayer.seriesColors ? bubbleLayer.seriesColors : MapUtils_1.DEFAULT_SERIES_COLORS; // update bubbles on events
-
-          cleanupLayer = function cleanupLayer() {
-            if (bubbles && bubbles.length) {
-              bubbles.forEach(function (bubble) {
-                return bubble.remove();
-              });
-              bubbles = [];
-            }
-          }; // render bubbles with data returned from geostats cmds
+var config_1 = __webpack_require__(204);
 
+exports.config = config_1.default;
 
-          if (bubbleLayer.geobin && bubbleLayer.bubbleSize) {
-            bubbleLayer.seriesColors = bubbleLayer.seriesColors ? bubbleLayer.seriesColors : MapUtils_1.DEFAULT_SERIES_COLORS;
-            var data = MapUtils_1.bakeBubbleData(bubbleLayer);
-            var staticColors = MapUtils_1.getStaticColors(bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors);
+var withDashboardViz_1 = __webpack_require__(28); // util fn extracted from PureParallelCoordinates that transforms data structure to array of objects
+// TODO: pull this fn into common utils and utilize this fn in ParallelCoordinates
 
-            if (data && staticColors && staticColors.length) {
-              cleanupLayer(); // render bubbles when layers options get update
 
-              bubbles = MapUtils_1.updateBubbles(data, zoom, staticColors, bubbleLayer.dataColors, themeColorScheme, map, setTooltipProps); // render bubbles on zoom
+var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
+  if (!columns || !columns[0].length) return [];
+  var data = [];
 
-              map.current.on('zoomend', function () {
-                cleanupLayer();
-                bubbles = MapUtils_1.updateBubbles(data, map.current.getZoom(), staticColors, bubbleLayer.dataColors, themeColorScheme, map, setTooltipProps);
-              });
-            }
-          }
-        }
-      } catch (err) {
-        console.error(err);
+  var _loop = function _loop(i) {
+    var newObj = {};
+    fields.forEach(function (field, index) {
+      var fieldName = typeof field === 'string' ? field : field.name;
+
+      if (columns[index][i] === '') {
+        newObj[fieldName] = null;
+      } else {
+        newObj[fieldName] = columns[index][i];
       }
-    }
+    });
+    data.push(newObj);
+  };
 
-    return function () {
-      cleanupLayer();
-    };
-  }, [layers, width, height, zoom, themeColorScheme]);
-  var baseMapLayer = React.createElement(React.Fragment, null, React.createElement(PureMapContainer_1.default, {
-    className: "puremap",
-    width: width,
-    height: height,
-    backgroundColor: backgroundColor,
-    controlBackgroundColor: controlBackgroundColor,
-    controlForegroundColor: controlForegroundColor,
-    controlIconColorEncoded: exports.formatColor(controlForegroundColor),
-    ref: basemapContainer,
-    showScale: showScale
-  }), React.createElement(Tooltip_1.default, Object.assign({}, tooltipProps)));
-  return baseMapLayer;
+  for (var i = 0; i < columns[0].length; i += 1) {
+    _loop(i);
+  }
+
+  return data;
 };
 
-var isLatLng = function isLatLng(props, propName, componentName) {
-  if (props[propName][0] >= -180 && props[propName][0] <= 180 && props[propName][1] >= -90 && props[propName][1] <= 90) {
-    throw new Error("".concat(componentName, " ").concat(propName, " may have reversed [lat, lon] ranges."));
-  }
+exports.convertToArrOfObjects = convertToArrOfObjects;
 
-  if (props[propName][0] < -90 || props[propName][0] > 90 || props[propName][1] < -180 || props[propName][1] > 180) {
-    throw new Error("".concat(componentName, " ").concat(propName, " incorrect [lat, lon] ranges."));
-  }
+var computeVizProps = function computeVizProps(_ref) {
+  var themeFunc = _ref.themeFunc,
+      theme = _ref.theme,
+      layers = _ref.layers,
+      dataSources = _ref.dataSources;
 
-  return null;
-};
+  var _a, _b;
 
-exports.isLatLng = isLatLng;
-PureMap.propTypes = {
-  // eslint-disable-next-line react/no-unused-prop-types
-  mode: T.string,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  backgroundColor: T.string,
-  baseLayerTileServer: T.string,
-  baseLayerTileServerType: T.string,
-  center: exports.isLatLng,
-  controlBackgroundColor: T.string,
-  controlForegroundColor: T.string,
-  layers: T.arrayOf(T.shape({
-    type: T.string,
-    latitude: T.arrayOf(T.number),
-    longitude: T.arrayOf(T.number),
-    label: T.string,
-    showInLegend: T.bool,
-    dataColors: T.oneOfType([T.string, T.arrayOf(T.string)]),
-    seriesColors: T.arrayOf(T.string),
-    tooltipFields: T.arrayOf(T.string),
-    resultLimit: T.number
-  })),
-  scaleUnit: T.string,
-  showScale: T.bool,
-  themeColorScheme: T.string,
-  zoom: T.number,
-  onMapLoad: T.func
-};
-PureMap.defaultProps = {
-  mode: 'view',
-  width: 800,
-  height: 500,
-  backgroundColor: '#0b0c0e',
-  center: exports.DEFAULT_CENTER,
-  controlBackgroundColor: exports.DEFAULT_CONTROL_BACKGROUND_COLOR,
-  controlForegroundColor: exports.DEFAULT_CONTROL_FOREGROUND_COLOR,
-  scaleUnit: exports.DEFAULT_SCALE_UNIT,
-  showScale: exports.DEFAULT_SHOW_SCALE,
-  layers: [],
-  themeColorScheme: 'dark',
-  zoom: exports.DEFAULT_ZOOM,
-  onMapLoad: lodash_1.noop
+  var themeColorVariables = ['controlBackgroundColor', 'controlForegroundColor'];
+  var themeColors = {};
+  themeColorVariables.forEach(function (variable) {
+    themeColors[variable] = themeFunc(variable);
+  }); // Markers use different icons, Bubbles has different styles for light and dark theme
+  // this prop is passed for that
+
+  var themeColorScheme = (theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1) ? theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1.colorScheme : 'dark';
+  var dataSourceData = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {}; // transforms data structure into array of objects to allow for indexing metadata at layer level
+  // TODO: explore any potential changes when multiple layers are supported
+
+  var transformedData = exports.convertToArrOfObjects(dataSourceData.columns, dataSourceData.fields);
+  layers.forEach(function (l) {
+    var _a, _b; // add key `geobin` to the layer object if the data is returned from geostats commands
+    // to distinguish geostats commands from table commands
+
+
+    var geobinIdx = ((_a = dataSourceData.fields) !== null && _a !== void 0 ? _a : []).map(function (field) {
+      return typeof field === 'string' ? field : field.name;
+    }).indexOf('geobin');
+    var layer = l;
+
+    if (geobinIdx > -1) {
+      layer.geobin = dataSourceData.columns[geobinIdx];
+    }
+
+    layer.bubbleSizeFields = ((_b = dataSourceData.fields) !== null && _b !== void 0 ? _b : []).map(function (field) {
+      return typeof field === 'string' ? field : field.name;
+    }).filter(function (field, index) {
+      var _a, _b;
+
+      return !['latitude', 'longitude', 'geobin'].includes(field) && types_1.inferDataTypeFromData((_b = (_a = dataSourceData.columns) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : []) === 'number';
+    }); // Sanitize colors within layers
+
+    layer.seriesColors = Array.isArray(layer.seriesColors) ? colorUtils_1.sanitizeArrayOfColors(layer.seriesColors) : undefined;
+    layer.dataColors = Array.isArray(layer.dataColors) ? colorUtils_1.sanitizeArrayOfColors(layer.dataColors) : undefined;
+    layer.metadata = transformedData;
+  });
+  return Object.assign(Object.assign(Object.assign({}, themeColors), {
+    themeColorScheme: themeColorScheme
+  }), layers);
 };
-exports.default = PureMap;
 
-/***/ }),
-/* 193 */
-/***/ (function(module, exports) {
+exports.computeVizProps = computeVizProps; // HOC for stripping the internal fields for Maps
 
-module.exports = require("chroma-js");
+var withoutInternalFields = function withoutInternalFields(Viz) {
+  // eslint-disable-next-line react/display-name
+  var VizWithoutInternalFields = function VizWithoutInternalFields(_a) {
+    var dataSources = _a.dataSources,
+        otherProps = __rest(_a, ["dataSources"]);
 
-/***/ }),
-/* 194 */
-/***/ (function(module, exports) {
+    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
+      return React.createElement(Viz, Object.assign({}, otherProps));
+    }
 
-module.exports = require("@splunk/visualization-context/MapContext");
+    var primary = dataSources.primary;
+    var _primary$data = primary.data,
+        columns = _primary$data.columns,
+        fields = _primary$data.fields;
+    var newColumns = [];
+    var newFields = [];
 
-/***/ }),
-/* 195 */
-/***/ (function(module, exports, __webpack_require__) {
+    if (fields && columns && fields.length === columns.length) {
+      // computed sorted index for removal
+      var indicesToRemove = new Set(fields.reduce(function (arr, e, i) {
+        return (typeof e === 'string' ? e.startsWith('_') : e.name.toString().startsWith('_')) && arr.push(i), arr;
+      }, []));
+      newFields = fields.filter(function (d, i) {
+        return !indicesToRemove.has(i);
+      });
+      newColumns = columns.filter(function (d, i) {
+        return !indicesToRemove.has(i);
+      });
+    }
 
-"use strict";
+    var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
+      primary: Object.assign(Object.assign({}, primary), {
+        data: Object.assign(Object.assign({}, primary.data), {
+          columns: newColumns,
+          fields: newFields
+        })
+      })
+    });
+    return React.createElement(Viz, Object.assign({
+      dataSources: modifiedDatasources
+    }, otherProps));
+  };
+
+  VizWithoutInternalFields.propTypes = Viz.propTypes;
+  VizWithoutInternalFields.defaultProps = Viz.defaultProps;
+  VizWithoutInternalFields.config = Viz.config;
+  return VizWithoutInternalFields;
+}; // HOC for updating all null values in data columns to zeros
+// excluding 'latitude', 'longitude' and 'geobin'
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var withNullToZeros = function withNullToZeros(Viz) {
+  // eslint-disable-next-line react/display-name
+  var VizWithColumnsNullToZeros = function VizWithColumnsNullToZeros(_a) {
+    var dataSources = _a.dataSources,
+        options = _a.options,
+        otherProps = __rest(_a, ["dataSources", "options"]);
+
+    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
+      return React.createElement(Viz, Object.assign({}, otherProps));
+    }
+
+    var primary = dataSources.primary;
+    var _primary$data2 = primary.data,
+        columns = _primary$data2.columns,
+        fields = _primary$data2.fields;
+    var newColumns = columns;
+    var mergedOptions = hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, JSONSchemaUtils_1.pickFieldFromJSONSchema(config_1.default.optionsSchema, 'default'));
+
+    if (mergedOptions.layers && mergedOptions.layers.length && mergedOptions.layers[0].type === 'bubble') {
+      var latitudeField = dsl_1.getFieldsFromDSL(mergedOptions.layers[0].latitude, dataSources)[0] || '';
+      var longitudeField = dsl_1.getFieldsFromDSL(mergedOptions.layers[0].longitude, dataSources)[0] || '';
+      var excludedFields = [latitudeField, longitudeField, 'geobin'];
+      var indicesToEvaluate = new Set(fields.reduce(function (arr, e, i) {
+        var field = typeof e === 'string' ? e : e.name.toString();
+
+        if (!excludedFields.includes(field)) {
+          arr.push(i);
+        }
+
+        return arr;
+      }, []));
+      newColumns = columns.map(function (column, i) {
+        if (indicesToEvaluate.has(i)) {
+          return column.map(function (value) {
+            return !value ? 0 : value;
+          });
+        }
 
-var styled_components_1 = __webpack_require__(4);
+        return column;
+      });
+    }
 
-var lodash_1 = __webpack_require__(2);
+    var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
+      primary: Object.assign(Object.assign({}, primary), {
+        data: Object.assign(Object.assign({}, primary.data), {
+          columns: newColumns
+        })
+      })
+    });
+    return React.createElement(Viz, Object.assign({
+      dataSources: modifiedDatasources,
+      options: options
+    }, otherProps));
+  };
 
-var style_1 = __webpack_require__(13);
+  VizWithColumnsNullToZeros.propTypes = Viz.propTypes;
+  VizWithColumnsNullToZeros.defaultProps = Viz.defaultProps;
+  VizWithColumnsNullToZeros.config = Viz.config;
+  return VizWithColumnsNullToZeros;
+};
 
-var PureMapContainer = styled_components_1.default.div.withConfig({
-  displayName: "PureMapContainer",
-  componentId: "sc-1gjwxfv-0"
-})(["overflow:hidden;position:relative;z-index:0;background-color:", ";", ";.custom-marker{width:22px;height:28px;cursor:pointer;}.custom-bubble{cursor:pointer;}.maplibregl-ctrl-top-left{position:absolute;top:12px;left:16px;.maplibregl-ctrl-group{width:40px !important;height:87px !important;border-radius:4px;margin:8px 0px;background-color:", ";box-shadow:0px 26px 103px rgba(0,0,0,0.64),0px 11px 18px rgba(0,0,0,0.32),0px 3px 6px rgba(0,0,0,0.3);& button{width:40px;height:43px;border-top:0;}.mapboxgl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url('data:image/svg+xml;charset=UTF-8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1V7H1C0.447715 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H7V15C7 15.5523 7.44772 16 8 16C8.55229 16 9 15.5523 9 15V9H15C15.5523 9 16 8.55229 16 8C16 7.44772 15.5523 7 15 7H9V1Z\" fill=\"", "\" fill-opacity=\"", "\" /></svg>');}.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url('data:image/svg+xml;charset=UTF-8,<svg width=\"14\" height=\"3\" viewBox=\"0 0 14 3\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 1.99707C0 1.44479 0.447715 0.99707 1 0.99707H13C13.5523 0.99707 14 1.44479 14 1.99707C14 2.54936 13.5523 2.99707 13 2.99707H1C0.447715 2.99707 0 2.54936 0 1.99707Z\" fill=\"", "\" fill-opacity=\"", "\" /></svg>');}}}.maplibregl-ctrl-bottom-left{display:", ";position:absolute;z-index:0;bottom:16px;left:12px;width:86px;height:29px;border-radius:4px;margin:0;background-color:", ";box-shadow:0px 26px 103px rgba(0,0,0,0.13),0px 11px 18px rgba(0,0,0,0.06),0px 3px 6px rgba(0,0,0,0.06);.maplibregl-ctrl-scale{background-color:", ";color:", ";border:2px solid ", ";border-top:0;border-left:0;border-right:0;padding:0;margin:6px 8px 8px 8px;line-height:13px;letter-spacing:0.02em;font-family:sans-serif;font-size:10px;}}"], function (props) {
-  return props.backgroundColor;
-}, function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
-}, function (props) {
-  return props.controlBackgroundColor;
-}, function (props) {
-  return props.controlIconColorEncoded.color;
-}, function (props) {
-  return props.controlIconColorEncoded.opacity;
-}, function (props) {
-  return props.controlIconColorEncoded.color;
-}, function (props) {
-  return props.controlIconColorEncoded.opacity;
-}, function (props) {
-  return props.showScale ? 'inline' : 'none';
-}, function (props) {
-  return props.controlBackgroundColor;
-}, function (props) {
-  return props.controlBackgroundColor;
-}, function (props) {
-  return props.controlForegroundColor;
-}, function (props) {
-  return props.controlForegroundColor;
-});
-exports.default = PureMapContainer;
+var Map = withoutInternalFields(withNullToZeros(withDashboardViz_1.default({
+  ReactViz: PureMap_1.default,
+  vizConfig: config_1.default,
+  computeVizProps: exports.computeVizProps,
+  disableEditModeCover: true,
+  useIconPlaceholder: function useIconPlaceholder() {
+    return false;
+  }
+})));
+var themes = config_1.default.themes;
+exports.themes = themes;
+exports.default = Map;
 
 /***/ }),
-/* 196 */
+/* 194 */
 /***/ (function(module, exports) {
 
-module.exports = require("maplibre-gl/dist/maplibre-gl.css");
+module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
-/* 197 */
+/* 195 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2417,537 +2599,486 @@ module.exports = require("maplibre-gl/dist/maplibre-gl.css");
 
 var _slicedToArray = __webpack_require__(49);
 
-var _toConsumableArray = __webpack_require__(39);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pieSegment = exports.createPieChart = exports.updateBubbles = exports.bakeBubbleData = exports.sanitizeValues = exports.transposeArray = exports.matchSize = exports.getStaticColors = exports.getZoomLevelFromGeobin = exports.getZoomConstraintsFromTileConfig = exports.getMapStyle = exports.getTilePreset = exports.renderMarkerLayer = exports.getMarkerSVGBackgroundImg = 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 = void 0;
+exports.isLatLng = exports.formatColor = exports.DEFAULT_ZOOM = exports.DEFAULT_SHOW_SCALE = exports.DEFAULT_SCALE_UNIT = exports.DEFAULT_CONTROL_FOREGROUND_COLOR = exports.DEFAULT_CONTROL_BACKGROUND_COLOR = exports.DEFAULT_CENTER = void 0;
 
-var maplibre_gl_1 = __webpack_require__(123);
+var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(2);
 
-var d3_scale_1 = __webpack_require__(69);
-
-var colorUtils_1 = __webpack_require__(11);
-
-var visualization_color_palettes_1 = __webpack_require__(41);
-
-var MarkerIcons_1 = __webpack_require__(198);
-
-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 = 4;
-exports.MAX_BUBBLE_RADIUS = 50; // Returns marker background img with the requiref fillColor based on the theme
-
-var getMarkerSVGBackgroundImg = function getMarkerSVGBackgroundImg(color, theme) {
-  var fillColor = color.replace('#', '%23');
-  return theme === 'light' ? MarkerIcons_1.defaultMarkerLightTheme(fillColor) : MarkerIcons_1.defaultMarkerDarkTheme(fillColor);
-};
-
-exports.getMarkerSVGBackgroundImg = getMarkerSVGBackgroundImg; // Given a map instance and marker layer inputs, this method adds marker layers
-// Note :- Separated this as a util function for better testability
-
-var renderMarkerLayer = function renderMarkerLayer(markerLayer, themeColorScheme, map, setTooltipProps) {
-  if (!markerLayer || !map || !map.current || !Array.isArray(markerLayer.latitude) || !Array.isArray(markerLayer.longitude)) {
-    return null;
-  }
-
-  var lat = markerLayer.latitude;
-  var lon = markerLayer.longitude;
-  var isStaticColor = !markerLayer.dataColors;
-  var limit = Math.min(lat.length, lon.length, markerLayer.resultLimit ? markerLayer.resultLimit : exports.DEFAULT_RESULT_LIMIT);
-  var markers = [];
-  var colors = [];
+var react_1 = __webpack_require__(1);
 
-  var _loop = function _loop(i) {
-    var staticColor = markerLayer.seriesColors && colorUtils_1.isColor(markerLayer.seriesColors[0]) ? markerLayer.seriesColors[0] : exports.DEFAULT_CLUSTER_COLOR;
-    var dynamicColor = markerLayer.dataColors && colorUtils_1.isColor(markerLayer.dataColors[i]) ? markerLayer.dataColors[i] : exports.DEFAULT_CLUSTER_COLOR;
-    var color = isStaticColor ? staticColor : dynamicColor;
-    colors.push(color); // create a HTML element for each marker
-
-    var el = document.createElement('div');
-    el.className = 'custom-marker';
-    el.style.backgroundImage = "url('data:image/svg+xml;charset=UTF-8,".concat(exports.getMarkerSVGBackgroundImg(color, themeColorScheme), "')");
-    el.addEventListener('mouseover', function () {
-      setTooltipProps({
-        anchor: el,
-        longitude: lon[i],
-        latitude: lat[i]
-      });
-    });
-    el.addEventListener('mouseleave', function () {
-      setTooltipProps({
-        longitude: lon[i],
-        latitude: lat[i]
-      });
-    }); // make a marker for each [lon,lat] and add to the map
+var T = __webpack_require__(0);
 
-    markers.push(new maplibre_gl_1.Marker(el).setLngLat([lon[i], lat[i]]).addTo(map.current));
-  };
+var chroma = __webpack_require__(196);
 
-  for (var i = 0; i < limit; i += 1) {
-    _loop(i);
-  }
+var maplibre_gl_1 = __webpack_require__(126);
 
-  return {
-    markers: markers,
-    colors: colors
-  };
-};
+var MapContext_1 = __webpack_require__(197);
 
-exports.renderMarkerLayer = renderMarkerLayer;
-/**
- * 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 PureMapContainer_1 = __webpack_require__(198);
 
-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;
+__webpack_require__(199);
 
-  var _a, _b;
+var MapUtils_1 = __webpack_require__(102);
 
-  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;
-  });
+var ClusterLayer_1 = __webpack_require__(200);
 
-  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;
-    });
-  }
+exports.DEFAULT_CENTER = [0, 0];
+exports.DEFAULT_CONTROL_BACKGROUND_COLOR = '#2b3033';
+exports.DEFAULT_CONTROL_FOREGROUND_COLOR = '#B5B5B5';
+exports.DEFAULT_SCALE_UNIT = 'imperial';
+exports.DEFAULT_SHOW_SCALE = true;
+exports.DEFAULT_ZOOM = 0; // convert rgb/rgba/hex color to encoded color & opacity for SVG strings
 
+var formatColor = function formatColor(color) {
+  var chromaColor = chroma(color);
   return {
-    tilePreset: tilePreset,
-    defaultTileLight: defaultTileLight,
-    defaultTileDark: defaultTileDark
+    color: chroma(chromaColor.rgb()).hex().replace('#', '%23'),
+    opacity: chromaColor.alpha()
   };
 };
 
-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
-
+exports.formatColor = formatColor;
+PureMapContainer_1.default.displayName = 'PureMapContainer';
 
-    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
+var PureMap = function PureMap(props) {
+  var width = props.width,
+      height = props.height,
+      backgroundColor = props.backgroundColor,
+      baseLayerTileServer = props.baseLayerTileServer,
+      baseLayerTileServerType = props.baseLayerTileServerType,
+      center = props.center,
+      controlBackgroundColor = props.controlBackgroundColor,
+      controlForegroundColor = props.controlForegroundColor,
+      _props$layers = props.layers,
+      layers = _props$layers === void 0 ? [] : _props$layers,
+      scaleUnit = props.scaleUnit,
+      showScale = props.showScale,
+      themeColorScheme = props.themeColorScheme,
+      zoom = props.zoom,
+      onMapLoad = props.onMapLoad,
+      onMapClick = props.onMapClick;
 
+  var _react_1$useContext = react_1.useContext(MapContext_1.default),
+      defaultTileConfig = _react_1$useContext.defaultTileConfig,
+      customTileConfig = _react_1$useContext.customTileConfig;
 
-  return colorScheme === 'light' ? defaultTileLight : defaultTileDark;
-};
+  var basemapContainer = react_1.useRef(null);
+  var map = react_1.useRef(null);
+  var scaleControl = react_1.useRef(null);
+  var zoomControl = react_1.useRef(null);
 
-exports.getMapStyle = getMapStyle;
+  var _react_1$useMemo = react_1.useMemo(function () {
+    return MapUtils_1.getTilePreset({
+      defaultTileConfig: defaultTileConfig,
+      customTileConfig: customTileConfig
+    });
+  }, [defaultTileConfig, customTileConfig]),
+      tilePreset = _react_1$useMemo.tilePreset,
+      defaultTileLight = _react_1$useMemo.defaultTileLight,
+      defaultTileDark = _react_1$useMemo.defaultTileDark;
 
-var getZoomConstraintsFromTileConfig = function getZoomConstraintsFromTileConfig(tileConfig) {
-  var sources = tileConfig.sources,
-      layers = tileConfig.layers; // check sources for minzoom maxzoom first
+  var _React$useState = React.useState(zoom !== null && zoom !== void 0 ? zoom : exports.DEFAULT_ZOOM),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      currentZoomLevel = _React$useState2[0],
+      setCurrentZoomLevel = _React$useState2[1];
 
-  var sourceKeys = Object.keys(sources);
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isMapLoaded = _React$useState4[0],
+      setMapIsLoaded = _React$useState4[1]; // Assign default center when no center is defined
 
-  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
-      };
+  var lngLatCenter = react_1.useMemo(function () {
+    if (!MapUtils_1.isValidLatLon(center)) {
+      return exports.DEFAULT_CENTER;
     }
-  } // then check layers
 
+    return [center[1], center[0]];
+  }, [center]); // Assign default zoom when no zoom is defined
 
-  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
-      };
+  var zoomLevel = react_1.useMemo(function () {
+    if (zoom === undefined) {
+      return exports.DEFAULT_ZOOM;
     }
-  } // Maplibre default - would reset previous min/maxZoom
 
+    return zoom;
+  }, [zoom]);
 
-  return {
-    minZoom: 0,
-    maxZoom: 22
+  var fitMapToContent = function fitMapToContent() {
+    var lngLatBounds = MapUtils_1.getGlobalLayerBoundaries([layers[0]]);
+    map.current.fitBounds(lngLatBounds, {
+      padding: MapUtils_1.MAX_BUBBLE_RADIUS + 5,
+      animate: false
+    });
   };
-};
-
-exports.getZoomConstraintsFromTileConfig = getZoomConstraintsFromTileConfig;
 
-var getZoomLevelFromGeobin = function getZoomLevelFromGeobin(geobinStr) {
-  var _a;
+  var initializeMap = react_1.useCallback(function (mapStyle) {
+    map.current = new maplibre_gl_1.Map(Object.assign({
+      container: basemapContainer.current,
+      preserveDrawingBuffer: true,
+      style: mapStyle,
+      center: lngLatCenter,
+      zoom: zoomLevel
+    }, MapUtils_1.getZoomConstraintsFromTileConfig(mapStyle))); // Fired immediately after all necessary resources have been downloaded
+    // and the first visually complete rendering of the map has occurred.
 
-  if (!geobinStr) {
-    return null;
-  } // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range
+    map.current.on('load', function () {
+      if (layers.length > 0 && center === undefined && zoom === undefined) {
+        fitMapToContent();
+      }
 
+      setMapIsLoaded(true); // TODO :- Temp timeout added for onMapLoad event to avoid flaky screenshots caused by
+      // https://maplibre.org/maplibre-gl-js-docs/api/map/#map#fitbounds. Need alternate approach to handle the same.
 
-  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;
-};
+      setTimeout(function () {
+        return onMapLoad();
+      }, 500);
+    });
+    map.current.on('zoomend', function () {
+      setCurrentZoomLevel(map.current.getZoom());
+    }); // zoom
 
-exports.getZoomLevelFromGeobin = getZoomLevelFromGeobin; // Bubble colors - static
+    zoomControl.current = new maplibre_gl_1.NavigationControl({
+      showCompass: false
+    });
+    map.current.addControl(zoomControl.current, 'top-left');
+  }, [lngLatCenter, zoomLevel, layers.length, fitMapToContent]);
+  var initializeScale = react_1.useCallback(function () {
+    scaleControl.current = new maplibre_gl_1.ScaleControl({
+      maxWidth: 70,
+      unit: scaleUnit
+    });
+    map.current.addControl(scaleControl.current);
+  }, [scaleUnit]);
+  var updateScale = react_1.useCallback(function () {
+    var _a;
 
-var getStaticColors = function getStaticColors(colorCount, colorArray) {
-  if (colorCount < 0 || !colorCount) {
-    return [exports.DEFAULT_CLUSTER_COLOR];
-  }
+    if (showScale) {
+      (_a = scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.current) === null || _a === void 0 ? void 0 : _a.setUnit(scaleUnit);
+    }
+  }, [scaleUnit, showScale]);
+  react_1.useEffect(function () {
+    if (map.current) {
+      map.current.resize();
+    }
+  }, [width, height]);
+  react_1.useEffect(function () {
+    // do not render when defaultTileConfig, customTileConfig and tileset are not configured
+    if (Object.keys(tilePreset).length === 0 && (!baseLayerTileServer || !baseLayerTileServerType)) {
+      // eslint-disable-next-line no-console
+      console.warn('Map Tile Server configuration is missing or invalid. Please provide a valid configuration');
+      return;
+    }
 
-  if (!colorArray || !colorArray.length) {
-    return _toConsumableArray(Array(colorCount).keys()).map(function (i) {
-      return exports.DEFAULT_SERIES_COLORS[i];
+    var mapStyle = MapUtils_1.getMapStyle({
+      baseLayerTileServer: baseLayerTileServer,
+      baseLayerTileServerType: baseLayerTileServerType,
+      tilePreset: tilePreset,
+      colorScheme: themeColorScheme,
+      defaultTileLight: defaultTileLight,
+      defaultTileDark: defaultTileDark
     });
-  } // loop through colorArray to pick the first $colorCount colors
-  // start from begining again if colorCount > colorArray.length
+    mapStyle.version = MapUtils_1.MAP_STYLE_VERSION_NUMBER; // If the map has already been initialized, we update the styles
 
+    if (map.current) {
+      // Refer to https://maplibre.org/maplibre-gl-js-docs/api/map/#setstyle-example for options.diff (default is true)
+      map.current.setStyle(lodash_1.omit(mapStyle, ['theme', 'name', 'key']));
 
-  return _toConsumableArray(Array(colorCount).keys()).map(function (i) {
-    return colorUtils_1.isColor(colorArray[i % colorArray.length]) ? colorArray[i % colorArray.length] : exports.DEFAULT_CLUSTER_COLOR;
-  });
+      var _MapUtils_1$getZoomCo = MapUtils_1.getZoomConstraintsFromTileConfig(mapStyle),
+          minZoom = _MapUtils_1$getZoomCo.minZoom,
+          maxZoom = _MapUtils_1$getZoomCo.maxZoom;
+
+      map.current.setMinZoom(minZoom);
+      map.current.setMaxZoom(maxZoom);
+      updateScale();
+    } else {
+      // initialize the map only once with a constructed style from user configured options
+      // or default configs from the map context
+      initializeMap(lodash_1.omit(mapStyle, ['theme', 'name', 'key']));
+      initializeScale();
+    }
+  }, [tilePreset, initializeMap, initializeScale, updateScale, defaultTileLight, defaultTileDark, baseLayerTileServer, baseLayerTileServerType, themeColorScheme]);
+  react_1.useEffect(function () {
+    if (map.current) {
+      map.current.flyTo({
+        center: lngLatCenter,
+        zoom: zoomLevel
+      });
+    }
+  }, [lngLatCenter, zoom]);
+  react_1.useEffect(function () {
+    return function () {
+      if (map.current) {
+        map.current.remove();
+      }
+    };
+  }, []);
+
+  var _layers = _slicedToArray(layers, 1),
+      clusterLayer = _layers[0];
+
+  return React.createElement(React.Fragment, null, React.createElement(PureMapContainer_1.default, {
+    className: "puremap",
+    width: width,
+    height: height,
+    backgroundColor: backgroundColor,
+    controlBackgroundColor: controlBackgroundColor,
+    controlForegroundColor: controlForegroundColor,
+    controlIconColorEncoded: exports.formatColor(controlForegroundColor),
+    ref: basemapContainer,
+    showScale: showScale
+  }, isMapLoaded && clusterLayer && React.createElement(ClusterLayer_1.default, {
+    clusterLayer: clusterLayer,
+    themeColorScheme: themeColorScheme,
+    map: map,
+    zoom: currentZoomLevel,
+    onMapClick: onMapClick
+  })));
 };
 
-exports.getStaticColors = getStaticColors; // Bubble size
+var isLatLng = function isLatLng(props, propName, componentName) {
+  if (!props[propName]) {
+    return null;
+  }
 
-var matchSize = function matchSize(dataRange, data) {
-  var size = d3_scale_1.scalePow().exponent(0.2).domain(dataRange).range([exports.MIN_BUBBLE_RADIUS, exports.MAX_BUBBLE_RADIUS])(data);
+  var latAbs = Math.abs(props[propName][0]);
+  var lonAbs = Math.abs(props[propName][1]);
+  var latlon = props[propName];
 
-  if (size > exports.MAX_BUBBLE_RADIUS) {
-    return exports.MAX_BUBBLE_RADIUS;
+  if (latAbs > MapUtils_1.MAX_LATITUDE && lonAbs <= MapUtils_1.MAX_LATITUDE) {
+    throw new Error("".concat(componentName, " ").concat(propName, " may have reversed [lat, lon] ranges."));
   }
 
-  if (size < exports.MIN_BUBBLE_RADIUS) {
-    return exports.MIN_BUBBLE_RADIUS;
+  if (!MapUtils_1.isValidLatLon(latlon)) {
+    throw new Error("".concat(componentName, " ").concat(propName, " incorrect [lat, lon] ranges."));
   }
 
-  return size;
+  return null;
+};
+
+exports.isLatLng = isLatLng;
+PureMap.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  mode: T.string,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  backgroundColor: T.string,
+  baseLayerTileServer: T.string,
+  baseLayerTileServerType: T.string,
+  center: exports.isLatLng,
+  controlBackgroundColor: T.string,
+  controlForegroundColor: T.string,
+  layers: T.arrayOf(T.shape({
+    type: T.string,
+    latitude: T.arrayOf(T.number),
+    longitude: T.arrayOf(T.number),
+    label: T.string,
+    showInLegend: T.bool,
+    dataColors: T.oneOfType([T.string, T.arrayOf(T.string)]),
+    seriesColors: T.arrayOf(T.string),
+    tooltipFields: T.arrayOf(T.string),
+    resultLimit: T.number
+  })),
+  scaleUnit: T.string,
+  showScale: T.bool,
+  themeColorScheme: T.string,
+  zoom: T.number,
+  onMapLoad: T.func,
+  onMapClick: T.func
+};
+PureMap.defaultProps = {
+  mode: 'view',
+  width: 800,
+  height: 500,
+  backgroundColor: '#0b0c0e',
+  controlBackgroundColor: exports.DEFAULT_CONTROL_BACKGROUND_COLOR,
+  controlForegroundColor: exports.DEFAULT_CONTROL_FOREGROUND_COLOR,
+  scaleUnit: exports.DEFAULT_SCALE_UNIT,
+  showScale: exports.DEFAULT_SHOW_SCALE,
+  layers: [],
+  themeColorScheme: 'dark',
+  onMapLoad: lodash_1.noop,
+  onMapClick: lodash_1.noop
 };
+exports.default = PureMap;
+
+/***/ }),
+/* 196 */
+/***/ (function(module, exports) {
+
+module.exports = require("chroma-js");
+
+/***/ }),
+/* 197 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/MapContext");
+
+/***/ }),
+/* 198 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var styled_components_1 = __webpack_require__(4);
+
+var lodash_1 = __webpack_require__(2);
+
+var style_1 = __webpack_require__(14);
+
+var PureMapContainer = styled_components_1.default.div.withConfig({
+  displayName: "PureMapContainer",
+  componentId: "sc-1gjwxfv-0"
+})(["overflow:hidden;position:relative;z-index:0;background-color:", ";", ";.maplibregl-ctrl-top-left{position:absolute;top:12px;left:16px;.maplibregl-ctrl-group{width:40px !important;height:87px !important;border-radius:4px;margin:8px 0px;background-color:", ";box-shadow:0px 26px 103px rgba(0,0,0,0.64),0px 11px 18px rgba(0,0,0,0.32),0px 3px 6px rgba(0,0,0,0.3);& button{width:40px;height:43px;border-top:0;}.mapboxgl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url('data:image/svg+xml;charset=UTF-8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1V7H1C0.447715 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H7V15C7 15.5523 7.44772 16 8 16C8.55229 16 9 15.5523 9 15V9H15C15.5523 9 16 8.55229 16 8C16 7.44772 15.5523 7 15 7H9V1Z\" fill=\"", "\" fill-opacity=\"", "\" /></svg>');}.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url('data:image/svg+xml;charset=UTF-8,<svg width=\"14\" height=\"3\" viewBox=\"0 0 14 3\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 1.99707C0 1.44479 0.447715 0.99707 1 0.99707H13C13.5523 0.99707 14 1.44479 14 1.99707C14 2.54936 13.5523 2.99707 13 2.99707H1C0.447715 2.99707 0 2.54936 0 1.99707Z\" fill=\"", "\" fill-opacity=\"", "\" /></svg>');}}}.maplibregl-ctrl-bottom-left{display:", ";position:absolute;z-index:0;bottom:16px;left:12px;width:86px;height:29px;border-radius:4px;margin:0;background-color:", ";box-shadow:0px 26px 103px rgba(0,0,0,0.13),0px 11px 18px rgba(0,0,0,0.06),0px 3px 6px rgba(0,0,0,0.06);.maplibregl-ctrl-scale{background-color:", ";color:", ";border:2px solid ", ";border-top:0;border-left:0;border-right:0;padding:0;margin:6px 8px 8px 8px;line-height:13px;letter-spacing:0.02em;font-family:sans-serif;font-size:10px;}}"], function (props) {
+  return props.backgroundColor;
+}, function (props) {
+  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+}, function (props) {
+  return props.controlBackgroundColor;
+}, function (props) {
+  return props.controlIconColorEncoded.color;
+}, function (props) {
+  return props.controlIconColorEncoded.opacity;
+}, function (props) {
+  return props.controlIconColorEncoded.color;
+}, function (props) {
+  return props.controlIconColorEncoded.opacity;
+}, function (props) {
+  return props.showScale ? 'inline' : 'none';
+}, function (props) {
+  return props.controlBackgroundColor;
+}, function (props) {
+  return props.controlBackgroundColor;
+}, function (props) {
+  return props.controlForegroundColor;
+}, function (props) {
+  return props.controlForegroundColor;
+});
+exports.default = PureMapContainer;
 
-exports.matchSize = matchSize;
+/***/ }),
+/* 199 */
+/***/ (function(module, exports) {
 
-var transposeArray = function transposeArray(array) {
-  if (!array || !array.length || !array[0] || !array[0].length) {
-    return [];
-  }
+module.exports = require("maplibre-gl/dist/maplibre-gl.css");
 
-  return array[0].map(function (_, i) {
-    return array.map(function (row) {
-      return row[i];
-    });
-  });
-};
+/***/ }),
+/* 200 */
+/***/ (function(module, exports, __webpack_require__) {
 
-exports.transposeArray = transposeArray; // sanitize values: update all null, undefined, or negative values to 0
+"use strict";
 
-var sanitizeValues = function sanitizeValues(values) {
-  // null / undefined
-  if (!values) {
-    return 0;
-  } // number
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  if (!Array.isArray(values)) {
-    return values > 0 ? values : 0;
-  } // array
+var React = __webpack_require__(1);
 
+var BubbleLayer_1 = __webpack_require__(201);
 
-  return values.map(function (arr) {
-    return exports.sanitizeValues(arr);
-  });
-};
+var MarkerLayer_1 = __webpack_require__(203);
 
-exports.sanitizeValues = sanitizeValues;
+var ClusterLayer = function ClusterLayer(_ref) {
+  var clusterLayer = _ref.clusterLayer,
+      themeColorScheme = _ref.themeColorScheme,
+      zoom = _ref.zoom,
+      map = _ref.map,
+      onMapClick = _ref.onMapClick;
 
-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 = layer.bubbleSize.map(function (n) {
-    return [n];
-  });
-  var transposedSanitizedBubbleSize = sanitizedBubbleSize.map(function (n) {
-    return [n];
-  });
-  var isPie = false; // format array if bubbleSize is passed as an array of array (data frame)
-
-  if (typeof layer.bubbleSize[0] !== 'number') {
-    // 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;
+  if (((_a = map === null || map === void 0 ? void 0 : map.current) === null || _a === void 0 ? void 0 : _a.isStyleLoaded) && [clusterLayer.longitude, clusterLayer.latitude].every(Array.isArray)) {
+    if ((clusterLayer === null || clusterLayer === void 0 ? void 0 : clusterLayer.type) === 'marker' && !('geobin' in clusterLayer)) {
+      return React.createElement(MarkerLayer_1.default, {
+        markerLayer: clusterLayer,
+        themeColorScheme: themeColorScheme,
+        map: map,
+        onMapClick: onMapClick
+      });
     }
-  }
 
-  if (!transposedBubbleSize || !transposedBubbleSize.length) {
-    return null;
+    if ((clusterLayer === null || clusterLayer === void 0 ? void 0 : clusterLayer.type) === 'bubble' && 'geobin' in clusterLayer && 'bubbleSize' in clusterLayer) {
+      return React.createElement(BubbleLayer_1.default, {
+        bubbleLayer: clusterLayer,
+        themeColorScheme: themeColorScheme,
+        map: map,
+        zoom: zoom,
+        onMapClick: onMapClick
+      });
+    }
   }
 
-  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]
-    };
-  }).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
-  };
+  return null;
 };
 
-exports.bakeBubbleData = bakeBubbleData; // Update bubbles on each zoom level
-
-var updateBubbles = function updateBubbles(dataObj, zoomLevel, staticColors, dynamicColors, theme, map, setTooltipProps) {
-  if (!dataObj || !dataObj.data.length || !map || !map.current) {
-    return null;
-  }
-
-  var data = dataObj.data,
-      dataRange = dataObj.dataRange,
-      resultLimit = dataObj.resultLimit,
-      bubbleSizeFields = dataObj.bubbleSizeFields,
-      isPie = dataObj.isPie;
-
-  if (!data || !data.length || !dataRange || !dataRange.length) {
-    return null;
-  }
-
-  var roundedZoom = Math.round(zoomLevel);
-  var themeColor = theme === 'light' ? '#ffffff' : '#1a1c20'; // filter data for the current zoom level and sort base on values
+exports.default = ClusterLayer;
 
-  var dataToRender = data.reduce(function (acc, datum, i) {
-    if (datum.zoom === roundedZoom) {
-      acc.push({
-        data: datum,
-        idx: i
-      });
-    }
+/***/ }),
+/* 201 */
+/***/ (function(module, exports, __webpack_require__) {
 
-    return acc;
-  }, []).slice(0, resultLimit || exports.DEFAULT_RESULT_LIMIT).sort(function (a, b) {
-    return lodash_1.sum(b.data.values) - lodash_1.sum(a.data.values);
-  });
-  return dataToRender.map(function (datum, i) {
-    // create an HTML element for each bubble
-    var colors = dynamicColors ? [dataToRender.map(function (obj) {
-      return colorUtils_1.isColor(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : exports.DEFAULT_CLUSTER_COLOR;
-    })[i]] : staticColors;
-    var el = exports.createPieChart(datum.data.sanitizedValues, dataRange, colors, themeColor, isPie);
+"use strict";
 
-    var _datum$data$coordinat = _slicedToArray(datum.data.coordinates, 2),
-        longitude = _datum$data$coordinat[0],
-        latitude = _datum$data$coordinat[1];
 
-    var bubbleSize = datum.data.values.map(function (count, index) {
-      return {
-        name: bubbleSizeFields[index],
-        count: count,
-        color: colors[index]
-      };
-    });
-    el.addEventListener('mouseover', function () {
-      setTooltipProps({
-        anchor: el,
-        longitude: longitude,
-        latitude: latitude,
-        bubbleSize: bubbleSize
-      });
-    });
-    el.addEventListener('mouseleave', function () {
-      setTooltipProps({
-        longitude: longitude,
-        latitude: latitude,
-        bubbleSize: bubbleSize
-      });
-    });
-    return new maplibre_gl_1.Marker({
-      element: el
-    }).setLngLat(datum.data.coordinates).addTo(map.current);
-  });
-};
+var _slicedToArray = __webpack_require__(49);
 
-exports.updateBubbles = updateBubbles; // Create an SVG pie from column values
+var _defineProperty = __webpack_require__(8);
 
-var createPieChart = function createPieChart(orginalValues, valueRange, colors, themeColor, isPie) {
-  // create a div for pie (bubble)
-  var el = document.createElement('div');
-  var allZeros = true;
-  orginalValues.forEach(function (v) {
-    if (v !== 0) {
-      allZeros = false;
-    }
-  });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Bubble = exports.PieSegment = void 0;
 
-  if (allZeros || !orginalValues || !orginalValues.length) {
-    return el;
-  } // sanitize values
+var React = __webpack_require__(1);
 
+var styled_components_1 = __webpack_require__(4);
 
-  var values = orginalValues.map(function (v) {
-    return v > 0 ? v : 0;
-  }); // compute offsets for pie segments
+var lodash_1 = __webpack_require__(2);
 
-  var offsets = [];
-  var total = 0;
-  values.forEach(function (count) {
-    offsets.push(total);
-    total += count;
-  });
-  var radius = exports.matchSize(valueRange, total);
-  var width = radius * 2; // create bubble svg
+var colorUtils_1 = __webpack_require__(12);
 
-  var html = "<div>\n         <svg width=\"".concat(width, "\" height=\"").concat(width, "\" viewbox=\"-3 -3 ").concat(width + 6, " ").concat(width + 6, "\" >"); // add border for pie
+var MapUtils_1 = __webpack_require__(102);
 
-  if (isPie) {
-    html += "<circle cx=".concat(radius, " cy=").concat(radius, " r=").concat(radius, " fill='none' stroke-width=\"2\" stroke=").concat(themeColor, " stroke-opacity=\"0.3\"/>");
-  } // create pie segments
+var MarkerWrapper_1 = __webpack_require__(127);
 
+exports.PieSegment = React.memo(function (_ref) {
+  var start = _ref.start,
+      end = _ref.end,
+      radius = _ref.radius,
+      color = _ref.color,
+      themeColor = _ref.themeColor,
+      segmentMetadata = _ref.segmentMetadata,
+      handleBubbleClick = _ref.handleBubbleClick;
 
-  values.forEach(function (v, i) {
-    html += exports.pieSegment(offsets[i] / total, (offsets[i] + v) / total, radius, colors[i], themeColor);
-  });
-  html += "</svg>\n        </div>";
-  el.className = 'custom-bubble';
-  el.innerHTML = html;
-  return el;
-};
+  var _ref2 = segmentMetadata !== null && segmentMetadata !== void 0 ? segmentMetadata : {},
+      name = _ref2.name,
+      count = _ref2.count;
 
-exports.createPieChart = createPieChart; // Create a pie segment
+  var handleSegmentClick = React.useCallback(function (e) {
+    handleBubbleClick(e, name, count);
+  }, [name, count, handleBubbleClick]);
 
-var pieSegment = function pieSegment(start, end, radius, color, themeColor) {
   if (end - start === 1) {
-    return "<circle cx=".concat(radius, " cy=").concat(radius, " r=").concat(radius - 1, " fill=").concat(color, " fill-opacity=\"0.5\" stroke-width=\"1.5\" stroke=").concat(color, " />");
+    return React.createElement("circle", {
+      onClick: handleSegmentClick,
+      cx: radius,
+      cy: radius,
+      r: radius - 1,
+      fill: color,
+      fillOpacity: 0.5,
+      strokeWidth: 1.5,
+      stroke: color
+    });
   }
 
   var a0 = 2 * Math.PI * (start - 0.25);
@@ -2957,37 +3088,198 @@ var pieSegment = function pieSegment(start, end, radius, color, themeColor) {
   var x1 = Math.cos(a1);
   var y1 = Math.sin(a1);
   var arc = end - start > 0.5 ? 1 : 0;
-  return "<path d=\"M ".concat(radius, " ").concat(radius, " L ").concat(radius + radius * x0, " ").concat(radius + radius * y0, " A ").concat(radius, " ").concat(radius, " 0 ").concat(arc, " 1 ").concat(radius + radius * x1, " ").concat(radius + radius * y1, " L ").concat(radius, " ").concat(radius, " A 0 0 0 ").concat(arc, " 0 ").concat(radius, " ").concat(radius, "\" fill=\"").concat(color, "\" fill-opacity=\"0.8\" stroke=\"").concat(themeColor, "\" stroke-width=\"2\" stroke-opacity=\"0.3\" />");
-};
+  return React.createElement("path", {
+    onClick: handleSegmentClick,
+    d: "M ".concat(radius, " ").concat(radius, " L ").concat(radius + radius * x0, " ").concat(radius + radius * y0, " A ").concat(radius, " ").concat(radius, " 0 ").concat(arc, " 1 ").concat(radius + radius * x1, " ").concat(radius + radius * y1, " L ").concat(radius, " ").concat(radius, " A 0 0 0 ").concat(arc, " 0 ").concat(radius, " ").concat(radius),
+    fill: color,
+    fillOpacity: 0.8,
+    stroke: themeColor,
+    strokeWidth: 2,
+    strokeOpacity: 0.3
+  });
+});
+exports.PieSegment.displayName = 'MapBubblePieSegment';
+var StyledMarkerWrapper = styled_components_1.default(MarkerWrapper_1.default).withConfig({
+  displayName: "BubbleLayer__StyledMarkerWrapper",
+  componentId: "sc-8aqbb-0"
+})(["cursor:pointer;"]);
+exports.Bubble = React.memo(function (_ref3) {
+  var originalValues = _ref3.originalValues,
+      valueRange = _ref3.valueRange,
+      colors = _ref3.colors,
+      themeColor = _ref3.themeColor,
+      isPie = _ref3.isPie,
+      latitude = _ref3.latitude,
+      longitude = _ref3.longitude,
+      bubbleSize = _ref3.bubbleSize,
+      map = _ref3.map,
+      handleMapClick = _ref3.handleMapClick;
+  var onBubbleClick = React.useCallback(function (e, name, value) {
+    handleMapClick(e, name, value);
+    e.stopPropagation();
+  }, [bubbleSize]);
+  var bubble = React.useMemo(function () {
+    var allZeros = originalValues.every(function (v) {
+      return v === 0;
+    });
 
-exports.pieSegment = pieSegment;
+    if (allZeros || !originalValues.length) {
+      return null;
+    } // sanitize values
 
-/***/ }),
-/* 198 */
-/***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
+    var values = originalValues.map(function (v) {
+      return v > 0 ? v : 0;
+    }); // compute offsets for pie segments
 
+    var offsets = [];
+    var total = 0;
+    values.forEach(function (count) {
+      offsets.push(total);
+      total += count;
+    });
+    var radius = MapUtils_1.matchBubbleSize(valueRange, total);
+    var width = radius * 2;
+    return React.createElement("svg", {
+      width: width,
+      height: width,
+      viewBox: "-3 -3 ".concat(width + 6, " ").concat(width + 6)
+    }, isPie ? React.createElement("circle", {
+      cx: radius,
+      cy: radius,
+      r: radius,
+      fill: "none",
+      strokeWidth: 2,
+      stroke: themeColor,
+      strokeOpacity: 0.3
+    }) : null, values.map(function (v, i) {
+      return React.createElement(exports.PieSegment, {
+        key: String(i),
+        start: offsets[i] / total,
+        end: (offsets[i] + v) / total,
+        radius: radius,
+        color: colors[i],
+        themeColor: themeColor,
+        segmentMetadata: bubbleSize[i],
+        handleBubbleClick: onBubbleClick
+      });
+    }));
+  }, [colors, isPie, originalValues, themeColor, valueRange]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+  if (!bubble) {
+    return null;
+  }
+
+  return React.createElement(StyledMarkerWrapper, {
+    longitude: longitude,
+    latitude: latitude,
+    bubbleSize: bubbleSize,
+    map: map,
+    "data-test-type": "bubble"
+  }, bubble);
 });
-exports.defaultMarkerDarkTheme = exports.defaultMarkerLightTheme = void 0;
+exports.Bubble.displayName = 'MapBubble';
 
-var defaultMarkerLightTheme = function defaultMarkerLightTheme(fillColor) {
-  return "<svg width=\"22\" height=\"28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" fill=\"".concat(fillColor, "\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"%2308090A\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"").concat(fillColor, "\" stroke-opacity=\".7\"/></svg>");
-};
+var BubbleLayer = function BubbleLayer(props) {
+  var bubbleLayer = props.bubbleLayer,
+      themeColorScheme = props.themeColorScheme,
+      map = props.map,
+      zoom = props.zoom,
+      onMapClick = props.onMapClick;
+  bubbleLayer.seriesColors = bubbleLayer.seriesColors || MapUtils_1.DEFAULT_SERIES_COLORS;
+  bubbleLayer.bubbleSize = bubbleLayer.bubbleSize || [];
+  var bakedData = React.useMemo(function () {
+    return MapUtils_1.bakeBubbleData(bubbleLayer);
+  }, [bubbleLayer]);
+  var staticColors = React.useMemo(function () {
+    return MapUtils_1.getStaticColors(bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors);
+  }, [bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors]);
+
+  var _ref4 = bakedData !== null && bakedData !== void 0 ? bakedData : {},
+      _ref4$data = _ref4.data,
+      data = _ref4$data === void 0 ? [] : _ref4$data,
+      _ref4$dataRange = _ref4.dataRange,
+      dataRange = _ref4$dataRange === void 0 ? [] : _ref4$dataRange,
+      resultLimit = _ref4.resultLimit,
+      bubbleSizeFields = _ref4.bubbleSizeFields,
+      isPie = _ref4.isPie;
+
+  var roundedZoom = Math.round(zoom);
+  var themeColor = themeColorScheme === 'light' ? '#ffffff' : '#1a1c20';
+  var dynamicColors = bubbleLayer.dataColors; // filter data for the current zoom level and sort base on values
+
+  var dataToRender = React.useMemo(function () {
+    return data.reduce(function (acc, datum, i) {
+      if (datum.zoom === roundedZoom) {
+        acc.push({
+          data: datum,
+          idx: i
+        });
+      }
+
+      return acc;
+    }, []).slice(0, resultLimit || MapUtils_1.DEFAULT_RESULT_LIMIT).sort(function (a, b) {
+      return lodash_1.sum(b.data.values) - lodash_1.sum(a.data.values);
+    });
+  }, [data, resultLimit, roundedZoom]);
 
-exports.defaultMarkerLightTheme = defaultMarkerLightTheme;
+  var _handleMapClick = React.useCallback(function (e, name, value, i) {
+    var _a, _b, _c; // retrieve metadata from the appropriate datum, indexed by i
 
-var defaultMarkerDarkTheme = function defaultMarkerDarkTheme(fillColor) {
-  return "<svg width=\"22\" height=\"28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" fill=\"".concat(fillColor, "\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"%2308090A\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"").concat(fillColor, "\" stroke-opacity=\".15\"/></svg>");
+
+    var metadata = (_c = (_b = (_a = dataToRender[i]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.metadata) !== null && _c !== void 0 ? _c : {};
+    var payload = Object.keys(metadata).reduce(function (acc, curr) {
+      var key = "row.".concat(curr, ".value");
+      var val = String(metadata[curr]);
+      return Object.assign(Object.assign({}, acc), _defineProperty({}, key, val));
+    }, {
+      name: name,
+      value: String(value)
+    });
+    onMapClick({
+      e: e,
+      payload: payload
+    });
+  }, [dataToRender]);
+
+  return React.createElement(React.Fragment, null, dataToRender.map(function (datum, i) {
+    var colors = dynamicColors ? [dataToRender.map(function (obj) {
+      return colorUtils_1.isColor(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : MapUtils_1.DEFAULT_CLUSTER_COLOR;
+    })[i]] : staticColors;
+
+    var _datum$data$coordinat = _slicedToArray(datum.data.coordinates, 2),
+        longitude = _datum$data$coordinat[0],
+        latitude = _datum$data$coordinat[1];
+
+    var bubbleSize = datum.data.values.map(function (count, index) {
+      return {
+        name: bubbleSizeFields[index],
+        count: count,
+        color: colors[index]
+      };
+    });
+    return React.createElement(exports.Bubble, {
+      key: String(i),
+      originalValues: datum.data.values,
+      valueRange: dataRange,
+      colors: colors,
+      themeColor: themeColor,
+      isPie: isPie,
+      longitude: longitude,
+      latitude: latitude,
+      bubbleSize: bubbleSize,
+      map: map,
+      handleMapClick: function handleMapClick(e, name, value) {
+        return _handleMapClick(e, name, value, i);
+      }
+    });
+  }));
 };
 
-exports.defaultMarkerDarkTheme = defaultMarkerDarkTheme;
+exports.default = BubbleLayer;
 
 /***/ }),
-/* 199 */
+/* 202 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3002,7 +3294,7 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var Popover_1 = __webpack_require__(100);
+var Popover_1 = __webpack_require__(103);
 
 var i18n_1 = __webpack_require__(3);
 
@@ -3013,7 +3305,7 @@ var StyledPopover = styled_components_1.default(Popover_1.default).withConfig({
 var StyledTable = styled_components_1.default.table.withConfig({
   displayName: "Tooltip__StyledTable",
   componentId: "xwewsa-1"
-})(["padding:2px 6px 2px 6px;width:100%;"]);
+})(["margin:2px 6px 2px 6px;width:calc(100% - 12px);"]);
 var StyledTitleColumn = styled_components_1.default.td.withConfig({
   displayName: "Tooltip__StyledTitleColumn",
   componentId: "xwewsa-2"
@@ -3063,13 +3355,14 @@ var convertDegToDMS = function convertDegToDMS(decimalDegree, type) {
 exports.convertDegToDMS = convertDegToDMS;
 
 var Tooltip = function Tooltip(_ref) {
-  var anchor = _ref.anchor,
+  var open = _ref.open,
+      anchor = _ref.anchor,
       latitude = _ref.latitude,
       longitude = _ref.longitude,
       _ref$bubbleSize = _ref.bubbleSize,
       bubbleSize = _ref$bubbleSize === void 0 ? [] : _ref$bubbleSize;
   return React.createElement(StyledPopover, {
-    open: !!anchor,
+    open: open,
     anchor: anchor,
     "data-test": "map-marker-tooltip",
     defaultPlacement: "above"
@@ -3096,7 +3389,161 @@ var Tooltip = function Tooltip(_ref) {
 exports.default = Tooltip;
 
 /***/ }),
-/* 200 */
+/* 203 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _defineProperty = __webpack_require__(8);
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateMarkerWrapperProps = exports.MarkerIcon = void 0;
+
+var styled_components_1 = __webpack_require__(4);
+
+var React = __webpack_require__(1);
+
+var colorUtils_1 = __webpack_require__(12);
+
+var MapUtils_1 = __webpack_require__(102);
+
+var MarkerWrapper_1 = __webpack_require__(127);
+
+var MarkerIcon = function MarkerIcon(_a) {
+  var theme = _a.theme,
+      color = _a.color,
+      otherProps = __rest(_a, ["theme", "color"]);
+
+  var strokeOpacity = theme === 'light' ? 0.7 : 0.15;
+  return React.createElement("svg", Object.assign({
+    width: 22,
+    height: 28,
+    fill: "none"
+  }, otherProps), React.createElement("path", {
+    d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
+    fill: color
+  }), React.createElement("path", {
+    d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
+    stroke: "#08090A"
+  }), React.createElement("path", {
+    d: "M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z",
+    stroke: color,
+    strokeOpacity: strokeOpacity
+  }));
+};
+
+exports.MarkerIcon = MarkerIcon;
+var Marker = React.memo(function (_ref) {
+  var latitude = _ref.latitude,
+      longitude = _ref.longitude,
+      color = _ref.color,
+      themeColorScheme = _ref.themeColorScheme,
+      map = _ref.map,
+      handleLayerClick = _ref.handleLayerClick;
+  var icon = React.useMemo(function () {
+    return React.createElement(exports.MarkerIcon, {
+      color: color,
+      theme: themeColorScheme,
+      onClick: handleLayerClick
+    });
+  }, [color, themeColorScheme]);
+  return React.createElement(StyledMarkerWrapper, {
+    latitude: latitude,
+    longitude: longitude,
+    map: map,
+    "data-test-type": "marker"
+  }, icon);
+});
+Marker.displayName = 'MapMarker';
+var StyledMarkerWrapper = styled_components_1.default(MarkerWrapper_1.default).withConfig({
+  displayName: "MarkerLayer__StyledMarkerWrapper",
+  componentId: "ej9u2l-0"
+})(["width:22px;height:28px;cursor:pointer;"]);
+
+var generateMarkerWrapperProps = function generateMarkerWrapperProps(markerLayer) {
+  var latArray = markerLayer.latitude;
+  var lonArray = markerLayer.longitude;
+  var isStaticColor = !markerLayer.dataColors;
+  var limit = Math.min(latArray.length, lonArray.length, markerLayer.resultLimit ? markerLayer.resultLimit : MapUtils_1.DEFAULT_RESULT_LIMIT);
+  var markerProps = [];
+
+  for (var i = 0; i < limit; i += 1) {
+    var staticColor = markerLayer.seriesColors && colorUtils_1.isColor(markerLayer.seriesColors[0]) ? markerLayer.seriesColors[0] : MapUtils_1.DEFAULT_CLUSTER_COLOR;
+    var dynamicColor = markerLayer.dataColors && colorUtils_1.isColor(markerLayer.dataColors[i]) ? markerLayer.dataColors[i] : MapUtils_1.DEFAULT_CLUSTER_COLOR;
+    var color = isStaticColor ? staticColor : dynamicColor;
+    markerProps.push({
+      latitude: latArray[i],
+      longitude: lonArray[i],
+      color: color
+    });
+  }
+
+  return markerProps;
+};
+
+exports.generateMarkerWrapperProps = generateMarkerWrapperProps;
+
+var MarkerLayer = function MarkerLayer(props) {
+  var map = props.map,
+      themeColorScheme = props.themeColorScheme,
+      markerLayer = props.markerLayer,
+      onMapClick = props.onMapClick;
+  markerLayer.seriesColors = markerLayer.seriesColors || MapUtils_1.DEFAULT_SERIES_COLORS;
+  var markerProps = React.useMemo(function () {
+    return exports.generateMarkerWrapperProps(markerLayer);
+  }, [markerLayer]);
+  var onMarkerClick = React.useCallback(function (e, i) {
+    var _a;
+
+    var metadata = (_a = markerLayer === null || markerLayer === void 0 ? void 0 : markerLayer.metadata[i]) !== null && _a !== void 0 ? _a : {};
+    var payload = Object.keys(metadata).reduce(function (acc, curr) {
+      var key = "row.".concat(curr, ".value");
+      var value = String(metadata[curr]);
+      return Object.assign(Object.assign({}, acc), _defineProperty({}, key, value));
+    }, {});
+    onMapClick({
+      e: e,
+      payload: payload
+    });
+  }, [markerLayer, onMapClick]);
+  return React.createElement(React.Fragment, null, markerProps.map(function (_ref2, i) {
+    var latitude = _ref2.latitude,
+        longitude = _ref2.longitude,
+        color = _ref2.color;
+    return React.createElement(Marker, {
+      key: String(i),
+      latitude: latitude,
+      longitude: longitude,
+      color: color,
+      themeColorScheme: themeColorScheme,
+      map: map,
+      handleLayerClick: function handleLayerClick(e) {
+        return onMarkerClick(e, i);
+      }
+    });
+  }));
+};
+
+exports.default = MarkerLayer;
+
+/***/ }),
+/* 204 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3106,13 +3553,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var visualization_icons_1 = __webpack_require__(42);
+var visualization_icons_1 = __webpack_require__(43);
 
-var schemaUtils_1 = __webpack_require__(14);
+var placeholders_1 = __webpack_require__(42);
+
+var schemaUtils_1 = __webpack_require__(15);
 
 var visualization_color_palettes_1 = __webpack_require__(41);
 
-var themes_1 = __webpack_require__(70);
+var themes_1 = __webpack_require__(71);
 
 var i18n_1 = __webpack_require__(3);
 
@@ -3168,9 +3617,8 @@ var optionsSchema = {
     type: 'string'
   },
   center: {
-    default: [37.7749, -122.4194],
     type: 'array',
-    description: 'Specify the center of the map in coordinates, in the form of [latitude, longitude]. When not provided, will automatically calculate map center based on available location data. When no location data available will fall back to [37.7749, -122.4194].',
+    description: 'Specify the center of the map in coordinates, in the form of [latitude, longitude]. When not provided, will automatically calculate map center based on available location data. When no location data available will fall back to [0,0].',
     items: {
       type: 'number'
     }
@@ -3330,7 +3778,6 @@ var optionsSchema = {
     pattern: schemaUtils_1.getPattern(['vector', 'raster'])
   },
   zoom: {
-    default: 5,
     description: 'Specify the zoom level of the map.',
     type: 'number'
   }
@@ -3381,14 +3828,16 @@ var editorConfig = [{
     option: 'layers[0].latitude',
     editor: 'editor.columnSelector',
     editorProps: {
-      dataSourceKey: 'primary'
+      dataSourceKey: 'primary',
+      shouldShowInternalFields: false
     }
   }], [{
     label: i18n_1._('Longitude'),
     option: 'layers[0].longitude',
     editor: 'editor.columnSelector',
     editorProps: {
-      dataSourceKey: 'primary'
+      dataSourceKey: 'primary',
+      shouldShowInternalFields: false
     }
   }], [{
     label: i18n_1._('Size'),
@@ -3399,7 +3848,10 @@ var editorConfig = [{
       return !(options.layers && options.layers.length && options.layers[0].type === 'marker');
     },
     editorProps: {
-      dataSourceKey: 'primary'
+      dataSourceKey: 'primary',
+      isMultiSelect: true,
+      shouldShowInternalFields: false,
+      excludeByNames: ['latitude', 'longitude', 'geobin']
     }
   }]]
 }];
@@ -3424,6 +3876,7 @@ var config = {
    * viz icon
    */
   icon: visualization_icons_1.Map,
+  placeholderIcon: placeholders_1.Map,
   dataContract: dataContract,
   size: size,
   defaultContext: defaultContext,
@@ -3432,6 +3885,9 @@ var config = {
   events: {
     'map.load': {
       description: 'triggered when map is fully loaded'
+    },
+    'map.click': {
+      description: 'trigger when user clicks map layer'
     }
   },
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],