@evergis/react 2.0.166 → 2.0.167

package/dist/react.esm.js

@@ -1,11 +1,12 @@
-import React, { useState, useCallback, useMemo, useContext, createContext, useEffect, useRef, useReducer, Fragment } from 'react';
+import React, { useState, useCallback, useMemo, useContext, createContext, useEffect, useRef, useReducer, memo, Fragment } from 'react';
 import { Bbox } from '@evergis/sgis/es/Bbox';
 import { getMouseOffset, listenDomEvent } from '@evergis/sgis/es/utils/domEvent';
 import { Api, AttributeType, unique, GeometryType, EvergisDynamicLayer as EvergisDynamicLayer$1, EvergisTileLayer as EvergisTileLayer$1, isEvergisDynamicLayer } from '@evergis/api';
 import { Map as Map$1, BboxChangeEvent, BboxChangeEndEvent } from '@evergis/sgis/es/Map';
 import { DomPainter, MapResize } from '@evergis/sgis/es/painters/DomPainter/DomPainter';
 import { FeatureLayer as FeatureLayer$1 } from '@evergis/sgis/es/layers/FeatureLayer';
-import { Icon, IconButton, EverCloudStatisticsIcon, EverCloudZoomtoIcon, EverCloudCloseIcon, EverCloudPlayPrevIcon, EverCloudPlayNextIcon, EverCloudSearchIcon } from '@evergis/icons';
+import { Icon, IconButton, EverCloudStatisticsIcon, EverCloudZoomtoIcon, EverCloudCloseIcon, EverCloudPlayPrevIcon, EverCloudPlayNextIcon } from '@evergis/icons';
+import { isValid, toDate, format, parseJSON, parseISO } from 'date-fns';
 import { ConditionInterpreter, TokenType, ConditionEvaluator } from '@evergis/condition';
 import { MultiPoint } from '@evergis/sgis/es/features/MultiPoint';
 import { Polyline } from '@evergis/sgis/es/features/Polyline';
@@ -24,6 +25,7 @@ import { PolylineControl } from '@evergis/sgis/es/controls/PolylineControl';
 import { LabelFeature } from '@evergis/sgis/es/features/Label';
 import { DrawingFinishEvent } from '@evergis/sgis/es/controls/Control';
 import { PolyEditor } from '@evergis/sgis/es/controls/PolyEditor';
+import get from 'lodash-es/get';
 import ReactDOM from 'react-dom';
 import { DynamicPointSymbol, Symbol as Symbol$1 } from '@evergis/sgis/es/symbols/Symbol';
 import { Poly } from '@evergis/sgis/es/features/Poly';
@@ -45,6 +47,10 @@ import { debounce } from '@evergis/sgis/es/utils/utils';
 import styled, { css } from 'styled-components';
 import punycode from 'punycode';
 import { TileLayer as TileLayer$1 } from '@evergis/sgis/es/layers/TileLayer';
+import { useTranslation } from 'react-i18next';
+import { Description, Flex, transition, useToggle as useToggle$1 } from '@evergis/ui';
+import { SVG } from '@svgdotjs/svg.js';
+import { Color as Color$1 } from '@evergis/color/es/Color';
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -443,6 +449,49 @@ const useEvergisCard = features => {
   };
 };
 
+const NO_CONTENT_VALUE = '—';
+var DateFormat;
+
+(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";
+})(DateFormat || (DateFormat = {}));
+
+const stringDateParsers = [parseJSON, 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 (isValid(date)) {
+        return toDate(date);
+      }
+    }
+
+    return null;
+  }
+
+  const parsedDate = toDate(rawDate);
+  return isValid(parsedDate) ? parsedDate : null;
+};
+const formatDate = function formatDate(date, _temp) {
+  let {
+    dateFormat = DateFormat.ClientDefaultFormat,
+    defaultValue = NO_CONTENT_VALUE
+  } = _temp === void 0 ? {} : _temp;
+  const dateValue = date ? getDate(date) : null;
+
+  if (isValid(dateValue)) {
+    return format(dateValue, dateFormat);
+  }
+
+  return "" + defaultValue;
+};
+
 function numberWithSpaces(x, fractionDigits, delim) {
   if (fractionDigits === void 0) {
     fractionDigits = 2;
@@ -509,8 +558,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 */
@@ -741,8 +788,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;
@@ -800,6 +847,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');
@@ -1913,6 +1962,536 @@ let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
   return BaseMeasureToolEditor;
 }(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 === AttributeType.DateTime) {
+    return formatDate(value, {
+      dateFormat: 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) || 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: 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 : AttributeType.Unknown;
+}
+
 const metersToPixels = (meters, _ref) => {
   let {
     painter,
@@ -1943,16 +2522,166 @@ 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 = {
+  [GeometryType.Polygon]: ["fill.color", "stroke.color", "stroke.width"],
+  [GeometryType.Polyline]: ["stroke.color", "stroke.width"],
+  [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;
+var 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;
+(function (SvgSymbolBg) {
+  SvgSymbolBg["Rect"] = "rect";
+  SvgSymbolBg["Circle"] = "circle";
+})(SvgSymbolBg || (SvgSymbolBg = {}));
 
-    return parameter == null ? void 0 : (_parameter$toLowerCas2 = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas2.includes(type.toLowerCase());
-  })) || false;
+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
+
+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 === 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) {
@@ -3379,7 +4108,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;
@@ -3448,7 +4177,7 @@ const useLegend = (style, config) => useMemo(() => {
 }, [style, config]);
 
 const DEFAULT_LEGEND_CONFIG = {
-  renderTitle: createValueTitle
+  renderTitle: createValueTitle$1
 };
 const useLayerLegend = (layer, config) => {
   const {
@@ -3497,11 +4226,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;
@@ -4770,189 +5499,14 @@ const EvergisSelect = _ref => {
 };
 
 var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1;
-const LegendContainer = /*#__PURE__*/styled.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: white;\n"])));
-const LegendSectionContainer = /*#__PURE__*/styled.div(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const LegendSymbolTitle = /*#__PURE__*/styled.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.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.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.createElement(LegendSectionContainer, null, !hideTitle && React.createElement(LegendSectionHeader, null, renderLegendTitle ? renderLegendTitle(item) : item.title), item.values.map(children));
-};
+const topLeft = distance => css(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
 
-var _templateObject$3, _templateObject2$3;
-const InputContainer = /*#__PURE__*/styled.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.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 => css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
 
-const SearchInput = _ref => {
-  let {
-    onChange
-  } = _ref;
-  return React.createElement(InputContainer, null, React.createElement(EverCloudSearchIcon, null), React.createElement(InputField, {
-    onChange: onChange
-  }));
-};
-
-const LegendSymbol = _ref => {
-  let {
-    parameter,
-    parameterValue,
-    children
-  } = _ref;
-  const symbol = useLegendValueSymbol({
-    parameterValue,
-    parameter
-  });
-
-  if (!symbol) {
-    return null;
-  }
-
-  return React.createElement(React.Fragment, null, children(symbol));
-};
-
-const LegendValue = _ref => {
-  let {
-    value,
-    parameter,
-    maxSize
-  } = _ref;
-  return React.createElement(LegendValueContainer, null, React.createElement(LegendSymbol, {
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React.createElement(Symbol, {
-    render: getLegendSymbolRenders,
-    symbol: symbol,
-    size: maxSize
-  })), React.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 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.createElement(LegendProvider, {
-    symbol: symbol
-  }, React.createElement(LegendContainer, {
-    className: className
-  }, searchable && searchLayer && React.createElement(SearchInput, {
-    onChange: searchLayer
-  }), renderCustomLegend && layer ? renderCustomLegend(layer) : children ? legend && children(legend) : legend && legend.items.map((legendItem, index) => React.createElement(LegendSection, {
-    key: legendItem.attribute + "-" + legendItem.parameter,
-    item: legendItem,
-    hideTitle: (layer == null ? void 0 : layer.alias) === legendItem.title,
-    renderLegendTitle: config && config.renderLegendTitle
-  }, legendValue => React.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 = 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.createElement("div", {
-    className: className,
-    ref: wrapperRef,
-    style: style
-  }, children);
-};
-
-var _templateObject$4, _templateObject2$4, _templateObject3$2, _templateObject4$2, _templateObject5$2;
-
-const topLeft = distance => css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
-
-const topRight = distance => css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
-
-const bottomLeft = distance => css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
+const bottomLeft = distance => css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
 
-const bottomRight = distance => css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
+const bottomRight = distance => css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
 
 const placementMixin = function placementMixin(placement, distance) {
   if (placement === void 0) {
@@ -4963,19 +5517,19 @@ const placementMixin = function placementMixin(placement, distance) {
     distance = '1rem';
   }
 
-  return 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 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__*/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(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__*/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(Icon)(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomInBtn.defaultProps = { kind: "plus" };
 
-const ZoomOutBtn = /*#__PURE__*/styled(Icon)(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomOutBtn.defaultProps = { kind: "minus" };
+const ZoomOutBtn = /*#__PURE__*/styled(Icon)(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomOutBtn.defaultProps = { kind: "minus" };
 
-const SearchBtn = /*#__PURE__*/styled(Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // SearchBtn.defaultProps = { kind: "search" };
+const SearchBtn = /*#__PURE__*/styled(Icon)(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // SearchBtn.defaultProps = { kind: "search" };
 // TODO not exists in fonts
 
-const FullscreenBtn = /*#__PURE__*/styled(Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // FullscreenBtn.defaultProps = { kind: "maximize" };
+const FullscreenBtn = /*#__PURE__*/styled(Icon)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // FullscreenBtn.defaultProps = { kind: "maximize" };
 
 const MeasureBtn = /*#__PURE__*/styled(Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // MeasureBtn.defaultProps = { kind: "measure_length" };
 
@@ -5025,21 +5579,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(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
-const MapLegendContainer = /*#__PURE__*/styled.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(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.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.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
-const MapLegendSectionContainer = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled.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.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;
+}, Description);
+const ItemSeparator = /*#__PURE__*/styled.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("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(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, 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__*/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.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"])), transition.hover, _ref7 => {
+  let {
+    onClick
+  } = _ref7;
+  return !!onClick && SymbolButtonWithClick;
+});
+const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
+const MapLegendContainer = /*#__PURE__*/styled.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.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.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.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
+const MapLegendSectionContainer = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled.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 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 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) {
@@ -5047,133 +5646,79 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
     value = 0;
   }
 
-  return 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 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__*/css(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled.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__*/css(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
+const MapLegendItem = /*#__PURE__*/styled.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(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__*/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__*/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.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.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
-const SizeMinimizedLegendLabel = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
-const SizeMinimizedLegendDown = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const SizeMinimizedLegendUp = /*#__PURE__*/styled(SizeMinimizedLegendDown)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const SingleSizeLegendItemsMixin = /*#__PURE__*/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__*/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(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__*/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__*/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.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.div(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
+const SizeMinimizedLegendLabel = /*#__PURE__*/styled.div(_templateObject23 || (_templateObject23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
+const SizeMinimizedLegendDown = /*#__PURE__*/styled.div(_templateObject24 || (_templateObject24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const SizeMinimizedLegendUp = /*#__PURE__*/styled(SizeMinimizedLegendDown)(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const SingleSizeLegendItemsMixin = /*#__PURE__*/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__*/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.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.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.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.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.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(MapLegendOther)(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled.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.createElement(LegendProvider, {
-    symbol: symbol
-  }, React.createElement(MapLegendControl, {
-    className: className
-  }, !hideTitle && React.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), !!items.length && React.createElement(MapLegendContainer, null, React.createElement(Legend, {
-    layer: layer,
-    config: config
-  }))));
-};
-
-const MAX_SIZE$2 = 100;
-const MapLegendSymbol = _ref => {
-  let {
-    value,
-    parameter
-  } = _ref;
-  return React.createElement(LegendSymbol, {
-    key: value.title,
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React.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.createElement(MapLegendDescriptionContainer, null, isStrokeWidth || isStrokeColor ? isStrokeWidth ? "Толщина обводки" : "Цвет обводки" : isSize ? "Размер знака" : "Цвет символа");
-};
+const MapLegendItemsContainer = /*#__PURE__*/styled.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.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.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(MapLegendOther)(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled.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(" - ")) {
@@ -5252,6 +5797,377 @@ const MinimizedLegend = _ref => {
   })), typeof (other == null ? void 0 : other.parameterValue) === "string" && (titleMax || titleMin) && React.createElement(MapLegendValues, null, React.createElement(MapLegendValuesRange, null, React.createElement("div", null, titleMax), React.createElement("div", null, titleMin)), React.createElement(MapLegendValuesOther, null, "-")));
 };
 
+const useSvgSymbol = (symbol, skipOffset) => {
+  const SVGWrapperRefElement = useRef(null);
+  const SVGContainer = useMemo(() => SVG(), []);
+  const initSvg = useCallback(() => {
+    SVGContainer.addTo(SVGWrapperRefElement.current);
+  }, [SVGContainer]);
+  const getSvgData = useCallback(() => SVGContainer.svg(), [SVGContainer]);
+  const manipulateSvg = useCallback(_ref => {
+    let {
+      svg,
+      bg,
+      newSymbol
+    } = _ref;
+    manipulateSvgSymbol(SVGContainer, newSymbol || symbol, svg, bg);
+  }, [SVGContainer, symbol]);
+  const getUpdatedSvgSymbol = useCallback((field, value) => {
+    var _newSymbol$background;
+
+    const {
+      data,
+      offset
+    } = symbol;
+    const newValue = value instanceof Color$1 ? 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.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+const SvgSymbolLabel = /*#__PURE__*/styled.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__*/memo(_ref7 => {
+  let {
+    svg,
+    bg,
+    symbol,
+    title,
+    skipOffset,
+    text,
+    fontSettings,
+    onClick
+  } = _ref7;
+  const {
+    svgRef,
+    initSvg,
+    getSvgData,
+    manipulateSvg
+  } = useSvgSymbol(symbol, skipOffset);
+  const onSelectSymbol = useCallback(() => {
+    onClick == null ? void 0 : onClick(getSvgData(), _extends({}, symbol, bg ? {
+      background: _extends({}, symbol.background, {
+        type: bg
+      })
+    } : {}));
+  }, [bg, getSvgData, onClick, symbol]);
+  const renderSymbol = useMemo(() => React.createElement(SymbolButton, {
+    ref: svgRef,
+    title: title,
+    onClick: onClick ? onSelectSymbol : undefined
+  }), [svgRef, title, onClick, onSelectSymbol]);
+  useEffect(() => {
+    initSvg();
+  }, [initSvg]);
+  useEffect(() => {
+    manipulateSvg({
+      svg,
+      bg,
+      newSymbol: symbol
+    });
+  }, [svg, symbol, bg, manipulateSvg]);
+  return text ? React.createElement(SvgSymbolContainer, null, renderSymbol, React.createElement(SvgSymbolLabel, {
+    fontSettings: fontSettings
+  }, text), !!(fontSettings != null && fontSettings.haloColor) && !!(fontSettings != null && fontSettings.haloWidth) && React.createElement(SvgSymbolLabel, {
+    fontSettings: _extends({}, fontSettings, {
+      haloColor: undefined,
+      haloWidth: undefined
+    })
+  }, text)) : renderSymbol;
+});
+
+const SymbolByType = _ref => {
+  let {
+    type,
+    symbol,
+    size,
+    svg,
+    skipOffset
+  } = _ref;
+  const defaultSymbol = useMemo(() => React.createElement(Symbol, {
+    symbol: symbol,
+    size: size
+  }), [symbol, size]);
+
+  switch (type) {
+    case "svgPointSymbol":
+      return svg ? React.createElement(SvgSymbol, {
+        svg: svg,
+        size: size,
+        skipOffset: skipOffset,
+        symbol: serializeSvgPointSymbol(symbol)
+      }) : defaultSymbol;
+
+    default:
+      return defaultSymbol;
+  }
+};
+
+const LegendSymbolRenderer = /*#__PURE__*/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.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
+  } = 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 = useMemo(() => get(sectionSymbol, parameter), [sectionSymbol, parameter]);
+  const renderColumn = useCallback((column, index) => {
+    const dateTime = column.split(" ");
+    return React.createElement(Fragment, {
+      key: index
+    }, React.createElement(ItemText, {
+      title: column
+    }, dateTime[0], React.createElement(Description, null, dateTime[1])), index === 0 && React.createElement(ItemSeparator, null));
+  }, []);
+  const renderItemText = useCallback((title, index) => {
+    if (!title) {
+      return React.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.createElement(ItemText, {
+        title: title
+      }, title);
+    }
+
+    if (!index && isSingleColumn) {
+      return React.createElement(React.Fragment, null, React.createElement(ItemText, {
+        title: "\u221E"
+      }, "\u221E"), React.createElement(ItemSeparator, null), renderColumn(title));
+    }
+
+    return React.createElement(React.Fragment, null, columns.map(renderColumn));
+  }, [isDate, renderColumn, t]);
+  const renderLegend = useCallback((_ref2, index) => {
+    var _parameterValue$value;
+
+    let {
+      symbol,
+      title
+      /* , hiddenCondition*/
+
+    } = _ref2;
+    if (!symbol) return null; // const isClusterFillColor = checkIsClusterFillColor(symbol, parameter);
+
+    return React.createElement(ClassifiedItem, {
+      key: sectionIndex + title + index
+    }, isSize || isStrokeWidth || isStrokeColor ? React.createElement(MapLegendItems, {
+      parameter: parameter,
+      isSize: isSize,
+      isStrokeWidth: isStrokeWidth,
+      isStrokeColor: isStrokeColor,
+      isSingle: true
+    }, React.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.createElement(SymbolContainer, null, React.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.createElement(React.Fragment, null, values.map(renderLegend));
+};
+
+const LegendSection = _ref => {
+  let {
+    symbol,
+    param,
+    params,
+    classified,
+    attributeName,
+    attributeType,
+    index
+  } = _ref;
+  const {
+    t
+  } = useTranslation("common");
+  const [isExpanded, toggleExpanded] = useToggle$1();
+  return React.createElement(MapLegendSectionContainer, null, React.createElement(MapLegendHeader, null, attributeName), isExpanded ? React.createElement(MaximizedLegend, {
+    key: param,
+    symbol: symbol,
+    parameter: param,
+    attributeType: attributeType,
+    index: index,
+    values: getMaximizedLegendValues(attributeType, param, params, classified, symbol, index, t("classification.other"))
+  }) : React.createElement(MinimizedLegend, {
+    key: param,
+    values: getMinimizedLegendValues(attributeType, classified, index),
+    defaultValue: classified.defaultValue,
+    parameter: param,
+    attributeType: attributeType
+  }), React.createElement(MapLegendExpandButton, {
+    onClick: toggleExpanded
+  }, t(isExpanded ? "toggleMenu" : "Развернуть")));
+};
+
+const Legend = _ref => {
+  let {
+    layerInfo
+  } = _ref;
+  const classified = getClassified(layerInfo);
+  const params = Object.keys(classified);
+  return React.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.createElement(LegendSection, {
+      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 = 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.createElement("div", {
+    className: className,
+    ref: wrapperRef,
+    style: style
+  }, children);
+};
+
 let MeasureTool = /*#__PURE__*/function (_React$Component) {
   _inherits(MeasureTool, _React$Component);
 
@@ -5456,15 +6372,15 @@ const Measurer = _ref => {
   }, props)) : null;
 };
 
-var _templateObject$7, _templateObject2$7, _templateObject3$5;
-const ScaleRulerContainer = /*#__PURE__*/styled.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.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.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.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.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.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;
@@ -5517,17 +6433,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 => 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 => 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 => 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 => 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 => 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 => 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 => 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 => 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) => 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) => 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) => css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  left: ", ";\n  ", "\n"])), distance, cornerSize && cornerLeft(cornerSize));
 
@@ -5618,5 +6534,5 @@ const DraggableMarker = _ref => {
   return React.createElement(Fragment, null);
 };
 
-export { ArrowLineMiterRender, BaseMeasureToolCreator, BaseMeasureToolEditor, CRS_MAP, CardAttributes, CardHeader, CircleLineMiterRender, ClassificationCondition, ClassificationManager, ClusterLayer, ClusterSymbol, CompoundIcon, DEFAULT_CRS, DEFAULT_SRID, DEFAULT_SYMBOL_SIZE, DraggableMarker, EvergisCard, EvergisCardAttribute, AttributeContainer as EvergisCardAttributeContainer, AttributeTitle as EvergisCardAttributeTitle, AttributeValueContainer as EvergisCardAttributeValueContainer, CardControls as EvergisCardCardControls, CardTitle as EvergisCardCardTitle, EvergisCardContainer, CurrentFeatureIndex as EvergisCardCurrentFeatureIndex, FeatureName as EvergisCardFeatureName, LayerName as EvergisCardLayerName, CardPagination as EvergisCardPagination, PaginationDescription as EvergisCardPaginationDescription, SimpleAttribute as EvergisCardSimpleValue, StickyHeader as EvergisCardStickyHeader, ValueLink as EvergisCardValueLink, EvergisDynamicLayer, EvergisFeature, EvergisLayer, EvergisProvider, EvergisSelect, EvergisSelectLayer, EvergisSelectProvider, EvergisStyle, EvergisTileLayer, FeatureLayer, Fullscreen, LabelSymbol, Legend, LegendContainer, LegendProvider, LegendSection, LegendSectionContainer, LegendSymbol, LegendValue, LegendValueContainer, LineMiterKind, LineMiterRender, Map, MapControl, MapControls, MapLegend, MapLegendContainer, MapLegendDescription, MapLegendDescriptionContainer, MapLegendExpandButton, MapLegendHeader, MapLegendItem, MapLegendItems, MapLegendOther, MapLegendSectionContainer, MapLegendSymbol, MapLegendValueDescr, MapLegendValues, MapProvider, Measure, MeasureTool, Measurer, MinimizedLegend, NO_CONTENT_VALUE, Noop, PREVIEW_LIMITS, SGisBrushFill, SGisImageFill, SGisPolygonSymbol, SGisPolylineSymbol, SOLID_INTERVALS, SVGPoly, ScaleRuler, ScaleRulerBlock, ScaleRulerContainer, Search, SelectedPointSymbol, SelectedPolySymbol, ShadowedPointSymbol, ShadowedPolySymbol, SizeMinimizedLegendDown, SizeMinimizedLegendUp, SquareLineMiterRender, SrId, StyleSymbol, Symbol, TextContainer, TileLayer, Tooltip, TooltipComponent, TooltipProvider, Zoom, ZoomLevel, adjustSymbol, applyParameterValue, clamp, copyRings, createCompositeSymbol, createLabelSymbol, createStyleLegend, createValueTitle, defaultOffset, defineStrokeStylePreset, deserializeSymbol, evaluateFeature, extractStyle, extractSymbol, findChildFeatureStyle, findChildFeatureSymbol, formatArea, formatAttributeValue, formatLength, formatPolygonMeasure, getAttributeNameFromClassified, getAttributeNameFromCondition, getChildSymbols, getCrs, getDashStylePreset, getFeatureSymbol, getLegendSymbolRenders, getLineDash, getMapLegendSymbolRenders, getMapState, getOffsetParameterValue, getParameterValue, getScale, getSymbolRenders, isArrowLineMiter, isCalculatedParameter, isCircleLineMiter, isCompositeSymbol, isDashedBrush, isFilledLineMitter, isHatchBrush, isImageSymbol, isLabelSymbol, isMaskedImageSymbol, isMiterExist, isNumeric, isParameterByAttribute, isParameterType, isParameterValueSimple, isParameterValueSymbol, isPatternBrush, isPointLabelSymbol, isPointSymbol, isPolygonHasHatchBrush, isPolygonHasPatternBrush, isPolygonLabelSymbol, isPolygonSymbol, isPolylineLabelSymbol, isPolylineLikePolygon, isPolylineSymbol, isPolylineSymbols, isRangeClass, isRasterSymbol, isSGisClusterSymbol, isSGisH3Symbol, isSGisImageSymbol, isSGisPointSymbol, isSGisPolygonSymbol, isSGisPolylineSymbol, isScalablePolylineSymbol, isSimpleOffset, isSimplePolylineSymbol, isSimpleSymbol, isSizableSymbol, isSolidBrush, isSquareLineMiter, isSquareSymbol, isStaticImageSymbol, isStringParameterValue, isStrokeStyledSymbol, isStyle, isSymbolWithOffset, isTwoDimensionalSymbol, isUniqueClass, isValidParameter, measureAreaSymbol, measureLengthSymbol, measurePolygonSnapSymbol, metersToPixels, numberWithSpaces, packStyle, polygonCircleFromPoint, printRangeClass, renderSymbolToCanvas, selectedPoint, selectedPolygon, selectedPolyline, setDefaultParameterValue, setParameterValue, shouldUpdateMapState, solidStrokeStylePreset, strokeStylePresets, symbolParameterWalker, symbolTypeGuard, toIntervals, toLineDash, unClassify, updateMapResolution, useCanvas, useClusterLayer, useCrs, useDebouncedCallback, useDraggableMarker, useEventPoint, useEvergisContext, useEvergisDynamicLayer, useEvergisSelect, useEvergisSelectContext, useEvergisTileLayer, useFeatureLayer, useLayerLegend, useLayerOrder, useLayerVisibility, useLegend, useLegendContext, useLegendValueSymbol, useMapBboxChange, useMapContext, useMapLegend, useMapLevel, useMapPick, useMapResize, useMapState, useMapView, useMapViewActions, useMapWrapper, useMaxMinScale, useMetersToPixels, useMetersToPixelsCb, useMount, useProperty, useScale, useSymbol, useToggle, useTooltip, useTooltipContext, useUpdate, useUpdateMapView };
+export { ArrowLineMiterRender, BaseMeasureToolCreator, BaseMeasureToolEditor, CRS_MAP, CardAttributes, CardHeader, CircleLineMiterRender, ClassificationCondition, ClassificationManager, ClassifiedItem, ClusterLayer, ClusterSymbol, CompoundIcon, DEFAULT_CRS, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LEGEND_SIZES, DEFAULT_LEGEND_STYLES, DEFAULT_LEGEND_SYMBOL_SIZE, DEFAULT_PARAMETER_INFO, DEFAULT_SRID, DEFAULT_SYMBOL_FILL_COLOR, DEFAULT_SYMBOL_OFFSET, DEFAULT_SYMBOL_SIZE, DEFAULT_SYMBOL_STROKE_COLOR, DEFAULT_SYMBOL_WITH_BG_SIZE, DateFormat, DraggableMarker, EXTRA_BORDER_SIZE, EvergisCard, EvergisCardAttribute, AttributeContainer as EvergisCardAttributeContainer, AttributeTitle as EvergisCardAttributeTitle, AttributeValueContainer as EvergisCardAttributeValueContainer, CardControls as EvergisCardCardControls, CardTitle as EvergisCardCardTitle, EvergisCardContainer, CurrentFeatureIndex as EvergisCardCurrentFeatureIndex, FeatureName as EvergisCardFeatureName, LayerName as EvergisCardLayerName, CardPagination as EvergisCardPagination, PaginationDescription as EvergisCardPaginationDescription, SimpleAttribute as EvergisCardSimpleValue, StickyHeader as EvergisCardStickyHeader, ValueLink as EvergisCardValueLink, EvergisDynamicLayer, EvergisFeature, EvergisLayer, EvergisProvider, EvergisSelect, EvergisSelectLayer, EvergisSelectProvider, EvergisStyle, EvergisTileLayer, FeatureLayer, Fullscreen, GEOMETRY_ATTRIBUTE, ItemSeparator, ItemText, LabelSymbol, Legend, LegendProvider, LegendSection, LegendSymbolRenderer, LineMiterKind, LineMiterRender, Map, MapControl, MapControls, MapLegendContainer, MapLegendControl, MapLegendDescriptionContainer, MapLegendExpandButton, MapLegendHeader, MapLegendItem, MapLegendItems, MapLegendItemsContainer, MapLegendOther, MapLegendSectionContainer, MapLegendValueDescr, MapLegendValues, MapLegendValuesOther, MapLegendValuesRange, MapProvider, MaximizedLegend, Measure, MeasureTool, Measurer, MinimizedLegendContainer, NO_CONTENT_VALUE, Noop, PARAMETER_INFOS, PREVIEW_LIMITS, SGisBrushFill, SGisImageFill, SGisPolygonSymbol, SGisPolylineSymbol, SOLID_INTERVALS, SVGPoly, SYMBOL_CLASSIFICATION, SYMBOL_LIMITS, SYMBOL_SIZE_PARAMETERS, ScaleRuler, ScaleRulerBlock, ScaleRulerContainer, Search, SelectedPointSymbol, SelectedPolySymbol, ShadowedPointSymbol, ShadowedPolySymbol, SizeMinimizedLegend, SizeMinimizedLegendDown, SizeMinimizedLegendLabel, SizeMinimizedLegendSymbol, SizeMinimizedLegendUp, SquareLineMiterRender, SrId, StyleSymbol, SvgSymbol, SvgSymbolBg, Symbol, SymbolButton, SymbolByType, SymbolContainer, TextContainer, TileLayer, Tooltip, TooltipComponent, TooltipProvider, Zoom, ZoomLevel, adjustSymbol, applyParameterValue, checkLayerHasLegend, clamp, convertSvgToBase64, copyRings, createCompositeSymbol, createLabelSymbol, createLegendSymbol, createStyleLegend, createSvgGradient, createValueTitle$1 as createValueTitle, defaultOffset, defineStrokeStylePreset, deserializeSymbol, evaluateFeature, extractStyle, extractSymbol, findChildFeatureStyle, findChildFeatureSymbol, formatArea, formatAttributeValue, formatDate, formatLength, formatPolygonMeasure, formatRangeClassValue, formatUniqueClassValue, formatValue, getAttributeFromCondition, getAttributeNameFromClassified, getAttributeNameFromCondition, getAttributeType, getAttributesConfiguration, getChildSymbols, getClassified, getCrs, getDashStylePreset, getDate, getDimensions, getExprFromCondition, getFeatureSymbol, getHexColor, getLayerDefinition, getLegendSymbolRenders, getLegendSymbolSize, getLineDash, getMapLegendSymbolRenders, getMapState, getMaximizedLegendValues, getMinimizedLegendValues, getOffsetParameterValue, getParameterFromSymbol, getParameterValue, getRangeValues$1 as getRangeValues, getScale, getServiceConfiguration, getSignFromConditionPart, getSymbolParameterInfo, getSymbolRenders, getSymbolStrokeWidth, getTitleFromCondition, getValueFromConditionPart, isArrowLineMiter, isCalculatedParameter, isCircleLineMiter, isCompositeSymbol, isDashedBrush, isFilledLineMitter, isH3GridSymbol, isHatchBrush, isImageSymbol, isLabelSymbol, isLayerService, isMaskedImageSymbol, isMiterExist, isNumeric, isObject, isParameterByAttribute, isParameterType, isParameterValueSimple, isParameterValueSymbol, isPatternBrush, isPointLabelSymbol, isPointSymbol, isPolygonHasHatchBrush, isPolygonHasPatternBrush, isPolygonLabelSymbol, isPolygonSymbol, isPolylineLabelSymbol, isPolylineLikePolygon, isPolylineSymbol, isPolylineSymbols, isRangeClass, isRangeCondition, isRasterSymbol, isRequisiteNumbers, isSGisClusterSymbol, isSGisH3Symbol, isSGisImageSymbol, isSGisPointSymbol, isSGisPolygonSymbol, isSGisPolylineSymbol, isScalablePolylineSymbol, isSimpleOffset, isSimplePolylineSymbol, isSimpleSymbol, isSizableSymbol, isSizeClassification, isSolidBrush, isSquareLineMiter, isSquareSymbol, isStaticImageSymbol, isStringAsInn, isStringAsKpp, isStringAsMail, isStringAsOgrn, isStringAsPhone, isStringAsUrl, isStringContainsDate, isStringParameterValue, isStrokeStyledSymbol, isStyle, isSvgPointSymbol, isSymbolWithOffset, isTwoDimensionalSymbol, isUniqueClass, isValidParameter, isValidUrl, mailHref, manipulateSvgSymbol, matchPhone, measureAreaSymbol, measureLengthSymbol, measurePolygonSnapSymbol, metersToPixels, numberWithSpaces, packStyle, phoneHref, polygonCircleFromPoint, printRangeClass, renderSymbolToCanvas, selectedPoint, selectedPolygon, selectedPolyline, serializeSvgPointSymbol, setDefaultParameterValue, setParameterValue, shouldUpdateMapState, solidStrokeStylePreset, strokeStylePresets, symbolParameterWalker, symbolTypeGuard, toIntervals, toLineDash, unClassify, updateMapResolution, updateSymbolParameter, urlHref, useCanvas, useClusterLayer, useCrs, useDebouncedCallback, useDraggableMarker, useEventPoint, useEvergisContext, useEvergisDynamicLayer, useEvergisSelect, useEvergisSelectContext, useEvergisTileLayer, useFeatureLayer, useLayerLegend, useLayerOrder, useLayerVisibility, useLegend, useLegendContext, useLegendValueSymbol, useMapBboxChange, useMapContext, useMapLegend, useMapLevel, useMapPick, useMapResize, useMapState, useMapView, useMapViewActions, useMapWrapper, useMaxMinScale, useMetersToPixels, useMetersToPixelsCb, useMount, useProperty, useScale, useSvgSymbol, useSymbol, useToggle, useTooltip, useTooltipContext, useUpdate, useUpdateMapView };
 //# sourceMappingURL=react.esm.js.map