@splunk/visualizations 25.4.0 → 25.5.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 = 389);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -113,7 +113,14 @@ module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
-/***/ 108:
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/classCallCheck");
+
+/***/ }),
+
+/***/ 110:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -153,14 +160,7 @@ exports.convertToArrOfObjects = convertToArrOfObjects;
 
 /***/ }),
 
-/***/ 11:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/classCallCheck");
-
-/***/ }),
-
-/***/ 116:
+/***/ 117:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -189,7 +189,7 @@ var maplibre_gl_1 = __webpack_require__(141);
 
 var React = __webpack_require__(1);
 
-var Tooltip_1 = __webpack_require__(394);
+var Tooltip_1 = __webpack_require__(395);
 
 var MarkerWrapper = function MarkerWrapper(_a) {
   var longitude = _a.longitude,
@@ -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.5.0 - 12c0447a7",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -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__(79);
 
-var MarkerWrapper_1 = __webpack_require__(116);
+var MarkerWrapper_1 = __webpack_require__(117);
 
 exports.GEO_BOUND_PREFIX = '_geo_bounds_';
 exports.PieSegment = React.memo(function (_ref) {
@@ -693,6 +693,279 @@ exports.default = BubbleLayer;
 
 /***/ }),
 
+/***/ 143:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(51);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Choropleth = exports.cleanupChoropleth = exports.compareChoropleth = exports.compareGeom = void 0;
+
+var React = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(3);
+
+var MapUtils_1 = __webpack_require__(79);
+
+var MarkerWrapper_1 = __webpack_require__(117);
+
+var getShapeId = function getShapeId(id) {
+  return "shape-".concat(id);
+};
+
+var getSourceId = function getSourceId(id) {
+  return "source-".concat(id);
+};
+
+var getStrokeId = function getStrokeId(id) {
+  return "stroke-".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.strokeColor === nextProps.strokeColor && 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, strokeId, map) {
+  var _a, _b, _c; // catch errors where map is undefined
+
+
+  var currLayer;
+  var currSource;
+  var currStrokeLayer;
+
+  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 (currLayer) {
+    map.current.removeLayer(shapeId);
+  }
+
+  if (currStrokeLayer) {
+    map.current.removeLayer(strokeId);
+  }
+
+  if (currSource) {
+    map.current.removeSource(sourceId);
+  }
+};
+
+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
+  };
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTooltipOpen = _React$useState2[0],
+      setTooltipOpenStatus = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      mouseLat = _React$useState4[0],
+      setmouseLat = _React$useState4[1];
+
+  var _React$useState5 = React.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      mouseLng = _React$useState6[0],
+      setmouseLng = _React$useState6[1];
+
+  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
+
+    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
+        }
+      });
+    }
+
+    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);
+    };
+  }, []);
+
+  if (isThemeChanged) {
+    // Theme changes will reset the style layers of the entire map
+    // so we need to rerender the choropleths
+    updateChoropleth();
+  }
+
+  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';
+
+var ChoroplethLayer = function ChoroplethLayer(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+
+  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;
+  });
+  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 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]
+      };
+    });
+  }) : [];
+
+  var _handleMapClick = function handleMapClick(e, i) {
+    var payload = MapUtils_1.formatMetadata(choroplethLayer, i);
+    onMapClick({
+      e: e,
+      payload: payload
+    });
+  };
+
+  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(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);
+      }
+    });
+  }));
+};
+
+exports.default = ChoroplethLayer;
+
+/***/ }),
+
 /***/ 15:
 /***/ (function(module, exports) {
 
@@ -1714,7 +1987,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 388:
+/***/ 389:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1743,27 +2016,27 @@ var React = __webpack_require__(1);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var dsl_1 = __webpack_require__(93);
+var dsl_1 = __webpack_require__(96);
 
 var hocUtils_1 = __webpack_require__(25);
 
 var JSONSchemaUtils_1 = __webpack_require__(26);
 
-var PureMap_1 = __webpack_require__(389);
+var PureMap_1 = __webpack_require__(390);
 
 exports.PureMap = PureMap_1.default;
 
-var config_1 = __webpack_require__(397);
+var config_1 = __webpack_require__(400);
 
 exports.config = config_1.default;
 
 var withDashboardViz_1 = __webpack_require__(32);
 
-var mapUtils_1 = __webpack_require__(398);
+var mapUtils_1 = __webpack_require__(401);
 
 var BubbleLayer_1 = __webpack_require__(142);
 
-var dataUtils_1 = __webpack_require__(108);
+var dataUtils_1 = __webpack_require__(110);
 
 var formatLayer = function formatLayer(l, dataFields, dataSourceData, transformedData) {
   // add key `geobin` to the layer object if the data is returned from geostats commands
@@ -1979,19 +2252,33 @@ exports.default = Map;
 
 /***/ }),
 
-/***/ 389:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(51);
-
 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.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+
+/***/ }),
+
+/***/ 390:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(51);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
 
 var lodash_1 = __webpack_require__(3);
@@ -2004,21 +2291,25 @@ var chroma = __webpack_require__(140);
 
 var maplibre_gl_1 = __webpack_require__(141);
 
-var MapContext_1 = __webpack_require__(390);
+var MapContext_1 = __webpack_require__(391);
 
-var PureMapContainer_1 = __webpack_require__(391);
+var PureMapContainer_1 = __webpack_require__(392);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(79);
 
-var ClusterLayer_1 = __webpack_require__(393);
+var ClusterLayer_1 = __webpack_require__(394);
 
-var ChoroplethLayer_1 = __webpack_require__(396);
+var ChoroplethLayer_1 = __webpack_require__(143);
+
+var LocalChoroplethLayer_1 = __webpack_require__(397);
 
 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 +2336,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 +2489,7 @@ var PureMap = function PureMap(props) {
     }
 
     var mapStyle = MapUtils_1.getMapStyle({
+      showBaseLayer: showBaseLayer,
       baseLayerTileServer: baseLayerTileServer,
       baseLayerTileServerType: baseLayerTileServerType,
       tilePreset: tilePreset,
@@ -2230,7 +2524,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 +2553,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 +2619,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 +2640,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 +2652,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:
+/***/ 391:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/MapContext");
 
 /***/ }),
 
-/***/ 391:
+/***/ 392:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2382,15 +2675,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__(393);
 
 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 +2697,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 +2711,7 @@ exports.default = PureMapContainer;
 
 /***/ }),
 
-/***/ 392:
+/***/ 393:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2425,7 +2720,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 393:
+/***/ 394:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2439,9 +2734,9 @@ var React = __webpack_require__(1);
 
 var BubbleLayer_1 = __webpack_require__(142);
 
-var MarkerLayer_1 = __webpack_require__(395);
+var MarkerLayer_1 = __webpack_require__(396);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(79);
 
 var ClusterLayer = function ClusterLayer(_ref) {
   var clusterLayer = _ref.clusterLayer,
@@ -2480,7 +2775,7 @@ exports.default = ClusterLayer;
 
 /***/ }),
 
-/***/ 394:
+/***/ 395:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2599,7 +2894,7 @@ exports.default = Tooltip;
 
 /***/ }),
 
-/***/ 395:
+/***/ 396:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2633,9 +2928,9 @@ var colorUtils_1 = __webpack_require__(12);
 
 var lodash_1 = __webpack_require__(3);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(79);
 
-var MarkerWrapper_1 = __webpack_require__(116);
+var MarkerWrapper_1 = __webpack_require__(117);
 
 var MarkerIcon = function MarkerIcon(_a) {
   var theme = _a.theme,
@@ -2764,7 +3059,7 @@ exports.default = MarkerLayer;
 
 /***/ }),
 
-/***/ 396:
+/***/ 397:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2775,242 +3070,275 @@ var _slicedToArray = __webpack_require__(51);
 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 Message_1 = __webpack_require__(10);
 
-var MarkerWrapper_1 = __webpack_require__(116);
+var GeoRegistry_1 = __webpack_require__(398);
 
-var getShapeId = function getShapeId(id) {
-  return "shape-".concat(id);
-};
+var GeoJsonProvider_1 = __webpack_require__(399);
 
-var getSourceId = function getSourceId(id) {
-  return "source-".concat(id);
-};
+var MapUtils_1 = __webpack_require__(79);
 
-var compareGeom = function compareGeom(prev, next) {
-  if (prev !== null && next !== null) {
-    return prev.type === next.type && lodash_1.isEqual(prev.coordinates, next.coordinates);
-  }
+var ChoroplethLayer_1 = __webpack_require__(143);
 
-  return prev === null && next === null;
-};
+var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
+  var _a, _b;
 
-exports.compareGeom = compareGeom;
+  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 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();
-};
+  var _React$useState = React.useState({
+    features: [{
+      properties: {
+        name: ''
+      },
+      geometry: []
+    }]
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      geoJson = _React$useState2[0],
+      setGeoJson = _React$useState2[1];
 
-exports.compareChoropleth = compareChoropleth;
+  var _React$useState3 = React.useState(true),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      validGeoJson = _React$useState4[0],
+      setValidGeoJson = _React$useState4[1];
 
-var cleanupChoropleth = function cleanupChoropleth(shapeId, sourceId, map) {
-  var _a, _b; // catch errors where map is undefined
+  var _React$useState5 = React.useState({
+    level: 'info',
+    message: ''
+  }),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      geoJsonError = _React$useState6[0],
+      setGeoJsonError = _React$useState6[1]; // load local geoJson registry data
 
 
-  var currLayer;
-  var currSource;
+  React.useEffect(function () {
+    var geoJsonData;
+    var geoRegistry = GeoRegistry_1.default.create();
+    geoRegistry.addDefaultProvider(new GeoJsonProvider_1.default());
 
-  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;
-  }
+    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 (currLayer) {
-    map.current.removeLayer(shapeId);
-  }
+      var _loop = function _loop(idx) {
+        var shapeProperty = geoJson.features[idx].properties;
+        var formatCheck = propertyFormats.find(function (key) {
+          return shapeProperty[key] === choroplethLayer.areaIds[0];
+        });
 
-  if (currSource) {
-    map.current.removeSource(sourceId);
-  }
-};
+        if (formatCheck !== undefined) {
+          propertyFormat = formatCheck;
+          return "break";
+        }
+      };
 
-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
-  };
+      for (var idx = 0; idx < geoJson.features.length; idx += 1) {
+        var _ret = _loop(idx);
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isTooltipOpen = _React$useState2[0],
-      setTooltipOpenStatus = _React$useState2[1];
+        if (_ret === "break") break;
+      }
+    }
 
-  var _React$useState3 = React.useState(0),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      mouseLat = _React$useState4[0],
-      setmouseLat = _React$useState4[1];
+    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 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 _React$useState5 = React.useState(0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      mouseLng = _React$useState6[0],
-      setmouseLng = _React$useState6[1];
+        allChoroplethData.push(choroplethData);
+      }
+    }
 
-  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
+    return allChoroplethData;
+  }, [choroplethLayer.areaIds, choroplethLayer.areaValues, colors, scaledOpacities]);
 
-    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);
+  var _handleMapClick = function handleMapClick(e, i) {
+    var payload = MapUtils_1.formatMetadata(choroplethLayer, i);
+    onMapClick({
+      e: e,
+      payload: payload
     });
-  }, [shapeId, sourceId, map, color, validOpacity, formattedGeomData]);
-  React.useEffect(function () {
-    updateChoropleth();
-  }, [map, geomData, color, opacity, id]); // Clean up on unmount
-
-  React.useEffect(function () {
-    return function () {
-      return exports.cleanupChoropleth(shapeId, sourceId, map);
-    };
-  }, []);
+  };
 
   if (isThemeChanged) {
-    // Theme changes will reset the style layers of the entire map
-    // so we need to rerender the choropleths
-    updateChoropleth();
+    setIsThemeChanged(false);
   }
 
-  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';
-
-var ChoroplethLayer = function ChoroplethLayer(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-
-  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) {
-    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 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) {
+    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: el.color,
+      opacity: el.opacity,
+      strokeColor: choroplethLayer.choroplethStrokeColor,
+      areaId: el.name,
+      areaValue: el.areaValue,
+      handleMapClick: function handleMapClick(e) {
+        return _handleMapClick(e, el.idx);
+      },
+      isThemeChanged: isThemeChanged,
+      geomData: geoJson.features[i].geometry,
+      additionalFields: additionalFields[el.idx]
+    });
+  }));
+};
+
+exports.default = LocalChoroplethLayer;
+
+/***/ }),
+
+/***/ 398:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/GeoRegistry");
+
+/***/ }),
+
+/***/ 399:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/GeoJsonProvider");
+
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 40:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeepMemo = void 0;
+
+var react_1 = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(3);
+/**
+ * This hook evaluates and stores the result of a passed function and only
+ * re-evaluates the function when passed dependencies change.
+ *
+ * It is different from the internal React useMemo in the following aspects:
+ * - it only stores the last evaluated result
+ * - it uses a deep equality check to determine if dependencies have changed
+ *
+ * Inspired by apollo-client's useDeepMemo
+ *
+ * @param fn the function to be executed and
+ * @param dependencies an array of dependencies
+ */
 
-  var _handleMapClick = function handleMapClick(e, i) {
-    var payload = MapUtils_1.formatMetadata(choroplethLayer, i);
-    onMapClick({
-      e: e,
-      payload: payload
-    });
-  };
 
-  if (!map || !choroplethLayer || !choroplethLayer.geom) {
-    return React.createElement(React.Fragment, null);
-  }
+var useDeepMemo = function useDeepMemo(fn, dependencies) {
+  var ref = react_1.useRef();
 
-  if (isThemeChanged) {
-    setIsThemeChanged(false);
+  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+    ref.current = {
+      dependencies: dependencies,
+      value: fn()
+    };
   }
 
-  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],
-      map: map,
-      color: colors[i],
-      opacity: scaledOpacities[i],
-      isThemeChanged: isThemeChanged,
-      areaId: areaId,
-      areaValue: areaValue,
-      additionalFields: additionalFields[i],
-      handleMapClick: function handleMapClick(e) {
-        return _handleMapClick(e, i);
-      }
-    });
-  }));
+  return ref.current.value;
 };
 
-exports.default = ChoroplethLayer;
+exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 397:
+/***/ 400:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3038,7 +3366,9 @@ var VizCategory_1 = __webpack_require__(31);
 
 var configUtils_1 = __webpack_require__(17);
 
-var MapUtils_1 = __webpack_require__(80);
+var MapUtils_1 = __webpack_require__(79);
+
+var BackgroundColor_1 = __webpack_require__(49);
 
 var defaultContext = {
   colorRangeConfig: [{
@@ -3085,6 +3415,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 +3455,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 +3544,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 +3563,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 +3659,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 +3703,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 +3734,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 +3771,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 +3808,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 +3820,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 +4061,7 @@ exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 398:
+/***/ 401:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3490,7 +4074,7 @@ exports.columnsNullToZeros = void 0;
 
 var types_1 = __webpack_require__(81);
 
-var dsl_1 = __webpack_require__(93);
+var dsl_1 = __webpack_require__(96);
 
 var hocUtils_1 = __webpack_require__(25);
 
@@ -3545,59 +4129,6 @@ exports.columnsNullToZeros = columnsNullToZeros;
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 40:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDeepMemo = void 0;
-
-var react_1 = __webpack_require__(1);
-
-var lodash_1 = __webpack_require__(3);
-/**
- * This hook evaluates and stores the result of a passed function and only
- * re-evaluates the function when passed dependencies change.
- *
- * It is different from the internal React useMemo in the following aspects:
- * - it only stores the last evaluated result
- * - it uses a deep equality check to determine if dependencies have changed
- *
- * Inspired by apollo-client's useDeepMemo
- *
- * @param fn the function to be executed and
- * @param dependencies an array of dependencies
- */
-
-
-var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = react_1.useRef();
-
-  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
-    ref.current = {
-      dependencies: dependencies,
-      value: fn()
-    };
-  }
-
-  return ref.current.value;
-};
-
-exports.useDeepMemo = useDeepMemo;
-
-/***/ }),
-
 /***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3700,7 +4231,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.5.0 - 12c0447a7"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3818,6 +4349,37 @@ module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
 
+/***/ 49:
+/***/ (function(module, exports, __webpack_require__) {
+
+"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;
+
+/***/ }),
+
 /***/ 51:
 /***/ (function(module, exports) {
 
@@ -3878,20 +4440,6 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 /***/ }),
 
 /***/ 79:
-/***/ (function(module, exports) {
-
-module.exports = require("d3-scale");
-
-/***/ }),
-
-/***/ 8:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-
-/***/ 80:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3910,7 +4458,7 @@ 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__(80);
 
 var chroma = __webpack_require__(140);
 
@@ -4013,7 +4561,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 +4575,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 +4949,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,6 +5006,20 @@ exports.formatMetadata = formatMetadata;
 
 /***/ }),
 
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
+
+/***/ }),
+
+/***/ 80:
+/***/ (function(module, exports) {
+
+module.exports = require("d3-scale");
+
+/***/ }),
+
 /***/ 81:
 /***/ (function(module, exports) {
 
@@ -4460,7 +5041,7 @@ module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 93:
+/***/ 96:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/utils/dsl");