@splunk/visualizations 25.4.0 → 25.6.0

package/Map.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 388);
+/******/ 	return __webpack_require__(__webpack_require__.s = 399);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -113,7 +113,14 @@ module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
-/***/ 108:
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/classCallCheck");
+
+/***/ }),
+
+/***/ 113:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -153,20 +160,20 @@ exports.convertToArrOfObjects = convertToArrOfObjects;
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 116:
+/***/ 123:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(17);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -185,11 +192,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var maplibre_gl_1 = __webpack_require__(141);
+var maplibre_gl_1 = __webpack_require__(147);
 
 var React = __webpack_require__(1);
 
-var Tooltip_1 = __webpack_require__(394);
+var Tooltip_1 = __webpack_require__(405);
 
 var MarkerWrapper = function MarkerWrapper(_a) {
   var longitude = _a.longitude,
@@ -272,13 +279,6 @@ exports.default = MarkerWrapper;
 
 /***/ }),
 
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorUtils");
-
-/***/ }),
-
 /***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -293,7 +293,7 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(20);
+var SizeAwareWrapper_1 = __webpack_require__(21);
 
 var style_1 = __webpack_require__(15);
 
@@ -354,7 +354,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.4.0 - 6a8a433b8",
+      "data-splunk-visualization-version": "25.6.0 - f5eb3abf9",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -409,27 +409,27 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 140:
+/***/ 146:
 /***/ (function(module, exports) {
 
 module.exports = require("chroma-js");
 
 /***/ }),
 
-/***/ 141:
+/***/ 147:
 /***/ (function(module, exports) {
 
 module.exports = require("maplibre-gl");
 
 /***/ }),
 
-/***/ 142:
+/***/ 148:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(17);
 
 var _defineProperty = __webpack_require__(7);
 
@@ -448,9 +448,9 @@ var lodash_1 = __webpack_require__(3);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(82);
 
-var MarkerWrapper_1 = __webpack_require__(116);
+var MarkerWrapper_1 = __webpack_require__(123);
 
 exports.GEO_BOUND_PREFIX = '_geo_bounds_';
 exports.PieSegment = React.memo(function (_ref) {
@@ -693,361 +693,655 @@ exports.default = BubbleLayer;
 
 /***/ }),
 
-/***/ 15:
-/***/ (function(module, exports) {
+/***/ 149:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/visualizations-shared/style");
+"use strict";
 
-/***/ }),
 
-/***/ 16:
-/***/ (function(module, exports) {
+var _slicedToArray = __webpack_require__(17);
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Choropleth = exports.cleanupChoropleth = exports.compareChoropleth = exports.compareGeom = void 0;
 
-/***/ }),
+var React = __webpack_require__(1);
 
-/***/ 17:
-/***/ (function(module, exports, __webpack_require__) {
+var lodash_1 = __webpack_require__(3);
 
-"use strict";
+var MapUtils_1 = __webpack_require__(82);
 
+var MarkerWrapper_1 = __webpack_require__(123);
 
-var _toConsumableArray = __webpack_require__(8);
+var getShapeId = function getShapeId(id) {
+  return "shape-".concat(id);
+};
 
-var _defineProperty = __webpack_require__(7);
+var getSourceId = function getSourceId(id) {
+  return "source-".concat(id);
+};
 
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
+var getStrokeId = function getStrokeId(id) {
+  return "stroke-".concat(id);
+};
 
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+var compareGeom = function compareGeom(prev, next) {
+  if (prev !== null && next !== null) {
+    return prev.type === next.type && lodash_1.isEqual(prev.coordinates, next.coordinates);
   }
 
-  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;
+  return prev === null && next === null;
 };
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
-
-var lodash_1 = __webpack_require__(3);
-
-var schemaUtils_1 = __webpack_require__(16);
-
-var VizBehavior_1 = __webpack_require__(6);
+exports.compareGeom = compareGeom;
 
-var dynamicOptionsDSLType = {
-  type: 'string',
-  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
+var compareChoropleth = function compareChoropleth(prevProps, nextProps) {
+  return exports.compareGeom(prevProps.geomData, nextProps.geomData) && prevProps.id === nextProps.id && prevProps.map === nextProps.map && prevProps.areaId === nextProps.areaId && prevProps.areaValue === nextProps.areaValue && prevProps.color === nextProps.color && prevProps.opacity === nextProps.opacity && prevProps.strokeColor === nextProps.strokeColor && prevProps.isThemeChanged === nextProps.isThemeChanged && lodash_1.isEqual(prevProps.additionalFields, nextProps.additionalFields) && prevProps.handleMapClick.toString() === nextProps.handleMapClick.toString();
 };
-/**
- * Helper function to extend an options schema with dynamic options DSL
- * @param optionsSchema a visualization's options schema
- * @returns an updated options schema that additionally allows strings starting with > for each option
- */
-
-function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
-  var enhancedOptionsSchema = {};
-  Object.keys(optionsSchema).forEach(function (key) {
-    var _a = optionsSchema[key],
-        title = _a.title,
-        description = _a.description,
-        readOnly = _a.readOnly,
-        writeOnly = _a.writeOnly,
-        examples = _a.examples,
-        defaultValue = _a.default,
-        type = _a.type,
-        properties = _a.properties,
-        patternProperties = _a.patternProperties,
-        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
 
-    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
-      title: title
-    }), description !== undefined && {
-      description: description
-    }), readOnly !== undefined && {
-      readOnly: readOnly
-    }), writeOnly !== undefined && {
-      writeOnly: writeOnly
-    }), examples !== undefined && {
-      examples: examples
-    }), defaultValue !== undefined && {
-      default: defaultValue
-    });
+exports.compareChoropleth = compareChoropleth;
 
-    if (type === 'object') {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
-        type: type
-      }), properties && {
-        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
-      });
+var cleanupChoropleth = function cleanupChoropleth(shapeId, sourceId, strokeId, map) {
+  var _a, _b, _c; // catch errors where map is undefined
 
-      if (patternProperties) {
-        var enhancedPatternProperties = {};
-        Object.keys(patternProperties).forEach(function (opt) {
-          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
-        });
-        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
-      }
-    } else {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
-        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
-          type: type
-        }), remainingSchemaEntry), dynamicOptionsDSLType]
-      });
-    }
-  });
-  return enhancedOptionsSchema;
-}
 
-exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
-/**
- * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
- * this function also collapse all editor panels
- * @param vizConfig a Visualization Config
- * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
- * and containing `open: false` for all editor panels in editorConfig
- */
+  var currLayer;
+  var currSource;
+  var currStrokeLayer;
 
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = Object.assign({}, vizConfig);
+  try {
+    currLayer = (_a = map === null || map === void 0 ? void 0 : map.current) === null || _a === void 0 ? void 0 : _a.getLayer(shapeId);
+    currStrokeLayer = (_b = map === null || map === void 0 ? void 0 : map.current) === null || _b === void 0 ? void 0 : _b.getLayer(strokeId);
+    currSource = (_c = map === null || map === void 0 ? void 0 : map.current) === null || _c === void 0 ? void 0 : _c.getSource(sourceId);
+  } catch (_d) {
+    return;
+  }
 
-  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
-    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
+  if (currLayer) {
+    map.current.removeLayer(shapeId);
   }
 
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: config.open || false
-    });
-  });
-  return enhancedConfig;
-}
+  if (currStrokeLayer) {
+    map.current.removeLayer(strokeId);
+  }
 
-exports.enhanceConfig = enhanceConfig;
-/**
- * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
- * Created for editor unit tests
- * @param vizConfig a Visualization Config
- * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
- */
+  if (currSource) {
+    map.current.removeSource(sourceId);
+  }
+};
 
-function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
-  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: true
-    });
-  });
-  return editorPanelUncollapsedConfig;
-}
+exports.cleanupChoropleth = cleanupChoropleth;
+exports.Choropleth = React.memo(function (_ref) {
+  var id = _ref.id,
+      areaId = _ref.areaId,
+      areaValue = _ref.areaValue,
+      geomData = _ref.geomData,
+      map = _ref.map,
+      color = _ref.color,
+      opacity = _ref.opacity,
+      strokeColor = _ref.strokeColor,
+      isThemeChanged = _ref.isThemeChanged,
+      additionalFields = _ref.additionalFields,
+      handleMapClick = _ref.handleMapClick;
+  var sourceId = getSourceId(id);
+  var shapeId = getShapeId(id);
+  var strokeId = getStrokeId(id);
+  var formattedGeomData = {
+    type: 'Feature',
+    geometry: geomData
+  };
 
-exports.uncollapseEditorConfig = uncollapseEditorConfig;
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTooltipOpen = _React$useState2[0],
+      setTooltipOpenStatus = _React$useState2[1];
 
-function isDynamicOption(option) {
-  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
-}
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      mouseLat = _React$useState4[0],
+      setmouseLat = _React$useState4[1];
 
-exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
-// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+  var _React$useState5 = React.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      mouseLng = _React$useState6[0],
+      setmouseLng = _React$useState6[1];
 
-/**
- * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
- * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
- * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
- * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
- *
- * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
- */
+  var openTooltip = React.useCallback(function () {
+    setTooltipOpenStatus(true);
+  }, []);
+  var closeTooltip = React.useCallback(function () {
+    setTooltipOpenStatus(false);
+  }, []);
+  var updateChoropleth = React.useCallback(function () {
+    // Apply changes by removing the existing choropleth and creating a new one
+    // instead of mutating the current
+    exports.cleanupChoropleth(shapeId, sourceId, strokeId, map); // In order to set a different color and opacity to each choropleth region
+    // we are creating a different layer for each region, and each layer requires a source
 
-function hasCompatibleContexts(vizContext, presetContext) {
-  var presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(function (contextKey) {
-    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
-  });
-}
-/**
- * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
- */
+    map.current.addSource(sourceId, {
+      type: 'geojson',
+      data: formattedGeomData
+    });
+    map.current.addLayer({
+      id: shapeId,
+      type: 'fill',
+      source: sourceId,
+      layout: {},
+      paint: {
+        'fill-opacity': opacity,
+        'fill-color': color
+      }
+    });
 
+    if (strokeColor !== 'transparent') {
+      map.current.addLayer({
+        id: strokeId,
+        type: 'line',
+        source: sourceId,
+        layout: {},
+        paint: {
+          'line-color': strokeColor,
+          'line-width': 1
+        }
+      });
+    }
 
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  var presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(function (optionKey) {
-    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
-  });
-}
-/**
- * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
- * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
- *
- * @param {Object} vizContext - the current vizContext definition
- * @param {Object} vizOptions - the current vizOptions definition
- * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
- */
+    map.current.on('mousemove', shapeId, function (e) {
+      var mouseLngLat = e.lngLat;
+      setmouseLat(mouseLngLat.lat);
+      setmouseLng(mouseLngLat.lng);
+      openTooltip();
+      map.current.getCanvas().style.cursor = 'pointer'; // eslint-disable-line no-param-reassign
+    });
+    map.current.on('mouseleave', shapeId, function () {
+      closeTooltip();
+      map.current.getCanvas().style.cursor = ''; // eslint-disable-line no-param-reassign
+    });
+    map.current.on('click', shapeId, function (e) {
+      handleMapClick(e);
+    });
+  }, [shapeId, sourceId, map, color, opacity, formattedGeomData]);
+  React.useEffect(function () {
+    updateChoropleth();
+  }, [map, geomData, color, opacity, id, strokeColor]); // Clean up on unmount
 
+  React.useEffect(function () {
+    return function () {
+      return exports.cleanupChoropleth(shapeId, sourceId, strokeId, map);
+    };
+  }, []);
 
-function getInitialPreset(vizContext, vizOptions, presets) {
-  return presets.find(function (preset) {
-    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
-    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
-    var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
-    // if not, then the preset is invalid in config.ts
+  if (isThemeChanged) {
+    // Theme changes will reset the style layers of the entire map
+    // so we need to rerender the choropleths
+    updateChoropleth();
+  }
 
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
+  return React.createElement(MarkerWrapper_1.default, {
+    isChoroplethTooltipOpen: isTooltipOpen,
+    additionalFields: additionalFields,
+    latitude: mouseLat,
+    longitude: mouseLng,
+    map: map,
+    areaId: areaId,
+    areaValue: areaValue
+  }, React.createElement("div", {
+    "data-test": "choropleth-anchor",
+    style: {
+      padding: '24px',
+      visibility: 'hidden'
+    }
+  }));
+}, exports.compareChoropleth);
+exports.Choropleth.displayName = 'MapChoropleth';
 
-exports.getInitialPreset = getInitialPreset;
-/**
- * generates number precision values for a Select editor
- *
- * @param {Number} numPrecisionValues - number of integer precision values to generate
- * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
- */
+var ChoroplethLayer = function ChoroplethLayer(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
 
-function generatePrecisionValues(numPrecisionValues) {
-  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
-    return {
-      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
-      value: i
-    };
+  var map = props.map,
+      choroplethLayer = props.choroplethLayer,
+      isThemeChanged = props.isThemeChanged,
+      setIsThemeChanged = props.setIsThemeChanged,
+      onMapClick = props.onMapClick;
+  var cfgOpacity = Math.min(Math.max(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
+  var scaledOpacities = (_a = MapUtils_1.getScaledOpacities(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors, cfgOpacity)) !== null && _a !== void 0 ? _a : [];
+  var colors = (_b = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors) === null || _b === void 0 ? void 0 : _b.map(function (color) {
+    return (color === null || color === void 0 ? void 0 : color.length) > 7 ? color.slice(0, 7) : color;
   });
-}
-
-exports.generatePrecisionValues = generatePrecisionValues;
-/**
- * insert layout in layout array, return a new layout array instead of updating the original
- *
- * @param {EditorLayoutConfig[][]} layout - editor layout
- * @param {Number} index - the index to insert layout item(s)
- * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
- * @returns {EditorLayoutConfig[][]} new editor layout with insertion
- */
+  var limit = Math.min((_c = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaIds) === null || _c === void 0 ? void 0 : _c.length, (_d = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaValues) === null || _d === void 0 ? void 0 : _d.length, (_f = (_e = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.geom) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0, (choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.resultLimit) ? choroplethLayer.resultLimit : MapUtils_1.DEFAULT_RESULT_LIMIT);
+  var areaIdSliced = (_h = (_g = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaIds) === null || _g === void 0 ? void 0 : _g.slice(0, limit)) !== null && _h !== void 0 ? _h : []; // generate a unique id if areaIds are not unique
 
-var insertLayout = function insertLayout(layout, index) {
-  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    layoutItems[_key - 2] = arguments[_key];
-  }
+  var uniqueAreaIdSliced = lodash_1.uniq(areaIdSliced).length !== areaIdSliced.length ? areaIdSliced.map(function (id, i) {
+    return "".concat(id).concat(i);
+  }) : areaIdSliced;
+  var additionalFields = (choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(function (choroplethMetadata) {
+    return choroplethLayer.additionalTooltipFields.map(function (field) {
+      return {
+        name: field,
+        value: choroplethMetadata[field]
+      };
+    });
+  }) : [];
 
-  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
-};
+  var _handleMapClick = function handleMapClick(e, i) {
+    var payload = MapUtils_1.formatMetadata(choroplethLayer, i);
+    onMapClick({
+      e: e,
+      payload: payload
+    });
+  };
 
-exports.insertLayout = insertLayout;
+  if (!map || !choroplethLayer || !choroplethLayer.geom) {
+    return React.createElement(React.Fragment, null);
+  }
 
-/***/ }),
+  if (isThemeChanged) {
+    setIsThemeChanged(false);
+  }
 
-/***/ 19:
-/***/ (function(module, exports) {
+  return React.createElement("div", null, uniqueAreaIdSliced.map(function (id, i) {
+    var areaId = areaIdSliced[i];
+    var areaValue = choroplethLayer.areaValues[i];
+    return React.createElement(exports.Choropleth, {
+      key: id,
+      id: id,
+      geomData: choroplethLayer.geom[i],
+      map: map,
+      color: colors[i],
+      opacity: scaledOpacities[i],
+      strokeColor: choroplethLayer.choroplethStrokeColor,
+      isThemeChanged: isThemeChanged,
+      areaId: areaId,
+      areaValue: areaValue,
+      additionalFields: additionalFields[i],
+      handleMapClick: function handleMapClick(e) {
+        return _handleMapClick(e, i);
+      }
+    });
+  }));
+};
 
-module.exports = require("@babel/runtime/helpers/createClass");
+exports.default = ChoroplethLayer;
 
 /***/ }),
 
-/***/ 2:
+/***/ 15:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 20:
+/***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 23:
+/***/ 17:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
-/***/ 25:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+/***/ 18:
+/***/ (function(module, exports, __webpack_require__) {
 
-/***/ }),
+"use strict";
 
-/***/ 26:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+var _toConsumableArray = __webpack_require__(8);
 
-/***/ }),
+var _defineProperty = __webpack_require__(7);
 
-/***/ 27:
-/***/ (function(module, exports, __webpack_require__) {
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
 
-"use strict";
+  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.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
+exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var i18n_1 = __webpack_require__(2);
-
-var Message_1 = __webpack_require__(10);
-
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-
+var schemaUtils_1 = __webpack_require__(16);
 
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
+var VizBehavior_1 = __webpack_require__(6);
 
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  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,
-  iconColor: T.string
+var dynamicOptionsDSLType = {
+  type: 'string',
+  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
 };
 /**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
+ * Helper function to extend an options schema with dynamic options DSL
+ * @param optionsSchema a visualization's options schema
+ * @returns an updated options schema that additionally allows strings starting with > for each option
  */
 
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
+function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
+  var enhancedOptionsSchema = {};
+  Object.keys(optionsSchema).forEach(function (key) {
+    var _a = optionsSchema[key],
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
 
-  if (icon) {
-    return React.createElement(icon, {
+    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
+      title: title
+    }), description !== undefined && {
+      description: description
+    }), readOnly !== undefined && {
+      readOnly: readOnly
+    }), writeOnly !== undefined && {
+      writeOnly: writeOnly
+    }), examples !== undefined && {
+      examples: examples
+    }), defaultValue !== undefined && {
+      default: defaultValue
+    });
+
+    if (type === 'object') {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
+        type: type
+      }), properties && {
+        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
+      });
+
+      if (patternProperties) {
+        var enhancedPatternProperties = {};
+        Object.keys(patternProperties).forEach(function (opt) {
+          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
+        });
+        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
+      }
+    } else {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
+        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
+          type: type
+        }), remainingSchemaEntry), dynamicOptionsDSLType]
+      });
+    }
+  });
+  return enhancedOptionsSchema;
+}
+
+exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
+/**
+ * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
+ * this function also collapse all editor panels
+ * @param vizConfig a Visualization Config
+ * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
+ * and containing `open: false` for all editor panels in editorConfig
+ */
+
+function enhanceConfig(vizConfig) {
+  var enhancedConfig = Object.assign({}, vizConfig);
+
+  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
+    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
+  }
+
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: config.open || false
+    });
+  });
+  return enhancedConfig;
+}
+
+exports.enhanceConfig = enhanceConfig;
+/**
+ * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
+ * Created for editor unit tests
+ * @param vizConfig a Visualization Config
+ * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
+ */
+
+function uncollapseEditorConfig(vizConfig) {
+  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
+  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: true
+    });
+  });
+  return editorPanelUncollapsedConfig;
+}
+
+exports.uncollapseEditorConfig = uncollapseEditorConfig;
+
+function isDynamicOption(option) {
+  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
+}
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
+// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
+/**
+ * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
+ * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
+ * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
+ * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
+ *
+ * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
+ */
+
+function hasCompatibleContexts(vizContext, presetContext) {
+  var presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(function (contextKey) {
+    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
+  });
+}
+/**
+ * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
+ */
+
+
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  var presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(function (optionKey) {
+    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
+  });
+}
+/**
+ * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
+ * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
+ *
+ * @param {Object} vizContext - the current vizContext definition
+ * @param {Object} vizOptions - the current vizOptions definition
+ * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
+ */
+
+
+function getInitialPreset(vizContext, vizOptions, presets) {
+  return presets.find(function (preset) {
+    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
+    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContextKeys = Object.keys(presetContext);
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    // if not, then the preset is invalid in config.ts
+
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
+
+exports.getInitialPreset = getInitialPreset;
+/**
+ * generates number precision values for a Select editor
+ *
+ * @param {Number} numPrecisionValues - number of integer precision values to generate
+ * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
+ */
+
+function generatePrecisionValues(numPrecisionValues) {
+  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+    return {
+      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
+      value: i
+    };
+  });
+}
+
+exports.generatePrecisionValues = generatePrecisionValues;
+/**
+ * insert layout in layout array, return a new layout array instead of updating the original
+ *
+ * @param {EditorLayoutConfig[][]} layout - editor layout
+ * @param {Number} index - the index to insert layout item(s)
+ * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
+ * @returns {EditorLayoutConfig[][]} new editor layout with insertion
+ */
+
+var insertLayout = function insertLayout(layout, index) {
+  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    layoutItems[_key - 2] = arguments[_key];
+  }
+
+  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
+};
+
+exports.insertLayout = insertLayout;
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 20:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/createClass");
+
+/***/ }),
+
+/***/ 21:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+
+/***/ }),
+
+/***/ 24:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/TimezoneContext");
+
+/***/ }),
+
+/***/ 26:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+
+/***/ }),
+
+/***/ 27:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/hocUtils");
+
+/***/ }),
+
+/***/ 28:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 30:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowIconPlaceholder = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var i18n_1 = __webpack_require__(2);
+
+var Message_1 = __webpack_require__(10);
+
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
+
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  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,
+  iconColor: T.string
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
+
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
+  if (icon) {
+    return React.createElement(icon, {
       style: {
         left: '50%',
         top: '50%',
@@ -1078,7 +1372,14 @@ exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
 
-/***/ 28:
+/***/ 31:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1095,7 +1396,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var DataSource_1 = __webpack_require__(39);
+var DataSource_1 = __webpack_require__(43);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -1149,7 +1450,7 @@ exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 29:
+/***/ 33:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1214,14 +1515,7 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 31:
+/***/ 34:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1250,12 +1544,14 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 32:
+/***/ 35:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -1264,44 +1560,51 @@ var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(33);
+var getSettingsFromThemedProps_1 = __webpack_require__(36);
+
+var Options_1 = __webpack_require__(37);
 
-var Options_1 = __webpack_require__(34);
+var SanitizeProps_1 = __webpack_require__(38);
 
-var SanitizeProps_1 = __webpack_require__(35);
+var TimezoneContext_1 = __webpack_require__(24);
 
-var TimezoneContext_1 = __webpack_require__(23);
+var moment_1 = __webpack_require__(39);
 
-var moment_1 = __webpack_require__(36);
+var FeatureFlagContext_1 = __webpack_require__(26);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(25);
+var hocUtils_1 = __webpack_require__(27);
 
-var JSONSchemaUtils_1 = __webpack_require__(26);
+var JSONSchemaUtils_1 = __webpack_require__(28);
 
-var SplunkVisualization_1 = __webpack_require__(37);
+var async_dynamic_options_evaluator_1 = __webpack_require__(40);
+
+var id_1 = __webpack_require__(31);
+
+var SplunkVisualization_1 = __webpack_require__(41);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var getSorting_1 = __webpack_require__(28);
+var getSorting_1 = __webpack_require__(32);
 
-var getPagination_1 = __webpack_require__(29);
+var getPagination_1 = __webpack_require__(33);
 
-var useDeepMemo_1 = __webpack_require__(40);
+var useDeepMemo_1 = __webpack_require__(44);
 
-var MissingPropsMessage_1 = __webpack_require__(41);
+var MissingPropsMessage_1 = __webpack_require__(45);
 
-var withEditModeCover_1 = __webpack_require__(42);
+var withEditModeCover_1 = __webpack_require__(46);
 
-var withPlaceholder_1 = __webpack_require__(43);
+var withPlaceholder_1 = __webpack_require__(47);
+
+var UUID = id_1.createGUID();
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
  * @returns {HOC}
  */
 
-
 var withDashboardViz = function withDashboardViz(opts) {
   var ReactViz = opts.ReactViz,
       vizConfig = opts.vizConfig,
@@ -1361,28 +1664,76 @@ var withDashboardViz = function withDashboardViz(opts) {
 
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
 
+    var _React$useState = React.useState({}),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        evaluatedOptionsAsync = _React$useState2[0],
+        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+
+
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(UUID)),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
+
+    var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext['visualizations.useWebWorkersForDSL'] && typeof Worker !== 'undefined')),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        useAsyncEvaluatedOptions = _React$useState6[0],
+        setUseAsyncEvaluatedOptions = _React$useState6[1];
+
     evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
       try {
-        return Options_1.Options.evaluate({
-          context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-          options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
-        }, dataSources, themeFunc);
+        if (useAsyncEvaluatedOptions) {
+          var optionsToEvaluate = {
+            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
+            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+          };
+          var asyncDynamicOptionsEvaluatorParams = {
+            visualizationID: visualizationID,
+            props: props,
+            options: optionsToEvaluate,
+            dataSources: dataSources,
+            theme: vizConfig.themes
+          };
+          async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
+            setEvaluatedOptionsAsync(results.results);
+          }).catch(function (e) {
+            // eslint-disable-next-line no-console
+            console.error("unexpected error evaluating options - async: ".concat(e.message));
+            setUseAsyncEvaluatedOptions(false);
+          });
+        } else {
+          return Options_1.Options.evaluate({
+            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
+            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+          }, dataSources, themeFunc);
+        }
       } catch (e) {
         // eslint-disable-next-line no-console
-        console.error("unexpected error evaluating options:  + ".concat(e.message));
+        console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
-    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone]); // useEffect hook needs to be initialized before any early returns
+
+      return {};
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
 
     React.useEffect(function () {
-      onComputedProps(evaluatedOptions);
-    }); // present warning message if any required props are missing
+      onComputedProps(evaluatedOptionsToUse);
+    });
+    React.useEffect(function () {
+      return function () {
+        if (useAsyncEvaluatedOptions) {
+          async_dynamic_options_evaluator_1.default.reset(visualizationID);
+        }
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // present warning message if any required props are missing
 
     var _vizConfig$requiredPr = vizConfig.requiredProps,
         requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
         supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptions);
+    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
 
     if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
       return React.createElement(MissingPropsMessage_1.default, {
@@ -1409,7 +1760,7 @@ var withDashboardViz = function withDashboardViz(opts) {
 
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
-            payload[p] = evaluatedOptions[p];
+            payload[p] = evaluatedOptionsToUse[p];
           });
         }
 
@@ -1428,293 +1779,103 @@ var withDashboardViz = function withDashboardViz(opts) {
     } // compute pure viz props which are not from options
 
 
-    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptions), eventCallbackProps), {
-      themeFunc: themeFunc
-    }));
-    /**
-     * PAGE_AND_SORT behavior
-     *
-     * Some visualizations, like table, requires metadata about the datasource,
-     * like total number of results, current count, offset, and sort, for rendering
-     * paginator and sorting direction. In this approach, the visualization
-     * allow users to set 'paginateDataSourceKey' to select which datasource
-     * should the visualization extract the metadata from. It defaults to 'primary' datasource.
-     * The visualization config should set the PAGE_AND_SORT behavior to receive
-     * 'requestParams', 'meta' and onRequestParams callback as props.
-     *
-     * In future, we could automatically detect which all datasources are being used
-     * and bind those magically to pagination/sorting behavior.
-     */
-
-    var dataSourceMetadata = {};
-    var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = lodash_1.has(evaluatedOptions, OptionKey) && evaluatedOptions[OptionKey] || 'primary';
-
-    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
-      var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
-      var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
-
-      var handleRequestParamsChange = function handleRequestParamsChange(payload) {
-        return onRequestParamsChange(paginateDataSourceKey, payload);
-      };
-
-      var sortParams = getSorting_1.getSortingParams({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      var paginatorParams = getPagination_1.getPaginationParams({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      dataSourceMetadata = {
-        sortParams: sortParams,
-        paginatorParams: paginatorParams
-      };
-    }
-
-    return React.createElement(SanitizedReactViz, Object.assign({
-      mode: mode,
-      width: width,
-      height: height
-    }, evaluatedOptions, computedVizProps, eventCallbackProps, dataSourceMetadata));
-  };
-
-  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
-  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
-    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
-    theme: {}
-  }); // attach viz config
-
-  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
-
-  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
-};
-
-exports.default = withDashboardViz;
-
-/***/ }),
-
-/***/ 33:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
-
-/***/ }),
-
-/***/ 34:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-encoding/Options");
-
-/***/ }),
-
-/***/ 35:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
-
-/***/ }),
-
-/***/ 36:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/moment");
-
-/***/ }),
-
-/***/ 37:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(11);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
-/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(3);
-
-var VizActionHandler_1 = __webpack_require__(38); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
-
-
-exports.INITIAL_WIDTH = 250;
-exports.INITIAL_HEIGHT = 250;
-/**
- * A Splunk visualization
- */
-
-var SplunkVisualization = function SplunkVisualization() {
-  _classCallCheck(this, SplunkVisualization);
-};
-
-SplunkVisualization.propTypes = {
-  /**
-   * display mode
-   */
-  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
-
-  /**
-   * width in pixel or string, defaults to 100%
-   */
-  width: T.oneOfType([T.string, T.number]).isRequired,
-
-  /**
-   * height in pixel or string
-   */
-  height: T.oneOfType([T.string, T.number]).isRequired,
-
-  /**
-   * visualization context used for dynamic option evaluation
-   */
-  context: T.object,
-
-  /**
-   * visualization formatting options
-   */
-  options: T.object,
-
-  /**
-   * A callback to update formatting options
-   */
-  onOptionsChange: T.func,
-
-  /**
-   * datasource state which include data and request params, object key indicate the datasource type.
-   */
-  dataSources: T.objectOf(T.shape({
-    /**
-     * current request params
-     */
-    requestParams: T.object,
-
-    /**
-     * current dataset
-     */
-    data: T.shape({
-      fields: T.array,
-      columns: T.array
-    }),
-
-    /**
-     * error
-     */
-    error: T.shape({
-      level: T.string,
-      message: T.string
-    }),
-
+    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+      themeFunc: themeFunc
+    }));
     /**
-     * meta data that came with the dataset
+     * PAGE_AND_SORT behavior
+     *
+     * Some visualizations, like table, requires metadata about the datasource,
+     * like total number of results, current count, offset, and sort, for rendering
+     * paginator and sorting direction. In this approach, the visualization
+     * allow users to set 'paginateDataSourceKey' to select which datasource
+     * should the visualization extract the metadata from. It defaults to 'primary' datasource.
+     * The visualization config should set the PAGE_AND_SORT behavior to receive
+     * 'requestParams', 'meta' and onRequestParams callback as props.
+     *
+     * In future, we could automatically detect which all datasources are being used
+     * and bind those magically to pagination/sorting behavior.
      */
-    meta: T.object
-  })),
 
-  /**
-   * A callback to trigger event
-   */
-  onEventTrigger: T.func,
+    var dataSourceMetadata = {};
+    var OptionKey = 'paginateDataSourceKey';
+    var paginateDataSourceKey = lodash_1.has(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
 
-  /**
-   * Inform viz if there are handlers listening to events
-   */
-  hasEventHandlers: T.bool,
+    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
+      var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
+      var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
 
-  /**
-   * A callback to communicate computed props to a consumer
-   */
-  onComputedProps: T.func,
+      var handleRequestParamsChange = function handleRequestParamsChange(payload) {
+        return onRequestParamsChange(paginateDataSourceKey, payload);
+      };
 
-  /**
-   * A callback to obtain visualization api
-   */
-  vizActionHandlerRef: T.func,
-  loading: T.bool,
-  theme: T.object,
+      var sortParams = getSorting_1.getSortingParams({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      var paginatorParams = getPagination_1.getPaginationParams({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      dataSourceMetadata = {
+        sortParams: sortParams,
+        paginatorParams: paginatorParams
+      };
+    }
 
-  /**
-   * A callback to request new data with updated request params
-   */
-  onRequestParamsChange: T.func
-};
-/**
- *
- */
+    return React.createElement(SanitizedReactViz, Object.assign({
+      mode: mode,
+      width: width,
+      height: height
+    }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
+  };
 
-SplunkVisualization.defaultProps = {
-  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
-  width: '100%',
-  height: exports.INITIAL_HEIGHT,
-  dataSources: {},
-  onEventTrigger: function onEventTrigger() {
-    return {};
-  },
-  mode: 'view',
-  hasEventHandlers: false,
-  options: {},
-  context: {},
-  onOptionsChange: function onOptionsChange() {
-    return {};
-  },
-  vizActionHandlerRef: function vizActionHandlerRef() {
-    return new VizActionHandler_1.DefaultVizActionHandler();
-  },
-  onComputedProps: function onComputedProps() {
-    return {};
-  },
-  loading: false,
-  onRequestParamsChange: lodash_1.noop
+  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
+  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
+    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
+    theme: {}
+  }); // attach viz config
+
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+
+  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
-exports.default = SplunkVisualization;
+
+exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 38:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 36:
+/***/ (function(module, exports) {
 
-"use strict";
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
+/***/ }),
 
-var _classCallCheck = __webpack_require__(11);
+/***/ 37:
+/***/ (function(module, exports) {
 
-var _createClass = __webpack_require__(19);
+module.exports = require("@splunk/visualization-encoding/Options");
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultVizActionHandler = void 0;
+/***/ }),
 
-var DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
+/***/ 38:
+/***/ (function(module, exports) {
 
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {// noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
-    }
-  }]);
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
-  return DefaultVizActionHandler;
-}();
+/***/ }),
 
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
+/***/ 39:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 388:
+/***/ 399:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1743,27 +1904,27 @@ var React = __webpack_require__(1);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var dsl_1 = __webpack_require__(93);
+var dsl_1 = __webpack_require__(98);
 
-var hocUtils_1 = __webpack_require__(25);
+var hocUtils_1 = __webpack_require__(27);
 
-var JSONSchemaUtils_1 = __webpack_require__(26);
+var JSONSchemaUtils_1 = __webpack_require__(28);
 
-var PureMap_1 = __webpack_require__(389);
+var PureMap_1 = __webpack_require__(400);
 
 exports.PureMap = PureMap_1.default;
 
-var config_1 = __webpack_require__(397);
+var config_1 = __webpack_require__(410);
 
 exports.config = config_1.default;
 
-var withDashboardViz_1 = __webpack_require__(32);
+var withDashboardViz_1 = __webpack_require__(35);
 
-var mapUtils_1 = __webpack_require__(398);
+var mapUtils_1 = __webpack_require__(411);
 
-var BubbleLayer_1 = __webpack_require__(142);
+var BubbleLayer_1 = __webpack_require__(148);
 
-var dataUtils_1 = __webpack_require__(108);
+var dataUtils_1 = __webpack_require__(113);
 
 var formatLayer = function formatLayer(l, dataFields, dataSourceData, transformedData) {
   // add key `geobin` to the layer object if the data is returned from geostats commands
@@ -1979,18 +2140,32 @@ exports.default = Map;
 
 /***/ }),
 
-/***/ 389:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 40:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/async-dynamic-options-evaluator");
+
+/***/ }),
+
+/***/ 400:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(17);
 
 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;
+exports.isLatLng = exports.formatColor = exports.DEFAULT_ZOOM = exports.DEFAULT_SHOW_BASELAYER = exports.DEFAULT_SHOW_ZOOM_CONTROLS = 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);
 
@@ -2000,25 +2175,29 @@ var react_1 = __webpack_require__(1);
 
 var T = __webpack_require__(0);
 
-var chroma = __webpack_require__(140);
+var chroma = __webpack_require__(146);
+
+var maplibre_gl_1 = __webpack_require__(147);
 
-var maplibre_gl_1 = __webpack_require__(141);
+var MapContext_1 = __webpack_require__(401);
 
-var MapContext_1 = __webpack_require__(390);
+var PureMapContainer_1 = __webpack_require__(402);
 
-var PureMapContainer_1 = __webpack_require__(391);
+var MapUtils_1 = __webpack_require__(82);
 
-var MapUtils_1 = __webpack_require__(80);
+var ClusterLayer_1 = __webpack_require__(404);
 
-var ClusterLayer_1 = __webpack_require__(393);
+var ChoroplethLayer_1 = __webpack_require__(149);
 
-var ChoroplethLayer_1 = __webpack_require__(396);
+var LocalChoroplethLayer_1 = __webpack_require__(407);
 
 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_SHOW_ZOOM_CONTROLS = true;
+exports.DEFAULT_SHOW_BASELAYER = true;
 exports.DEFAULT_ZOOM = 0; // convert rgb/rgba/hex color to encoded color & opacity for SVG strings
 
 var formatColor = function formatColor(color) {
@@ -2045,6 +2224,8 @@ var PureMap = function PureMap(props) {
       layers = _props$layers === void 0 ? [] : _props$layers,
       scaleUnit = props.scaleUnit,
       showScale = props.showScale,
+      showZoomControls = props.showZoomControls,
+      showBaseLayer = props.showBaseLayer,
       themeColorScheme = props.themeColorScheme,
       zoom = props.zoom,
       onMapLoad = props.onMapLoad,
@@ -2196,6 +2377,7 @@ var PureMap = function PureMap(props) {
     }
 
     var mapStyle = MapUtils_1.getMapStyle({
+      showBaseLayer: showBaseLayer,
       baseLayerTileServer: baseLayerTileServer,
       baseLayerTileServerType: baseLayerTileServerType,
       tilePreset: tilePreset,
@@ -2230,7 +2412,7 @@ var PureMap = function PureMap(props) {
       initializeMap(lodash_1.omit(mapStyle, ['theme', 'name', 'key']));
       initializeScale();
     }
-  }, [tilePreset, initializeMap, initializeScale, updateScale, defaultTileLight, defaultTileDark, baseLayerTileServer, baseLayerTileServerType, themeColorScheme]);
+  }, [showBaseLayer, tilePreset, initializeMap, initializeScale, updateScale, defaultTileLight, defaultTileDark, baseLayerTileServer, baseLayerTileServerType, themeColorScheme]);
   react_1.useEffect(function () {
     if (map.current) {
       map.current.flyTo({
@@ -2259,14 +2441,23 @@ var PureMap = function PureMap(props) {
     controlForegroundColor: controlForegroundColor,
     controlIconColorEncoded: exports.formatColor(controlForegroundColor),
     ref: basemapContainer,
-    showScale: showScale
+    showScale: showScale,
+    showZoomControls: showZoomControls
   }, isMapLoaded && layer && (layer.type === MapUtils_1.LAYER_TYPE.Bubble || layer.type === MapUtils_1.LAYER_TYPE.Marker) && React.createElement(ClusterLayer_1.default, {
     clusterLayer: layer,
     themeColorScheme: themeColorScheme,
     map: map,
     zoom: currentZoomLevel,
     onMapClick: onMapClick
-  }), isMapLoaded && layer && layer.type === MapUtils_1.LAYER_TYPE.Choropleth && React.createElement(ChoroplethLayer_1.default, {
+  }), isMapLoaded && layer && layer.type === MapUtils_1.LAYER_TYPE.Choropleth && layer.source && React.createElement(LocalChoroplethLayer_1.default, {
+    width: width,
+    height: height,
+    map: map,
+    choroplethLayer: layer,
+    isThemeChanged: isThemeChanged,
+    setIsThemeChanged: setIsThemeChangedCallback,
+    onMapClick: onMapClick
+  }), isMapLoaded && layer && layer.type === MapUtils_1.LAYER_TYPE.Choropleth && !layer.source && React.createElement(ChoroplethLayer_1.default, {
     map: map,
     choroplethLayer: layer,
     isThemeChanged: isThemeChanged,
@@ -2316,7 +2507,9 @@ PureMap.propTypes = {
     dataColors: T.oneOfType([T.string, T.arrayOf(T.string)]),
     seriesColors: T.arrayOf(T.string),
     additionalTooltipFields: T.arrayOf(T.string),
-    resultLimit: T.number
+    resultLimit: T.number,
+    source: T.string,
+    choroplethEmptyAreaColor: T.string
   })),
   scaleUnit: T.string,
   showScale: T.bool,
@@ -2335,6 +2528,8 @@ PureMap.defaultProps = {
   controlForegroundColor: exports.DEFAULT_CONTROL_FOREGROUND_COLOR,
   scaleUnit: exports.DEFAULT_SCALE_UNIT,
   showScale: exports.DEFAULT_SHOW_SCALE,
+  showZoomControls: exports.DEFAULT_SHOW_ZOOM_CONTROLS,
+  showBaseLayer: exports.DEFAULT_SHOW_BASELAYER,
   layers: [],
   themeColorScheme: 'dark',
   onMapLoad: lodash_1.noop,
@@ -2345,28 +2540,14 @@ exports.default = PureMap;
 
 /***/ }),
 
-/***/ 39:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
-
-/***/ }),
-
-/***/ 390:
+/***/ 401:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/MapContext");
 
 /***/ }),
 
-/***/ 391:
+/***/ 402:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2382,15 +2563,17 @@ var lodash_1 = __webpack_require__(3);
 
 var style_1 = __webpack_require__(15);
 
-var maplibre_gl_css_1 = __webpack_require__(392);
+var maplibre_gl_css_1 = __webpack_require__(403);
 
 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;}}"], maplibre_gl_css_1.default, function (props) {
+})(["", " overflow:hidden;position:relative;z-index:0;background-color:", ";", ";.maplibregl-ctrl-top-left{display:", ";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;}}"], maplibre_gl_css_1.default, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+}, function (props) {
+  return props.showZoomControls ? 'block' : 'none';
 }, function (props) {
   return props.controlBackgroundColor;
 }, function (props) {
@@ -2402,7 +2585,7 @@ var PureMapContainer = styled_components_1.default.div.withConfig({
 }, function (props) {
   return props.controlIconColorEncoded.opacity;
 }, function (props) {
-  return props.showScale ? 'inline' : 'none';
+  return props.showScale ? 'block' : 'none';
 }, function (props) {
   return props.controlBackgroundColor;
 }, function (props) {
@@ -2416,7 +2599,7 @@ exports.default = PureMapContainer;
 
 /***/ }),
 
-/***/ 392:
+/***/ 403:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2425,7 +2608,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 393:
+/***/ 404:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2437,11 +2620,11 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var BubbleLayer_1 = __webpack_require__(142);
+var BubbleLayer_1 = __webpack_require__(148);
 
-var MarkerLayer_1 = __webpack_require__(395);
+var MarkerLayer_1 = __webpack_require__(406);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(82);
 
 var ClusterLayer = function ClusterLayer(_ref) {
   var clusterLayer = _ref.clusterLayer,
@@ -2480,7 +2663,7 @@ exports.default = ClusterLayer;
 
 /***/ }),
 
-/***/ 394:
+/***/ 405:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2599,7 +2782,7 @@ exports.default = Tooltip;
 
 /***/ }),
 
-/***/ 395:
+/***/ 406:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2633,9 +2816,9 @@ var colorUtils_1 = __webpack_require__(12);
 
 var lodash_1 = __webpack_require__(3);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(82);
 
-var MarkerWrapper_1 = __webpack_require__(116);
+var MarkerWrapper_1 = __webpack_require__(123);
 
 var MarkerIcon = function MarkerIcon(_a) {
   var theme = _a.theme,
@@ -2764,210 +2947,165 @@ exports.default = MarkerLayer;
 
 /***/ }),
 
-/***/ 396:
+/***/ 407:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(17);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cleanupChoropleth = exports.compareChoropleth = exports.compareGeom = void 0;
 
 var React = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
-
-var MapUtils_1 = __webpack_require__(80);
-
-var MarkerWrapper_1 = __webpack_require__(116);
-
-var getShapeId = function getShapeId(id) {
-  return "shape-".concat(id);
-};
-
-var getSourceId = function getSourceId(id) {
-  return "source-".concat(id);
-};
-
-var compareGeom = function compareGeom(prev, next) {
-  if (prev !== null && next !== null) {
-    return prev.type === next.type && lodash_1.isEqual(prev.coordinates, next.coordinates);
-  }
-
-  return prev === null && next === null;
-};
-
-exports.compareGeom = compareGeom;
-
-var compareChoropleth = function compareChoropleth(prevProps, nextProps) {
-  return exports.compareGeom(prevProps.geomData, nextProps.geomData) && prevProps.id === nextProps.id && prevProps.map === nextProps.map && prevProps.areaId === nextProps.areaId && prevProps.areaValue === nextProps.areaValue && prevProps.color === nextProps.color && prevProps.opacity === nextProps.opacity && prevProps.isThemeChanged === nextProps.isThemeChanged && lodash_1.isEqual(prevProps.additionalFields, nextProps.additionalFields) && prevProps.handleMapClick.toString() === nextProps.handleMapClick.toString();
-};
-
-exports.compareChoropleth = compareChoropleth;
-
-var cleanupChoropleth = function cleanupChoropleth(shapeId, sourceId, map) {
-  var _a, _b; // catch errors where map is undefined
+var Message_1 = __webpack_require__(10);
 
+var GeoRegistry_1 = __webpack_require__(408);
 
-  var currLayer;
-  var currSource;
+var GeoJsonProvider_1 = __webpack_require__(409);
 
-  try {
-    currLayer = (_a = map === null || map === void 0 ? void 0 : map.current) === null || _a === void 0 ? void 0 : _a.getLayer(shapeId);
-    currSource = (_b = map === null || map === void 0 ? void 0 : map.current) === null || _b === void 0 ? void 0 : _b.getSource(sourceId);
-  } catch (_c) {
-    return;
-  }
+var MapUtils_1 = __webpack_require__(82);
 
-  if (currLayer) {
-    map.current.removeLayer(shapeId);
-  }
+var ChoroplethLayer_1 = __webpack_require__(149);
 
-  if (currSource) {
-    map.current.removeSource(sourceId);
-  }
-};
+var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
+  var _a, _b;
 
-exports.cleanupChoropleth = cleanupChoropleth;
-var Choropleth = React.memo(function (_ref) {
-  var id = _ref.id,
-      areaId = _ref.areaId,
-      areaValue = _ref.areaValue,
-      geomData = _ref.geomData,
-      map = _ref.map,
-      color = _ref.color,
-      opacity = _ref.opacity,
-      isThemeChanged = _ref.isThemeChanged,
-      additionalFields = _ref.additionalFields,
-      handleMapClick = _ref.handleMapClick;
-  var sourceId = getSourceId(id);
-  var shapeId = getShapeId(id);
-  var validOpacity = opacity && opacity < MapUtils_1.DEFAULT_OPACITY ? opacity : MapUtils_1.DEFAULT_OPACITY;
-  var formattedGeomData = {
-    type: 'Feature',
-    geometry: geomData
-  };
+  var width = props.width,
+      height = props.height,
+      map = props.map,
+      choroplethLayer = props.choroplethLayer,
+      isThemeChanged = props.isThemeChanged,
+      setIsThemeChanged = props.setIsThemeChanged,
+      onMapClick = props.onMapClick;
+  var cfgOpacity = Math.min(Math.max(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState({
+    features: [{
+      properties: {
+        name: ''
+      },
+      geometry: []
+    }]
+  }),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      isTooltipOpen = _React$useState2[0],
-      setTooltipOpenStatus = _React$useState2[1];
+      geoJson = _React$useState2[0],
+      setGeoJson = _React$useState2[1];
 
-  var _React$useState3 = React.useState(0),
+  var _React$useState3 = React.useState(true),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      mouseLat = _React$useState4[0],
-      setmouseLat = _React$useState4[1];
+      validGeoJson = _React$useState4[0],
+      setValidGeoJson = _React$useState4[1];
 
-  var _React$useState5 = React.useState(0),
+  var _React$useState5 = React.useState({
+    level: 'info',
+    message: ''
+  }),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      mouseLng = _React$useState6[0],
-      setmouseLng = _React$useState6[1];
+      geoJsonError = _React$useState6[0],
+      setGeoJsonError = _React$useState6[1]; // load local geoJson registry data
 
-  var openTooltip = React.useCallback(function () {
-    setTooltipOpenStatus(true);
-  }, []);
-  var closeTooltip = React.useCallback(function () {
-    setTooltipOpenStatus(false);
-  }, []);
-  var updateChoropleth = React.useCallback(function () {
-    // Apply changes by removing the existing choropleth and creating a new one
-    // instead of mutating the current
-    exports.cleanupChoropleth(shapeId, sourceId, map); // In order to set a different color and opacity to each choropleth region
-    // we are creating a different layer for each region, and each layer requires a source
 
-    map.current.addSource(sourceId, {
-      type: 'geojson',
-      data: formattedGeomData
-    });
-    map.current.addLayer({
-      id: shapeId,
-      type: 'fill',
-      source: sourceId,
-      layout: {},
-      paint: {
-        'fill-opacity': validOpacity,
-        'fill-color': color
-      }
-    });
-    map.current.on('mousemove', shapeId, function (e) {
-      var mouseLngLat = e.lngLat;
-      setmouseLat(mouseLngLat.lat);
-      setmouseLng(mouseLngLat.lng);
-      openTooltip();
-      map.current.getCanvas().style.cursor = 'pointer'; // eslint-disable-line no-param-reassign
-    });
-    map.current.on('mouseleave', shapeId, function () {
-      closeTooltip();
-      map.current.getCanvas().style.cursor = ''; // eslint-disable-line no-param-reassign
-    });
-    map.current.on('click', shapeId, function (e) {
-      handleMapClick(e);
-    });
-  }, [shapeId, sourceId, map, color, validOpacity, formattedGeomData]);
   React.useEffect(function () {
-    updateChoropleth();
-  }, [map, geomData, color, opacity, id]); // Clean up on unmount
+    var geoJsonData;
+    var geoRegistry = GeoRegistry_1.default.create();
+    geoRegistry.addDefaultProvider(new GeoJsonProvider_1.default());
 
-  React.useEffect(function () {
-    return function () {
-      return exports.cleanupChoropleth(shapeId, sourceId, map);
-    };
-  }, []);
+    try {
+      geoJsonData = geoRegistry.getByURL(choroplethLayer.source);
+      setGeoJson(geoJsonData);
+      setValidGeoJson(true);
+    } catch (e) {
+      setGeoJsonError(e);
+      setValidGeoJson(false);
+    }
+  }, [choroplethLayer.source]);
+  var updatedPropertyFormat = React.useMemo(function () {
+    var propertyFormat = 'name';
+
+    if (choroplethLayer.areaIds && validGeoJson) {
+      var propertyFormats = Object.keys(geoJson.features[0].properties); // check the state or country format used in dataSource
+
+      /* Accepted format for countries:
+          "properties":
+          {
+              "iso2": "AM",
+              "iso3": "ARM",
+              "name": "Armenia"
+          }
+       Accepted format for US States:
+      "properties":
+          {
+              "iso_3166_2": "US-MI",
+              "postal": "MI",
+              "name": "Michigan",
+              "label_en": "Michigan"
+          },
+      */
 
-  if (isThemeChanged) {
-    // Theme changes will reset the style layers of the entire map
-    // so we need to rerender the choropleths
-    updateChoropleth();
-  }
+      var _loop = function _loop(idx) {
+        var shapeProperty = geoJson.features[idx].properties;
+        var formatCheck = propertyFormats.find(function (key) {
+          return shapeProperty[key] === choroplethLayer.areaIds[0];
+        });
 
-  return React.createElement(MarkerWrapper_1.default, {
-    isChoroplethTooltipOpen: isTooltipOpen,
-    additionalFields: additionalFields,
-    latitude: mouseLat,
-    longitude: mouseLng,
-    map: map,
-    areaId: areaId,
-    areaValue: areaValue
-  }, React.createElement("div", {
-    "data-test": "choropleth-anchor",
-    style: {
-      padding: '24px',
-      visibility: 'hidden'
-    }
-  }));
-}, exports.compareChoropleth);
-Choropleth.displayName = 'MapChoropleth';
+        if (formatCheck !== undefined) {
+          propertyFormat = formatCheck;
+          return "break";
+        }
+      };
 
-var ChoroplethLayer = function ChoroplethLayer(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+      for (var idx = 0; idx < geoJson.features.length; idx += 1) {
+        var _ret = _loop(idx);
 
-  var map = props.map,
-      choroplethLayer = props.choroplethLayer,
-      isThemeChanged = props.isThemeChanged,
-      setIsThemeChanged = props.setIsThemeChanged,
-      onMapClick = props.onMapClick;
-  var scaledOpacities = (_a = MapUtils_1.getScaledOpacities(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors)) !== null && _a !== void 0 ? _a : [];
-  var colors = (_b = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors) === null || _b === void 0 ? void 0 : _b.map(function (color) {
+        if (_ret === "break") break;
+      }
+    }
+
+    return propertyFormat;
+  }, [choroplethLayer.areaIds, geoJson]);
+  var colors = (_a = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors) === null || _a === void 0 ? void 0 : _a.map(function (color) {
     return (color === null || color === void 0 ? void 0 : color.length) > 7 ? color.slice(0, 7) : color;
   });
-  var limit = Math.min((_c = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaIds) === null || _c === void 0 ? void 0 : _c.length, (_d = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaValues) === null || _d === void 0 ? void 0 : _d.length, (_f = (_e = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.geom) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0, (choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.resultLimit) ? choroplethLayer.resultLimit : MapUtils_1.DEFAULT_RESULT_LIMIT);
-  var areaIdSliced = (_h = (_g = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaIds) === null || _g === void 0 ? void 0 : _g.slice(0, limit)) !== null && _h !== void 0 ? _h : []; // generate a unique id if areaIds are not unique
+  var scaledOpacities = (_b = MapUtils_1.getScaledOpacities(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors, cfgOpacity)) !== null && _b !== void 0 ? _b : [];
+  var updatedAllChoroplethData = React.useMemo(function () {
+    var allChoroplethData = [];
+
+    if (validGeoJson) {
+      for (var idx = 0; idx < geoJson.features.length; idx += 1) {
+        var el = geoJson.features[idx];
+        var choroplethData = {
+          color: choroplethLayer.choroplethEmptyAreaColor,
+          areaValue: 'No Data',
+          opacity: cfgOpacity,
+          name: '',
+          idx: 0
+        };
+        choroplethData.name = el.properties[updatedPropertyFormat]; // check whether dataSource exists
+
+        if (choroplethLayer.areaIds) {
+          // store the postion of dataSource in geoJson
+          var dataIdx = choroplethLayer.areaIds.indexOf(el.properties[updatedPropertyFormat]);
+
+          if (dataIdx !== -1) {
+            choroplethData.color = colors[dataIdx];
+            choroplethData.areaValue = choroplethLayer.areaValues[dataIdx];
+            choroplethData.opacity = scaledOpacities[dataIdx];
+            choroplethData.idx = dataIdx;
+          } else {
+            choroplethData.idx = choroplethLayer.areaIds.length;
+          }
+        }
 
-  var uniqueAreaIdSliced = lodash_1.uniq(areaIdSliced).length !== areaIdSliced.length ? areaIdSliced.map(function (id, i) {
-    return "".concat(id).concat(i);
-  }) : areaIdSliced;
-  var additionalFields = (choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(function (choroplethMetadata) {
-    return choroplethLayer.additionalTooltipFields.map(function (field) {
-      return {
-        name: field,
-        value: choroplethMetadata[field]
-      };
-    });
-  }) : [];
+        allChoroplethData.push(choroplethData);
+      }
+    }
+
+    return allChoroplethData;
+  }, [choroplethLayer.areaIds, choroplethLayer.areaValues, colors, scaledOpacities]);
 
   var _handleMapClick = function handleMapClick(e, i) {
     var payload = MapUtils_1.formatMetadata(choroplethLayer, i);
@@ -2977,40 +3115,217 @@ var ChoroplethLayer = function ChoroplethLayer(props) {
     });
   };
 
-  if (!map || !choroplethLayer || !choroplethLayer.geom) {
-    return React.createElement(React.Fragment, null);
-  }
-
   if (isThemeChanged) {
     setIsThemeChanged(false);
   }
 
-  return React.createElement("div", null, uniqueAreaIdSliced.map(function (id, i) {
-    var areaId = areaIdSliced[i];
-    var areaValue = choroplethLayer.areaValues[i];
-    return React.createElement(Choropleth, {
-      key: id,
-      id: id,
-      geomData: choroplethLayer.geom[i],
+  var additionalFields = (choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(function (choroplethMetadata) {
+    var _a;
+
+    return (_a = choroplethLayer.additionalTooltipFields) === null || _a === void 0 ? void 0 : _a.map(function (field) {
+      return {
+        name: field,
+        value: choroplethMetadata[field]
+      };
+    });
+  }) : [];
+  return React.createElement("div", null, !validGeoJson && React.createElement(Message_1.default, {
+    "data-test": "choropleth-message",
+    width: width,
+    height: height,
+    level: geoJsonError.level,
+    message: geoJsonError.message
+  }), validGeoJson && updatedAllChoroplethData.map(function (el, i) {
+    return React.createElement(ChoroplethLayer_1.Choropleth, {
+      key: el.name,
+      id: el.name,
       map: map,
-      color: colors[i],
-      opacity: scaledOpacities[i],
-      isThemeChanged: isThemeChanged,
-      areaId: areaId,
-      areaValue: areaValue,
-      additionalFields: additionalFields[i],
+      color: el.color,
+      opacity: el.opacity,
+      strokeColor: choroplethLayer.choroplethStrokeColor,
+      areaId: el.name,
+      areaValue: el.areaValue,
       handleMapClick: function handleMapClick(e) {
-        return _handleMapClick(e, i);
-      }
+        return _handleMapClick(e, el.idx);
+      },
+      isThemeChanged: isThemeChanged,
+      geomData: geoJson.features[i].geometry,
+      additionalFields: additionalFields[el.idx]
     });
   }));
 };
 
-exports.default = ChoroplethLayer;
+exports.default = LocalChoroplethLayer;
+
+/***/ }),
+
+/***/ 408:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/GeoRegistry");
+
+/***/ }),
+
+/***/ 409:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/GeoJsonProvider");
+
+/***/ }),
+
+/***/ 41:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(11);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
+/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var VizActionHandler_1 = __webpack_require__(42); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
+exports.INITIAL_WIDTH = 250;
+exports.INITIAL_HEIGHT = 250;
+/**
+ * A Splunk visualization
+ */
+
+var SplunkVisualization = function SplunkVisualization() {
+  _classCallCheck(this, SplunkVisualization);
+};
+
+SplunkVisualization.propTypes = {
+  /**
+   * display mode
+   */
+  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
+  /**
+   * width in pixel or string, defaults to 100%
+   */
+  width: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * height in pixel or string
+   */
+  height: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * visualization context used for dynamic option evaluation
+   */
+  context: T.object,
+
+  /**
+   * visualization formatting options
+   */
+  options: T.object,
+
+  /**
+   * A callback to update formatting options
+   */
+  onOptionsChange: T.func,
+
+  /**
+   * datasource state which include data and request params, object key indicate the datasource type.
+   */
+  dataSources: T.objectOf(T.shape({
+    /**
+     * current request params
+     */
+    requestParams: T.object,
+
+    /**
+     * current dataset
+     */
+    data: T.shape({
+      fields: T.array,
+      columns: T.array
+    }),
+
+    /**
+     * error
+     */
+    error: T.shape({
+      level: T.string,
+      message: T.string
+    }),
+
+    /**
+     * meta data that came with the dataset
+     */
+    meta: T.object
+  })),
+
+  /**
+   * A callback to trigger event
+   */
+  onEventTrigger: T.func,
+
+  /**
+   * Inform viz if there are handlers listening to events
+   */
+  hasEventHandlers: T.bool,
+
+  /**
+   * A callback to communicate computed props to a consumer
+   */
+  onComputedProps: T.func,
+
+  /**
+   * A callback to obtain visualization api
+   */
+  vizActionHandlerRef: T.func,
+  loading: T.bool,
+  theme: T.object,
+
+  /**
+   * A callback to request new data with updated request params
+   */
+  onRequestParamsChange: T.func
+};
+/**
+ *
+ */
+
+SplunkVisualization.defaultProps = {
+  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
+  width: '100%',
+  height: exports.INITIAL_HEIGHT,
+  dataSources: {},
+  onEventTrigger: function onEventTrigger() {
+    return {};
+  },
+  mode: 'view',
+  hasEventHandlers: false,
+  options: {},
+  context: {},
+  onOptionsChange: function onOptionsChange() {
+    return {};
+  },
+  vizActionHandlerRef: function vizActionHandlerRef() {
+    return new VizActionHandler_1.DefaultVizActionHandler();
+  },
+  onComputedProps: function onComputedProps() {
+    return {};
+  },
+  loading: false,
+  onRequestParamsChange: lodash_1.noop
+};
+exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 397:
+/***/ 410:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3020,25 +3335,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var visualization_icons_1 = __webpack_require__(47);
+var visualization_icons_1 = __webpack_require__(51);
 
-var placeholders_1 = __webpack_require__(44);
+var placeholders_1 = __webpack_require__(48);
 
 var schemaUtils_1 = __webpack_require__(16);
 
-var visualization_color_palettes_1 = __webpack_require__(46);
+var visualization_color_palettes_1 = __webpack_require__(50);
 
-var themes_1 = __webpack_require__(69);
+var themes_1 = __webpack_require__(72);
 
 var i18n_1 = __webpack_require__(2);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var VizCategory_1 = __webpack_require__(31);
+var VizCategory_1 = __webpack_require__(34);
 
-var configUtils_1 = __webpack_require__(17);
+var configUtils_1 = __webpack_require__(18);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(82);
+
+var BackgroundColor_1 = __webpack_require__(53);
 
 var defaultContext = {
   colorRangeConfig: [{
@@ -3085,6 +3402,15 @@ var optionsSchema = {
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
     type: 'string'
   },
+  baseLayerTileServer: {
+    type: 'string',
+    description: 'Specify the URL for the set of tiles that make up the base map.'
+  },
+  baseLayerTileServerType: {
+    type: 'string',
+    description: 'Specify the type of tile set for the base map.',
+    pattern: schemaUtils_1.getPattern(['vector', 'raster'])
+  },
   center: {
     type: 'array',
     description: 'Specify the center of the map in coordinates, in the form of [latitude, longitude]. If you don’t provide coordinates, the map automatically centers, based on available location data. If there is no available location data, the center of the map defaults to [37.7749, -122.4194].',
@@ -3116,7 +3442,10 @@ var optionsSchema = {
       areaValues: '> primary | seriesByType("number")',
       dataColors: '> areaValues | gradient()',
       additionalTooltipFields: [],
-      resultLimit: 1000
+      resultLimit: 1000,
+      choroplethEmptyAreaColor: '> themes.defaultChoroplethEmptyAreaColor',
+      choroplethStrokeColor: 'transparent',
+      choroplethOpacity: 0.8
     }],
     type: 'array',
     description: 'Specify the optional data visualization layers over the base map. If empty, only the base map appears.',
@@ -3202,7 +3531,7 @@ var optionsSchema = {
             default: '> primary | seriesByType("number")'
           },
           dataColors: {
-            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default, and the opacities are shown at 80% of maximum to allow textual information to be visible in the map. By default, the dataColors option is not defined for type "bubble" or "marker".',
+            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default. By default, the dataColors option is not defined for type "bubble" or "marker".',
             type: ['string', 'array'],
             items: {
               type: 'string'
@@ -3221,6 +3550,28 @@ var optionsSchema = {
             description: 'Specify the maximum number of data points to render on the map. Adjust the value to improve performance.',
             type: 'number',
             default: 1000
+          },
+          source: {
+            description: 'Source for the geodata for choropleth layer: "us" or "world", and will override data specified in the SPL geom command.',
+            pattern: schemaUtils_1.getPattern(['geo://default/us', 'geo://default/world']),
+            type: 'string'
+          },
+          choroplethEmptyAreaColor: {
+            description: 'Specify the color used for empty choropleth areas when "type": "choropleth", and will only work when "source" option is correctly configured.',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+            type: 'string',
+            default: '> themes.defaultChoroplethEmptyAreaColor'
+          },
+          choroplethStrokeColor: {
+            description: 'Specify the stroke color for choropleth area outlines. The hex value format should be "#FFFFFF".',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+            type: 'string',
+            default: 'transparent'
+          },
+          choroplethOpacity: {
+            description: 'Specify the opacity of choropleth areas. Choose a number in the range of 0 - 1 (inclusive). You can also express the value as a percentage. For example, "0.8" in code or "80%" in UI.',
+            type: 'number',
+            default: 0.8
           }
         }
       }, {
@@ -3295,25 +3646,20 @@ var optionsSchema = {
     description: 'Specify the scale unit to use.',
     pattern: schemaUtils_1.getPattern(['metric', 'imperial'])
   },
-  // TODO: choropleth map retain old design
-  // showBaseLayer: {
-  //     default: true,
-  //     type: 'boolean',
-  //     description: 'Specify if showing the base map.',
-  // },
+  showBaseLayer: {
+    default: true,
+    type: 'boolean',
+    description: 'Specify if showing the base map.'
+  },
   showScale: {
     default: true,
     type: 'boolean',
     description: 'Specify whether to display the scale on the bottom left.'
   },
-  baseLayerTileServer: {
-    type: 'string',
-    description: 'Specify the URL for the set of tiles that make up the base map.'
-  },
-  baseLayerTileServerType: {
-    type: 'string',
-    description: 'Specify the type of tile set for the base map.',
-    pattern: schemaUtils_1.getPattern(['vector', 'raster'])
+  showZoomControls: {
+    default: true,
+    type: 'boolean',
+    description: 'Specify whether to display the control panel of zoom on the top left.'
   },
   zoom: {
     description: 'Specify the zoom level of the map.',
@@ -3344,6 +3690,30 @@ var themes = {
       enterprise: themes_1.variables.textColor(props),
       prisma: themes_1.variables.contentColorDefault(props)
     })(props);
+  },
+  defaultChoroplethEmptyAreaColor: function defaultChoroplethEmptyAreaColor(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: themes_1.variables.gray22(props),
+        light: themes_1.variables.gray92(props)
+      },
+      prisma: {
+        dark: themes_1.variables.interactiveColorBackground(props),
+        light: themes_1.variables.neutral300(props)
+      }
+    })(props);
+  },
+  defaultGradientMigrationConfig: function defaultGradientMigrationConfig(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: ['#4D4A5D', themes_1.variables.syntaxPurple(props)],
+        light: ['#D2CFDC', themes_1.variables.syntaxPurple(props)]
+      },
+      prisma: {
+        dark: ['#484558', themes_1.variables.syntaxPurple(props)],
+        light: ['#D8D4E1', themes_1.variables.syntaxPurple(props)]
+      }
+    })(props);
   }
 };
 
@@ -3351,26 +3721,31 @@ var checkTypeIsChoropleth = function checkTypeIsChoropleth(options) {
   return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth;
 };
 
+var checkTypeIsLocalChoropleth = function checkTypeIsLocalChoropleth(options) {
+  return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth && (options.layers[0].source === 'geo://default/us' || options.layers[0].source === 'geo://default/world');
+};
+
+var EDITOR_LABEL_WIDTH = 140;
 var editorConfig = [{
-  label: i18n_1._('Data Layer Formatting'),
+  label: i18n_1._('Data configurations'),
   layout: [[{
-    label: i18n_1._('Layer Type'),
+    label: i18n_1._('Layer type'),
     option: 'layers[0].type',
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Marker'),
-        value: MapUtils_1.LAYER_TYPE.Marker
-      }, {
         label: i18n_1._('Bubble'),
         value: MapUtils_1.LAYER_TYPE.Bubble
+      }, {
+        label: i18n_1._('Marker'),
+        value: MapUtils_1.LAYER_TYPE.Marker
       }, {
         label: i18n_1._('Choropleth'),
         value: MapUtils_1.LAYER_TYPE.Choropleth
       }]
     }
   }], [{
-    label: i18n_1._('Region Area IDs'),
+    label: i18n_1._('Area IDs'),
     option: 'layers[0].areaIds',
     editor: 'editor.columnSelector',
     showEditor: function showEditor(_ref) {
@@ -3383,7 +3758,7 @@ var editorConfig = [{
       filterByTypes: ['string']
     }
   }], [{
-    label: i18n_1._('Values'),
+    label: i18n_1._('Area values'),
     option: 'layers[0].areaValues',
     editor: 'editor.columnSelector',
     showEditor: function showEditor(_ref2) {
@@ -3420,7 +3795,7 @@ var editorConfig = [{
       shouldShowInternalFields: false
     }
   }], [{
-    label: i18n_1._('Size'),
+    label: i18n_1._('Bubble size'),
     option: 'layers[0].bubbleSize',
     editor: 'editor.columnMultiSelector',
     showEditor: function showEditor(_ref5) {
@@ -3432,6 +3807,202 @@ var editorConfig = [{
       shouldShowInternalFields: false,
       excludeByNames: ['latitude', 'longitude', 'geobin']
     }
+  }], // TODO: update columnMultiSelectionByFieldNameEditor in dynamic editor repo and add editor for additionalTooltipFields option
+  // [
+  //     {
+  //         label: _('Additional tooltip fields'),
+  //         option: 'layers[0].additionalTooltipFields',
+  //         editor: 'editor.columnMultiSelectionByFieldNameEditor',
+  //         editorProps: {
+  //             excludeByNames: ['geom'],
+  //         },
+  //     },
+  // ],
+  [{
+    label: i18n_1._('Result limit'),
+    option: 'layers[0].resultLimit',
+    editor: 'editor.number',
+    showEditor: function showEditor(_ref6) {
+      var options = _ref6.options;
+      return !checkTypeIsLocalChoropleth(options);
+    },
+    editorProps: {
+      themes: themes,
+      labelPosition: 'top',
+      min: 0
+    }
+  }]]
+}, {
+  label: i18n_1._('Data display'),
+  layout: [// TODO: add an editor for center option in dynamic editor repo by combining two number editors
+  // [
+  //     {
+  //         label: _('Center'),
+  //         option: 'center',
+  //         editor: 'editor.number',
+  //         editorProps: {
+  //             themes,
+  //             labelPosition: 'top',
+  //         },
+  //     },
+  // ],
+  [{
+    label: i18n_1._('Zoom'),
+    option: 'zoom',
+    editor: 'editor.number',
+    editorProps: {
+      themes: themes,
+      labelPosition: 'top',
+      min: 0
+    }
+  }], [{
+    label: i18n_1._('Show zoom controls'),
+    option: 'showZoomControls',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    label: i18n_1._('Show scale'),
+    option: 'showScale',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    label: i18n_1._('Scale unit'),
+    option: 'scaleUnit',
+    editor: 'editor.radioBar',
+    showEditor: function showEditor(_ref7) {
+      var options = _ref7.options;
+      return options.showScale !== false;
+    },
+    editorProps: {
+      values: [{
+        label: i18n_1._('Metric'),
+        value: 'metric'
+      }, {
+        label: i18n_1._('Imperial'),
+        value: 'imperial'
+      }]
+    }
+  }]]
+}, {
+  label: i18n_1._('Color and style'),
+  layout: [// TODO: add support for color mode option and its corresponding editor
+  // [
+  //     {
+  //         label: _('Color mode'),
+  //         option: 'colorMode',
+  //         editor: 'editor.radioBar',
+  //         editorProps: {
+  //             values: [
+  //                 { label: _('Static'), value: 'static' },
+  //                 { label: _('Dynamic'), value: 'dynamic' },
+  //             ],
+  //         },
+  //     },
+  // ],
+  // TODO: fix seriesColor editor for map layers in dynamic editor repo
+  // [
+  //     {
+  //         label: _('Series colors'),
+  //         option: 'layers[0].seriesColors',
+  //         editor: 'editor.seriesColors',
+  //         showEditor: ({ options }) =>
+  //             !(options.layers && options.layers.length && options.layers[0].type === 'choropleth'),
+  //     },
+  // ],
+  // TODO: add editor for data colors
+  // [
+  //     {
+  //         label: _('Data colors'),
+  //         option: 'layers[0].dataColors',
+  //         editor: 'editor.text',
+  //         editorProps: {
+  //             themes,
+  //             labelPosition: 'top',
+  //         },
+  //     },
+  // ],
+  [{
+    label: i18n_1._('Choropleth empty area color'),
+    option: 'layers[0].choroplethEmptyAreaColor',
+    editor: 'editor.color',
+    showEditor: function showEditor(_ref8) {
+      var options = _ref8.options;
+      return checkTypeIsLocalChoropleth(options);
+    },
+    editorProps: {
+      themes: themes
+    }
+  }], [{
+    label: i18n_1._('Choropleth stroke color'),
+    option: 'layers[0].choroplethStrokeColor',
+    editor: 'editor.color',
+    showEditor: function showEditor(_ref9) {
+      var options = _ref9.options;
+      return checkTypeIsChoropleth(options);
+    },
+    editorProps: {
+      themes: themes
+    }
+  }], [{
+    label: i18n_1._('Choropleth opacity (%)'),
+    option: 'layers[0].choroplethOpacity',
+    editor: 'editor.percent',
+    showEditor: function showEditor(_ref10) {
+      var options = _ref10.options;
+      return checkTypeIsChoropleth(options);
+    },
+    editorProps: {
+      themes: themes,
+      min: 0
+    }
+  }], // TODO: add support for seriesColorsByField option
+  // [
+  //     {
+  //         label: _('Series colors by field name'),
+  //         option: 'seriesColorsByField',
+  //         editor: 'editor.seriesColorsByField',
+  //     },
+  // ],
+  BackgroundColor_1.default({
+    themes: themes
+  }), [{
+    label: i18n_1._('Show base layer'),
+    option: 'showBaseLayer',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left'
+    }
+  }], [{
+    label: i18n_1._('Base layer tile server'),
+    option: 'baseLayerTileServer',
+    editor: 'editor.text',
+    showEditor: function showEditor(_ref11) {
+      var options = _ref11.options;
+      return options.showBaseLayer !== false;
+    }
+  }], [{
+    label: i18n_1._('Base layer tile server type'),
+    option: 'baseLayerTileServerType',
+    editor: 'editor.radioBar',
+    showEditor: function showEditor(_ref12) {
+      var options = _ref12.options;
+      return options.showBaseLayer === false ? false : !(typeof options.baseLayerTileServer === 'undefined' || options.baseLayerTileServer === '');
+    },
+    editorProps: {
+      values: [{
+        label: i18n_1._('Vector'),
+        value: 'vector'
+      }, {
+        label: i18n_1._('Raster'),
+        value: 'raster'
+      }]
+    }
   }]]
 }];
 /**
@@ -3477,7 +4048,7 @@ exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 398:
+/***/ 411:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3488,13 +4059,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.columnsNullToZeros = void 0;
 
-var types_1 = __webpack_require__(81);
+var types_1 = __webpack_require__(85);
 
-var dsl_1 = __webpack_require__(93);
+var dsl_1 = __webpack_require__(98);
 
-var hocUtils_1 = __webpack_require__(25);
+var hocUtils_1 = __webpack_require__(27);
 
-var JSONSchemaUtils_1 = __webpack_require__(26);
+var JSONSchemaUtils_1 = __webpack_require__(28);
 
 var columnsNullToZeros = function columnsNullToZeros(config, dataSources, options) {
   var _a, _b;
@@ -3545,14 +4116,59 @@ exports.columnsNullToZeros = columnsNullToZeros;
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
+/***/ 42:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("styled-components");
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(11);
+
+var _createClass = __webpack_require__(20);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultVizActionHandler = void 0;
+
+var DefaultVizActionHandler = /*#__PURE__*/function () {
+  function DefaultVizActionHandler() {
+    _classCallCheck(this, DefaultVizActionHandler);
+  }
+
+  _createClass(DefaultVizActionHandler, [{
+    key: "focus",
+    value: function focus() {// noop
+    }
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      return null; // noop
+    }
+  }]);
+
+  return DefaultVizActionHandler;
+}();
+
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 40:
+/***/ 43:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+
+/***/ }),
+
+/***/ 44:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3598,7 +4214,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 41:
+/***/ 45:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3679,7 +4295,7 @@ exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
 
-/***/ 42:
+/***/ 46:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3700,7 +4316,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': "25.4.0 - 6a8a433b8"
+  'data-splunk-visualization-version': "25.6.0 - f5eb3abf9"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3732,7 +4348,7 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 43:
+/***/ 47:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3748,7 +4364,7 @@ var colorUtils_1 = __webpack_require__(12);
 
 var variables_1 = __webpack_require__(9);
 
-var IconPlaceholder_1 = __webpack_require__(27);
+var IconPlaceholder_1 = __webpack_require__(30);
 
 var VizBehavior_1 = __webpack_require__(6);
 
@@ -3797,31 +4413,55 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 44:
+/***/ 48:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
 
-/***/ 46:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-color-palettes");
 
 /***/ }),
 
-/***/ 47:
+/***/ 51:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
 
-/***/ 51:
-/***/ (function(module, exports) {
+/***/ 53:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(2);
+
+var background = function background(_ref) {
+  var label = _ref.label,
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
+  return [{
+    label: i18n_1._(label || 'Background'),
+    option: 'backgroundColor',
+    editor: 'editor.color',
+    editorProps: {
+      labelPosition: labelPosition || 'top',
+      themes: themes
+    }
+  }];
+};
+
+exports.default = background;
 
 /***/ }),
 
@@ -3863,13 +4503,6 @@ var VizBehavior;
 
 /***/ }),
 
-/***/ 69:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
 /***/ 7:
 /***/ (function(module, exports) {
 
@@ -3877,10 +4510,10 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 79:
+/***/ 72:
 /***/ (function(module, exports) {
 
-module.exports = require("d3-scale");
+module.exports = require("@splunk/themes");
 
 /***/ }),
 
@@ -3891,7 +4524,7 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 80:
+/***/ 82:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3899,7 +4532,7 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 var _defineProperty = __webpack_require__(7);
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(17);
 
 var _toConsumableArray = __webpack_require__(8);
 
@@ -3910,15 +4543,15 @@ exports.formatMetadata = exports.compareBaseStyles = exports.getScaledOpacities
 
 var lodash_1 = __webpack_require__(3);
 
-var d3_scale_1 = __webpack_require__(79);
+var d3_scale_1 = __webpack_require__(83);
 
-var chroma = __webpack_require__(140);
+var chroma = __webpack_require__(146);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var visualization_color_palettes_1 = __webpack_require__(46);
+var visualization_color_palettes_1 = __webpack_require__(50);
 
-var types_1 = __webpack_require__(81);
+var types_1 = __webpack_require__(85);
 
 exports.MAX_LATITUDE = 90;
 exports.MIN_LATITUDE = -90;
@@ -4013,7 +4646,8 @@ exports.getTilePreset = getTilePreset;
  */
 
 var getMapStyle = function getMapStyle(_ref2) {
-  var _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
+  var showBaseLayer = _ref2.showBaseLayer,
+      _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
       baseLayerTileServer = _ref2$baseLayerTileSe === void 0 ? '' : _ref2$baseLayerTileSe,
       _ref2$baseLayerTileSe2 = _ref2.baseLayerTileServerType,
       baseLayerTileServerType = _ref2$baseLayerTileSe2 === void 0 ? '' : _ref2$baseLayerTileSe2,
@@ -4026,6 +4660,26 @@ var getMapStyle = function getMapStyle(_ref2) {
       _ref2$defaultTileDark = _ref2.defaultTileDark,
       defaultTileDark = _ref2$defaultTileDark === void 0 ? {} : _ref2$defaultTileDark;
 
+  if (!showBaseLayer) {
+    return {
+      version: exports.MAP_STYLE_VERSION_NUMBER,
+      sources: {
+        'base-tiles': {
+          type: 'raster',
+          tiles: ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='],
+          tileSize: 256
+        }
+      },
+      layers: [{
+        id: 'base-layer',
+        type: 'raster',
+        source: 'base-tiles',
+        minzoom: 0,
+        maxzoom: 22
+      }]
+    };
+  }
+
   if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === 'all')) {
     return tilePreset[baseLayerTileServer];
   }
@@ -4380,19 +5034,17 @@ var getGlobalLayerBoundaries = function getGlobalLayerBoundaries(layers) {
 
 exports.getGlobalLayerBoundaries = getGlobalLayerBoundaries;
 
-var getScaledOpacities = function getScaledOpacities(colors) {
+var getScaledOpacities = function getScaledOpacities(colors, cfgOpacity) {
   // extract opacity information from 8 digit hex codes
   var opacities = colors === null || colors === void 0 ? void 0 : colors.map(function (color) {
     var _a;
 
-    return (color === null || color === void 0 ? void 0 : color.length) === 9 ? (_a = chroma(color).alpha()) !== null && _a !== void 0 ? _a : exports.DEFAULT_OPACITY : exports.DEFAULT_OPACITY;
-  }); // opacity cannot be greater than 0.8, otherwise it will block map labels
+    return (color === null || color === void 0 ? void 0 : color.length) === 9 ? (_a = chroma(color).alpha()) !== null && _a !== void 0 ? _a : 1 : 1;
+  }); // opacity cannot be greater than configured opacity
 
-  return (opacities === null || opacities === void 0 ? void 0 : opacities.filter(function (opacity) {
-    return opacity > exports.DEFAULT_OPACITY;
-  }).length) > 0 ? opacities.map(function (opacity) {
-    return opacity * exports.DEFAULT_OPACITY;
-  }) : opacities;
+  return opacities === null || opacities === void 0 ? void 0 : opacities.map(function (opacity) {
+    return opacity * cfgOpacity;
+  });
 };
 
 exports.getScaledOpacities = getScaledOpacities;
@@ -4439,10 +5091,10 @@ exports.formatMetadata = formatMetadata;
 
 /***/ }),
 
-/***/ 81:
+/***/ 83:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/utils/types");
+module.exports = require("d3-scale");
 
 /***/ }),
 
@@ -4453,6 +5105,13 @@ module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
+/***/ 85:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/utils/types");
+
+/***/ }),
+
 /***/ 9:
 /***/ (function(module, exports) {
 
@@ -4460,7 +5119,7 @@ module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 93:
+/***/ 98:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/utils/dsl");