@evergis/react 2.0.166 → 2.0.168

package/dist/react.cjs.development.js

@@ -13,6 +13,7 @@ var _Map = require('@evergis/sgis/es/Map');
 var DomPainter = require('@evergis/sgis/es/painters/DomPainter/DomPainter');
 var FeatureLayer$1 = require('@evergis/sgis/es/layers/FeatureLayer');
 var icons = require('@evergis/icons');
+var dateFns = require('date-fns');
 var condition = require('@evergis/condition');
 var MultiPoint = require('@evergis/sgis/es/features/MultiPoint');
 var Polyline = require('@evergis/sgis/es/features/Polyline');
@@ -31,6 +32,7 @@ var PolylineControl = require('@evergis/sgis/es/controls/PolylineControl');
 var Label = require('@evergis/sgis/es/features/Label');
 var Control = require('@evergis/sgis/es/controls/Control');
 var PolyEditor = require('@evergis/sgis/es/controls/PolyEditor');
+var get = _interopDefault(require('lodash/get'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var _Symbol = require('@evergis/sgis/es/symbols/Symbol');
 var Poly$1 = require('@evergis/sgis/es/features/Poly');
@@ -53,6 +55,10 @@ var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var punycode = _interopDefault(require('punycode'));
 var TileLayer$1 = require('@evergis/sgis/es/layers/TileLayer');
+var reactI18next = require('react-i18next');
+var ui = require('@evergis/ui');
+var svg_js = require('@svgdotjs/svg.js');
+var Color = require('@evergis/color/es/Color');
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -451,6 +457,48 @@ const useEvergisCard = features => {
   };
 };
 
+const NO_CONTENT_VALUE = '—';
+
+(function (DateFormat) {
+  DateFormat["ClientDefaultFormat"] = "dd.MM.yyyy HH:mm";
+  DateFormat["DateTime"] = "dd.MM.yyyy HH:mm:ss";
+  DateFormat["UTC"] = "yyyy-MM-dd'T'HH:mm:ss.sssxxx";
+  DateFormat["AxisTooltip"] = "d MMMM yyyy";
+})(exports.DateFormat || (exports.DateFormat = {}));
+
+const stringDateParsers = [dateFns.parseJSON, dateFns.parseISO, rawDate => new Date(rawDate)];
+const getDate = rawDate => {
+  if (!rawDate) return null;
+
+  if (typeof rawDate === "string") {
+    for (const parser of stringDateParsers) {
+      const date = parser(rawDate);
+
+      if (dateFns.isValid(date)) {
+        return dateFns.toDate(date);
+      }
+    }
+
+    return null;
+  }
+
+  const parsedDate = dateFns.toDate(rawDate);
+  return dateFns.isValid(parsedDate) ? parsedDate : null;
+};
+const formatDate = function formatDate(date, _temp) {
+  let {
+    dateFormat = exports.DateFormat.ClientDefaultFormat,
+    defaultValue = NO_CONTENT_VALUE
+  } = _temp === void 0 ? {} : _temp;
+  const dateValue = date ? getDate(date) : null;
+
+  if (dateFns.isValid(dateValue)) {
+    return dateFns.format(dateValue, dateFormat);
+  }
+
+  return "" + defaultValue;
+};
+
 function numberWithSpaces(x, fractionDigits, delim) {
   if (fractionDigits === void 0) {
     fractionDigits = 2;
@@ -517,8 +565,6 @@ const mailHref = mail => "mailto:" + mail;
 const phoneHref = mail => "tel:" + mail;
 const urlHref = url => isValidUrl(url) ? url : "//" + url;
 
-const NO_CONTENT_VALUE = '—';
-
 const stringAttribute = value => ({
   type: 0
   /* String */
@@ -749,8 +795,8 @@ function isObject(value) {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
-const isParameterByAttribute = value => Boolean(isObject(value) && value.type && value.type === 'byAttribute');
-const isCalculatedParameter = value => Boolean(isObject(value) && value.type && value.type === 'calculated');
+const isParameterByAttribute = value => Boolean(isObject(value) && (value == null ? void 0 : value.type) === 'byAttribute');
+const isCalculatedParameter = value => Boolean(isObject(value) && (value == null ? void 0 : value.type) === 'calculated');
 const getParameterValue = value => {
   if (isParameterByAttribute(value) || isCalculatedParameter(value)) {
     return value.defaultValue;
@@ -808,6 +854,8 @@ const isSizableSymbol = symbol => Boolean(symbol && 'size' in symbol);
 const isStrokeStyledSymbol = symbol => Boolean(symbol && (isPolygonSymbol(symbol) || isPolylineSymbols(symbol)));
 const isScalablePolylineSymbol = symbol => symbol.beginning !== null && symbol.ending !== null || symbol.stroke && symbol.stroke.type !== 'solid';
 const isSimpleSymbol = symbol => Boolean(symbol && !isLabelSymbol(symbol) && !isCompositeSymbol(symbol) && !isRasterSymbol(symbol));
+const isH3GridSymbol = /*#__PURE__*/symbolTypeGuard("h3grid");
+const isSvgPointSymbol = /*#__PURE__*/symbolTypeGuard("svgPointSymbol");
 
 const isHatchBrush = /*#__PURE__*/symbolTypeGuard('hatch');
 const isPatternBrush = /*#__PURE__*/symbolTypeGuard('pattern');
@@ -1915,6 +1963,536 @@ let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
   return BaseMeasureToolEditor;
 }(PolyEditor.PolyEditor);
 
+const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
+
+const isParameterType = (types, parameter) => {
+  var _parameter$toLowerCas;
+
+  return (typeof types === "string" ? parameter == null ? void 0 : (_parameter$toLowerCas = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas.includes(types.toLowerCase()) : types.some(type => {
+    var _parameter$toLowerCas2;
+
+    return parameter == null ? void 0 : (_parameter$toLowerCas2 = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas2.includes(type.toLowerCase());
+  })) || false;
+};
+
+const isLayerService = value => isObject(value) && "name" in value;
+const getAttributeFromCondition = condition => {
+  const parts = condition.split(" ");
+  return parts[0].startsWith("(") ? parts[0].slice(1) : parts[0];
+};
+const getExprFromCondition = (condition, partIndex) => {
+  var _expr;
+
+  let expr;
+
+  if (partIndex) {
+    const parts = condition.split(" && ").map(part => part.slice(1, -1));
+    expr = parts[partIndex - 1];
+  } else {
+    expr = condition;
+  }
+
+  return (_expr = expr) == null ? void 0 : _expr.split(" ");
+};
+const getSignFromConditionPart = (condition, partIndex) => {
+  var _getExprFromCondition;
+
+  return (_getExprFromCondition = getExprFromCondition(condition, partIndex)) == null ? void 0 : _getExprFromCondition[1];
+};
+const getValueFromConditionPart = (condition, partIndex) => {
+  var _getExprFromCondition2;
+
+  return (_getExprFromCondition2 = getExprFromCondition(condition, partIndex)) == null ? void 0 : _getExprFromCondition2[2];
+};
+const isRangeCondition = condition => condition.includes("(");
+const getSymbolParameterInfo = parameter => {
+  return PARAMETER_INFOS[parameter] || DEFAULT_PARAMETER_INFO;
+};
+const formatValue = (value, type, calculatedParameter) => {
+  var _ref;
+
+  if (type === api.AttributeType.DateTime) {
+    return formatDate(value, {
+      dateFormat: exports.DateFormat.DateTime
+    });
+  }
+
+  const {
+    serialize
+  } = getSymbolParameterInfo(calculatedParameter);
+  return (_ref = value && typeof value === "number" ? serialize(value) : value) == null ? void 0 : _ref.toString();
+};
+const formatUniqueClassValue = value => {
+  const {
+    attribute,
+    uniqueValue
+  } = value;
+  return attribute ? formatValue(uniqueValue, attribute.type) : uniqueValue;
+};
+const getRangeValues$1 = (_ref2, isDouble, isDate, index) => {
+  let {
+    from,
+    to
+  } = _ref2;
+  return {
+    from: from !== null && index !== 0 ? isDate ? from : isDouble ? +from : +from + 1 : from,
+    to
+  };
+};
+const formatRangeClassValue = (value, index) => {
+  var _value$attribute, _value$attribute2;
+
+  const isDouble = ((_value$attribute = value.attribute) == null ? void 0 : _value$attribute.type) === "Double";
+  const isDate = ((_value$attribute2 = value.attribute) == null ? void 0 : _value$attribute2.type) === "DateTime";
+  const {
+    from,
+    to
+  } = getRangeValues$1(value, isDouble, isDate, index);
+  const formattedFrom = isDate && from ? formatDate(from) : from;
+  const formattedTo = isDate && to ? formatDate(to) : to;
+
+  if (from === null) {
+    return "" + formattedTo + (!isDate ? " и менее" : "");
+  }
+
+  if (to === null) {
+    return "" + (!isDate ? "более " : "") + formattedFrom;
+  }
+
+  return from === to ? "" + formattedFrom : formattedFrom + " - " + formattedTo;
+};
+const checkLayerHasLegend = layerInfo => {
+  var _SYMBOL_CLASSIFICATIO;
+
+  return ((_SYMBOL_CLASSIFICATIO = SYMBOL_CLASSIFICATION[layerInfo.geometryType]) == null ? void 0 : _SYMBOL_CLASSIFICATIO.some(param => {
+    var _layerInfo$style;
+
+    const paramValue = get((_layerInfo$style = layerInfo.style) == null ? void 0 : _layerInfo$style.symbol, param);
+    return (paramValue == null ? void 0 : paramValue.type) === "byAttribute";
+  })) || false;
+};
+const getTitleFromCondition = condition => {
+  var _parts$;
+
+  const parts = condition.split(" == ");
+  return (_parts$ = parts[1]) == null ? void 0 : _parts$.slice(1, -1);
+};
+
+function createValueTitle(paramValue, attributeType, index) {
+  if (paramValue.title) return paramValue.title;
+  const value = {
+    parameterValue: getParameterValue(paramValue.value),
+    attribute: {
+      type: attributeType
+    }
+  };
+  const sign = getSignFromConditionPart(paramValue.condition, 1);
+  const isFirstFrom = sign.includes(">");
+  value.from = isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
+  value.to = paramValue.condition.includes(" && ") && isFirstFrom ? getValueFromConditionPart(paramValue.condition, 2) : !isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
+  if (isRangeClass(value)) return formatRangeClassValue(value, index);
+  if (isUniqueClass(value)) return formatUniqueClassValue(value);
+  return "";
+} // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 ->
+// пункт "Настраиваемые значения параметров символики в системе"
+// Для добавления подготовленных значений размеров символов нужно использовать константу PREPARED_SYMBOL_SIZES
+
+
+const DEFAULT_LEGEND_STYLES = {
+  [0
+  /* Point */
+  ]: {
+    fillColor: "#00000047",
+    strokeWidth: 1,
+    strokeColor: "#0000001f"
+  },
+  [1
+  /* ImagePoint */
+  ]: {
+    maskedColor: "#00000047"
+  },
+  [2
+  /* Line */
+  ]: {
+    stroke: {
+      width: 2,
+      color: "#00000047"
+    }
+  },
+  [3
+  /* Polygon */
+  ]: {
+    fill: {
+      color: "#00000000",
+      hatchColor: "#00000000"
+    },
+    stroke: {
+      width: 1,
+      color: "#0000001f"
+    }
+  }
+};
+const SYMBOL_SIZE_PARAMETERS = ["size", "width", "height"]; // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 -> пункт "Библиотека символов"
+
+const DEFAULT_LEGEND_SIZES = {
+  circlePointSymbol: 8,
+  squarePointSymbol: 12,
+  imagePointSymbol: 24,
+  maskedImagePointSymbol: 24,
+  svgPointSymbol: 24
+};
+
+const getNonClassifiedParamValue = (baseSymbol, parameter, classificationsParams, type) => {
+  if (classificationsParams.includes(parameter)) {
+    const defaultParameterValue = getParameterFromSymbol(DEFAULT_LEGEND_STYLES[type], parameter);
+
+    if (defaultParameterValue) {
+      return defaultParameterValue;
+    }
+
+    if (SYMBOL_SIZE_PARAMETERS.includes(parameter) && DEFAULT_LEGEND_SIZES[baseSymbol.type]) {
+      return DEFAULT_LEGEND_SIZES[baseSymbol.type];
+    }
+  }
+
+  return getParameterValue(getParameterFromSymbol(baseSymbol, parameter));
+};
+
+const updateSymbolParameter = (symbol, path, value) => symbolParameterWalker(() => value)(symbol, path);
+
+const createPointSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
+  return updateSymbolParameter(_extends({}, baseSymbol, {
+    fillColor: getNonClassifiedParamValue(baseSymbol, "fillColor", classificationsParams, 0
+    /* Point */
+    ),
+    strokeColor: getNonClassifiedParamValue(baseSymbol, "strokeColor", classificationsParams, 0
+    /* Point */
+    ),
+    strokeWidth: getNonClassifiedParamValue(baseSymbol, "strokeWidth", classificationsParams, 0
+    /* Point */
+    ),
+    size: getNonClassifiedParamValue(baseSymbol, "size", classificationsParams, 0
+    /* Point */
+    ),
+    offset: [0, 0]
+  }), parameter, parameterValue);
+};
+
+function getDimensions(symbol, size) {
+  const height = getParameterValue(symbol.height);
+  const width = getParameterValue(symbol.width);
+
+  if (width === height) {
+    return {
+      width: size,
+      height: size
+    };
+  }
+
+  const ratio = height / width;
+
+  if (width < height) {
+    return {
+      width: size,
+      height: height + (size - width) * ratio
+    };
+  }
+
+  return {
+    width: width + (size - height) * ratio,
+    height: size
+  };
+}
+
+const createImagePointSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
+  let symbol = _extends({}, baseSymbol);
+
+  if (isMaskedImageSymbol(symbol)) {
+    symbol.maskedColor = getNonClassifiedParamValue(baseSymbol, "maskedColor", classificationsParams, 1
+    /* ImagePoint */
+    );
+  }
+
+  if (parameter === "height" || parameter === "width") {
+    const {
+      height,
+      width
+    } = getDimensions(baseSymbol, parameterValue);
+    symbol.height = height;
+    symbol.width = width;
+  } else {
+    symbol.width = getNonClassifiedParamValue(baseSymbol, "width", classificationsParams, 1
+    /* ImagePoint */
+    );
+    symbol.height = symbol.width;
+    symbol = updateSymbolParameter(symbol, parameter, parameterValue);
+  }
+
+  symbol.offset = [getParameterValue(symbol.height) / 2, getParameterValue(symbol.width) / 2];
+  return symbol;
+};
+
+const createLineSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
+  return updateSymbolParameter(_extends({}, baseSymbol, {
+    type: "polylineSymbol",
+    stroke: {
+      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 2
+      /* Line */
+      ),
+      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 2
+      /* Line */
+      )
+    }
+  }), parameter, parameterValue);
+};
+
+const createPolygonSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
+  return updateSymbolParameter(_extends({}, baseSymbol, {
+    fill: {
+      color: getNonClassifiedParamValue(baseSymbol, "fill.color", classificationsParams, 3
+      /* Polygon */
+      ),
+      hatchColor: getNonClassifiedParamValue(baseSymbol, "fill.hatchColor", classificationsParams, 3
+      /* Polygon */
+      )
+    },
+    stroke: {
+      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 3
+      /* Polygon */
+      ),
+      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 3
+      /* Polygon */
+      )
+    }
+  }), parameter, parameterValue);
+};
+
+const createH3Symbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
+  return updateSymbolParameter(_extends({}, baseSymbol, {
+    fill: {
+      color: getNonClassifiedParamValue(baseSymbol, "fill.color", classificationsParams, 3
+      /* Polygon */
+      )
+    },
+    stroke: {
+      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 3
+      /* Polygon */
+      ),
+      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 3
+      /* Polygon */
+      )
+    }
+  }), parameter, parameterValue);
+};
+
+const createLegendSymbol = (parameterValue, parameter, classificationsParams, baseSymbol) => {
+  if (isParameterValueSymbol(parameterValue)) {
+    return parameterValue;
+  }
+  /* if (isClusterSymbol(baseSymbol)) {
+    return createClusterSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }*/
+
+
+  if (isSizableSymbol(baseSymbol)) {
+    return createPointSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }
+
+  if (isTwoDimensionalSymbol(baseSymbol)) {
+    return createImagePointSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }
+
+  if (isPolylineSymbols(baseSymbol)) {
+    return createLineSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }
+
+  if (isPolygonSymbol(baseSymbol)) {
+    return createPolygonSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }
+
+  if (isH3GridSymbol(baseSymbol)) {
+    return createH3Symbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }
+
+  return null;
+};
+const getMinimizedLegendValues = (attributeType, param, index) => {
+  return param.values.map(paramValue => {
+    const parameterValue = getParameterValue(paramValue.value);
+    const result = {
+      parameterValue,
+      attribute: {
+        type: attributeType
+      }
+    };
+
+    if (isRangeCondition(paramValue.condition)) {
+      const from = getValueFromConditionPart(paramValue.condition, 1);
+      const to = getValueFromConditionPart(paramValue.condition, 2);
+      result.from = from ? isNumeric(from) ? +from : formatDate(from) : null;
+      result.to = to ? isNumeric(to) ? +to : formatDate(to) : null;
+      result.title = createValueTitle(paramValue, attributeType, index);
+      return result;
+    }
+
+    result.uniqueValue = formatValue(paramValue.value);
+    result.title = getTitleFromCondition(paramValue.condition);
+    return result;
+  });
+};
+const getMaximizedLegendValues = (attributeType, param, params, classified, symbol, sectionIndex, otherTitle) => {
+  const other = {
+    title: otherTitle,
+    symbol: createLegendSymbol(classified.defaultValue, param, params, symbol)
+  };
+  const items = classified.values.map((paramValue, index) => {
+    const result = {
+      symbol: createLegendSymbol(classified.values[index].value, param, params, symbol)
+    };
+
+    if (isRangeCondition(paramValue.condition)) {
+      result.title = createValueTitle(paramValue, attributeType, sectionIndex);
+      return result;
+    }
+
+    result.title = getTitleFromCondition(paramValue.condition);
+    return result;
+  });
+  return [...items, other];
+};
+const getClassified = layerInfo => {
+  const classifyParams = SYMBOL_CLASSIFICATION[layerInfo.geometryType];
+  return classifyParams == null ? void 0 : classifyParams.reduce((result, classified) => {
+    var _layerInfo$style2;
+
+    const param = get((_layerInfo$style2 = layerInfo.style) == null ? void 0 : _layerInfo$style2.symbol, classified);
+    return (param == null ? void 0 : param.type) === "byAttribute" ? _extends({}, result, {
+      [classified]: param
+    }) : result;
+  }, {});
+};
+const getSymbolStrokeWidth = symbol => {
+  var _symbol$background;
+
+  return isSvgPointSymbol(symbol) ? (_symbol$background = symbol.background) == null ? void 0 : _symbol$background.strokeWidth : symbol.strokeWidth;
+};
+const getParameterFromSymbol = (symbol, parameter) => {
+  let parameterFromSymbol = {};
+  symbolParameterWalker(parameterValue => {
+    parameterFromSymbol = parameterValue;
+  })(symbol, parameter);
+  return parameterFromSymbol;
+};
+const getLegendSymbolSize = symbol => {
+  let size = 0;
+
+  if (isSvgPointSymbol(symbol)) {
+    size = getParameterValue(symbol.size);
+  }
+
+  if (isH3GridSymbol(symbol)) {
+    size = getParameterValue(symbol.cellSize);
+  }
+
+  if (isTwoDimensionalSymbol(symbol)) {
+    size = Math.max(getParameterValue(symbol.width), getParameterValue(symbol.height));
+  }
+
+  if (isSizableSymbol(symbol)) {
+    const strokeWidth = getSymbolStrokeWidth(symbol);
+    size = getParameterValue(symbol.size) + (strokeWidth ? getParameterValue(strokeWidth) + EXTRA_BORDER_SIZE : 0);
+  }
+
+  if (isPolylineSymbols(symbol)) {
+    size = getParameterValue(getParameterFromSymbol(symbol, "stroke.width"));
+  }
+
+  return Math.max(DEFAULT_LEGEND_SYMBOL_SIZE, size);
+};
+const serializeSvgPointSymbol = symbol => {
+  var _symbol$figure, _symbol$background2, _symbol$background3, _symbol$background4, _symbol$background5;
+
+  if (!symbol) return null;
+  const figureFillColor = ((_symbol$figure = symbol.figure) == null ? void 0 : _symbol$figure.fillColor) || null;
+  const bgFillColor = ((_symbol$background2 = symbol.background) == null ? void 0 : _symbol$background2.fillColor) || null;
+  return _extends({
+    type: "svgPointSymbol",
+    size: symbol.size,
+    offset: symbol.offset,
+    angle: symbol.angle
+  }, bgFillColor ? {
+    background: {
+      id: "symbol-bg",
+      fillColor: bgFillColor,
+      strokeColor: ((_symbol$background3 = symbol.background) == null ? void 0 : _symbol$background3.strokeColor) || null,
+      strokeWidth: ((_symbol$background4 = symbol.background) == null ? void 0 : _symbol$background4.strokeWidth) || null,
+      type: ((_symbol$background5 = symbol.background) == null ? void 0 : _symbol$background5.type) || exports.SvgSymbolBg.Circle
+    }
+  } : {}, figureFillColor ? {
+    figure: {
+      id: "symbol-figure",
+      fillColor: figureFillColor
+    }
+  } : {});
+};
+const SIZE_PARAMETERS = ["size", "height", "strokeWidth", "stroke.width"];
+const isSizeClassification = parameter => SIZE_PARAMETERS.includes(parameter);
+const getServiceConfiguration = layer => {
+  const emptyServiceConfiguration = {
+    name: ""
+  };
+  if (!isLayerService(layer) || !("configuration" in layer)) return emptyServiceConfiguration;
+  return _extends({}, emptyServiceConfiguration, layer.configuration || {});
+};
+/** default attribute name which use for geometry info */
+
+const GEOMETRY_ATTRIBUTE = "geometry";
+/** default attribute name which contains unique id info */
+
+const DEFAULT_ID_ATTRIBUTE_NAME = "gid";
+const getAttributesConfiguration = layer => {
+  const serviceConfiguration = getServiceConfiguration(layer);
+  const emptyAttributesConfiguration = {
+    geometryAttribute: GEOMETRY_ATTRIBUTE,
+    idAttribute: DEFAULT_ID_ATTRIBUTE_NAME,
+    tableName: ""
+  };
+
+  if (!serviceConfiguration || !("attributesConfiguration" in serviceConfiguration)) {
+    return emptyAttributesConfiguration;
+  }
+
+  return _extends({}, emptyAttributesConfiguration, serviceConfiguration.attributesConfiguration || {});
+};
+const getLayerDefinition = layer => {
+  const {
+    geometryAttribute,
+    idAttribute
+  } = getAttributesConfiguration(layer);
+  const emptyLayerDefinition = {
+    attributes: {},
+    geometryAttribute: geometryAttribute,
+    idAttribute,
+    geometryType: api.GeometryType.Unknown,
+    titleAttribute: ""
+  };
+
+  if (!isLayerService(layer) || !("layerDefinition" in layer)) {
+    return emptyLayerDefinition;
+  }
+
+  return _extends({}, emptyLayerDefinition, layer.layerDefinition || {}, {
+    attributes: layer.layerDefinition.attributes || emptyLayerDefinition.attributes
+  });
+};
+function getAttributeType(layer, attributeName) {
+  const {
+    attributes
+  } = getLayerDefinition(layer);
+  const attribute = attributes[attributeName];
+  return attribute ? attribute.type : api.AttributeType.Unknown;
+}
+
 const metersToPixels = (meters, _ref) => {
   let {
     painter,
@@ -1945,16 +2523,164 @@ const polygonCircleFromPoint = (center, diameter) => {
   return [coordinates];
 };
 
-const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
+const DEFAULT_LEGEND_SYMBOL_SIZE = 26;
+const EXTRA_BORDER_SIZE = 4;
+const DEFAULT_SYMBOL_SIZE = 20;
+const DEFAULT_SYMBOL_WITH_BG_SIZE = 24;
+const DEFAULT_SYMBOL_FILL_COLOR = "rgba(0, 163, 245, 1)";
+const DEFAULT_SYMBOL_STROKE_COLOR = "rgb(255, 255, 255)";
+const DEFAULT_SYMBOL_OFFSET = [0, 0];
+const SYMBOL_CLASSIFICATION = {
+  [api.GeometryType.Polygon]: ["fill.color", "stroke.color", "stroke.width"],
+  [api.GeometryType.Polyline]: ["stroke.color", "stroke.width"],
+  [api.GeometryType.Point]: ["angle", "background.fillColor", "background.strokeColor", "background.strokeWidth", "figure.fillColor", "size"]
+};
+const SYMBOL_LIMITS = {
+  SIZE_MIN: 1,
+  SIZE_MAX: 64,
+  SIZE_STEP: 1,
+  GRID_SIZE_MIN: 0.1,
+  GRID_SIZE_MAX: 120,
+  MIN_OBJECTS_COUNT: 2,
+  MAX_OBJECTS_COUNT: 10000,
+  MIN_CLUSTER_SIZE: 16,
+  MAX_CLUSTER_SIZE: 120,
+  STROKE_WIDTH_MIN: 0,
+  STROKE_WIDTH_MAX: 32,
+  STROKE_WIDTH_STEP: 0.25,
+  ANGLE_MIN: -360,
+  ANGLE_MAX: 360,
+  ANGLE_STEP: 1,
+  PREVIEW_SIZE_MAX: 32,
+  PREVIEW_SIZE_MAX_WIDTH: 26
+};
+const DEFAULT_PARAMETER_INFO = {
+  classifyAble: true,
+  min: SYMBOL_LIMITS.STROKE_WIDTH_MIN,
+  max: SYMBOL_LIMITS.STROKE_WIDTH_MAX,
+  step: SYMBOL_LIMITS.STROKE_WIDTH_STEP,
+  units: "px"
+  /* Pixels */
+  ,
+  serialize: value => value,
+  deserialize: value => value
+};
+const PARAMETER_INFOS = {
+  size: /*#__PURE__*/_extends({}, DEFAULT_PARAMETER_INFO, {
+    min: SYMBOL_LIMITS.SIZE_MIN,
+    max: SYMBOL_LIMITS.SIZE_MAX,
+    step: SYMBOL_LIMITS.SIZE_STEP,
+    units: "px"
+    /* Pixels */
+
+  })
+};
 
-const isParameterType = (types, parameter) => {
-  var _parameter$toLowerCas;
+(function (SvgSymbolBg) {
+  SvgSymbolBg["Rect"] = "rect";
+  SvgSymbolBg["Circle"] = "circle";
+})(exports.SvgSymbolBg || (exports.SvgSymbolBg = {}));
 
-  return (typeof types === "string" ? parameter == null ? void 0 : (_parameter$toLowerCas = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas.includes(types.toLowerCase()) : types.some(type => {
-    var _parameter$toLowerCas2;
+const convertSvgToBase64 = svg => "data:image/svg+xml;base64," + window.btoa(svg);
+const createSvgGradient = (svg, values) => svg.gradient("linear", add => {
+  values == null ? void 0 : values.forEach((_ref, index) => {
+    let {
+      value
+    } = _ref;
+    add.stop(index / ((values == null ? void 0 : values.length) - 1), value);
+  });
+}).from(0, 0).to(1, 1); // eslint-disable-next-line max-lines-per-function
 
-    return parameter == null ? void 0 : (_parameter$toLowerCas2 = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas2.includes(type.toLowerCase());
-  })) || false;
+const manipulateSvgSymbol = (SVGContainer, symbol, svg, bg) => {
+  var _$exec2;
+
+  if (!symbol) return SVGContainer;
+  const symbolData = svg || symbol.data;
+  if (!symbolData) return SVGContainer;
+  SVGContainer.clear();
+  const {
+    size,
+    angle,
+    background,
+    figure
+  } = symbol;
+  const isUploadedFile = !bg && !symbolData.includes("symbol-bg") && !symbolData.includes("symbol-figure");
+  const innerSvg = symbolData.replace(/<\?xml[^?]*\?>|<svg[^>]*>|<\/svg>/g, "");
+
+  if (isUploadedFile) {
+    var _$exec;
+
+    SVGContainer.svg(innerSvg);
+    const uploadedViewBox = (_$exec = /viewBox="([^"]+)"/g.exec(symbolData)) == null ? void 0 : _$exec[1];
+
+    if (uploadedViewBox != null && uploadedViewBox[1]) {
+      SVGContainer.viewbox(uploadedViewBox);
+    }
+
+    SVGContainer.size(size);
+  } else {
+    const hasBg = bg || (innerSvg == null ? void 0 : innerSvg.includes("symbol-bg"));
+    let defaultSize = hasBg ? DEFAULT_SYMBOL_WITH_BG_SIZE : DEFAULT_SYMBOL_SIZE;
+    const currentSize = size || defaultSize;
+    let viewBox = [0, 0, defaultSize, defaultSize];
+    const strokeWidth = getParameterValue(background == null ? void 0 : background.strokeWidth) || (typeof (background == null ? void 0 : background.strokeColor) === "object" ? 1 : 0);
+
+    if (strokeWidth) {
+      defaultSize += strokeWidth;
+      viewBox = [-strokeWidth / 2, -strokeWidth / 2, defaultSize, defaultSize];
+    }
+
+    if (hasBg) {
+      SVGContainer.size(currentSize + "px", currentSize + "px").viewbox(viewBox.join(" "));
+      const currentBg = bg || (background == null ? void 0 : background.type);
+
+      if (currentBg) {
+        const strokeColor = getParameterValue(background == null ? void 0 : background.strokeColor);
+        const fillColor = getParameterValue(background == null ? void 0 : background.fillColor);
+        SVGContainer.svg(currentBg === exports.SvgSymbolBg.Circle ? "<circle\n                id=\"symbol-bg\"\n                cx=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE / 2 + "\"\n                cy=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE / 2 + "\"\n                r=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE / 2 + "\"\n                fill=\"" + (fillColor || DEFAULT_SYMBOL_FILL_COLOR) + "\"\n                stroke=\"" + (strokeColor || DEFAULT_SYMBOL_STROKE_COLOR) + "\"\n                stroke-width=\"" + strokeWidth + "\"\n              />" : "<rect\n                id=\"symbol-bg\"\n                width=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE + "\"\n                height=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE + "\"\n                rx=\"4\"\n                fill=\"" + (fillColor || DEFAULT_SYMBOL_FILL_COLOR) + "\"\n                stroke=\"" + (strokeColor || DEFAULT_SYMBOL_STROKE_COLOR) + "\"\n                stroke-width=\"" + strokeWidth + "\"\n              />");
+        SVGContainer.svg(innerSvg);
+        SVGContainer.find("#symbol-bg:not(:first-child)").each(item => item.remove());
+        SVGContainer.find(":not(#symbol-bg)").each(item => item.center(DEFAULT_SYMBOL_WITH_BG_SIZE / 2, DEFAULT_SYMBOL_WITH_BG_SIZE / 2).fill("white")); // eslint-disable-next-line max-depth
+
+        if (isParameterByAttribute(background == null ? void 0 : background.fillColor)) {
+          var _background$fillColor, _SVGContainer$find$;
+
+          const gradient = createSvgGradient(SVGContainer, background == null ? void 0 : (_background$fillColor = background.fillColor) == null ? void 0 : _background$fillColor.values);
+          (_SVGContainer$find$ = SVGContainer.find("#symbol-bg")[0]) == null ? void 0 : _SVGContainer$find$.fill(gradient);
+        }
+      } else {
+        SVGContainer.svg(innerSvg);
+      }
+    } else {
+      const fillColor = getParameterValue(figure == null ? void 0 : figure.fillColor);
+      SVGContainer.size(currentSize + "px", currentSize + "px").viewbox(viewBox.join(" "));
+      SVGContainer.svg(innerSvg);
+      SVGContainer.find("#symbol-figure").each(item => {
+        item.center(DEFAULT_SYMBOL_SIZE / 2, DEFAULT_SYMBOL_SIZE / 2).fill(fillColor || DEFAULT_SYMBOL_FILL_COLOR);
+      });
+    }
+  }
+
+  const rootTransform = (_$exec2 = /<svg[^>]*transform="([^"]+)"/g.exec(symbolData)) == null ? void 0 : _$exec2[1];
+
+  if (rootTransform) {
+    const transformParts = rootTransform.slice(0, -1).split("(");
+    SVGContainer.transform({
+      [transformParts[0]]: transformParts[1].split(",")
+    });
+  }
+
+  const rotatedAngle = SVGContainer.transform("rotate");
+
+  if (rotatedAngle) {
+    SVGContainer.rotate(-rotatedAngle, 0, 0);
+  }
+
+  if (angle !== undefined) {
+    SVGContainer.rotate(angle * (180 / Math.PI), 0, 0);
+  }
+
+  return SVGContainer;
 };
 
 let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
@@ -3381,7 +4107,7 @@ function createStyleLegend(style, config) {
   };
 }
 
-function createValueTitle(value, index) {
+function createValueTitle$1(value, index) {
   if (value.title) return value.title;
   if (isRangeClass(value)) return printRangeClass(value, index);
   if (isUniqueClass(value)) return value.uniqueValue;
@@ -3450,7 +4176,7 @@ const useLegend = (style, config) => React.useMemo(() => {
 }, [style, config]);
 
 const DEFAULT_LEGEND_CONFIG = {
-  renderTitle: createValueTitle
+  renderTitle: createValueTitle$1
 };
 const useLayerLegend = (layer, config) => {
   const {
@@ -3499,11 +4225,11 @@ const useLegendValueSymbol = _ref => {
   });
 };
 
-const DEFAULT_SYMBOL_SIZE = 26;
+const DEFAULT_SYMBOL_SIZE$1 = 26;
 function useSymbol(_ref, canvasRef) {
   let {
     symbol,
-    size = DEFAULT_SYMBOL_SIZE,
+    size = DEFAULT_SYMBOL_SIZE$1,
     render = getSymbolRenders,
     maxWidth
   } = _ref;
@@ -4772,189 +5498,14 @@ const EvergisSelect = _ref => {
 };
 
 var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1;
-const LegendContainer = /*#__PURE__*/styled__default.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: white;\n"])));
-const LegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const LegendSymbolTitle = /*#__PURE__*/styled__default.p(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
-const LegendValueContainer = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
-const LegendSectionHeader = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 
-const LegendSection = _ref => {
-  let {
-    item,
-    renderLegendTitle,
-    hideTitle,
-    children
-  } = _ref;
-  return React__default.createElement(LegendSectionContainer, null, !hideTitle && React__default.createElement(LegendSectionHeader, null, renderLegendTitle ? renderLegendTitle(item) : item.title), item.values.map(children));
-};
+const topLeft = distance => styled.css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
 
-var _templateObject$3, _templateObject2$3;
-const InputContainer = /*#__PURE__*/styled__default.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 0.125rem;\n  box-sizing: border-box;\n  border: 0.0625rem solid rgba(48, 69, 79, 0.12);\n  margin-bottom: 0.5rem;\n  \n  i {\n    color: rgba(48, 69, 79, 0.54);\n    padding: 0.25rem;\n\n    &:hover {\n      cursor: pointer;\n      color: rgba(48, 69, 79, 0.87);\n    }\n  }\n"])));
-const InputField = /*#__PURE__*/styled__default.input(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 1rem;\n  line-height: 1.1875rem;\n  padding: 0 0.5rem;\n  background-color: transparent;\n  color: rgba(48, 69, 79, 0.87);\n"])));
+const topRight = distance => styled.css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
 
-const SearchInput = _ref => {
-  let {
-    onChange
-  } = _ref;
-  return React__default.createElement(InputContainer, null, React__default.createElement(icons.EverCloudSearchIcon, null), React__default.createElement(InputField, {
-    onChange: onChange
-  }));
-};
-
-const LegendSymbol = _ref => {
-  let {
-    parameter,
-    parameterValue,
-    children
-  } = _ref;
-  const symbol = useLegendValueSymbol({
-    parameterValue,
-    parameter
-  });
-
-  if (!symbol) {
-    return null;
-  }
-
-  return React__default.createElement(React__default.Fragment, null, children(symbol));
-};
-
-const LegendValue = _ref => {
-  let {
-    value,
-    parameter,
-    maxSize
-  } = _ref;
-  return React__default.createElement(LegendValueContainer, null, React__default.createElement(LegendSymbol, {
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React__default.createElement(Symbol, {
-    render: getLegendSymbolRenders,
-    symbol: symbol,
-    size: maxSize
-  })), React__default.createElement(LegendSymbolTitle, null, value.title));
-};
-
-const MAX_SIZE$1 = 26;
-
-const getNumberParam = (parameterValue, param) => {
-  return typeof parameterValue === 'object' && param in parameterValue && typeof parameterValue[param] === 'number' ? parameterValue[param] : null;
-};
+const bottomLeft = distance => styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
 
-const getSymbolSize = _ref => {
-  let {
-    parameterValue,
-    maxSize
-  } = _ref;
-  const size = getNumberParam(parameterValue, 'size');
-  const strokeWidth = getNumberParam(parameterValue, 'strokeWidth');
-  const width = getNumberParam(parameterValue, 'width');
-  const height = getNumberParam(parameterValue, 'height');
-
-  if (width && height) {
-    return Math.max(width, height);
-  } else if (width) {
-    return width;
-  } else if (height) {
-    return height;
-  } else if (size) {
-    return size + (strokeWidth || 0);
-  } else if (typeof maxSize === 'number') {
-    return maxSize;
-  } else {
-    return MAX_SIZE$1;
-  }
-};
-
-const Legend = _ref => {
-  let {
-    layer,
-    children,
-    className,
-    config,
-    maxSize
-  } = _ref;
-  const legend = useLayerLegend(layer, config);
-  const {
-    renderCustomLegend,
-    searchLayer,
-    searchable
-  } = config || {};
-  const {
-    symbol
-  } = legend || {};
-
-  if (!legend && !renderCustomLegend) {
-    return null;
-  }
-
-  return React__default.createElement(LegendProvider, {
-    symbol: symbol
-  }, React__default.createElement(LegendContainer, {
-    className: className
-  }, searchable && searchLayer && React__default.createElement(SearchInput, {
-    onChange: searchLayer
-  }), renderCustomLegend && layer ? renderCustomLegend(layer) : children ? legend && children(legend) : legend && legend.items.map((legendItem, index) => React__default.createElement(LegendSection, {
-    key: legendItem.attribute + "-" + legendItem.parameter,
-    item: legendItem,
-    hideTitle: (layer == null ? void 0 : layer.alias) === legendItem.title,
-    renderLegendTitle: config && config.renderLegendTitle
-  }, legendValue => React__default.createElement(LegendValue, {
-    key: legendValue.title + "-" + index,
-    value: legendValue,
-    parameter: legendItem.parameter,
-    maxSize: getSymbolSize({
-      parameterValue: legendValue.parameterValue,
-      maxSize
-    })
-  })))));
-};
-
-const Map = _ref => {
-  let {
-    className,
-    position,
-    resolution,
-    minScale,
-    maxScale,
-    children,
-    onBboxChange,
-    style
-  } = _ref;
-  const wrapperRef = useMapWrapper();
-  const {
-    map
-  } = useMapContext();
-  const handleBboxChange = React.useCallback(state => {
-    if (onBboxChange && shouldUpdateMapState(map, {
-      position,
-      resolution
-    })) {
-      onBboxChange(state);
-    }
-  }, [map, onBboxChange, position, resolution]);
-  useUpdateMapView({
-    position,
-    resolution
-  });
-  useMaxMinScale(minScale, maxScale, position, resolution);
-  useMapBboxChange(handleBboxChange);
-  return React__default.createElement("div", {
-    className: className,
-    ref: wrapperRef,
-    style: style
-  }, children);
-};
-
-var _templateObject$4, _templateObject2$4, _templateObject3$2, _templateObject4$2, _templateObject5$2;
-
-const topLeft = distance => styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
-
-const topRight = distance => styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
-
-const bottomLeft = distance => styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
-
-const bottomRight = distance => styled.css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
+const bottomRight = distance => styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
 
 const placementMixin = function placementMixin(placement, distance) {
   if (placement === void 0) {
@@ -4965,19 +5516,19 @@ const placementMixin = function placementMixin(placement, distance) {
     distance = '1rem';
   }
 
-  return styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
+  return styled.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
 };
 
-var _templateObject$5, _templateObject2$5, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
-const mapControlBtnMixin = /*#__PURE__*/styled.css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
-const ZoomInBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomInBtn.defaultProps = { kind: "plus" };
+var _templateObject$3, _templateObject2$3, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1;
+const mapControlBtnMixin = /*#__PURE__*/styled.css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
+const ZoomInBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomInBtn.defaultProps = { kind: "plus" };
 
-const ZoomOutBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomOutBtn.defaultProps = { kind: "minus" };
+const ZoomOutBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomOutBtn.defaultProps = { kind: "minus" };
 
-const SearchBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // SearchBtn.defaultProps = { kind: "search" };
+const SearchBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // SearchBtn.defaultProps = { kind: "search" };
 // TODO not exists in fonts
 
-const FullscreenBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // FullscreenBtn.defaultProps = { kind: "maximize" };
+const FullscreenBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // FullscreenBtn.defaultProps = { kind: "maximize" };
 
 const MeasureBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // MeasureBtn.defaultProps = { kind: "measure_length" };
 
@@ -5027,21 +5578,66 @@ const Fullscreen = () => {
   }));
 };
 
-var _templateObject$6, _templateObject2$6, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
-const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
-const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 1rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
-const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
-const MapLegendDescriptionContainer = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  font-weight: 400;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.65);\n"])));
-const MinimizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
-const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 1rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
+var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
+const ItemText = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n\n  ", " {\n    margin: 0;\n  }\n"])), _ref => {
+  let {
+    theme: {
+      fonts
+    }
+  } = _ref;
+  return fonts.description;
+}, ui.Description);
+const ItemSeparator = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :after {\n    content: \"-\";\n    margin: 0 0.5rem;\n    font-size: 0.75rem;\n  }\n"])));
+const SymbolContainer = /*#__PURE__*/styled__default("span")(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  min-width: 16px;\n  margin-right: 0.5rem;\n"])));
+const ClassifiedItem = /*#__PURE__*/styled__default(ui.Flex)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n  /* cursor: ", ";\n  pointer-events: ", ";*/\n\n  :not(:last-of-type) {\n    margin-bottom: 0.25rem;\n  }\n\n  ", ", ", " {\n    transition: opacity ", ";\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  /* :hover {\n    ", ", ", " {\n      opacity: 1;\n    }\n  }*/\n"])), _ref2 => {
+  let {
+    isClusterFillColor
+  } = _ref2;
+  return isClusterFillColor ? "default" : "pointer";
+}, _ref3 => {
+  let {
+    isClusterFillColor
+  } = _ref3;
+  return isClusterFillColor ? "none" : "auto";
+}, ItemText, SymbolContainer, ui.transition.hover, ItemText, _ref4 => {
+  let {
+    isHidden
+  } = _ref4;
+  return isHidden ? 0.28 : 0.65;
+}, SymbolContainer, _ref5 => {
+  let {
+    isHidden
+  } = _ref5;
+  return isHidden ? 0.28 : 1;
+}, ItemText, SymbolContainer);
+const SymbolButtonWithClick = /*#__PURE__*/styled.css(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 3.875rem;\n  height: 3.875rem;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), _ref6 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref6;
+  return palette.elementDeep;
+});
+const SymbolButton = /*#__PURE__*/styled__default.span(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color ", ";\n  ", ";\n\n  svg {\n    max-width: 4rem;\n    max-height: 4rem;\n  }\n"])), ui.transition.hover, _ref7 => {
+  let {
+    onClick
+  } = _ref7;
+  return !!onClick && SymbolButtonWithClick;
+});
+const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
+const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 1rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
+const MapLegendHeader = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
+const MapLegendDescriptionContainer = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  font-weight: 400;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.65);\n"])));
+const MinimizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
+const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  \n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 1rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 
 const SizeLegendItemMixin = function SizeLegendItemMixin(value) {
   if (value === void 0) {
     value = 0;
   }
 
-  return styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 50%;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: \"\";\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
+  return styled.css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 50%;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: \"\";\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
 };
 
 const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
@@ -5049,133 +5645,79 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
     value = 0;
   }
 
-  return styled.css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n  \n  :first-child, :last-child {\n    height: auto;\n  }\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
+  return styled.css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n  \n  :first-child, :last-child {\n    height: auto;\n  }\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
 };
 
-const StrokeColorLegendItemMixin = /*#__PURE__*/styled.css(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), _ref => {
+const StrokeColorLegendItemMixin = /*#__PURE__*/styled.css(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
+const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), _ref8 => {
   let {
     parameter
-  } = _ref;
+  } = _ref8;
   return isParameterType(["strokeColor", "stroke.color"], parameter) ? 0.25 : 1;
-}, _ref2 => {
+}, _ref9 => {
   let {
     value
-  } = _ref2;
+  } = _ref9;
   return typeof value === "number" ? "none" : value;
-}, _ref3 => {
+}, _ref10 => {
   let {
     isHidden
-  } = _ref3;
+  } = _ref10;
   return isHidden ? 0.28 : 1;
-}, _ref4 => {
+}, _ref11 => {
   let {
     value,
     parameter
-  } = _ref4;
+  } = _ref11;
   return isParameterType("size", parameter) && SizeLegendItemMixin(value);
-}, _ref5 => {
+}, _ref12 => {
   let {
     value,
     parameter
-  } = _ref5;
+  } = _ref12;
   return isParameterType(["strokeWidth", "stroke.width"], parameter) && StrokeWidthLegendItemMixin(value);
 });
-const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex: none;\n  position: relative;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
-const SizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  margin: 0 auto;\n\n  ", " {\n    width: auto;\n    margin-left: 0;\n  }\n"])), MapLegendOther);
-const StrokeWidthLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  flex-direction: column;\n  width: auto;\n\n  ", " {\n    width: calc(100% - 2rem);\n    margin-left: 0;\n  }\n"])), MapLegendOther);
-const SizeMinimizedLegend = /*#__PURE__*/styled__default.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin: 0.5rem 0 0.25rem;\n"])));
-const SizeMinimizedLegendSymbol = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
-const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
-const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
-const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n  \n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), _ref6 => {
+const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex: none;\n  position: relative;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
+const SizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  margin: 0 auto;\n\n  ", " {\n    width: auto;\n    margin-left: 0;\n  }\n"])), MapLegendOther);
+const StrokeWidthLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  flex-direction: column;\n  width: auto;\n\n  ", " {\n    width: calc(100% - 2rem);\n    margin-left: 0;\n  }\n"])), MapLegendOther);
+const SizeMinimizedLegend = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin: 0.5rem 0 0.25rem;\n"])));
+const SizeMinimizedLegendSymbol = /*#__PURE__*/styled__default.div(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
+const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject23 || (_templateObject23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
+const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject24 || (_templateObject24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
+const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n  \n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), _ref13 => {
   let {
     isSize
-  } = _ref6;
+  } = _ref13;
   return isSize && SingleSizeLegendItemsMixin;
-}, MapLegendItem, _ref7 => {
+}, MapLegendItem, _ref14 => {
   let {
     parameter
-  } = _ref7;
+  } = _ref14;
   return isParameterType(["strokeColor", "stroke.color"], parameter) && StrokeColorLegendItemMixin;
 });
-const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref8 => {
+const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref15 => {
   let {
     isSize
-  } = _ref8;
+  } = _ref15;
   return isSize && SizeLegendItemsMixin;
-}, _ref9 => {
+}, _ref16 => {
   let {
     isStrokeWidth
-  } = _ref9;
+  } = _ref16;
   return isStrokeWidth && StrokeWidthLegendItemsMixin;
-}, _ref10 => {
+}, _ref17 => {
   let {
     isSingle
-  } = _ref10;
+  } = _ref17;
   return isSingle && SingleLegendItemsMixin;
 });
-const MapLegendItemsContainer = /*#__PURE__*/styled__default.div(_templateObject23 || (_templateObject23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  \n  ", " {\n    :first-child {\n      border-top-left-radius: 0.125rem;\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    :last-child {\n      border-top-right-radius: 0.125rem;\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n"])), MapLegendItem);
-const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject24 || (_templateObject24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: calc(100% - 1.25rem);\n  \n  div {\n    flex: 1;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    :first-child {\n      margin-right: 0.5rem;\n    }\n\n    :last-child {\n      margin-left: 0.5rem;\n      text-align: right;\n    }\n  }\n"])));
-const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
-
-const MapLegend = _ref => {
-  let {
-    layer,
-    config,
-    className,
-    hideTitle
-  } = _ref;
-  const legend = useMapLegend(layer, config);
-
-  if (!legend) {
-    return null;
-  }
-
-  const {
-    symbol,
-    items
-  } = legend;
-  return React__default.createElement(LegendProvider, {
-    symbol: symbol
-  }, React__default.createElement(MapLegendControl, {
-    className: className
-  }, !hideTitle && React__default.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), !!items.length && React__default.createElement(MapLegendContainer, null, React__default.createElement(Legend, {
-    layer: layer,
-    config: config
-  }))));
-};
-
-const MAX_SIZE$2 = 100;
-const MapLegendSymbol = _ref => {
-  let {
-    value,
-    parameter
-  } = _ref;
-  return React__default.createElement(LegendSymbol, {
-    key: value.title,
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React__default.createElement(Symbol, {
-    render: getMapLegendSymbolRenders,
-    symbol: symbol,
-    size: MAX_SIZE$2
-  }));
-};
-
-const MapLegendDescription = _ref => {
-  let {
-    parameter
-  } = _ref;
-  const isSize = isParameterType("size", parameter);
-  const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
-  const isStrokeColor = isParameterType(["strokeColor", "stroke.color"], parameter);
-  return React__default.createElement(MapLegendDescriptionContainer, null, isStrokeWidth || isStrokeColor ? isStrokeWidth ? "Толщина обводки" : "Цвет обводки" : isSize ? "Размер знака" : "Цвет символа");
-};
+const MapLegendItemsContainer = /*#__PURE__*/styled__default.div(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  \n  ", " {\n    :first-child {\n      border-top-left-radius: 0.125rem;\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    :last-child {\n      border-top-right-radius: 0.125rem;\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n"])), MapLegendItem);
+const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject30 || (_templateObject30 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: calc(100% - 1.25rem);\n  \n  div {\n    flex: 1;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    :first-child {\n      margin-right: 0.5rem;\n    }\n\n    :last-child {\n      margin-left: 0.5rem;\n      text-align: right;\n    }\n  }\n"])));
+const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject33 || (_templateObject33 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
 
 const getValueFromLegendTitle = (title, minOrMax) => {
   if (title.includes(" - ")) {
@@ -5254,6 +5796,388 @@ const MinimizedLegend = _ref => {
   })), typeof (other == null ? void 0 : other.parameterValue) === "string" && (titleMax || titleMin) && React__default.createElement(MapLegendValues, null, React__default.createElement(MapLegendValuesRange, null, React__default.createElement("div", null, titleMax), React__default.createElement("div", null, titleMin)), React__default.createElement(MapLegendValuesOther, null, "-")));
 };
 
+const useSvgSymbol = (symbol, skipOffset) => {
+  const SVGWrapperRefElement = React.useRef(null);
+  const SVGContainer = React.useMemo(() => svg_js.SVG(), []);
+  const initSvg = React.useCallback(() => {
+    SVGContainer.addTo(SVGWrapperRefElement.current);
+  }, [SVGContainer]);
+  const getSvgData = React.useCallback(() => SVGContainer.svg(), [SVGContainer]);
+  const manipulateSvg = React.useCallback(_ref => {
+    let {
+      svg,
+      bg,
+      newSymbol
+    } = _ref;
+    manipulateSvgSymbol(SVGContainer, newSymbol || symbol, svg, bg);
+  }, [SVGContainer, symbol]);
+  const getUpdatedSvgSymbol = React.useCallback((field, value) => {
+    var _newSymbol$background;
+
+    const {
+      data,
+      offset
+    } = symbol;
+    const newValue = value instanceof Color.Color ? value.toString("rgba") : value;
+    const newSymbol = JSON.parse(JSON.stringify(_extends({}, symbol, {
+      offset: skipOffset ? DEFAULT_SYMBOL_OFFSET : isSizeClassification(field) ? getOffsetParameterValue(offset) : offset
+    })));
+
+    if (field.indexOf(".") !== -1) {
+      var _newSymbol$parts$;
+
+      const parts = field.split(".");
+
+      if ((_newSymbol$parts$ = newSymbol[parts[0]]) != null && _newSymbol$parts$[parts[1]]) {
+        newSymbol[parts[0]][parts[1]] = newValue;
+      } else {
+        newSymbol[parts[0]] = _extends({}, newSymbol[parts[0]], {
+          [parts[1]]: newValue
+        }, parts[0] === "background" ? {
+          type: newSymbol.background.type,
+          id: "symbol-bg"
+        } : parts[0] === "figure" ? {
+          id: "symbol-figure"
+        } : {});
+      }
+    } else {
+      newSymbol[field] = newValue;
+    }
+
+    manipulateSvg({
+      svg: data,
+      newSymbol,
+      bg: (_newSymbol$background = newSymbol.background) == null ? void 0 : _newSymbol$background.type
+    });
+    return _extends({}, newSymbol, {
+      data: SVGContainer.svg()
+    });
+  }, [SVGContainer, manipulateSvg, skipOffset, symbol]);
+  return {
+    svgRef: SVGWrapperRefElement,
+    initSvg,
+    getSvgData,
+    manipulateSvg,
+    getUpdatedSvgSymbol
+  };
+};
+
+var _templateObject$5, _templateObject2$5;
+const SvgSymbolContainer = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), _ref => {
+  let {
+    fontSettings
+  } = _ref;
+  return !!(fontSettings != null && fontSettings.fontFamily) && "font-family: " + fontSettings.fontFamily;
+}, _ref2 => {
+  let {
+    fontSettings
+  } = _ref2;
+  return !!(fontSettings != null && fontSettings.fontWeight) && "font-weight: " + fontSettings.fontWeight;
+}, _ref3 => {
+  let {
+    fontSettings
+  } = _ref3;
+  return !!(fontSettings != null && fontSettings.fontStyle) && "font-style: " + fontSettings.fontStyle;
+}, _ref4 => {
+  let {
+    fontSettings
+  } = _ref4;
+  return !!(fontSettings != null && fontSettings.fontColor) && "color: " + fontSettings.fontColor;
+}, _ref5 => {
+  let {
+    fontSettings
+  } = _ref5;
+  return !!(fontSettings != null && fontSettings.fontSize) && "font-size: " + (typeof fontSettings.fontSize === "string" ? fontSettings.fontSize : fontSettings.fontSize + "px");
+}, _ref6 => {
+  let {
+    fontSettings
+  } = _ref6;
+  return !!(fontSettings != null && fontSettings.haloColor) && !!(fontSettings != null && fontSettings.haloWidth) && "-webkit-text-stroke: " + fontSettings.haloWidth + "px " + fontSettings.haloColor + ";";
+});
+const SvgSymbol = /*#__PURE__*/React.memo(_ref7 => {
+  let {
+    svg,
+    bg,
+    symbol,
+    title,
+    skipOffset,
+    text,
+    fontSettings,
+    onClick
+  } = _ref7;
+  const {
+    svgRef,
+    initSvg,
+    getSvgData,
+    manipulateSvg
+  } = useSvgSymbol(symbol, skipOffset);
+  const onSelectSymbol = React.useCallback(() => {
+    onClick == null ? void 0 : onClick(getSvgData(), _extends({}, symbol, bg ? {
+      background: _extends({}, symbol.background, {
+        type: bg
+      })
+    } : {}));
+  }, [bg, getSvgData, onClick, symbol]);
+  const renderSymbol = React.useMemo(() => React__default.createElement(SymbolButton, {
+    ref: svgRef,
+    title: title,
+    onClick: onClick ? onSelectSymbol : undefined
+  }), [svgRef, title, onClick, onSelectSymbol]);
+  React.useEffect(() => {
+    initSvg();
+  }, [initSvg]);
+  React.useEffect(() => {
+    manipulateSvg({
+      svg,
+      bg,
+      newSymbol: symbol
+    });
+  }, [svg, symbol, bg, manipulateSvg]);
+  return text ? React__default.createElement(SvgSymbolContainer, null, renderSymbol, React__default.createElement(SvgSymbolLabel, {
+    fontSettings: fontSettings
+  }, text), !!(fontSettings != null && fontSettings.haloColor) && !!(fontSettings != null && fontSettings.haloWidth) && React__default.createElement(SvgSymbolLabel, {
+    fontSettings: _extends({}, fontSettings, {
+      haloColor: undefined,
+      haloWidth: undefined
+    })
+  }, text)) : renderSymbol;
+});
+
+const SymbolByType = _ref => {
+  let {
+    type,
+    symbol,
+    size,
+    svg,
+    skipOffset
+  } = _ref;
+  const defaultSymbol = React.useMemo(() => React__default.createElement(Symbol, {
+    symbol: symbol,
+    size: size
+  }), [symbol, size]);
+
+  switch (type) {
+    case "svgPointSymbol":
+      return svg ? React__default.createElement(SvgSymbol, {
+        svg: svg,
+        size: size,
+        skipOffset: skipOffset,
+        symbol: serializeSvgPointSymbol(symbol)
+      }) : defaultSymbol;
+
+    default:
+      return defaultSymbol;
+  }
+};
+
+const LegendSymbolRenderer = /*#__PURE__*/React.memo(_ref => {
+  let {
+    symbol
+  } = _ref;
+
+  /* return isClusterSymbol(symbol) ? (
+    <ClusterLegendContainer>
+      <ClusterSymbolPreview symbol={symbol as ClusterSymbolDc} />
+    </ClusterLegendContainer>
+  ) : (
+    <SymbolByType
+      symbol={deserializeSymbol(symbol)}
+      size={getLegendSymbolSize(symbol) || DEFAULT_LEGEND_SYMBOL_SIZE}
+      type={symbol.type}
+      svg={(symbol as SvgPointSymbol).data}
+      skipOffset
+    />
+  );*/
+  return React__default.createElement(SymbolByType, {
+    symbol: deserializeSymbol(symbol),
+    size: getLegendSymbolSize(symbol) || DEFAULT_LEGEND_SYMBOL_SIZE,
+    type: symbol.type,
+    svg: symbol.data,
+    skipOffset: true
+  });
+});
+
+const MaximizedLegend = _ref => {
+  let {
+    symbol: sectionSymbol,
+    parameter,
+    values,
+    index: sectionIndex,
+    attributeType
+  } = _ref;
+  const {
+    t
+  } = reactI18next.useTranslation("common");
+  const isDate = attributeType === "DateTime";
+  const isSize = isParameterType("size", parameter);
+  const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
+  const isStrokeColor = isParameterType(["strokeColor", "stroke.color"], parameter);
+  const parameterValue = React.useMemo(() => get(sectionSymbol, parameter), [sectionSymbol, parameter]);
+  const renderColumn = React.useCallback((column, index) => {
+    const dateTime = column.split(" ");
+    return React__default.createElement(React.Fragment, {
+      key: index
+    }, React__default.createElement(ItemText, {
+      title: column
+    }, dateTime[0], React__default.createElement(ui.Description, null, dateTime[1])), index === 0 && React__default.createElement(ItemSeparator, null));
+  }, []);
+  const renderItemText = React.useCallback((title, index) => {
+    if (!title) {
+      return React__default.createElement(ItemText, null, t("classification.other"));
+    }
+
+    const columns = title == null ? void 0 : title.split(" - ");
+    const isSingleColumn = (columns == null ? void 0 : columns.length) === 1;
+
+    if (!isDate || index && isSingleColumn) {
+      return React__default.createElement(ItemText, {
+        title: title
+      }, title);
+    }
+
+    if (!index && isSingleColumn) {
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(ItemText, {
+        title: "\u221E"
+      }, "\u221E"), React__default.createElement(ItemSeparator, null), renderColumn(title));
+    }
+
+    return React__default.createElement(React__default.Fragment, null, columns.map(renderColumn));
+  }, [isDate, renderColumn, t]);
+  const renderLegend = React.useCallback((_ref2, index) => {
+    var _parameterValue$value;
+
+    let {
+      symbol,
+      title
+      /* , hiddenCondition*/
+
+    } = _ref2;
+    if (!symbol) return null; // const isClusterFillColor = checkIsClusterFillColor(symbol, parameter);
+
+    return React__default.createElement(ClassifiedItem, {
+      key: sectionIndex + title + index
+    }, isSize || isStrokeWidth || isStrokeColor ? React__default.createElement(MapLegendItems, {
+      parameter: parameter,
+      isSize: isSize,
+      isStrokeWidth: isStrokeWidth,
+      isStrokeColor: isStrokeColor,
+      isSingle: true
+    }, React__default.createElement(MapLegendItem, {
+      key: "" + title + index,
+      title: title,
+      value: (parameterValue == null ? void 0 : (_parameterValue$value = parameterValue.values[index]) == null ? void 0 : _parameterValue$value.value) || (parameterValue == null ? void 0 : parameterValue.defaultValue),
+      parameter: parameter
+    })) : React__default.createElement(SymbolContainer, null, React__default.createElement(LegendSymbolRenderer, {
+      symbol: symbol
+      /* isClusterFillColor ? symbol : getExtractedSymbol(symbol, true)*/
+
+    })), renderItemText(title, index));
+  }, [isSize, isStrokeColor, isStrokeWidth, parameter, parameterValue == null ? void 0 : parameterValue.defaultValue, parameterValue == null ? void 0 : parameterValue.values, renderItemText, sectionIndex]);
+  return React__default.createElement(React__default.Fragment, null, values.map(renderLegend));
+};
+
+const LegendSection = _ref => {
+  let {
+    symbol,
+    param,
+    params,
+    classified,
+    attributeName,
+    attributeType,
+    index
+  } = _ref;
+  const {
+    t
+  } = reactI18next.useTranslation("common");
+  const [isExpanded, toggleExpanded] = ui.useToggle();
+  return React__default.createElement(MapLegendSectionContainer, null, React__default.createElement(MapLegendHeader, null, attributeName), isExpanded ? React__default.createElement(MaximizedLegend, {
+    key: param,
+    symbol: symbol,
+    parameter: param,
+    attributeType: attributeType,
+    index: index,
+    values: getMaximizedLegendValues(attributeType, param, params, classified, symbol, index, t("classification.other"))
+  }) : React__default.createElement(MinimizedLegend, {
+    key: param,
+    values: getMinimizedLegendValues(attributeType, classified, index),
+    defaultValue: classified.defaultValue,
+    parameter: param,
+    attributeType: attributeType
+  }), React__default.createElement(MapLegendExpandButton, {
+    onClick: toggleExpanded
+  }, t(isExpanded ? "toggleMenu" : "Развернуть")));
+};
+
+const LegendParameterDescription = _ref => {
+  let {
+    parameter
+  } = _ref;
+  const isSize = isParameterType("size", parameter);
+  const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
+  const isStrokeColor = isParameterType(["strokeColor", "stroke.color"], parameter);
+  return React__default.createElement(MapLegendDescriptionContainer, null, isStrokeWidth || isStrokeColor ? isStrokeWidth ? "Толщина обводки" : "Цвет обводки" : isSize ? "Размер знака" : "Цвет символа");
+};
+
+const Legend = _ref => {
+  let {
+    layerInfo
+  } = _ref;
+  const classified = getClassified(layerInfo);
+  const params = Object.keys(classified);
+  return React__default.createElement(MapLegendContainer, null, Object.keys(classified).map((param, index) => {
+    var _classified$param$val, _layerInfo$style;
+
+    const attributeName = getAttributeNameFromCondition((_classified$param$val = classified[param].values[0]) == null ? void 0 : _classified$param$val.condition);
+    return React__default.createElement(LegendSection, {
+      key: index,
+      symbol: (_layerInfo$style = layerInfo.style) == null ? void 0 : _layerInfo$style.symbol,
+      attributeType: getAttributeType(layerInfo, attributeName),
+      attributeName: attributeName,
+      classified: classified[param],
+      param: param,
+      params: params,
+      index: index
+    });
+  }));
+};
+
+const Map = _ref => {
+  let {
+    className,
+    position,
+    resolution,
+    minScale,
+    maxScale,
+    children,
+    onBboxChange,
+    style
+  } = _ref;
+  const wrapperRef = useMapWrapper();
+  const {
+    map
+  } = useMapContext();
+  const handleBboxChange = React.useCallback(state => {
+    if (onBboxChange && shouldUpdateMapState(map, {
+      position,
+      resolution
+    })) {
+      onBboxChange(state);
+    }
+  }, [map, onBboxChange, position, resolution]);
+  useUpdateMapView({
+    position,
+    resolution
+  });
+  useMaxMinScale(minScale, maxScale, position, resolution);
+  useMapBboxChange(handleBboxChange);
+  return React__default.createElement("div", {
+    className: className,
+    ref: wrapperRef,
+    style: style
+  }, children);
+};
+
 let MeasureTool = /*#__PURE__*/function (_React$Component) {
   _inherits(MeasureTool, _React$Component);
 
@@ -5458,15 +6382,15 @@ const Measurer = _ref => {
   }, props)) : null;
 };
 
-var _templateObject$7, _templateObject2$7, _templateObject3$5;
-const ScaleRulerContainer = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"])));
-const ScaleRulerBlock = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), _ref => {
+var _templateObject$6, _templateObject2$6, _templateObject3$4;
+const ScaleRulerContainer = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"])));
+const ScaleRulerBlock = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), _ref => {
   let {
     width
   } = _ref;
   return width + "px";
 });
-const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
+const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
   let {
     alignEnd
   } = _ref2;
@@ -5519,17 +6443,17 @@ const ZoomLevel = () => {
   }, level || 0);
 };
 
-var _templateObject$8, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
+var _templateObject$7, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
 
-const cornerBottom = cornerSize => styled.css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  &:before {\n    left: 50%;\n    transform: translate(-50%, 100%);\n    bottom: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
+const cornerBottom = cornerSize => styled.css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  &:before {\n    left: 50%;\n    transform: translate(-50%, 100%);\n    bottom: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-const cornerLeft = cornerSize => styled.css(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-100%, -50%);\n    left: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-right: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
+const cornerLeft = cornerSize => styled.css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-100%, -50%);\n    left: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-right: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-const cornerRight = cornerSize => styled.css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(100%, -50%);\n    right: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-left: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
+const cornerRight = cornerSize => styled.css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(100%, -50%);\n    right: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-left: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-const cornerTop = cornerSize => styled.css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-50%, -100%);\n    left: 50%;\n    top: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-bottom: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
+const cornerTop = cornerSize => styled.css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-50%, -100%);\n    left: 50%;\n    top: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-bottom: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-const top = (distance, cornerSize) => styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  bottom: ", ";\n  ", "\n"])), distance, cornerSize && cornerBottom(cornerSize));
+const top = (distance, cornerSize) => styled.css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  bottom: ", ";\n  ", "\n"])), distance, cornerSize && cornerBottom(cornerSize));
 
 const right = (distance, cornerSize) => styled.css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  left: ", ";\n  ", "\n"])), distance, cornerSize && cornerLeft(cornerSize));
 
@@ -5629,13 +6553,24 @@ exports.CardHeader = CardHeader;
 exports.CircleLineMiterRender = CircleLineMiterRender;
 exports.ClassificationCondition = ClassificationCondition;
 exports.ClassificationManager = ClassificationManager;
+exports.ClassifiedItem = ClassifiedItem;
 exports.ClusterLayer = ClusterLayer;
 exports.ClusterSymbol = ClusterSymbol;
 exports.CompoundIcon = CompoundIcon;
 exports.DEFAULT_CRS = DEFAULT_CRS;
+exports.DEFAULT_ID_ATTRIBUTE_NAME = DEFAULT_ID_ATTRIBUTE_NAME;
+exports.DEFAULT_LEGEND_SIZES = DEFAULT_LEGEND_SIZES;
+exports.DEFAULT_LEGEND_STYLES = DEFAULT_LEGEND_STYLES;
+exports.DEFAULT_LEGEND_SYMBOL_SIZE = DEFAULT_LEGEND_SYMBOL_SIZE;
+exports.DEFAULT_PARAMETER_INFO = DEFAULT_PARAMETER_INFO;
 exports.DEFAULT_SRID = DEFAULT_SRID;
+exports.DEFAULT_SYMBOL_FILL_COLOR = DEFAULT_SYMBOL_FILL_COLOR;
+exports.DEFAULT_SYMBOL_OFFSET = DEFAULT_SYMBOL_OFFSET;
 exports.DEFAULT_SYMBOL_SIZE = DEFAULT_SYMBOL_SIZE;
+exports.DEFAULT_SYMBOL_STROKE_COLOR = DEFAULT_SYMBOL_STROKE_COLOR;
+exports.DEFAULT_SYMBOL_WITH_BG_SIZE = DEFAULT_SYMBOL_WITH_BG_SIZE;
 exports.DraggableMarker = DraggableMarker;
+exports.EXTRA_BORDER_SIZE = EXTRA_BORDER_SIZE;
 exports.EvergisCard = EvergisCard;
 exports.EvergisCardAttribute = EvergisCardAttribute;
 exports.EvergisCardAttributeContainer = AttributeContainer;
@@ -5663,39 +6598,43 @@ exports.EvergisStyle = EvergisStyle;
 exports.EvergisTileLayer = EvergisTileLayer;
 exports.FeatureLayer = FeatureLayer;
 exports.Fullscreen = Fullscreen;
+exports.GEOMETRY_ATTRIBUTE = GEOMETRY_ATTRIBUTE;
+exports.ItemSeparator = ItemSeparator;
+exports.ItemText = ItemText;
 exports.LabelSymbol = LabelSymbol;
 exports.Legend = Legend;
-exports.LegendContainer = LegendContainer;
+exports.LegendParameterDescription = LegendParameterDescription;
 exports.LegendProvider = LegendProvider;
 exports.LegendSection = LegendSection;
-exports.LegendSectionContainer = LegendSectionContainer;
-exports.LegendSymbol = LegendSymbol;
-exports.LegendValue = LegendValue;
-exports.LegendValueContainer = LegendValueContainer;
+exports.LegendSymbolRenderer = LegendSymbolRenderer;
 exports.LineMiterRender = LineMiterRender;
 exports.Map = Map;
 exports.MapControl = MapControl;
 exports.MapControls = MapControls;
-exports.MapLegend = MapLegend;
 exports.MapLegendContainer = MapLegendContainer;
-exports.MapLegendDescription = MapLegendDescription;
+exports.MapLegendControl = MapLegendControl;
 exports.MapLegendDescriptionContainer = MapLegendDescriptionContainer;
 exports.MapLegendExpandButton = MapLegendExpandButton;
 exports.MapLegendHeader = MapLegendHeader;
 exports.MapLegendItem = MapLegendItem;
 exports.MapLegendItems = MapLegendItems;
+exports.MapLegendItemsContainer = MapLegendItemsContainer;
 exports.MapLegendOther = MapLegendOther;
 exports.MapLegendSectionContainer = MapLegendSectionContainer;
-exports.MapLegendSymbol = MapLegendSymbol;
 exports.MapLegendValueDescr = MapLegendValueDescr;
 exports.MapLegendValues = MapLegendValues;
+exports.MapLegendValuesOther = MapLegendValuesOther;
+exports.MapLegendValuesRange = MapLegendValuesRange;
 exports.MapProvider = MapProvider;
+exports.MaximizedLegend = MaximizedLegend;
 exports.Measure = Measure;
 exports.MeasureTool = MeasureTool;
 exports.Measurer = Measurer;
 exports.MinimizedLegend = MinimizedLegend;
+exports.MinimizedLegendContainer = MinimizedLegendContainer;
 exports.NO_CONTENT_VALUE = NO_CONTENT_VALUE;
 exports.Noop = Noop;
+exports.PARAMETER_INFOS = PARAMETER_INFOS;
 exports.PREVIEW_LIMITS = PREVIEW_LIMITS;
 exports.SGisBrushFill = SGisBrushFill;
 exports.SGisImageFill = SGisImageFill;
@@ -5703,6 +6642,9 @@ exports.SGisPolygonSymbol = SGisPolygonSymbol;
 exports.SGisPolylineSymbol = SGisPolylineSymbol;
 exports.SOLID_INTERVALS = SOLID_INTERVALS;
 exports.SVGPoly = SVGPoly;
+exports.SYMBOL_CLASSIFICATION = SYMBOL_CLASSIFICATION;
+exports.SYMBOL_LIMITS = SYMBOL_LIMITS;
+exports.SYMBOL_SIZE_PARAMETERS = SYMBOL_SIZE_PARAMETERS;
 exports.ScaleRuler = ScaleRuler;
 exports.ScaleRulerBlock = ScaleRulerBlock;
 exports.ScaleRulerContainer = ScaleRulerContainer;
@@ -5711,11 +6653,18 @@ exports.SelectedPointSymbol = SelectedPointSymbol;
 exports.SelectedPolySymbol = SelectedPolySymbol;
 exports.ShadowedPointSymbol = ShadowedPointSymbol;
 exports.ShadowedPolySymbol = ShadowedPolySymbol;
+exports.SizeMinimizedLegend = SizeMinimizedLegend;
 exports.SizeMinimizedLegendDown = SizeMinimizedLegendDown;
+exports.SizeMinimizedLegendLabel = SizeMinimizedLegendLabel;
+exports.SizeMinimizedLegendSymbol = SizeMinimizedLegendSymbol;
 exports.SizeMinimizedLegendUp = SizeMinimizedLegendUp;
 exports.SquareLineMiterRender = SquareLineMiterRender;
 exports.StyleSymbol = StyleSymbol;
+exports.SvgSymbol = SvgSymbol;
 exports.Symbol = Symbol;
+exports.SymbolButton = SymbolButton;
+exports.SymbolByType = SymbolByType;
+exports.SymbolContainer = SymbolContainer;
 exports.TextContainer = TextContainer;
 exports.TileLayer = TileLayer;
 exports.Tooltip = Tooltip;
@@ -5725,12 +6674,16 @@ exports.Zoom = Zoom;
 exports.ZoomLevel = ZoomLevel;
 exports.adjustSymbol = adjustSymbol;
 exports.applyParameterValue = applyParameterValue;
+exports.checkLayerHasLegend = checkLayerHasLegend;
 exports.clamp = clamp;
+exports.convertSvgToBase64 = convertSvgToBase64;
 exports.copyRings = copyRings;
 exports.createCompositeSymbol = createCompositeSymbol;
 exports.createLabelSymbol = createLabelSymbol;
+exports.createLegendSymbol = createLegendSymbol;
 exports.createStyleLegend = createStyleLegend;
-exports.createValueTitle = createValueTitle;
+exports.createSvgGradient = createSvgGradient;
+exports.createValueTitle = createValueTitle$1;
 exports.defaultOffset = defaultOffset;
 exports.defineStrokeStylePreset = defineStrokeStylePreset;
 exports.deserializeSymbol = deserializeSymbol;
@@ -5741,34 +6694,61 @@ exports.findChildFeatureStyle = findChildFeatureStyle;
 exports.findChildFeatureSymbol = findChildFeatureSymbol;
 exports.formatArea = formatArea;
 exports.formatAttributeValue = formatAttributeValue;
+exports.formatDate = formatDate;
 exports.formatLength = formatLength;
 exports.formatPolygonMeasure = formatPolygonMeasure;
+exports.formatRangeClassValue = formatRangeClassValue;
+exports.formatUniqueClassValue = formatUniqueClassValue;
+exports.formatValue = formatValue;
+exports.getAttributeFromCondition = getAttributeFromCondition;
 exports.getAttributeNameFromClassified = getAttributeNameFromClassified;
 exports.getAttributeNameFromCondition = getAttributeNameFromCondition;
+exports.getAttributeType = getAttributeType;
+exports.getAttributesConfiguration = getAttributesConfiguration;
 exports.getChildSymbols = getChildSymbols;
+exports.getClassified = getClassified;
 exports.getCrs = getCrs;
 exports.getDashStylePreset = getDashStylePreset;
+exports.getDate = getDate;
+exports.getDimensions = getDimensions;
+exports.getExprFromCondition = getExprFromCondition;
 exports.getFeatureSymbol = getFeatureSymbol;
+exports.getHexColor = getHexColor;
+exports.getLayerDefinition = getLayerDefinition;
 exports.getLegendSymbolRenders = getLegendSymbolRenders;
+exports.getLegendSymbolSize = getLegendSymbolSize;
 exports.getLineDash = getLineDash;
 exports.getMapLegendSymbolRenders = getMapLegendSymbolRenders;
 exports.getMapState = getMapState;
+exports.getMaximizedLegendValues = getMaximizedLegendValues;
+exports.getMinimizedLegendValues = getMinimizedLegendValues;
 exports.getOffsetParameterValue = getOffsetParameterValue;
+exports.getParameterFromSymbol = getParameterFromSymbol;
 exports.getParameterValue = getParameterValue;
+exports.getRangeValues = getRangeValues$1;
 exports.getScale = getScale;
+exports.getServiceConfiguration = getServiceConfiguration;
+exports.getSignFromConditionPart = getSignFromConditionPart;
+exports.getSymbolParameterInfo = getSymbolParameterInfo;
 exports.getSymbolRenders = getSymbolRenders;
+exports.getSymbolStrokeWidth = getSymbolStrokeWidth;
+exports.getTitleFromCondition = getTitleFromCondition;
+exports.getValueFromConditionPart = getValueFromConditionPart;
 exports.isArrowLineMiter = isArrowLineMiter;
 exports.isCalculatedParameter = isCalculatedParameter;
 exports.isCircleLineMiter = isCircleLineMiter;
 exports.isCompositeSymbol = isCompositeSymbol;
 exports.isDashedBrush = isDashedBrush;
 exports.isFilledLineMitter = isFilledLineMitter;
+exports.isH3GridSymbol = isH3GridSymbol;
 exports.isHatchBrush = isHatchBrush;
 exports.isImageSymbol = isImageSymbol;
 exports.isLabelSymbol = isLabelSymbol;
+exports.isLayerService = isLayerService;
 exports.isMaskedImageSymbol = isMaskedImageSymbol;
 exports.isMiterExist = isMiterExist;
 exports.isNumeric = isNumeric;
+exports.isObject = isObject;
 exports.isParameterByAttribute = isParameterByAttribute;
 exports.isParameterType = isParameterType;
 exports.isParameterValueSimple = isParameterValueSimple;
@@ -5785,7 +6765,9 @@ exports.isPolylineLikePolygon = isPolylineLikePolygon;
 exports.isPolylineSymbol = isPolylineSymbol;
 exports.isPolylineSymbols = isPolylineSymbols;
 exports.isRangeClass = isRangeClass;
+exports.isRangeCondition = isRangeCondition;
 exports.isRasterSymbol = isRasterSymbol;
+exports.isRequisiteNumbers = isRequisiteNumbers;
 exports.isSGisClusterSymbol = isSGisClusterSymbol;
 exports.isSGisH3Symbol = isSGisH3Symbol;
 exports.isSGisImageSymbol = isSGisImageSymbol;
@@ -5797,29 +6779,44 @@ exports.isSimpleOffset = isSimpleOffset;
 exports.isSimplePolylineSymbol = isSimplePolylineSymbol;
 exports.isSimpleSymbol = isSimpleSymbol;
 exports.isSizableSymbol = isSizableSymbol;
+exports.isSizeClassification = isSizeClassification;
 exports.isSolidBrush = isSolidBrush;
 exports.isSquareLineMiter = isSquareLineMiter;
 exports.isSquareSymbol = isSquareSymbol;
 exports.isStaticImageSymbol = isStaticImageSymbol;
+exports.isStringAsInn = isStringAsInn;
+exports.isStringAsKpp = isStringAsKpp;
+exports.isStringAsMail = isStringAsMail;
+exports.isStringAsOgrn = isStringAsOgrn;
+exports.isStringAsPhone = isStringAsPhone;
+exports.isStringAsUrl = isStringAsUrl;
+exports.isStringContainsDate = isStringContainsDate;
 exports.isStringParameterValue = isStringParameterValue;
 exports.isStrokeStyledSymbol = isStrokeStyledSymbol;
 exports.isStyle = isStyle;
+exports.isSvgPointSymbol = isSvgPointSymbol;
 exports.isSymbolWithOffset = isSymbolWithOffset;
 exports.isTwoDimensionalSymbol = isTwoDimensionalSymbol;
 exports.isUniqueClass = isUniqueClass;
 exports.isValidParameter = isValidParameter;
+exports.isValidUrl = isValidUrl;
+exports.mailHref = mailHref;
+exports.manipulateSvgSymbol = manipulateSvgSymbol;
+exports.matchPhone = matchPhone;
 exports.measureAreaSymbol = measureAreaSymbol;
 exports.measureLengthSymbol = measureLengthSymbol;
 exports.measurePolygonSnapSymbol = measurePolygonSnapSymbol;
 exports.metersToPixels = metersToPixels;
 exports.numberWithSpaces = numberWithSpaces;
 exports.packStyle = packStyle;
+exports.phoneHref = phoneHref;
 exports.polygonCircleFromPoint = polygonCircleFromPoint;
 exports.printRangeClass = printRangeClass;
 exports.renderSymbolToCanvas = renderSymbolToCanvas;
 exports.selectedPoint = selectedPoint;
 exports.selectedPolygon = selectedPolygon;
 exports.selectedPolyline = selectedPolyline;
+exports.serializeSvgPointSymbol = serializeSvgPointSymbol;
 exports.setDefaultParameterValue = setDefaultParameterValue;
 exports.setParameterValue = setParameterValue;
 exports.shouldUpdateMapState = shouldUpdateMapState;
@@ -5831,6 +6828,8 @@ exports.toIntervals = toIntervals;
 exports.toLineDash = toLineDash;
 exports.unClassify = unClassify;
 exports.updateMapResolution = updateMapResolution;
+exports.updateSymbolParameter = updateSymbolParameter;
+exports.urlHref = urlHref;
 exports.useCanvas = useCanvas;
 exports.useClusterLayer = useClusterLayer;
 exports.useCrs = useCrs;
@@ -5865,6 +6864,7 @@ exports.useMetersToPixelsCb = useMetersToPixelsCb;
 exports.useMount = useMount;
 exports.useProperty = useProperty;
 exports.useScale = useScale;
+exports.useSvgSymbol = useSvgSymbol;
 exports.useSymbol = useSymbol;
 exports.useToggle = useToggle;
 exports.useTooltip = useTooltip;