@evergis/react 2.0.172 → 2.0.174

package/dist/react.esm.js

@@ -1,20 +1,14 @@
 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 { Api, unique, AttributeType, 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 } 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';
-import { Polygon } from '@evergis/sgis/es/features/Polygon';
-import { PointFeature } from '@evergis/sgis/es/features/PointFeature';
-import { webMercator, geo, wgs84, ellipticalMercator, plain } from '@evergis/sgis/es/Crs';
 import { BrushFill } from '@evergis/sgis/es/symbols/polygon/BrushFill';
 import { Color } from '@evergis/color';
+import { ConditionInterpreter, TokenType, ConditionEvaluator, Char } from '@evergis/condition';
 import { ImageFill } from '@evergis/sgis/es/symbols/polygon/ImageFill';
 import { PolygonSymbol } from '@evergis/sgis/es/symbols/polygon/Simple';
 import { PolylineSymbol } from '@evergis/sgis/es/symbols/PolylineSymbol';
@@ -23,9 +17,16 @@ import { projectRings, length, area, distance } from '@evergis/sgis/es/geotools'
 import { simplifyCoordinates, softEquals } from '@evergis/sgis/es/utils/math';
 import { PolylineControl } from '@evergis/sgis/es/controls/PolylineControl';
 import { LabelFeature } from '@evergis/sgis/es/features/Label';
+import { webMercator, geo, wgs84, ellipticalMercator, plain } from '@evergis/sgis/es/Crs';
+import { Polygon } from '@evergis/sgis/es/features/Polygon';
 import { DrawingFinishEvent } from '@evergis/sgis/es/controls/Control';
+import { isValid, toDate, format, parseJSON, parseISO } from 'date-fns';
+import { MultiPoint } from '@evergis/sgis/es/features/MultiPoint';
+import { Polyline } from '@evergis/sgis/es/features/Polyline';
+import { PointFeature } from '@evergis/sgis/es/features/PointFeature';
 import { PolyEditor } from '@evergis/sgis/es/controls/PolyEditor';
 import get from 'lodash-es/get';
+import { isNil } from 'lodash-es';
 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';
@@ -448,227 +449,6 @@ 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;
-  }
-
-  if (delim === void 0) {
-    delim = ',';
-  }
-
-  const [num, frac] = x.toFixed(fractionDigits).split('.');
-  const numWithSpaces = num.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
-  return [numWithSpaces, frac].join(delim);
-}
-
-function matchPhone(value) {
-  const phoneRegexp = /((8|\+7)[- ]?)?(\(?\d{3,4}\)?[- ]?)?[\d\- ]{7,10}/g;
-  return !isStringAsInn(value) && value.match(phoneRegexp);
-}
-function isStringAsInn(value) {
-  const innRegexp = /^(([0-9]{12})|([0-9]{10}))$/;
-  return innRegexp.test(value);
-}
-function isStringAsKpp(value) {
-  const kppRegexp = /^(([0-9]{9}))$/;
-  return kppRegexp.test(value);
-}
-function isStringAsOgrn(value) {
-  const ogrnRegexp = /^([0-9]{13})?$/;
-  return ogrnRegexp.test((+value).toString());
-}
-function isStringContainsDate(value) {
-  const dateRegexp = /\d{4}(-|\/)\d{2}(-|\/)\d{2}/g;
-  return dateRegexp.test(value);
-}
-function isRequisiteNumbers(value) {
-  return isStringAsInn(value) || isStringAsKpp(value) || isStringAsOgrn(value);
-}
-function isStringAsPhone(value) {
-  const phoneRegexp = /^((8|\+7)[- ]?)?(\(?\d{3,4}\)?[- ]?)?[\d\- ]{7,10}/;
-  return !isRequisiteNumbers(value) && !isStringContainsDate(value) && phoneRegexp.test(value);
-}
-function isStringAsMail(value) {
-  return isStringAsUrl(value) && value.includes('@');
-}
-function isStringAsUrl(value) {
-  if (isValidUrl(value)) {
-    return true;
-  }
-
-  const urlRegexp = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
-  const urlKind = value.match(urlRegexp);
-  return urlKind !== null;
-}
-function isValidUrl(value) {
-  try {
-    new URL(value);
-  } catch (_) {
-    return false;
-  }
-
-  return true;
-}
-const mailHref = mail => "mailto:" + mail;
-const phoneHref = mail => "tel:" + mail;
-const urlHref = url => isValidUrl(url) ? url : "//" + url;
-
-const stringAttribute = value => ({
-  type: 0
-  /* String */
-  ,
-  value
-});
-
-const urlAttribute = value => ({
-  type: 2
-  /* Url */
-  ,
-  value
-});
-
-const mailAttribute = value => ({
-  type: 3
-  /* Mail */
-  ,
-  value
-});
-
-const phoneAttribute = value => ({
-  type: 1
-  /* Phone */
-  ,
-  value
-});
-
-const convertStringAttribute = value => {
-  if (isStringAsMail(value)) {
-    return mailAttribute(value);
-  }
-
-  if (isStringAsUrl(value)) {
-    return urlAttribute(value);
-  }
-
-  if (isStringAsPhone(value)) {
-    return phoneAttribute(value);
-  }
-
-  return stringAttribute(value);
-};
-
-const formatStringAttribute = value => {
-  const phones = matchPhone(value);
-
-  if (!isRequisiteNumbers(value) && !isStringContainsDate(value) && phones && phones.length) {
-    return phones.map(phoneAttribute);
-  }
-
-  const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
-
-  if (attributeValues.every(_ref => {
-    let {
-      type
-    } = _ref;
-    return type === 0;
-  }
-  /* String */
-  )) {
-    return [stringAttribute(attributeValues.map(_ref2 => {
-      let {
-        value
-      } = _ref2;
-      return isNaN(+value) || isRequisiteNumbers(value) ? isStringAsOgrn(value) ? +value : value : numberWithSpaces(+value, 0, '');
-    }).join(' '))];
-  }
-
-  return attributeValues;
-};
-
-const formatDateTimeAttribute = value => stringAttribute(value.toString());
-
-const formatIntAttribute = value => stringAttribute(numberWithSpaces(value, 0, ''));
-
-const DOUBLE_FRACTIONS = 2;
-
-const formatDoubleAttribute = value => stringAttribute(numberWithSpaces(value, DOUBLE_FRACTIONS, '.'));
-
-const isNullOrUndefined = value => value === null || value === undefined;
-
-const NO_CONTENT_ATTRIBUTE = {
-  type: 0
-  /* String */
-  ,
-  value: NO_CONTENT_VALUE
-};
-const formatAttributeValue = attribute => {
-  if (isNullOrUndefined(attribute.value)) {
-    return [NO_CONTENT_ATTRIBUTE];
-  }
-
-  switch (attribute.type) {
-    case 'String':
-      return formatStringAttribute(attribute.value);
-
-    case 'DateTime':
-      return [formatDateTimeAttribute(attribute.value)];
-
-    case 'Int32':
-    case 'Int64':
-      return [formatIntAttribute(attribute.value)];
-
-    case 'Double':
-      return [formatDoubleAttribute(attribute.value)];
-
-    default:
-      return [NO_CONTENT_ATTRIBUTE];
-  }
-};
-
 function isRangeClass(value) {
   return Boolean(value && 'from' in value);
 }
@@ -830,29 +610,96 @@ const isPolygonLabelSymbol = /*#__PURE__*/symbolTypeGuard('polygonLabelSymbol');
 const isPolylineLabelSymbol = /*#__PURE__*/symbolTypeGuard('polylineLabelSymbol');
 const isLabelSymbol = symbol => Boolean(symbol && (isPointLabelSymbol(symbol) || isPolygonLabelSymbol(symbol) || isPolylineLabelSymbol(symbol)));
 
-const isPointSymbol = /*#__PURE__*/symbolTypeGuard('circlePointSymbol');
-const isSquareSymbol = /*#__PURE__*/symbolTypeGuard('squarePointSymbol');
-const isMaskedImageSymbol = /*#__PURE__*/symbolTypeGuard('maskedImagePointSymbol');
-const isStaticImageSymbol = /*#__PURE__*/symbolTypeGuard('imagePointSymbol');
-const isPolygonSymbol = /*#__PURE__*/symbolTypeGuard('polygonSymbol');
-const isPolylineSymbol = /*#__PURE__*/symbolTypeGuard('polylineSymbol');
-const isSimplePolylineSymbol = /*#__PURE__*/symbolTypeGuard('simplePolylineSymbol');
-const isPolylineSymbols = symbol => Boolean(symbol && (isPolylineSymbol(symbol) || isSimplePolylineSymbol(symbol)));
-const isCompositeSymbol = /*#__PURE__*/symbolTypeGuard('compositeSymbol');
-const isRasterSymbol = /*#__PURE__*/symbolTypeGuard('rasterSymbol');
-const isImageSymbol = symbol => Boolean(symbol && (isMaskedImageSymbol(symbol) || isStaticImageSymbol(symbol)));
-const isTwoDimensionalSymbol = symbol => Boolean(symbol && 'width' in symbol);
-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');
-const isDashedBrush = /*#__PURE__*/symbolTypeGuard('dashed');
-const isSolidBrush = /*#__PURE__*/symbolTypeGuard('solid');
+const _excluded = ["ignoreLabel", "label", "symbol", "raster", "children"];
+const createCompositeSymbol = childSymbols => ({
+  type: 'compositeSymbol',
+  childSymbols
+});
+const getChildSymbols = symbol => {
+  if (!symbol || !isCompositeSymbol(symbol)) return [];
+  return symbol.childSymbols || [];
+};
+const extractSymbol = symbol => {
+  const childSymbols = getChildSymbols(symbol);
+  return {
+    // @ts-ignore
+    symbol: childSymbols.find(isSimpleSymbol),
+    label: childSymbols.find(isLabelSymbol) || null,
+    raster: childSymbols.find(isRasterSymbol) || null
+  };
+};
+const extractStyle = style => {
+  // @ts-ignore
+  if (isCompositeSymbol(style.symbol)) {
+    return _extends({}, style, extractSymbol(style.symbol), {
+      // @ts-ignore
+      children: style.children && style.children.map(extractStyle)
+    });
+  } // NOTE: for cases when style is exist style object should have same reference for all extractStyle calls
+
+
+  return style || {};
+};
+const packStyle = style => {
+  const {
+    ignoreLabel,
+    label,
+    symbol,
+    raster,
+    children
+  } = style,
+        styleDc = _objectWithoutPropertiesLoose(style, _excluded);
+
+  const childSymbols = [!ignoreLabel && label, raster].filter(Boolean);
+  return _extends({}, styleDc, {
+    symbol: childSymbols.length ? // @ts-ignore
+    createCompositeSymbol([symbol, ...childSymbols]) : symbol,
+    // @ts-ignore
+    children: children ? // @ts-ignore
+    children.map(childStyle => packStyle(_extends({}, childStyle, {
+      ignoreLabel,
+      label
+    }))) : children
+  });
+};
+
+const isPointSymbol = /*#__PURE__*/symbolTypeGuard('circlePointSymbol');
+const isSquareSymbol = /*#__PURE__*/symbolTypeGuard('squarePointSymbol');
+const isMaskedImageSymbol = /*#__PURE__*/symbolTypeGuard('maskedImagePointSymbol');
+const isStaticImageSymbol = /*#__PURE__*/symbolTypeGuard('imagePointSymbol');
+const isPolygonSymbol = /*#__PURE__*/symbolTypeGuard('polygonSymbol');
+const isPolylineSymbol = /*#__PURE__*/symbolTypeGuard('polylineSymbol');
+const isSimplePolylineSymbol = /*#__PURE__*/symbolTypeGuard('simplePolylineSymbol');
+const isPolylineSymbols = symbol => Boolean(symbol && (isPolylineSymbol(symbol) || isSimplePolylineSymbol(symbol)));
+const isCompositeSymbol = /*#__PURE__*/symbolTypeGuard('compositeSymbol');
+const isRasterSymbol = /*#__PURE__*/symbolTypeGuard('rasterSymbol');
+const isImageSymbol = symbol => Boolean(symbol && (isMaskedImageSymbol(symbol) || isStaticImageSymbol(symbol)));
+const isTwoDimensionalSymbol = symbol => Boolean(symbol && 'width' in symbol);
+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 isClusterSymbol = /*#__PURE__*/symbolTypeGuard("cluster");
+const isClusterFillColor = (symbol, parameter) => {
+  return isClusterSymbol(symbol) && parameter === "fillColor";
+};
+const getExtractedSymbol = function getExtractedSymbol(symbol, extractCluster) {
+  var _extractSymbol;
+
+  if (extractCluster === void 0) {
+    extractCluster = false;
+  }
+
+  const extracted = isCompositeSymbol(symbol) ? (_extractSymbol = extractSymbol(symbol)) == null ? void 0 : _extractSymbol.symbol : symbol;
+  return extractCluster && isClusterSymbol(extracted) ? extracted.singleObjectSymbol : extracted;
+};
+
+const isHatchBrush = /*#__PURE__*/symbolTypeGuard('hatch');
+const isPatternBrush = /*#__PURE__*/symbolTypeGuard('pattern');
+const isDashedBrush = /*#__PURE__*/symbolTypeGuard('dashed');
+const isSolidBrush = /*#__PURE__*/symbolTypeGuard('solid');
 const isPolygonHasPatternBrush = symbol => Boolean(symbol && isPolygonSymbol(symbol) && isPatternBrush(symbol.fill));
 const isPolygonHasHatchBrush = symbol => Boolean(symbol && isPolygonSymbol(symbol) && isHatchBrush(symbol.fill));
 
@@ -1058,138 +905,6 @@ function getRangeValues(_ref, isDouble, isDate, index) {
   };
 }
 
-/** Spatial Reference WKID using for @evergis/sgis */
-
-var SrId;
-
-(function (SrId) {
-  /** 3857 */
-  SrId[SrId["WebMercator"] = 3857] = "WebMercator";
-  /** 4326 */
-
-  SrId[SrId["Geo"] = 4326] = "Geo";
-  /** 84 */
-
-  SrId[SrId["Wgs84"] = 84] = "Wgs84";
-  /** 3395 */
-
-  SrId[SrId["EllipticalMercator"] = 3395] = "EllipticalMercator";
-})(SrId || (SrId = {}));
-
-const CRS_MAP = {
-  [SrId.WebMercator]: webMercator,
-  [SrId.Geo]: geo,
-  [SrId.Wgs84]: wgs84,
-  [SrId.EllipticalMercator]: ellipticalMercator
-};
-const DEFAULT_SRID = SrId.WebMercator;
-const DEFAULT_CRS = CRS_MAP[DEFAULT_SRID];
-const getCrs = srId => CRS_MAP[srId];
-
-const getFeatureAttributeType = attributeValue => {
-  if (attributeValue instanceof Date) {
-    return AttributeType.DateTime;
-  }
-
-  if (typeof attributeValue === 'string') {
-    return AttributeType.String;
-  }
-
-  if (typeof attributeValue === 'number') {
-    return AttributeType.Int64;
-  }
-
-  return AttributeType.Unknown;
-};
-const getLayerAttributes = layerDefinition => {
-  const attributes = layerDefinition && layerDefinition.attributes || {};
-  return Object.entries(attributes).map(_ref => {
-    let [name, definition] = _ref;
-    return _extends({
-      name
-    }, definition);
-  });
-};
-const getFeatureAttributes = attributes => {
-  return attributes ? Object.entries(attributes).map(_ref2 => {
-    let [name, value] = _ref2;
-    return {
-      name,
-      value,
-      type: getFeatureAttributeType(value)
-    };
-  }) : [];
-};
-const getClassificationAttribute = (attributeName, attributes) => {
-  const attribute = attributes[attributeName];
-  const attrNamePart = {
-    name: attributeName,
-    type: (attribute == null ? void 0 : attribute.type) || AttributeType.Unknown
-  };
-  return attribute ? _extends({}, attrNamePart, attribute) : attrNamePart;
-};
-const mergeAttributes = (attributes1, attributes2) => {
-  return attributes1.map(attribute => _extends({}, attribute, attributes2.find(_ref3 => {
-    let {
-      name
-    } = _ref3;
-    return attribute.name === name;
-  }) || {}));
-};
-
-const _excluded = ["ignoreLabel", "label", "symbol", "raster", "children"];
-const createCompositeSymbol = childSymbols => ({
-  type: 'compositeSymbol',
-  childSymbols
-});
-const getChildSymbols = symbol => {
-  if (!symbol || !isCompositeSymbol(symbol)) return [];
-  return symbol.childSymbols || [];
-};
-const extractSymbol = symbol => {
-  const childSymbols = getChildSymbols(symbol);
-  return {
-    // @ts-ignore
-    symbol: childSymbols.find(isSimpleSymbol),
-    label: childSymbols.find(isLabelSymbol) || null,
-    raster: childSymbols.find(isRasterSymbol) || null
-  };
-};
-const extractStyle = style => {
-  // @ts-ignore
-  if (isCompositeSymbol(style.symbol)) {
-    return _extends({}, style, extractSymbol(style.symbol), {
-      // @ts-ignore
-      children: style.children && style.children.map(extractStyle)
-    });
-  } // NOTE: for cases when style is exist style object should have same reference for all extractStyle calls
-
-
-  return style || {};
-};
-const packStyle = style => {
-  const {
-    ignoreLabel,
-    label,
-    symbol,
-    raster,
-    children
-  } = style,
-        styleDc = _objectWithoutPropertiesLoose(style, _excluded);
-
-  const childSymbols = [!ignoreLabel && label, raster].filter(Boolean);
-  return _extends({}, styleDc, {
-    symbol: childSymbols.length ? // @ts-ignore
-    createCompositeSymbol([symbol, ...childSymbols]) : symbol,
-    // @ts-ignore
-    children: children ? // @ts-ignore
-    children.map(childStyle => packStyle(_extends({}, childStyle, {
-      ignoreLabel,
-      label
-    }))) : children
-  });
-};
-
 let EvergisStyle = /*#__PURE__*/function () {
   function EvergisStyle(style) {
     _classCallCheck(this, EvergisStyle);
@@ -1636,40 +1351,673 @@ let ArrowLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   return ArrowLineMiterRender;
 }(LineMiterRender);
 
-const DEFAULT_FORMATTERS = {
-  polygon: formatPolygonMeasure,
-  length: formatLength
-};
-
-const COORD_FRACTION = 6;
-const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
-let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
-  _inherits(BaseMeasureToolCreator, _PolylineControl);
-
-  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
-
-  function BaseMeasureToolCreator(map, painter, params) {
-    var _this;
-
-    _classCallCheck(this, BaseMeasureToolCreator);
-
-    _this = _super.call(this, map, params);
-
-    _this.cancel = () => {
-      _this.fire('cancel');
-    };
+const NO_CONTENT_VALUE = '—';
+var DateFormat;
 
-    _this.painter = painter;
-    _this.renderLabelSymbol = params.renderLabelSymbol;
-    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
-    _this.areaSymbol = params.areaSymbol;
+(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 = {}));
 
-    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+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);
 
-    _this.on('change', _this.updateDistance);
+      if (isValid(date)) {
+        return toDate(date);
+      }
+    }
 
-    return _this;
+    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;
+  }
+
+  if (delim === void 0) {
+    delim = ',';
+  }
+
+  const [num, frac] = x.toFixed(fractionDigits).split('.');
+  const numWithSpaces = num.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+  return [numWithSpaces, frac].join(delim);
+}
+
+function matchPhone(value) {
+  const phoneRegexp = /((8|\+7)[- ]?)?(\(?\d{3,4}\)?[- ]?)?[\d\- ]{7,10}/g;
+  return !isStringAsInn(value) && value.match(phoneRegexp);
+}
+function isStringAsInn(value) {
+  const innRegexp = /^(([0-9]{12})|([0-9]{10}))$/;
+  return innRegexp.test(value);
+}
+function isStringAsKpp(value) {
+  const kppRegexp = /^(([0-9]{9}))$/;
+  return kppRegexp.test(value);
+}
+function isStringAsOgrn(value) {
+  const ogrnRegexp = /^([0-9]{13})?$/;
+  return ogrnRegexp.test((+value).toString());
+}
+function isStringContainsDate(value) {
+  const dateRegexp = /\d{4}(-|\/)\d{2}(-|\/)\d{2}/g;
+  return dateRegexp.test(value);
+}
+function isRequisiteNumbers(value) {
+  return isStringAsInn(value) || isStringAsKpp(value) || isStringAsOgrn(value);
+}
+function isStringAsPhone(value) {
+  const phoneRegexp = /^((8|\+7)[- ]?)?(\(?\d{3,4}\)?[- ]?)?[\d\- ]{7,10}/;
+  return !isRequisiteNumbers(value) && !isStringContainsDate(value) && phoneRegexp.test(value);
+}
+function isStringAsMail(value) {
+  return isStringAsUrl(value) && value.includes('@');
+}
+function isStringAsUrl(value) {
+  if (isValidUrl(value)) {
+    return true;
+  }
+
+  const urlRegexp = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g;
+  const urlKind = value.match(urlRegexp);
+  return urlKind !== null;
+}
+function isValidUrl(value) {
+  try {
+    new URL(value);
+  } catch (_) {
+    return false;
+  }
+
+  return true;
+}
+const mailHref = mail => "mailto:" + mail;
+const phoneHref = mail => "tel:" + mail;
+const urlHref = url => isValidUrl(url) ? url : "//" + url;
+
+const stringAttribute = value => ({
+  type: 0
+  /* String */
+  ,
+  value
+});
+
+const urlAttribute = value => ({
+  type: 2
+  /* Url */
+  ,
+  value
+});
+
+const mailAttribute = value => ({
+  type: 3
+  /* Mail */
+  ,
+  value
+});
+
+const phoneAttribute = value => ({
+  type: 1
+  /* Phone */
+  ,
+  value
+});
+
+const convertStringAttribute = value => {
+  if (isStringAsMail(value)) {
+    return mailAttribute(value);
+  }
+
+  if (isStringAsUrl(value)) {
+    return urlAttribute(value);
+  }
+
+  if (isStringAsPhone(value)) {
+    return phoneAttribute(value);
+  }
+
+  return stringAttribute(value);
+};
+
+const formatStringAttribute = value => {
+  const phones = matchPhone(value);
+
+  if (!isRequisiteNumbers(value) && !isStringContainsDate(value) && phones && phones.length) {
+    return phones.map(phoneAttribute);
+  }
+
+  const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
+
+  if (attributeValues.every(_ref => {
+    let {
+      type
+    } = _ref;
+    return type === 0;
+  }
+  /* String */
+  )) {
+    return [stringAttribute(attributeValues.map(_ref2 => {
+      let {
+        value
+      } = _ref2;
+      return isNaN(+value) || isRequisiteNumbers(value) ? isStringAsOgrn(value) ? +value : value : numberWithSpaces(+value, 0, '');
+    }).join(' '))];
+  }
+
+  return attributeValues;
+};
+
+const formatDateTimeAttribute = value => stringAttribute(value.toString());
+
+const formatIntAttribute = value => stringAttribute(numberWithSpaces(value, 0, ''));
+
+const DOUBLE_FRACTIONS = 2;
+
+const formatDoubleAttribute = value => stringAttribute(numberWithSpaces(value, DOUBLE_FRACTIONS, '.'));
+
+const isNullOrUndefined = value => value === null || value === undefined;
+
+const NO_CONTENT_ATTRIBUTE = {
+  type: 0
+  /* String */
+  ,
+  value: NO_CONTENT_VALUE
+};
+const formatAttributeValue = attribute => {
+  if (isNullOrUndefined(attribute.value)) {
+    return [NO_CONTENT_ATTRIBUTE];
+  }
+
+  switch (attribute.type) {
+    case 'String':
+      return formatStringAttribute(attribute.value);
+
+    case 'DateTime':
+      return [formatDateTimeAttribute(attribute.value)];
+
+    case 'Int32':
+    case 'Int64':
+      return [formatIntAttribute(attribute.value)];
+
+    case 'Double':
+      return [formatDoubleAttribute(attribute.value)];
+
+    default:
+      return [NO_CONTENT_ATTRIBUTE];
+  }
+};
+
+/** Spatial Reference WKID using for @evergis/sgis */
+
+var SrId;
+
+(function (SrId) {
+  /** 3857 */
+  SrId[SrId["WebMercator"] = 3857] = "WebMercator";
+  /** 4326 */
+
+  SrId[SrId["Geo"] = 4326] = "Geo";
+  /** 84 */
+
+  SrId[SrId["Wgs84"] = 84] = "Wgs84";
+  /** 3395 */
+
+  SrId[SrId["EllipticalMercator"] = 3395] = "EllipticalMercator";
+})(SrId || (SrId = {}));
+
+const CRS_MAP = {
+  [SrId.WebMercator]: webMercator,
+  [SrId.Geo]: geo,
+  [SrId.Wgs84]: wgs84,
+  [SrId.EllipticalMercator]: ellipticalMercator
+};
+const DEFAULT_SRID = SrId.WebMercator;
+const DEFAULT_CRS = CRS_MAP[DEFAULT_SRID];
+const getCrs = srId => CRS_MAP[srId];
+
+const getFeatureAttributeType = attributeValue => {
+  if (attributeValue instanceof Date) {
+    return AttributeType.DateTime;
+  }
+
+  if (typeof attributeValue === 'string') {
+    return AttributeType.String;
+  }
+
+  if (typeof attributeValue === 'number') {
+    return AttributeType.Int64;
+  }
+
+  return AttributeType.Unknown;
+};
+const getLayerAttributes = layerDefinition => {
+  const attributes = layerDefinition && layerDefinition.attributes || {};
+  return Object.entries(attributes).map(_ref => {
+    let [name, definition] = _ref;
+    return _extends({
+      name
+    }, definition);
+  });
+};
+const getFeatureAttributes = attributes => {
+  return attributes ? Object.entries(attributes).map(_ref2 => {
+    let [name, value] = _ref2;
+    return {
+      name,
+      value,
+      type: getFeatureAttributeType(value)
+    };
+  }) : [];
+};
+const mergeAttributes = (attributes1, attributes2) => {
+  return attributes1.map(attribute => _extends({}, attribute, attributes2.find(_ref3 => {
+    let {
+      name
+    } = _ref3;
+    return attribute.name === name;
+  }) || {}));
+};
+
+let EvergisFeature = /*#__PURE__*/function () {
+  function EvergisFeature(feature) {
+    _classCallCheck(this, EvergisFeature);
+
+    this.id = null;
+    this.displayName = null;
+    this.geometry = null;
+    this.layerName = null;
+    this.layerAlias = null;
+    this.attributes = null;
+    this.symbol = null;
+    this.id = feature.id;
+    this.displayName = feature.id;
+    this.geometry = feature.geometry;
+    this.layerName = feature.layer;
+    this.layerAlias = feature.layer;
+    this.attributes = getFeatureAttributes(feature.attributes);
+  }
+
+  _createClass(EvergisFeature, [{
+    key: "sGisFeature",
+    value: function sGisFeature() {
+      if (!this.geometry || !this.symbol) {
+        return null;
+      } // @ts-ignore
+
+
+      const {
+        type,
+        coordinates,
+        sr
+      } = this.geometry;
+      const crs = CRS_MAP[sr];
+
+      if (!crs) {
+        return null;
+      }
+
+      switch (type) {
+        case GeometryType.Point:
+          return new PointFeature(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
+
+        case GeometryType.Multipoint:
+          return new MultiPoint(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
+
+        case GeometryType.Polyline:
+          return new Polyline(coordinates, {
+            symbol: selectedPolyline,
+            crs
+          });
+
+        case GeometryType.Polygon:
+          return new Polygon(coordinates, {
+            symbol: selectedPolygon,
+            crs
+          });
+
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "extent",
+    value: function extent() {
+      const feature = this.sGisFeature();
+      return feature && feature.bbox;
+    }
+  }]);
+
+  return EvergisFeature;
+}();
+
+function evaluateCondition(condition, attributes) {
+  try {
+    const evaluator = new ConditionEvaluator(attributes);
+    const result = evaluator.evaluate(condition);
+
+    if (result instanceof Error) {
+      return null;
+    }
+
+    return result;
+  } catch (_unused) {
+    return null;
+  }
+}
+
+function getAttributeValue(attributes, attributeName) {
+  const attributeMeta = attributes.find(_ref => {
+    let {
+      name
+    } = _ref;
+    return name === attributeName;
+  });
+  return attributeMeta ? attributeMeta.value : null;
+}
+
+const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
+const getAttributeNameFromClassified = values => values.length > 0 ? getAttributeNameFromCondition(values[0].condition) : null;
+
+function findFeatureValue(parameterValues, _ref2) {
+  let [name, value] = _ref2;
+  return value !== null ? parameterValues.find(_ref3 => {
+    let {
+      condition
+    } = _ref3;
+    return value !== undefined && evaluateCondition(condition, {
+      [name]: value
+    });
+  }) : null;
+}
+
+function extractValuesAttribute(parameterValues, attributes) {
+  const name = getAttributeNameFromClassified(parameterValues) || '';
+  const value = name && getAttributeValue(attributes, name);
+  return [name, value];
+}
+
+function evaluateFeatureSymbol(attributes) {
+  // @ts-ignore
+  function calc(result, _ref4) {
+    let [parameterName, parameterValue] = _ref4;
+    let newParameterValue;
+
+    if (isParameterByAttribute(parameterValue)) {
+      const [attributeName, attributeValue] = extractValuesAttribute(parameterValue.values, attributes);
+      const featureValue = findFeatureValue(parameterValue.values, [attributeName, attributeValue]);
+      newParameterValue = featureValue ? featureValue.value : parameterValue.defaultValue;
+    } else if (isObject(parameterValue)) {
+      // @ts-ignore
+      newParameterValue = Object.entries(parameterValue).reduce(calc, parameterValue);
+    }
+
+    return newParameterValue !== undefined ? _extends({}, result, {
+      [parameterName]: newParameterValue
+    }) : result;
+  }
+
+  return calc;
+}
+
+function findChildFeatureStyle(childStyles, attributes) {
+  return (childStyles || []).find(_ref5 => {
+    let {
+      condition
+    } = _ref5;
+    const attributeName = condition && getAttributeNameFromCondition(condition);
+    const attributeValue = attributeName && getAttributeValue(attributes, attributeName);
+
+    if (condition && attributeName && attributeValue !== undefined) {
+      return evaluateCondition(condition, {
+        [attributeName]: attributeValue
+      });
+    }
+
+    return false;
+  }) || null;
+}
+function findChildFeatureSymbol(childStyles, attributes) {
+  const featureStyle = findChildFeatureStyle(childStyles, attributes);
+  return featureStyle ? featureStyle.symbol : null;
+}
+function getFeatureSymbol(style, attributes) {
+  if (!style || !style.symbol) {
+    return null;
+  }
+
+  if (style.children !== null) {
+    return findChildFeatureSymbol(style.children, attributes) || style.symbol;
+  }
+
+  return Object.entries(style.symbol).reduce(evaluateFeatureSymbol(attributes), style.symbol);
+}
+
+let EvergisLayer = /*#__PURE__*/function () {
+  function EvergisLayer(service) {
+    _classCallCheck(this, EvergisLayer);
+
+    this.name = null;
+    this.titleAttribute = null;
+    this.alias = null;
+    this.attributes = null;
+    this.style = null;
+    const evergisService = service;
+    const {
+      name,
+      alias,
+      style,
+      layerDefinition
+    } = evergisService;
+    this.name = name;
+    this.alias = alias || name;
+    this.attributes = getLayerAttributes(layerDefinition);
+    this.style = style && new EvergisStyle(style) || null;
+    this.titleAttribute = layerDefinition && layerDefinition.titleAttribute || null;
+  }
+
+  _createClass(EvergisLayer, [{
+    key: "evaluateFeature",
+    value: function evaluateFeature(feature) {
+      feature.attributes = mergeAttributes(feature.attributes || [], this.attributes || []);
+      feature.symbol = this.style && getFeatureSymbol(this.style, feature.attributes);
+      feature.layerAlias = this.alias;
+      const titleAttribute = (feature.attributes || []).find(_ref => {
+        let {
+          name
+        } = _ref;
+        return name === this.titleAttribute;
+      });
+      const displayName = titleAttribute && formatAttributeValue(titleAttribute)[0].value || feature.id;
+      feature.displayName = displayName ? "" + displayName : feature.id;
+      return feature;
+    }
+  }]);
+
+  return EvergisLayer;
+}();
+
+const findFeatureLayer = feature => layer => layer.name === feature.layerName;
+
+const evaluateFeature = layers => feature => {
+  const featureLayer = layers.find(findFeatureLayer(feature));
+  return featureLayer ? featureLayer.evaluateFeature(feature) : feature;
+};
+
+function createValueTitle(value, index) {
+  if (value.title) return value.title;
+  if (isRangeClass(value)) return printRangeClass(value, index);
+  if (isUniqueClass(value)) return value.uniqueValue;
+  return '';
+}
+
+function isValidParameter(parameter) {
+  return !(parameter != null && parameter.includes("labelSymbol")) && !(parameter != null && parameter.includes("singleObjectSymbol"));
+}
+
+var FilterConditionOperation;
+
+(function (FilterConditionOperation) {
+  FilterConditionOperation["AND"] = "&&";
+  FilterConditionOperation["OR"] = "||";
+})(FilterConditionOperation || (FilterConditionOperation = {}));
+
+var ComparisonOperator;
+
+(function (ComparisonOperator) {
+  /** `==` */
+  ComparisonOperator["Equals"] = "Equals";
+  /** `!=` */
+
+  ComparisonOperator["NotEquals"] = "NotEquals";
+  /** `>` */
+
+  ComparisonOperator["GreaterThan"] = "GreaterThan";
+  /** `<` */
+
+  ComparisonOperator["LessThan"] = "LessThan";
+  /** `>=` */
+
+  ComparisonOperator["GreaterOrEquals"] = "GreaterOrEquals";
+  /** `<=` */
+
+  ComparisonOperator["LessOrEquals"] = "LessOrEquals";
+  ComparisonOperator["Filled"] = "Filled";
+  ComparisonOperator["Empty"] = "Empty";
+  /** `==` */
+
+  ComparisonOperator["Contains"] = "Contains";
+  /** `!=` */
+
+  ComparisonOperator["NotContains"] = "NotContains";
+  ComparisonOperator["StartsWith"] = "StartsWith";
+  ComparisonOperator["NotStartsWith"] = "NotStartsWith";
+  ComparisonOperator["EndsWith"] = "EndsWith";
+  ComparisonOperator["NotEndsWith"] = "NotEndsWith";
+  ComparisonOperator["Between"] = "Between";
+  ComparisonOperator["Outside"] = "Outside";
+})(ComparisonOperator || (ComparisonOperator = {}));
+
+function formatArea(num) {
+  let result = num;
+  let measure = 'м²';
+
+  if (num >= 10000000) {
+    result = num / 1000000;
+    measure = 'км²';
+  } else if (num >= 10000) {
+    result = num / 10000;
+    measure = 'га';
+  }
+
+  return numberWithSpaces(result) + " " + measure;
+}
+function formatLength(num) {
+  let result = num;
+  let measure = 'м';
+
+  if (num > 10000) {
+    result = num / 1000;
+    measure = 'км';
+  }
+
+  return numberWithSpaces(result) + " " + measure;
+}
+function formatPolygonMeasure(area, perimiter) {
+  return "S : " + formatArea(area) + "  P : " + formatLength(perimiter);
+}
+function isPolylineLikePolygon(rings, resolution) {
+  if (rings[0].length <= 3) {
+    return false;
+  }
+
+  const coords = rings[0];
+  const firstPoint = coords[0];
+  const lastPoint = coords[coords.length - 1];
+  const distance = resolution * 2;
+  return softEquals(firstPoint[0], lastPoint[0], distance) && softEquals(firstPoint[1], lastPoint[1], distance);
+}
+
+function getScale(scale) {
+  const scales = [1, 2, 5];
+
+  for (let x = 0; x < 21; x++) {
+    for (let y = 0; y < scales.length; y++) {
+      const result = Math.pow(10, x) * scales[y];
+
+      if (result > scale) {
+        return result;
+      }
+    }
+  }
+
+  return 1;
+}
+
+const DEFAULT_FORMATTERS = {
+  polygon: formatPolygonMeasure,
+  length: formatLength
+};
+
+const COORD_FRACTION = 6;
+const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
+let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
+  _inherits(BaseMeasureToolCreator, _PolylineControl);
+
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
+
+  function BaseMeasureToolCreator(map, painter, params) {
+    var _this;
+
+    _classCallCheck(this, BaseMeasureToolCreator);
+
+    _this = _super.call(this, map, params);
+
+    _this.cancel = () => {
+      _this.fire('cancel');
+    };
+
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
+    _this.areaSymbol = params.areaSymbol;
+
+    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+
+
+    _this.on('change', _this.updateDistance);
+
+    return _this;
   }
 
   _createClass(BaseMeasureToolCreator, [{
@@ -1973,6 +2321,197 @@ const isParameterType = (types, parameter) => {
   })) || false;
 };
 
+const comparisonOperatorMapReversed = {
+  [TokenType.ArEq]: ComparisonOperator.Equals,
+  [TokenType.ArNotEq]: ComparisonOperator.NotEquals,
+  [TokenType.ArGr]: ComparisonOperator.GreaterThan,
+  [TokenType.ArLs]: ComparisonOperator.LessThan,
+  [TokenType.ArGre]: ComparisonOperator.GreaterOrEquals,
+  [TokenType.ArLse]: ComparisonOperator.LessOrEquals,
+  [TokenType.Between]: ComparisonOperator.Between,
+  [TokenType.Outside]: ComparisonOperator.Outside
+};
+const NUMERIC_ATTRIBUTE_TYPES = [AttributeType.Int32, AttributeType.Int64, AttributeType.DateTime, AttributeType.Double];
+
+const formatValue = (value, isDate) => {
+  return isDate ? "#'" + formatDate(value, {
+    dateFormat: DateFormat.UTC,
+    defaultValue: value
+  }) + "'" : value ? value.toString() : 0;
+};
+
+function formatCondition(condition) {
+  const {
+    comparisonOperator,
+    value,
+    type,
+    attribute
+  } = condition;
+  const operator = OPERATOR_CONDITION_REMAP[comparisonOperator] || comparisonOperator;
+  const preparedValue = typeof value === "string" && value.includes(" - ") ? value.split(" - ") : value;
+  const isDate = type === AttributeType.DateTime;
+  const isBetweenOutside = BETWEEN_OPERATORS.includes(comparisonOperator);
+  const escapeValue = !NUMERIC_ATTRIBUTE_TYPES.includes(type) && preparedValue !== null;
+
+  if (isBetweenOutside && Array.isArray(preparedValue) && preparedValue[0] !== undefined) {
+    return OPERATOR_CONDITION_REMAP[comparisonOperator] + "(" + attribute + ", " + formatValue(preparedValue[0], isDate) + ", " + formatValue(preparedValue[1], isDate) + ")";
+  }
+
+  const formattedValue = Array.isArray(preparedValue) ? preparedValue.map(val => formatValue(val, isDate)) : formatValue(preparedValue, isDate);
+  const nulledValue = isNil(preparedValue) ? "{null}" : formattedValue;
+  const valueEscaped = escapeValue && typeof nulledValue === "string" ? "'" + Char.escapeSpecChars(addOperationToValue(nulledValue, comparisonOperator)) + "'" : nulledValue;
+  return attribute + " " + operator + " " + valueEscaped;
+}
+function createConditionString(condition) {
+  if (Array.isArray(condition)) {
+    return "( " + formatCondition(condition[0]) + " " + condition[0].operation + " " + formatCondition(condition[1]) + " )";
+  }
+
+  return formatCondition(condition);
+}
+function createCondition(_ref) {
+  let {
+    attribute,
+    operation,
+    value
+  } = _ref;
+  const comparisonOperator = comparisonOperatorMapReversed[operation];
+  const convertedResult = convertOperatorValue(value, comparisonOperator);
+  return _extends({
+    attribute
+  }, convertedResult);
+}
+
+function convertOperatorValue(value, comparisonOperator) {
+  if (typeof value === "string") {
+    const operatorIndex = +(comparisonOperator === ComparisonOperator.NotEquals);
+
+    if (value.startsWith(Char.PERCENTAGE) && value.endsWith(Char.PERCENTAGE)) {
+      return {
+        value: value.slice(1, -1),
+        comparisonOperator: CONTAINS_OPERATORS[operatorIndex]
+      };
+    }
+
+    if (value.startsWith(Char.PERCENTAGE)) {
+      return {
+        value: value.slice(1),
+        comparisonOperator: ENDS_WITH_OPERATORS[operatorIndex]
+      };
+    }
+
+    if (value.endsWith(Char.PERCENTAGE)) {
+      return {
+        value: value.slice(0, -1),
+        comparisonOperator: STARTS_WITH_OPERATORS[operatorIndex]
+      };
+    }
+  }
+
+  return {
+    value,
+    comparisonOperator
+  };
+}
+
+const addContains = value => "%" + value + "%";
+
+const addStartsWith = value => value + "%";
+
+const addEndsWith = value => "%" + value;
+
+function addOperationToValue(value, operator) {
+  switch (operator) {
+    case ComparisonOperator.Contains:
+    case ComparisonOperator.NotContains:
+      return addContains(value);
+
+    case ComparisonOperator.StartsWith:
+    case ComparisonOperator.NotStartsWith:
+      return addStartsWith(value);
+
+    case ComparisonOperator.EndsWith:
+    case ComparisonOperator.NotEndsWith:
+      return addEndsWith(value);
+
+    case ComparisonOperator.Between:
+      return Char.BETWEEN;
+
+    case ComparisonOperator.Outside:
+      return Char.OUTSIDE;
+
+    default:
+      return value;
+  }
+}
+
+let FilterCondition = /*#__PURE__*/function () {
+  function FilterCondition(condition) {
+    if (condition === void 0) {
+      condition = null;
+    }
+
+    _classCallCheck(this, FilterCondition);
+
+    this.condition = condition;
+    this.conditionInterpreter = new ConditionInterpreter(condition);
+  }
+
+  _createClass(FilterCondition, [{
+    key: "conditions",
+    get: function get() {
+      const {
+        value
+      } = this.conditionInterpreter;
+
+      if (value instanceof Error) {
+        // TODO handle errors in client notifications
+        console.warn(value.message);
+      }
+
+      return value instanceof Error ? [] : value.expressions.map(createCondition);
+    }
+  }, {
+    key: "conditionOperation",
+    get: function get() {
+      const {
+        value
+      } = this.conditionInterpreter;
+
+      if (value instanceof Error) {
+        return null;
+      }
+
+      const isOrCondition = value.boolOperations.includes(TokenType.BoolOr);
+      const isAndCondition = value.boolOperations.includes(TokenType.BoolAnd);
+
+      if (isOrCondition && isAndCondition) {
+        return null;
+      }
+
+      return isOrCondition ? FilterConditionOperation.OR : isAndCondition ? FilterConditionOperation.AND : null;
+    }
+  }, {
+    key: "isParsingError",
+    value: function isParsingError() {
+      return this.conditionInterpreter.value instanceof Error;
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.condition;
+    }
+  }], [{
+    key: "from",
+    value: function from(conditions, operation) {
+      const condition = (conditions == null ? void 0 : conditions.map(createConditionString).join(" " + operation + " ")) || null;
+      return new FilterCondition(condition);
+    }
+  }]);
+
+  return FilterCondition;
+}();
+
 const isLayerService = value => isObject(value) && "name" in value;
 const getAttributeFromCondition = condition => {
   const parts = condition.split(" ");
@@ -2006,7 +2545,7 @@ const isRangeCondition = condition => condition.includes("(");
 const getSymbolParameterInfo = parameter => {
   return PARAMETER_INFOS[parameter] || DEFAULT_PARAMETER_INFO;
 };
-const formatValue = (value, type, calculatedParameter) => {
+const formatValue$1 = (value, type, calculatedParameter) => {
   var _ref;
 
   if (type === AttributeType.DateTime) {
@@ -2025,7 +2564,7 @@ const formatUniqueClassValue = value => {
     attribute,
     uniqueValue
   } = value;
-  return attribute ? formatValue(uniqueValue, attribute.type) : uniqueValue;
+  return attribute ? formatValue$1(uniqueValue, attribute.type) : uniqueValue;
 };
 const getRangeValues$1 = (_ref2, isDouble, isDate, index) => {
   let {
@@ -2076,7 +2615,7 @@ const getTitleFromCondition = condition => {
   return (_parts$ = parts[1]) == null ? void 0 : _parts$.slice(1, -1);
 };
 
-function createValueTitle(paramValue, attributeType, index) {
+function createValueTitle$1(paramValue, attributeType, index) {
   if (paramValue.title) return paramValue.title;
   const value = {
     parameterValue: getParameterValue(paramValue.value),
@@ -2314,8 +2853,63 @@ const createLegendSymbol = (parameterValue, parameter, classificationsParams, ba
 
   return null;
 };
-const getMinimizedLegendValues = (attributeType, param, index) => {
-  return param.values.map(paramValue => {
+function createHiddenCondition(attributeName, attributeType, value) {
+  let newValue;
+  let comparisonOperator;
+
+  if (isRangeClass(value)) {
+    if (value.from && value.to) {
+      newValue = [value.from, value.to];
+      comparisonOperator = ComparisonOperator.Outside;
+    } else if (value.from) {
+      newValue = value.from;
+      comparisonOperator = ComparisonOperator.LessThan;
+    } else if (value.to) {
+      newValue = value.to;
+      comparisonOperator = ComparisonOperator.GreaterThan;
+    }
+  } else {
+    newValue = value.uniqueValue;
+    comparisonOperator = ComparisonOperator.NotEquals;
+  }
+
+  return new FilterCondition(createConditionString({
+    attribute: attributeName,
+    type: attributeType,
+    comparisonOperator: comparisonOperator,
+    value: newValue
+  })).toString();
+}
+const createOtherHiddenCondition = (values, attributeName, attributeType) => {
+  const value = values[values.length - 1];
+  let hiddenCondition;
+
+  if (isRangeClass(value)) {
+    hiddenCondition = new FilterCondition(createConditionString({
+      attribute: attributeName,
+      type: attributeType,
+      comparisonOperator: ComparisonOperator.LessOrEquals,
+      value: value.to || value.from
+    })).toString();
+  } else {
+    const conditions = values.map(val => new FilterCondition(createConditionString({
+      attribute: attributeName,
+      type: attributeType,
+      comparisonOperator: ComparisonOperator.Equals,
+      value: val.uniqueValue
+    })).toString());
+    hiddenCondition = "( " + conditions.filter(Boolean).join(" " + FilterConditionOperation.OR + " ") + " )";
+  }
+
+  return hiddenCondition;
+};
+const getMinimizedLegendValues = (attributeName, attributeType, classified, index, otherTitle) => {
+  const other = {
+    title: otherTitle,
+    parameterValue: classified.defaultValue,
+    hiddenCondition: createOtherHiddenCondition(classified.values.map(val => getClassificationValue(val.value, otherTitle, new ClassificationCondition(val.condition))), attributeName, attributeType)
+  };
+  const items = classified.values.map(paramValue => {
     const parameterValue = getParameterValue(paramValue.value);
     const result = {
       parameterValue,
@@ -2329,33 +2923,41 @@ const getMinimizedLegendValues = (attributeType, param, index) => {
       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);
+      result.title = createValueTitle$1(paramValue, attributeType, index);
       return result;
     }
 
-    result.uniqueValue = formatValue(paramValue.value);
+    result.uniqueValue = formatValue$1(paramValue.value);
     result.title = getTitleFromCondition(paramValue.condition);
+    result.hiddenCondition = createHiddenCondition(attributeName, attributeType, getClassificationValue(paramValue.value, result.title, new ClassificationCondition(paramValue.condition)));
     return result;
   });
+
+  if (attributeType !== AttributeType.String) {
+    items.reverse();
+  }
+
+  return [...items, other];
 };
-const getMaximizedLegendValues = (attributeType, param, params, classified, symbol, sectionIndex, otherTitle) => {
+const getMaximizedLegendValues = (attributeName, attributeType, param, params, classified, symbol, sectionIndex, otherTitle) => {
   const other = {
     title: otherTitle,
-    symbol: createLegendSymbol(classified.defaultValue, param, params, symbol)
+    symbol: createLegendSymbol(classified.defaultValue, param, params, symbol),
+    hiddenCondition: createOtherHiddenCondition(classified.values.map(val => getClassificationValue(val.value, otherTitle, new ClassificationCondition(val.condition))), attributeName, attributeType)
   };
   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);
+    result.title = isRangeCondition(paramValue.condition) ? createValueTitle$1(paramValue, attributeType, sectionIndex) : getTitleFromCondition(paramValue.condition);
+    result.hiddenCondition = createHiddenCondition(attributeName, attributeType, getClassificationValue(classified.values[index].value, result.title, new ClassificationCondition(classified.values[index].condition)));
     return result;
   });
+
+  if (attributeType !== AttributeType.String) {
+    items.reverse();
+  }
+
   return [...items, other];
 };
 const getClassified = layerInfo => {
@@ -2491,6 +3093,16 @@ function getAttributeType(layer, attributeName) {
   return attribute ? attribute.type : AttributeType.Unknown;
 }
 
+const getClassificationValue = (parameterValue, title, condition) => _extends({
+  parameterValue,
+  title
+}, condition.isUnique() ? {
+  uniqueValue: condition.uniqueValue
+} : {
+  from: condition.range[0],
+  to: condition.range[1]
+});
+
 const metersToPixels = (meters, _ref) => {
   let {
     painter,
@@ -2573,6 +3185,34 @@ const PARAMETER_INFOS = {
 
   })
 };
+const OPERATOR_CONDITION_REMAP = {
+  [ComparisonOperator.Equals]: "==",
+  [ComparisonOperator.NotEquals]: "!=",
+  [ComparisonOperator.GreaterThan]: ">",
+  [ComparisonOperator.GreaterOrEquals]: ">=",
+  [ComparisonOperator.LessThan]: "<",
+  [ComparisonOperator.LessOrEquals]: "<=",
+  [ComparisonOperator.Filled]: "!=",
+  [ComparisonOperator.Empty]: "==",
+  [ComparisonOperator.Contains]: "==",
+  [ComparisonOperator.NotContains]: "!=",
+  [ComparisonOperator.StartsWith]: "==",
+  [ComparisonOperator.NotStartsWith]: "!=",
+  [ComparisonOperator.EndsWith]: "==",
+  [ComparisonOperator.NotEndsWith]: "!=",
+  [ComparisonOperator.Between]: "between",
+  [ComparisonOperator.Outside]: "!between"
+};
+const BASE_OPERATORS = [ComparisonOperator.Equals, ComparisonOperator.NotEquals];
+const CONTAINS_OPERATORS = [ComparisonOperator.Contains, ComparisonOperator.NotContains];
+const FILLED_OPERATORS = [ComparisonOperator.Filled, ComparisonOperator.Empty];
+const STARTS_WITH_OPERATORS = [ComparisonOperator.StartsWith, ComparisonOperator.NotStartsWith];
+const ENDS_WITH_OPERATORS = [ComparisonOperator.EndsWith, ComparisonOperator.NotEndsWith];
+const RANGE_OPERATORS = [ComparisonOperator.LessThan, ComparisonOperator.LessOrEquals, ComparisonOperator.GreaterThan, ComparisonOperator.GreaterOrEquals];
+const BETWEEN_OPERATORS = [ComparisonOperator.Between, ComparisonOperator.Outside];
+const numberComparisonOperators = [...BASE_OPERATORS, ...RANGE_OPERATORS, ...FILLED_OPERATORS, ...BETWEEN_OPERATORS];
+const dateComparisonOperators = [...BASE_OPERATORS, ...RANGE_OPERATORS, ...FILLED_OPERATORS, ...BETWEEN_OPERATORS];
+const textComparisonOperators = [...BASE_OPERATORS, ...CONTAINS_OPERATORS, ...STARTS_WITH_OPERATORS, ...ENDS_WITH_OPERATORS, ...FILLED_OPERATORS];
 
 var SvgSymbolBg;
 
@@ -2651,1578 +3291,1165 @@ const manipulateSvgSymbol = (SVGContainer, symbol, svg, bg) => {
       } 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) {
-  _inherits(CircleLineMiterRender, _LineMiterRender);
-
-  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
-
-  function CircleLineMiterRender() {
-    _classCallCheck(this, CircleLineMiterRender);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(CircleLineMiterRender, [{
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth * 3;
-    }
-  }, {
-    key: "createRings",
-    value: function createRings(_ref, xMultiplier) {
-      let [x, y] = _ref;
-      return [[[x + (this.miterSize / 2 + this.strokeWidth) * xMultiplier, y]]];
-    }
-  }, {
-    key: "createRender",
-    value: function createRender(miterRings) {
-      const isFilled = this.kind === LineMiterKind.FilledCircle;
-      return new PolyRender(polygonCircleFromPoint(miterRings[0][0], this.miterSize), {
-        fillColor: isFilled ? this.color : 'transparent',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth,
-        enclosed: true
-      });
-    }
-  }]);
-
-  return CircleLineMiterRender;
-}(LineMiterRender);
-
-let SquareLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
-  _inherits(SquareLineMiterRender, _LineMiterRender);
-
-  var _super = /*#__PURE__*/_createSuper(SquareLineMiterRender);
-
-  function SquareLineMiterRender() {
-    _classCallCheck(this, SquareLineMiterRender);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(SquareLineMiterRender, [{
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth;
-    }
-  }, {
-    key: "createRings",
-    value: function createRings(_ref, xMultiplier) {
-      let [x, y] = _ref;
-      return [[[x, y + this.miterSize / 2], [x, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y + this.miterSize / 2]]];
-    }
-  }, {
-    key: "createRender",
-    value: function createRender(miterRings) {
-      const isFilled = this.kind === LineMiterKind.FilledSquare;
-      return new PolyRender(miterRings, {
-        enclosed: true,
-        fillColor: isFilled ? this.color : void 0,
-        fillStyle: isFilled ? FillStyle.Color : FillStyle.None,
-        lineCap: 'square',
-        lineJoin: 'miter',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth
-      });
-    }
-  }]);
-
-  return SquareLineMiterRender;
-}(LineMiterRender);
-
-const getLineMiterRender = options => {
-  switch (options.kind) {
-    case LineMiterKind.Arrow:
-    case LineMiterKind.FilledArrow:
-      return new ArrowLineMiterRender(options);
-
-    case LineMiterKind.Square:
-    case LineMiterKind.FilledSquare:
-      return new SquareLineMiterRender(options);
-
-    case LineMiterKind.Circle:
-    case LineMiterKind.FilledCircle:
-      return new CircleLineMiterRender(options);
-
-    default:
-      return null;
-  }
-};
-
-const updateRingForRightMiter = (ring, miterSize, isLastRing) => {
-  const reversedRing = ring.slice().reverse();
-
-  for (let i = 0; i < reversedRing.length; i++) {
-    const coordinates = reversedRing[i];
-
-    if (isLastRing && i === 0) {
-      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
-    }
-
-    const nextCoordinates = reversedRing[i - 1];
-
-    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
-      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
-    }
-  }
-
-  return reversedRing.reverse();
-};
-
-const updateRingForLeftMiter = (ring, miterSize, isFirstRing) => {
-  const newRing = ring.slice();
-
-  for (let i = 0; i < newRing.length; i++) {
-    const coordinates = newRing[i];
-
-    if (i === 0 && isFirstRing) {
-      newRing[i] = [coordinates[0] + miterSize, coordinates[1]];
-    }
-
-    const prevCoordinates = newRing[i - 1];
-
-    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
-      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
-    }
-  }
-
-  return newRing;
-};
-
-const updateRingsForMiter = (rings, position, miterSize) => {
-  return rings.map((ring, ringIndex) => {
-    switch (position) {
-      case 'right':
-        return updateRingForRightMiter(ring, miterSize, ringIndex === rings.length - 1);
-
-      default:
-        return updateRingForLeftMiter(ring, miterSize, ringIndex === 0);
-    }
-  });
-};
-
-const copyRings = rings => rings.map(ring => ring.map(coordinates => coordinates.slice()));
-let SGisPolylineSymbol = /*#__PURE__*/function (_sPolylineSymbol) {
-  _inherits(SGisPolylineSymbol, _sPolylineSymbol);
-
-  var _super = /*#__PURE__*/_createSuper(SGisPolylineSymbol);
-
-  function SGisPolylineSymbol(originalSymbol) {
-    var _originalSymbol$strok, _originalSymbol$strok2;
-
-    var _this;
-
-    _classCallCheck(this, SGisPolylineSymbol);
-
-    _this = _super.call(this, {
-      // @ts-ignore
-      strokeColor: getHexColor(getParameterValue((_originalSymbol$strok = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok.color)),
-      strokeWidth: clamp( // @ts-ignore
-      getParameterValue((_originalSymbol$strok2 = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok2.width), PREVIEW_LIMITS.STROKE_WIDTH_MIN, PREVIEW_LIMITS.STROKE_WIDTH_MAX),
-      // @ts-ignore
-      lineDash: getLineDash(originalSymbol.stroke),
-      // @ts-ignore
-      lineCap: isDashedBrush(originalSymbol.stroke) ? 'square' : 'round'
-    });
-    _this.originalSymbol = originalSymbol;
-    return _this;
-  }
-
-  _createClass(SGisPolylineSymbol, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      if (!isSimplePolylineSymbol(this.originalSymbol)) return _get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, feature, resolution, crs);
-      const {
-        ending,
-        beginningSize,
-        beginning,
-        endingSize
-      } = this.originalSymbol;
-      const renders = [];
-      const featureCopy = feature.clone();
-      const beginningMiterRender = getLineMiterRender({
-        color: this.strokeColor,
-        // @ts-ignore
-        kind: beginning,
-        position: 'left',
-        // @ts-ignore
-        size: beginningSize,
-        strokeWidth: this.strokeWidth
-      });
-      const endingMiterRender = getLineMiterRender({
-        color: this.strokeColor,
-        // @ts-ignore
-        kind: ending,
-        position: 'right',
-        // @ts-ignore
-        size: endingSize,
-        strokeWidth: this.strokeWidth
-      });
-
-      if (beginningMiterRender) {
-        const updatedRings = updateRingsForMiter(featureCopy.rings, 'left', beginningMiterRender.usageSize);
-        const render = beginningMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
-        featureCopy.rings = updatedRings;
-        renders.push(render);
-      }
+    } 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);
+      });
+    }
+  }
 
-      if (endingMiterRender) {
-        const updatedRings = updateRingsForMiter(featureCopy.rings, 'right', endingMiterRender.usageSize);
-        const render = endingMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
-        featureCopy.rings = updatedRings;
-        renders.push(render);
-      } // NOTE: линия должна быть в начале чтобы быть под митерами
+  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(",")
+    });
+  }
 
-      renders.unshift(..._get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, featureCopy, resolution, crs));
-      return renders;
-    }
-  }, {
-    key: "clone",
-    value: function clone() {
-      return new SGisPolylineSymbol(this.originalSymbol);
-    }
-  }]);
+  const rotatedAngle = SVGContainer.transform("rotate");
 
-  return SGisPolylineSymbol;
-}(PolylineSymbol);
+  if (rotatedAngle) {
+    SVGContainer.rotate(-rotatedAngle, 0, 0);
+  }
 
-let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
-  _inherits(LabelSymbol, _DynamicPointSymbol);
+  if (angle !== undefined) {
+    SVGContainer.rotate(angle * (180 / Math.PI), 0, 0);
+  }
 
-  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
+  return SVGContainer;
+};
 
-  function LabelSymbol(_temp) {
-    var _this;
+let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
+  _inherits(CircleLineMiterRender, _LineMiterRender);
 
-    let {
-      component,
-      offset
-    } = _temp === void 0 ? {} : _temp;
+  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
 
-    _classCallCheck(this, LabelSymbol);
+  function CircleLineMiterRender() {
+    _classCallCheck(this, CircleLineMiterRender);
 
-    _this = _super.call(this, {
-      offset
-    });
-    _this.component = component;
-    return _this;
+    return _super.apply(this, arguments);
   }
 
-  _createClass(LabelSymbol, [{
-    key: "_getFeatureNode",
-    value: function _getFeatureNode(feature) {
-      const node = document.createElement('div');
-      this.renderDom(feature.content, node);
-      return node;
+  _createClass(CircleLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth * 3;
     }
   }, {
-    key: "_updateFeatureNode",
-    value: function _updateFeatureNode(feature) {
-      this.renderDom(feature.content, this.getNode(feature));
+    key: "createRings",
+    value: function createRings(_ref, xMultiplier) {
+      let [x, y] = _ref;
+      return [[[x + (this.miterSize / 2 + this.strokeWidth) * xMultiplier, y]]];
     }
   }, {
-    key: "renderDom",
-    value: function renderDom(content, node) {
-      if (!node) {
-        return;
-      }
-
-      const Component = this.component;
-
-      if (Component) {
-        ReactDOM.render(React.createElement(Component, {
-          content: content
-        }), node);
-      } else {
-        node.innerText = content;
-      }
-    }
-  }]);
-
-  return LabelSymbol;
-}(DynamicPointSymbol);
-
-const defaultOffset = [8, -16];
-const createLabelSymbol = props => {
-  const {
-    offset = defaultOffset,
-    renderLabel = _ref => {
-      let {
-        content
-      } = _ref;
-      return React.createElement("div", null, content);
-    },
-    onClose = undefined
-  } = props || {};
-  return new LabelSymbol({
-    offset,
-    component: _ref2 => {
-      let {
-        content
-      } = _ref2;
-      return renderLabel({
-        content,
-        onClose
+    key: "createRender",
+    value: function createRender(miterRings) {
+      const isFilled = this.kind === LineMiterKind.FilledCircle;
+      return new PolyRender(polygonCircleFromPoint(miterRings[0][0], this.miterSize), {
+        fillColor: isFilled ? this.color : 'transparent',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth,
+        enclosed: true
       });
     }
-  });
-};
+  }]);
 
-function createShadowRender(position, _ref) {
-  let {
-    strokeWidth = 2,
-    shadowColor,
-    shadowSize,
-    size = 6
-  } = _ref;
-  const shadowDiameter = size + strokeWidth + shadowSize;
-  return new PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
-    fillColor: 'transparent',
-    strokeColor: shadowColor,
-    strokeWidth: shadowSize,
-    enclosed: true
-  });
-}
-function getEditorPointRenderer(position, _ref2) {
-  let {
-    strokeColor,
-    strokeWidth,
-    shadowColor,
-    fillColor,
-    shadowSize,
-    size = 0
-  } = _ref2;
-  return [createShadowRender(position, {
-    strokeWidth,
-    strokeColor,
-    shadowSize,
-    shadowColor,
-    size
-  }), new PolyRender(polygonCircleFromPoint(position, size), {
-    fillColor,
-    strokeColor,
-    strokeWidth,
-    enclosed: true
-  })];
-}
+  return CircleLineMiterRender;
+}(LineMiterRender);
 
-let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
-  _inherits(ShadowedPointSymbol, _PointSymbol);
+let SquareLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
+  _inherits(SquareLineMiterRender, _LineMiterRender);
 
-  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
+  var _super = /*#__PURE__*/_createSuper(SquareLineMiterRender);
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPointSymbol(options) {
-    _classCallCheck(this, ShadowedPointSymbol);
+  function SquareLineMiterRender() {
+    _classCallCheck(this, SquareLineMiterRender);
 
-    return _super.call(this, options);
+    return _super.apply(this, arguments);
   }
 
-  _createClass(ShadowedPointSymbol, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      if (!(feature instanceof PointFeature)) return [];
-      const {
-        position
-      } = feature.projectTo(crs);
-      const pxPosition = [position[0] / resolution + (this.offset[0] || 0), -position[1] / resolution + (this.offset[1] || 0)];
-      const shadowRender = this.getShadow(pxPosition, feature);
-      const pointArc = this.getPoint(pxPosition, feature);
-      return shadowRender ? [shadowRender, pointArc] : [pointArc];
-    }
-  }, {
-    key: "getShadow",
-    value: function getShadow(position, _feature) {
-      return ShadowedPointSymbol.getShadowArc(position, this);
-    }
-  }, {
-    key: "getPoint",
-    value: function getPoint(position, _feature) {
-      return ShadowedPointSymbol.getPointArc(position, this);
-    }
-  }], [{
-    key: "getShadowArc",
-    value: function getShadowArc(position, _ref) {
-      let {
-        strokeWidth = 2,
-        shadowColor,
-        shadowSize,
-        size = 6
-      } = _ref;
-      return new PolyRender(polygonCircleFromPoint(position, size + strokeWidth + shadowSize), {
-        fillColor: 'transparent',
-        strokeColor: shadowColor,
-        strokeWidth: shadowSize,
-        enclosed: true
-      });
+  _createClass(SquareLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth;
     }
   }, {
-    key: "getPointArc",
-    value: function getPointArc(position, _ref2) {
-      let {
-        strokeWidth,
-        fillColor,
-        strokeColor,
-        size = 6
-      } = _ref2;
-      return new PolyRender(polygonCircleFromPoint(position, size), {
-        fillColor,
-        strokeColor,
-        strokeWidth,
-        enclosed: true
-      });
+    key: "createRings",
+    value: function createRings(_ref, xMultiplier) {
+      let [x, y] = _ref;
+      return [[[x, y + this.miterSize / 2], [x, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y - this.miterSize / 2], [x + this.miterSize * xMultiplier, y + this.miterSize / 2]]];
     }
   }, {
-    key: "getArcs",
-    value: function getArcs(position, params) {
-      const shadowRender = ShadowedPointSymbol.getShadowArc(position, params);
-      const pointRender = ShadowedPointSymbol.getPointArc(position, params);
-      return shadowRender ? [shadowRender, pointRender] : [pointRender];
+    key: "createRender",
+    value: function createRender(miterRings) {
+      const isFilled = this.kind === LineMiterKind.FilledSquare;
+      return new PolyRender(miterRings, {
+        enclosed: true,
+        fillColor: isFilled ? this.color : void 0,
+        fillStyle: isFilled ? FillStyle.Color : FillStyle.None,
+        lineCap: 'square',
+        lineJoin: 'miter',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth
+      });
     }
   }]);
 
-  return ShadowedPointSymbol;
-}(PointSymbol);
+  return SquareLineMiterRender;
+}(LineMiterRender);
 
-let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
-  _inherits(ShadowedPolySymbol, _PolylineSymbol);
+const getLineMiterRender = options => {
+  switch (options.kind) {
+    case LineMiterKind.Arrow:
+    case LineMiterKind.FilledArrow:
+      return new ArrowLineMiterRender(options);
 
-  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
+    case LineMiterKind.Square:
+    case LineMiterKind.FilledSquare:
+      return new SquareLineMiterRender(options);
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPolySymbol(options) {
-    _classCallCheck(this, ShadowedPolySymbol);
+    case LineMiterKind.Circle:
+    case LineMiterKind.FilledCircle:
+      return new CircleLineMiterRender(options);
 
-    return _super.call(this, options);
+    default:
+      return null;
   }
+};
 
-  _createClass(ShadowedPolySymbol, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      if (!(feature instanceof Poly)) return [];
-
-      const coordinates = _get(_getPrototypeOf(ShadowedPolySymbol.prototype), "getRenderedCoordinates", this).call(this, feature, resolution, crs);
+const updateRingForRightMiter = (ring, miterSize, isLastRing) => {
+  const reversedRing = ring.slice().reverse();
 
-      const polyRender = this.getPolyRender(coordinates, feature);
-      const shadowRender = this.getShadow(coordinates, feature);
-      const vertexRenders = this.getVertexRenders(coordinates);
-      let renders = [polyRender];
+  for (let i = 0; i < reversedRing.length; i++) {
+    const coordinates = reversedRing[i];
 
-      if (shadowRender) {
-        renders = [shadowRender, polyRender];
-      }
+    if (isLastRing && i === 0) {
+      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
+    }
 
-      if (vertexRenders) {
-        renders = renders.concat(vertexRenders);
-      }
+    const nextCoordinates = reversedRing[i - 1];
 
-      return renders;
-    }
-  }, {
-    key: "getShadow",
-    value: function getShadow(coordinates, _feature) {
-      return new PolyRender(coordinates, {
-        fillStyle: FillStyle.None,
-        enclosed: this.enclose,
-        strokeColor: this.shadowColor,
-        strokeWidth: this.shadowSize,
-        lineDash: this.lineDash
-      });
-    }
-  }, {
-    key: "getPolyRender",
-    value: function getPolyRender(coordinates, _feature) {
-      return new PolyRender(coordinates, {
-        fillStyle: this.enclose ? FillStyle.Color : FillStyle.None,
-        enclosed: this.enclose,
-        fillColor: this.fillColor,
-        strokeColor: this.strokeColor,
-        strokeWidth: this.strokeWidth,
-        lineDash: this.lineDash
-      });
-    }
-  }, {
-    key: "getVertexRenders",
-    value: function getVertexRenders(coordinates) {
-      if (!this.showVertex) return;
-      const vertexCoordinates = coordinates.reduce((acc, curr) => {
-        return acc.concat(curr);
-      }, []);
-      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
-        size: 6,
-        strokeWidth: 2,
-        shadowColor: this.shadowColor,
-        strokeColor: this.strokeColor,
-        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
-        fillColor: '#ffffff'
-      })).reduce((acc, curr) => acc.concat(curr), []);
+    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
+      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
     }
-  }]);
+  }
 
-  return ShadowedPolySymbol;
-}(PolylineSymbol);
-const polySymbolParams = {
-  strokeWidth: 2,
-  strokeColor: '#e33600',
-  shadowSize: 8,
-  shadowColor: 'rgba(227, 54, 0, 0.3)'
-};
-const measureSymbolParams = {
-  strokeColor: '#ff6933',
-  shadowSize: 0,
-  vertexShadowSize: 0
-};
-const measureLengthSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
-  enclose: false,
-  showVertex: true
-}));
-const measureAreaSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
-  fillColor: 'rgba(255, 105, 51, 0.25)',
-  enclose: true,
-  showVertex: true
-}));
-const snapSymbolParams = {
-  size: 10,
-  strokeWidth: 2,
-  strokeColor: '#e33600',
-  fillColor: '#ffffff',
-  shadowColor: 'rgba(227, 54, 0, 0.3)',
-  shadowSize: 3
+  return reversedRing.reverse();
 };
-const measurePolygonSnapSymbol = /*#__PURE__*/new ShadowedPointSymbol( /*#__PURE__*/_extends({}, snapSymbolParams, {
-  strokeColor: '#ff6933',
-  shadowSize: 0
-}));
 
-let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
-  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
+const updateRingForLeftMiter = (ring, miterSize, isFirstRing) => {
+  const newRing = ring.slice();
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
+  for (let i = 0; i < newRing.length; i++) {
+    const coordinates = newRing[i];
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPointSymbol(props) {
-    _classCallCheck(this, SelectedPointSymbol);
+    if (i === 0 && isFirstRing) {
+      newRing[i] = [coordinates[0] + miterSize, coordinates[1]];
+    }
 
-    return _super.call(this, props);
-  }
+    const prevCoordinates = newRing[i - 1];
 
-  _createClass(SelectedPointSymbol, [{
-    key: "getShadow",
-    value: function getShadow(position, feature) {
-      if (feature.isSelected) {
-        return _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getShadow", this).call(this, position, feature);
-      }
+    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
+      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
     }
-  }, {
-    key: "getPoint",
-    value: function getPoint(position, feature) {
-      const pointRender = _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getPoint", this).call(this, position, feature);
+  }
 
-      if (feature.isSelected) {
-        pointRender.strokeColor = this.selectedStrokeColor;
-        pointRender.fillColor = this.selectedFillColor;
-      }
+  return newRing;
+};
 
-      return pointRender;
+const updateRingsForMiter = (rings, position, miterSize) => {
+  return rings.map((ring, ringIndex) => {
+    switch (position) {
+      case 'right':
+        return updateRingForRightMiter(ring, miterSize, ringIndex === rings.length - 1);
+
+      default:
+        return updateRingForLeftMiter(ring, miterSize, ringIndex === 0);
     }
-  }]);
+  });
+};
 
-  return SelectedPointSymbol;
-}(ShadowedPointSymbol);
+const copyRings = rings => rings.map(ring => ring.map(coordinates => coordinates.slice()));
+let SGisPolylineSymbol = /*#__PURE__*/function (_sPolylineSymbol) {
+  _inherits(SGisPolylineSymbol, _sPolylineSymbol);
 
-let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
-  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
+  var _super = /*#__PURE__*/_createSuper(SGisPolylineSymbol);
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
+  function SGisPolylineSymbol(originalSymbol) {
+    var _originalSymbol$strok, _originalSymbol$strok2;
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPolySymbol(props) {
-    _classCallCheck(this, SelectedPolySymbol);
+    var _this;
 
-    return _super.call(this, props);
+    _classCallCheck(this, SGisPolylineSymbol);
+
+    _this = _super.call(this, {
+      // @ts-ignore
+      strokeColor: getHexColor(getParameterValue((_originalSymbol$strok = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok.color)),
+      strokeWidth: clamp( // @ts-ignore
+      getParameterValue((_originalSymbol$strok2 = originalSymbol.stroke) == null ? void 0 : _originalSymbol$strok2.width), PREVIEW_LIMITS.STROKE_WIDTH_MIN, PREVIEW_LIMITS.STROKE_WIDTH_MAX),
+      // @ts-ignore
+      lineDash: getLineDash(originalSymbol.stroke),
+      // @ts-ignore
+      lineCap: isDashedBrush(originalSymbol.stroke) ? 'square' : 'round'
+    });
+    _this.originalSymbol = originalSymbol;
+    return _this;
   }
 
-  _createClass(SelectedPolySymbol, [{
-    key: "getShadow",
-    value: function getShadow(coordinates, feature) {
-      if (feature.isSelected) {
-        return _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getShadow", this).call(this, coordinates, feature);
-      }
-    }
-  }, {
-    key: "getPolyRender",
-    value: function getPolyRender(coordinates, feature) {
-      const polyRender = _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getPolyRender", this).call(this, coordinates, feature);
+  _createClass(SGisPolylineSymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!isSimplePolylineSymbol(this.originalSymbol)) return _get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, feature, resolution, crs);
+      const {
+        ending,
+        beginningSize,
+        beginning,
+        endingSize
+      } = this.originalSymbol;
+      const renders = [];
+      const featureCopy = feature.clone();
+      const beginningMiterRender = getLineMiterRender({
+        color: this.strokeColor,
+        // @ts-ignore
+        kind: beginning,
+        position: 'left',
+        // @ts-ignore
+        size: beginningSize,
+        strokeWidth: this.strokeWidth
+      });
+      const endingMiterRender = getLineMiterRender({
+        color: this.strokeColor,
+        // @ts-ignore
+        kind: ending,
+        position: 'right',
+        // @ts-ignore
+        size: endingSize,
+        strokeWidth: this.strokeWidth
+      });
+
+      if (beginningMiterRender) {
+        const updatedRings = updateRingsForMiter(featureCopy.rings, 'left', beginningMiterRender.usageSize);
+        const render = beginningMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
+        featureCopy.rings = updatedRings;
+        renders.push(render);
+      }
 
-      if (feature.isSelected) {
-        polyRender.fillColor = this.selectedFillColor;
-        polyRender.strokeColor = this.selectedStrokeColor;
+      if (endingMiterRender) {
+        const updatedRings = updateRingsForMiter(featureCopy.rings, 'right', endingMiterRender.usageSize);
+        const render = endingMiterRender.getRender(updatedRings, feature.crs, resolution, crs);
+        featureCopy.rings = updatedRings;
+        renders.push(render);
+      } // NOTE: линия должна быть в начале чтобы быть под митерами
 
-        if (this.selectedStrokeWidth !== void 0) {
-          polyRender.strokeWidth = this.selectedStrokeWidth;
-        }
-      }
 
-      return polyRender;
+      renders.unshift(..._get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, featureCopy, resolution, crs));
+      return renders;
+    }
+  }, {
+    key: "clone",
+    value: function clone() {
+      return new SGisPolylineSymbol(this.originalSymbol);
     }
   }]);
 
-  return SelectedPolySymbol;
-}(ShadowedPolySymbol);
-
-const selectedPoint = /*#__PURE__*/new SelectedPointSymbol({
-  size: 8,
-  strokeWidth: 2,
-  strokeColor: 'rgba(255, 87, 34, 0.3)',
-  fillColor: 'rgba(255, 255, 255, 0.65)',
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  shadowSize: 3,
-  selectedStrokeColor: '#ff5722',
-  selectedFillColor: 'rgba(255, 255, 255, 0.65)'
-});
-const selectedPolyline = /*#__PURE__*/new SelectedPolySymbol({
-  strokeWidth: 6,
-  strokeColor: 'rgba(255, 87, 34, 0.2)',
-  shadowSize: 8,
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  selectedStrokeColor: '#ff5722',
-  selectedStrokeWidth: 2
-});
-const selectedPolygon = /*#__PURE__*/new SelectedPolySymbol({
-  strokeWidth: 2,
-  strokeColor: 'rgba(255, 87, 34, 0.3)',
-  shadowSize: 8,
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  fillColor: 'rgba(255, 255, 255, 0.36)',
-  enclose: true,
-  selectedFillColor: 'rgba(255, 255, 255, 0.56)',
-  selectedStrokeColor: '#ff5722'
-});
+  return SGisPolylineSymbol;
+}(PolylineSymbol);
 
-const defaultPathStyles = {
-  strokeWidth: 2,
-  strokeColor: 'rgb(0, 163, 245)',
-  fillStyle: FillStyle.None
-};
-let SVGPoly = /*#__PURE__*/function (_Symbol) {
-  _inherits(SVGPoly, _Symbol);
+let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
+  _inherits(LabelSymbol, _DynamicPointSymbol);
 
-  var _super = /*#__PURE__*/_createSuper(SVGPoly);
+  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
 
-  function SVGPoly(_temp) {
+  function LabelSymbol(_temp) {
     var _this;
 
     let {
-      redrawFeatureNode,
-      pathStyles,
-      circle,
-      className,
-      appendToSvg
+      component,
+      offset
     } = _temp === void 0 ? {} : _temp;
 
-    _classCallCheck(this, SVGPoly);
+    _classCallCheck(this, LabelSymbol);
 
-    _this = _super.call(this);
-    _this.container = document.createElement('div');
-    _this.container.style.position = 'absolute';
-    _this.redrawFeatureNode = redrawFeatureNode;
-    _this.pathStyles = _extends({
-      center: [0, 0],
-      fillColor: 'none'
-    }, pathStyles);
-    _this.circle = circle;
-    _this.className = className;
-    _this.appendToSvg = appendToSvg;
+    _this = _super.call(this, {
+      offset
+    });
+    _this.component = component;
     return _this;
   }
 
-  _createClass(SVGPoly, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      const coordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-      this.setCirclePxRaius(crs);
-      this.container.innerHTML = '';
-      const svg = this.setSvg(coordinates);
-      svg && this.container.append(svg);
-      feature.__dynamicSymbolRender = new DynamicRender({
-        node: this.container,
-        update: (bbox, resolution) => this.update({
-          bbox,
-          resolution,
-          feature,
-          crs
-        }),
-        redraw: () => {
-          this.redrawFeatureNode && this.redrawFeatureNode(feature);
-        }
-      });
-
-      this._setEventListeners(feature);
-
-      return [feature.__dynamicSymbolRender];
+  _createClass(LabelSymbol, [{
+    key: "_getFeatureNode",
+    value: function _getFeatureNode(feature) {
+      const node = document.createElement('div');
+      this.renderDom(feature.content, node);
+      return node;
     }
   }, {
-    key: "setCirclePxRaius",
-    value: function setCirclePxRaius(crs) {
-      if (this.circle && this.pathStyles) {
-        var _this$circle;
-
-        this.pathStyles.radius = metersToPixels(this.circle.radius, {
-          painter: this.circle.painter,
-          crs
-        }) + (((_this$circle = this.circle) == null ? void 0 : _this$circle.pxOffset) || 0);
-      }
+    key: "_updateFeatureNode",
+    value: function _updateFeatureNode(feature) {
+      this.renderDom(feature.content, this.getNode(feature));
     }
   }, {
-    key: "update",
-    value: function update(_ref) {
-      var _this$pathStyles, _this$pathStyles2, _this$pathStyles3, _this$pathStyles4;
+    key: "renderDom",
+    value: function renderDom(content, node) {
+      if (!node) {
+        return;
+      }
 
-      let {
-        bbox,
-        resolution,
-        feature,
-        crs
-      } = _ref;
-      if (!feature) return;
-      if (!bbox) bbox = feature.__lastBbox;
-      if (!resolution) resolution = feature.__lastResolution;
-      if (!bbox || !resolution || !feature.crs.canProjectTo(bbox.crs)) return;
+      const Component = this.component;
 
-      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
-        const newCoordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-        this.setCirclePxRaius(crs);
-        this.container.innerHTML = '';
-        const svg = this.setSvg(newCoordinates);
-        svg && this.container.append(svg);
+      if (Component) {
+        ReactDOM.render(React.createElement(Component, {
+          content: content
+        }), node);
+      } else {
+        node.innerText = content;
       }
+    }
+  }]);
 
-      const polygon = feature.projectTo(bbox.crs);
-      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
-      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
-      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
-      this.container.style.left = dx.toString() + "px";
-      this.container.style.top = dy.toString() + "px";
-      feature.__lastBbox = bbox;
-      feature.__lastResolution = resolution;
+  return LabelSymbol;
+}(DynamicPointSymbol);
+
+const defaultOffset = [8, -16];
+const createLabelSymbol = props => {
+  const {
+    offset = defaultOffset,
+    renderLabel = _ref => {
+      let {
+        content
+      } = _ref;
+      return React.createElement("div", null, content);
+    },
+    onClose = undefined
+  } = props || {};
+  return new LabelSymbol({
+    offset,
+    component: _ref2 => {
+      let {
+        content
+      } = _ref2;
+      return renderLabel({
+        content,
+        onClose
+      });
     }
-  }, {
-    key: "setSvg",
-    value: function setSvg(coordinates) {
-      const {
-        lineCap,
-        lineJoin,
-        miterLimit,
-        lineDash,
-        dashOffset
-      } = this.pathStyles || {};
-      const svgRender = new SvgRender(_extends({
-        coordinates
-      }, defaultPathStyles, {
-        appendToSvg: this.appendToSvg
-      }, this.pathStyles));
+  });
+};
+
+function createShadowRender(position, _ref) {
+  let {
+    strokeWidth = 2,
+    shadowColor,
+    shadowSize,
+    size = 6
+  } = _ref;
+  const shadowDiameter = size + strokeWidth + shadowSize;
+  return new PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
+    fillColor: 'transparent',
+    strokeColor: shadowColor,
+    strokeWidth: shadowSize,
+    enclosed: true
+  });
+}
+function getEditorPointRenderer(position, _ref2) {
+  let {
+    strokeColor,
+    strokeWidth,
+    shadowColor,
+    fillColor,
+    shadowSize,
+    size = 0
+  } = _ref2;
+  return [createShadowRender(position, {
+    strokeWidth,
+    strokeColor,
+    shadowSize,
+    shadowColor,
+    size
+  }), new PolyRender(polygonCircleFromPoint(position, size), {
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    enclosed: true
+  })];
+}
 
-      if (this.circle) {
-        svgRender._setArcNode();
-      } else {
-        svgRender._setPolyNode();
-      }
+let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
+  _inherits(ShadowedPointSymbol, _PointSymbol);
 
-      let svgElement;
-      svgRender.getNode((_, svg) => {
-        svgElement = svg;
-        this.className && svgElement.classList.add(this.className);
-        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
+  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
 
-        if (path) {
-          path.setAttribute('stroke-linecap', lineCap || 'round');
-          path.setAttribute('stroke-linejoin', lineJoin || 'round');
-          path.setAttribute('stroke-miterlimit', (miterLimit || 10).toString());
-          path.setAttribute('stroke-dashoffset', (dashOffset || 0).toString());
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPointSymbol(options) {
+    _classCallCheck(this, ShadowedPointSymbol);
 
-          if (this.circle) {
-            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
-          }
-        }
+    return _super.call(this, options);
+  }
+
+  _createClass(ShadowedPointSymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof PointFeature)) return [];
+      const {
+        position
+      } = feature.projectTo(crs);
+      const pxPosition = [position[0] / resolution + (this.offset[0] || 0), -position[1] / resolution + (this.offset[1] || 0)];
+      const shadowRender = this.getShadow(pxPosition, feature);
+      const pointArc = this.getPoint(pxPosition, feature);
+      return shadowRender ? [shadowRender, pointArc] : [pointArc];
+    }
+  }, {
+    key: "getShadow",
+    value: function getShadow(position, _feature) {
+      return ShadowedPointSymbol.getShadowArc(position, this);
+    }
+  }, {
+    key: "getPoint",
+    value: function getPoint(position, _feature) {
+      return ShadowedPointSymbol.getPointArc(position, this);
+    }
+  }], [{
+    key: "getShadowArc",
+    value: function getShadowArc(position, _ref) {
+      let {
+        strokeWidth = 2,
+        shadowColor,
+        shadowSize,
+        size = 6
+      } = _ref;
+      return new PolyRender(polygonCircleFromPoint(position, size + strokeWidth + shadowSize), {
+        fillColor: 'transparent',
+        strokeColor: shadowColor,
+        strokeWidth: shadowSize,
+        enclosed: true
       });
-      return svgElement;
     }
   }, {
-    key: "_setEventListeners",
-    value: function _setEventListeners(dynamicFeature) {
-      var _dynamicFeature$__dyn;
-
-      if (dynamicFeature.eventFlags === MouseEventFlags.None) return;
-      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
-      Object.keys(mouseEvents).forEach(eventName => {
-        if (dynamicFeature.eventFlags & mouseEvents[eventName].flag) {
-          listenDomEvent(svgNode, mouseEvents[eventName].type, event => {
-            dynamicFeature.fire(mouseEvents[eventName].type, {
-              node: svgNode,
-              browserEvent: event
-            });
-          });
-        }
+    key: "getPointArc",
+    value: function getPointArc(position, _ref2) {
+      let {
+        strokeWidth,
+        fillColor,
+        strokeColor,
+        size = 6
+      } = _ref2;
+      return new PolyRender(polygonCircleFromPoint(position, size), {
+        fillColor,
+        strokeColor,
+        strokeWidth,
+        enclosed: true
       });
     }
+  }, {
+    key: "getArcs",
+    value: function getArcs(position, params) {
+      const shadowRender = ShadowedPointSymbol.getShadowArc(position, params);
+      const pointRender = ShadowedPointSymbol.getPointArc(position, params);
+      return shadowRender ? [shadowRender, pointRender] : [pointRender];
+    }
   }]);
 
-  return SVGPoly;
-}(Symbol$1);
-
-function isSGisPointSymbol(symbol) {
-  return symbol instanceof PointSymbol || symbol instanceof StaticImageSymbol || symbol instanceof SquareSymbol || symbol instanceof MaskedImage;
-}
-function isSGisImageSymbol(symbol) {
-  return symbol instanceof StaticImageSymbol || symbol instanceof MaskedImage;
-}
-function isSGisPolygonSymbol(symbol) {
-  return symbol instanceof PolygonSymbol || symbol instanceof BrushFill || symbol instanceof ImageFill;
-}
-function isSGisPolylineSymbol(symbol) {
-  return symbol instanceof PolylineSymbol;
-}
-function isSGisH3Symbol(symbol) {
-  return symbol instanceof H3Symbol;
-}
-function isSGisClusterSymbol(symbol) {
-  return !!symbol.singleObjectSymbol;
-}
+  return ShadowedPointSymbol;
+}(PointSymbol);
 
-/**
- * Моки фич для отображения превью символа
- * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
- */
+let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
+  _inherits(ShadowedPolySymbol, _PolylineSymbol);
 
-const viewBoxSize = 100;
-const pointFeature = /*#__PURE__*/new PointFeature([50, -50], {
-  crs: plain
-});
-const lineFeature = /*#__PURE__*/new Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
-  crs: plain
-});
-const polygonFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
-  crs: plain
-});
-const h3gridFeature = /*#__PURE__*/new H3Feature([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
-  crs: plain
-});
-const lineLegendFeature = /*#__PURE__*/new Polyline([[0, -50], [100, -50]], {
-  crs: plain
-});
-const polygonLegendFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
-  crs: plain
-});
-const polygonMapLegendFeature = /*#__PURE__*/new Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
-  crs: plain
-});
-const MAP_LEGEND_FEATURES = {
-  polygon: polygonMapLegendFeature
-};
-const LEGEND_FEATURES = {
-  point: pointFeature,
-  polyline: lineLegendFeature,
-  polygon: polygonLegendFeature,
-  h3grid: h3gridFeature
-};
-const MOCK_FEATURES = {
-  point: pointFeature,
-  polyline: lineFeature,
-  polygon: polygonFeature,
-  h3grid: h3gridFeature
-};
+  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
 
-function getSymbolRenders(symbol, size, features) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPolySymbol(options) {
+    _classCallCheck(this, ShadowedPolySymbol);
 
-  if (features === void 0) {
-    features = {};
+    return _super.call(this, options);
   }
 
-  const resolution = viewBoxSize / size;
-
-  const featuresToRender = _extends({}, MOCK_FEATURES, features);
+  _createClass(ShadowedPolySymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof Poly)) return [];
 
-  if (isSGisPolygonSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
-  }
+      const coordinates = _get(_getPrototypeOf(ShadowedPolySymbol.prototype), "getRenderedCoordinates", this).call(this, feature, resolution, crs);
 
-  if (isSGisPolylineSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
-  }
+      const polyRender = this.getPolyRender(coordinates, feature);
+      const shadowRender = this.getShadow(coordinates, feature);
+      const vertexRenders = this.getVertexRenders(coordinates);
+      let renders = [polyRender];
 
-  if (isSGisH3Symbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.h3grid, resolution, plain);
-  }
+      if (shadowRender) {
+        renders = [shadowRender, polyRender];
+      }
 
-  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
-}
-const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+      if (vertexRenders) {
+        renders = renders.concat(vertexRenders);
+      }
 
-  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
-};
-const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+      return renders;
+    }
+  }, {
+    key: "getShadow",
+    value: function getShadow(coordinates, _feature) {
+      return new PolyRender(coordinates, {
+        fillStyle: FillStyle.None,
+        enclosed: this.enclose,
+        strokeColor: this.shadowColor,
+        strokeWidth: this.shadowSize,
+        lineDash: this.lineDash
+      });
+    }
+  }, {
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, _feature) {
+      return new PolyRender(coordinates, {
+        fillStyle: this.enclose ? FillStyle.Color : FillStyle.None,
+        enclosed: this.enclose,
+        fillColor: this.fillColor,
+        strokeColor: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        lineDash: this.lineDash
+      });
+    }
+  }, {
+    key: "getVertexRenders",
+    value: function getVertexRenders(coordinates) {
+      if (!this.showVertex) return;
+      const vertexCoordinates = coordinates.reduce((acc, curr) => {
+        return acc.concat(curr);
+      }, []);
+      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
+        size: 6,
+        strokeWidth: 2,
+        shadowColor: this.shadowColor,
+        strokeColor: this.strokeColor,
+        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
+        fillColor: '#ffffff'
+      })).reduce((acc, curr) => acc.concat(curr), []);
+    }
+  }]);
 
-  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
+  return ShadowedPolySymbol;
+}(PolylineSymbol);
+const polySymbolParams = {
+  strokeWidth: 2,
+  strokeColor: '#e33600',
+  shadowSize: 8,
+  shadowColor: 'rgba(227, 54, 0, 0.3)'
 };
+const measureSymbolParams = {
+  strokeColor: '#ff6933',
+  shadowSize: 0,
+  vertexShadowSize: 0
+};
+const measureLengthSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
+  enclose: false,
+  showVertex: true
+}));
+const measureAreaSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
+  fillColor: 'rgba(255, 105, 51, 0.25)',
+  enclose: true,
+  showVertex: true
+}));
+const snapSymbolParams = {
+  size: 10,
+  strokeWidth: 2,
+  strokeColor: '#e33600',
+  fillColor: '#ffffff',
+  shadowColor: 'rgba(227, 54, 0, 0.3)',
+  shadowSize: 3
+};
+const measurePolygonSnapSymbol = /*#__PURE__*/new ShadowedPointSymbol( /*#__PURE__*/_extends({}, snapSymbolParams, {
+  strokeColor: '#ff6933',
+  shadowSize: 0
+}));
 
-function renderSymbolToCanvas(renders, canvas) {
-  renders.forEach(render => {
-    canvas.draw(render);
-  });
-}
-
-function deserializeSymbol(symbol) {
-  switch (symbol.type) {
-    case "h3grid":
-      return deserializeH3Symbol(symbol);
-
-    case "svgPointSymbol":
-      return deserializeSvgPointSymbol(symbol);
-
-    case 'circlePointSymbol':
-      return deserializePointSymbol(symbol);
-
-    case 'squarePointSymbol':
-      return deserializeSquareSymbol(symbol);
-
-    case 'maskedImagePointSymbol':
-      return deserializeMaskedImageSymbol(symbol);
+let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
+  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
 
-    case 'imagePointSymbol':
-      return deserializeImagePointSymbol(symbol);
+  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
 
-    case 'polygonSymbol':
-      return deserializePolygonSymbol(symbol);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPointSymbol(props) {
+    _classCallCheck(this, SelectedPointSymbol);
 
-    case 'simplePolylineSymbol':
-    case 'polylineSymbol':
-      return deserializePolylineSymbol(symbol);
+    return _super.call(this, props);
+  }
 
-    case "clusterSymbol":
-      return deserializeSymbol(symbol.singleObjectSymbol);
+  _createClass(SelectedPointSymbol, [{
+    key: "getShadow",
+    value: function getShadow(position, feature) {
+      if (feature.isSelected) {
+        return _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getShadow", this).call(this, position, feature);
+      }
+    }
+  }, {
+    key: "getPoint",
+    value: function getPoint(position, feature) {
+      const pointRender = _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getPoint", this).call(this, position, feature);
 
-    default:
-      return null;
-  }
-}
+      if (feature.isSelected) {
+        pointRender.strokeColor = this.selectedStrokeColor;
+        pointRender.fillColor = this.selectedFillColor;
+      }
 
-function deserializeH3Symbol(symbol) {
-  var _symbol$stroke, _symbol$stroke2, _symbol$fill;
+      return pointRender;
+    }
+  }]);
 
-  return new H3Symbol(_extends({}, symbol, {
-    cellSize: getParameterValue(symbol.cellSize),
-    strokeWidth: getParameterValue(symbol == null ? void 0 : (_symbol$stroke = symbol.stroke) == null ? void 0 : _symbol$stroke.width),
-    strokeColor: getParameterValue(symbol == null ? void 0 : (_symbol$stroke2 = symbol.stroke) == null ? void 0 : _symbol$stroke2.color),
-    fillColor: getParameterValue(symbol == null ? void 0 : (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color)
-  }));
-}
+  return SelectedPointSymbol;
+}(ShadowedPointSymbol);
 
-function deserializePointSymbol(symbol) {
-  // @ts-ignore
-  return new PointSymbol(deserializePointSymbolParams(symbol));
-}
+let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
+  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
 
-const getOffsetParameterValue = offset => [getParameterValue(offset == null ? void 0 : offset[0]), getParameterValue(offset == null ? void 0 : offset[1])];
+  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
 
-function deserializeSvgPointSymbolParams(_ref) {
-  let {
-    type,
-    data,
-    size,
-    offset,
-    angle,
-    background,
-    figure
-  } = _ref;
-  return _extends({
-    type: getParameterValue(type),
-    data: getParameterValue(data),
-    size: getParameterValue(size),
-    offset: getOffsetParameterValue(offset),
-    angle: getParameterValue(angle)
-  }, background ? {
-    background: _extends({}, background, {
-      fillColor: deserializeColor(getParameterValue(background == null ? void 0 : background.fillColor)),
-      strokeColor: deserializeColor(getParameterValue(background == null ? void 0 : background.strokeColor)),
-      strokeWidth: getParameterValue(background == null ? void 0 : background.strokeWidth)
-    })
-  } : {}, figure ? {
-    figure: _extends({}, figure, {
-      fillColor: deserializeColor(getParameterValue(figure == null ? void 0 : figure.fillColor))
-    })
-  } : {});
-}
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPolySymbol(props) {
+    _classCallCheck(this, SelectedPolySymbol);
 
-function deserializeSvgPointSymbol(symbol) {
-  return new PointSymbol(deserializeSvgPointSymbolParams(symbol));
-}
+    return _super.call(this, props);
+  }
 
-function deserializeSquareSymbol(symbol) {
-  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle)
-  }));
-}
+  _createClass(SelectedPolySymbol, [{
+    key: "getShadow",
+    value: function getShadow(coordinates, feature) {
+      if (feature.isSelected) {
+        return _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getShadow", this).call(this, coordinates, feature);
+      }
+    }
+  }, {
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, feature) {
+      const polyRender = _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getPolyRender", this).call(this, coordinates, feature);
 
-function deserializeMaskedImageSymbol(symbol) {
-  return new MaskedImage(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    imageSource: deserializeBase64(symbol.image),
-    // @ts-ignore
-    maskSource: deserializeBase64(symbol.imageMask),
-    // @ts-ignore
-    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
-  }));
-}
+      if (feature.isSelected) {
+        polyRender.fillColor = this.selectedFillColor;
+        polyRender.strokeColor = this.selectedStrokeColor;
 
-function deserializeImagePointSymbol(symbol) {
-  return new StaticImageSymbol(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    source: deserializeBase64(symbol.image)
-  }));
-}
+        if (this.selectedStrokeWidth !== void 0) {
+          polyRender.strokeWidth = this.selectedStrokeWidth;
+        }
+      }
 
-function deserializePolygonSymbol(symbol) {
-  if (isPolygonHasPatternBrush(symbol)) {
-    return new SGisImageFill(symbol);
-  }
+      return polyRender;
+    }
+  }]);
 
-  if (isPolygonHasHatchBrush(symbol)) {
-    return new SGisBrushFill(symbol);
-  }
+  return SelectedPolySymbol;
+}(ShadowedPolySymbol);
 
-  return new SGisPolygonSymbol(symbol);
-}
+const selectedPoint = /*#__PURE__*/new SelectedPointSymbol({
+  size: 8,
+  strokeWidth: 2,
+  strokeColor: 'rgba(255, 87, 34, 0.3)',
+  fillColor: 'rgba(255, 255, 255, 0.65)',
+  shadowColor: 'rgba(255, 87, 34, 0.3)',
+  shadowSize: 3,
+  selectedStrokeColor: '#ff5722',
+  selectedFillColor: 'rgba(255, 255, 255, 0.65)'
+});
+const selectedPolyline = /*#__PURE__*/new SelectedPolySymbol({
+  strokeWidth: 6,
+  strokeColor: 'rgba(255, 87, 34, 0.2)',
+  shadowSize: 8,
+  shadowColor: 'rgba(255, 87, 34, 0.3)',
+  selectedStrokeColor: '#ff5722',
+  selectedStrokeWidth: 2
+});
+const selectedPolygon = /*#__PURE__*/new SelectedPolySymbol({
+  strokeWidth: 2,
+  strokeColor: 'rgba(255, 87, 34, 0.3)',
+  shadowSize: 8,
+  shadowColor: 'rgba(255, 87, 34, 0.3)',
+  fillColor: 'rgba(255, 255, 255, 0.36)',
+  enclose: true,
+  selectedFillColor: 'rgba(255, 255, 255, 0.56)',
+  selectedStrokeColor: '#ff5722'
+});
 
-function deserializePolylineSymbol(symbol) {
-  return new SGisPolylineSymbol(symbol);
-}
+const defaultPathStyles = {
+  strokeWidth: 2,
+  strokeColor: 'rgb(0, 163, 245)',
+  fillStyle: FillStyle.None
+};
+let SVGPoly = /*#__PURE__*/function (_Symbol) {
+  _inherits(SVGPoly, _Symbol);
 
-function deserializePointSymbolParams(_ref2) {
-  let {
-    size,
-    offset,
-    strokeColor,
-    strokeWidth,
-    fillColor
-  } = _ref2;
-  return {
-    size: getParameterValue(size),
-    offset: deserializeAnchor(offset),
-    strokeWidth: getParameterValue(strokeWidth),
-    strokeColor: deserializeColor(getParameterValue(strokeColor)),
-    fillColor: deserializeColor(getParameterValue(fillColor))
-  };
-}
+  var _super = /*#__PURE__*/_createSuper(SVGPoly);
 
-function deserializeBase64(base) {
-  return "data:image/png;base64," + base;
-}
+  function SVGPoly(_temp) {
+    var _this;
 
-function deserializeAnchor(offset) {
-  // @ts-ignore
-  return offset.map(getParameterValue);
-}
+    let {
+      redrawFeatureNode,
+      pathStyles,
+      circle,
+      className,
+      appendToSvg
+    } = _temp === void 0 ? {} : _temp;
 
-function deserializeColor(color) {
-  return color ? new Color(color).toString() : null;
-}
+    _classCallCheck(this, SVGPoly);
 
-const clampSymbol = (symbol, min, max) => {
-  if (isSGisImageSymbol(symbol)) {
-    symbol.width = clamp(symbol.width, min, max);
-    symbol.height = clamp(symbol.height, min, max);
-  } else if (isSGisPointSymbol(symbol)) {
-    symbol.size = clamp(symbol.size, min, max);
+    _this = _super.call(this);
+    _this.container = document.createElement('div');
+    _this.container.style.position = 'absolute';
+    _this.redrawFeatureNode = redrawFeatureNode;
+    _this.pathStyles = _extends({
+      center: [0, 0],
+      fillColor: 'none'
+    }, pathStyles);
+    _this.circle = circle;
+    _this.className = className;
+    _this.appendToSvg = appendToSvg;
+    return _this;
   }
 
-  return symbol;
-};
-function centerAlignSymbol(symbol) {
-  if (isSGisImageSymbol(symbol)) {
-    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
-  } else if (isSGisPointSymbol(symbol)) {
-    symbol.offset = [0, 0];
-  }
+  _createClass(SVGPoly, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      const coordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+      this.setCirclePxRaius(crs);
+      this.container.innerHTML = '';
+      const svg = this.setSvg(coordinates);
+      svg && this.container.append(svg);
+      feature.__dynamicSymbolRender = new DynamicRender({
+        node: this.container,
+        update: (bbox, resolution) => this.update({
+          bbox,
+          resolution,
+          feature,
+          crs
+        }),
+        redraw: () => {
+          this.redrawFeatureNode && this.redrawFeatureNode(feature);
+        }
+      });
 
-  return symbol;
-}
-const adjustSymbol = (symbol, _ref) => {
-  let {
-    size
-  } = _ref;
-  return centerAlignSymbol(clampSymbol(symbol, 0, size));
-};
+      this._setEventListeners(feature);
 
-let EvergisFeature = /*#__PURE__*/function () {
-  function EvergisFeature(feature) {
-    _classCallCheck(this, EvergisFeature);
+      return [feature.__dynamicSymbolRender];
+    }
+  }, {
+    key: "setCirclePxRaius",
+    value: function setCirclePxRaius(crs) {
+      if (this.circle && this.pathStyles) {
+        var _this$circle;
 
-    this.id = null;
-    this.displayName = null;
-    this.geometry = null;
-    this.layerName = null;
-    this.layerAlias = null;
-    this.attributes = null;
-    this.symbol = null;
-    this.id = feature.id;
-    this.displayName = feature.id;
-    this.geometry = feature.geometry;
-    this.layerName = feature.layer;
-    this.layerAlias = feature.layer;
-    this.attributes = getFeatureAttributes(feature.attributes);
-  }
+        this.pathStyles.radius = metersToPixels(this.circle.radius, {
+          painter: this.circle.painter,
+          crs
+        }) + (((_this$circle = this.circle) == null ? void 0 : _this$circle.pxOffset) || 0);
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(_ref) {
+      var _this$pathStyles, _this$pathStyles2, _this$pathStyles3, _this$pathStyles4;
 
-  _createClass(EvergisFeature, [{
-    key: "sGisFeature",
-    value: function sGisFeature() {
-      if (!this.geometry || !this.symbol) {
-        return null;
-      } // @ts-ignore
+      let {
+        bbox,
+        resolution,
+        feature,
+        crs
+      } = _ref;
+      if (!feature) return;
+      if (!bbox) bbox = feature.__lastBbox;
+      if (!resolution) resolution = feature.__lastResolution;
+      if (!bbox || !resolution || !feature.crs.canProjectTo(bbox.crs)) return;
 
+      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
+        const newCoordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+        this.setCirclePxRaius(crs);
+        this.container.innerHTML = '';
+        const svg = this.setSvg(newCoordinates);
+        svg && this.container.append(svg);
+      }
 
+      const polygon = feature.projectTo(bbox.crs);
+      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
+      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
+      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
+      this.container.style.left = dx.toString() + "px";
+      this.container.style.top = dy.toString() + "px";
+      feature.__lastBbox = bbox;
+      feature.__lastResolution = resolution;
+    }
+  }, {
+    key: "setSvg",
+    value: function setSvg(coordinates) {
       const {
-        type,
-        coordinates,
-        sr
-      } = this.geometry;
-      const crs = CRS_MAP[sr];
+        lineCap,
+        lineJoin,
+        miterLimit,
+        lineDash,
+        dashOffset
+      } = this.pathStyles || {};
+      const svgRender = new SvgRender(_extends({
+        coordinates
+      }, defaultPathStyles, {
+        appendToSvg: this.appendToSvg
+      }, this.pathStyles));
 
-      if (!crs) {
-        return null;
+      if (this.circle) {
+        svgRender._setArcNode();
+      } else {
+        svgRender._setPolyNode();
       }
 
-      switch (type) {
-        case GeometryType.Point:
-          return new PointFeature(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case GeometryType.Multipoint:
-          return new MultiPoint(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case GeometryType.Polyline:
-          return new Polyline(coordinates, {
-            symbol: selectedPolyline,
-            crs
-          });
+      let svgElement;
+      svgRender.getNode((_, svg) => {
+        svgElement = svg;
+        this.className && svgElement.classList.add(this.className);
+        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
 
-        case GeometryType.Polygon:
-          return new Polygon(coordinates, {
-            symbol: selectedPolygon,
-            crs
-          });
+        if (path) {
+          path.setAttribute('stroke-linecap', lineCap || 'round');
+          path.setAttribute('stroke-linejoin', lineJoin || 'round');
+          path.setAttribute('stroke-miterlimit', (miterLimit || 10).toString());
+          path.setAttribute('stroke-dashoffset', (dashOffset || 0).toString());
 
-        default:
-          return null;
-      }
+          if (this.circle) {
+            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
+          }
+        }
+      });
+      return svgElement;
     }
   }, {
-    key: "extent",
-    value: function extent() {
-      const feature = this.sGisFeature();
-      return feature && feature.bbox;
-    }
-  }]);
-
-  return EvergisFeature;
-}();
-
-function evaluateCondition(condition, attributes) {
-  try {
-    const evaluator = new ConditionEvaluator(attributes);
-    const result = evaluator.evaluate(condition);
+    key: "_setEventListeners",
+    value: function _setEventListeners(dynamicFeature) {
+      var _dynamicFeature$__dyn;
 
-    if (result instanceof Error) {
-      return null;
+      if (dynamicFeature.eventFlags === MouseEventFlags.None) return;
+      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
+      Object.keys(mouseEvents).forEach(eventName => {
+        if (dynamicFeature.eventFlags & mouseEvents[eventName].flag) {
+          listenDomEvent(svgNode, mouseEvents[eventName].type, event => {
+            dynamicFeature.fire(mouseEvents[eventName].type, {
+              node: svgNode,
+              browserEvent: event
+            });
+          });
+        }
+      });
     }
+  }]);
 
-    return result;
-  } catch (_unused) {
-    return null;
-  }
-}
+  return SVGPoly;
+}(Symbol$1);
 
-function getAttributeValue(attributes, attributeName) {
-  const attributeMeta = attributes.find(_ref => {
-    let {
-      name
-    } = _ref;
-    return name === attributeName;
-  });
-  return attributeMeta ? attributeMeta.value : null;
+function isSGisPointSymbol(symbol) {
+  return symbol instanceof PointSymbol || symbol instanceof StaticImageSymbol || symbol instanceof SquareSymbol || symbol instanceof MaskedImage;
 }
-
-const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
-const getAttributeNameFromClassified = values => values.length > 0 ? getAttributeNameFromCondition(values[0].condition) : null;
-
-function findFeatureValue(parameterValues, _ref2) {
-  let [name, value] = _ref2;
-  return value !== null ? parameterValues.find(_ref3 => {
-    let {
-      condition
-    } = _ref3;
-    return value !== undefined && evaluateCondition(condition, {
-      [name]: value
-    });
-  }) : null;
+function isSGisImageSymbol(symbol) {
+  return symbol instanceof StaticImageSymbol || symbol instanceof MaskedImage;
 }
-
-function extractValuesAttribute(parameterValues, attributes) {
-  const name = getAttributeNameFromClassified(parameterValues) || '';
-  const value = name && getAttributeValue(attributes, name);
-  return [name, value];
+function isSGisPolygonSymbol(symbol) {
+  return symbol instanceof PolygonSymbol || symbol instanceof BrushFill || symbol instanceof ImageFill;
+}
+function isSGisPolylineSymbol(symbol) {
+  return symbol instanceof PolylineSymbol;
+}
+function isSGisH3Symbol(symbol) {
+  return symbol instanceof H3Symbol;
+}
+function isSGisClusterSymbol(symbol) {
+  return !!symbol.singleObjectSymbol;
 }
 
-function evaluateFeatureSymbol(attributes) {
-  // @ts-ignore
-  function calc(result, _ref4) {
-    let [parameterName, parameterValue] = _ref4;
-    let newParameterValue;
+/**
+ * Моки фич для отображения превью символа
+ * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
+ */
 
-    if (isParameterByAttribute(parameterValue)) {
-      const [attributeName, attributeValue] = extractValuesAttribute(parameterValue.values, attributes);
-      const featureValue = findFeatureValue(parameterValue.values, [attributeName, attributeValue]);
-      newParameterValue = featureValue ? featureValue.value : parameterValue.defaultValue;
-    } else if (isObject(parameterValue)) {
-      // @ts-ignore
-      newParameterValue = Object.entries(parameterValue).reduce(calc, parameterValue);
-    }
+const viewBoxSize = 100;
+const pointFeature = /*#__PURE__*/new PointFeature([50, -50], {
+  crs: plain
+});
+const lineFeature = /*#__PURE__*/new Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
+  crs: plain
+});
+const polygonFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
+  crs: plain
+});
+const h3gridFeature = /*#__PURE__*/new H3Feature([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
+  crs: plain
+});
+const lineLegendFeature = /*#__PURE__*/new Polyline([[0, -50], [100, -50]], {
+  crs: plain
+});
+const polygonLegendFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
+  crs: plain
+});
+const polygonMapLegendFeature = /*#__PURE__*/new Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
+  crs: plain
+});
+const MAP_LEGEND_FEATURES = {
+  polygon: polygonMapLegendFeature
+};
+const LEGEND_FEATURES = {
+  point: pointFeature,
+  polyline: lineLegendFeature,
+  polygon: polygonLegendFeature,
+  h3grid: h3gridFeature
+};
+const MOCK_FEATURES = {
+  point: pointFeature,
+  polyline: lineFeature,
+  polygon: polygonFeature,
+  h3grid: h3gridFeature
+};
 
-    return newParameterValue !== undefined ? _extends({}, result, {
-      [parameterName]: newParameterValue
-    }) : result;
+function getSymbolRenders(symbol, size, features) {
+  if (size === void 0) {
+    size = viewBoxSize;
   }
 
-  return calc;
-}
+  if (features === void 0) {
+    features = {};
+  }
 
-function findChildFeatureStyle(childStyles, attributes) {
-  return (childStyles || []).find(_ref5 => {
-    let {
-      condition
-    } = _ref5;
-    const attributeName = condition && getAttributeNameFromCondition(condition);
-    const attributeValue = attributeName && getAttributeValue(attributes, attributeName);
+  const resolution = viewBoxSize / size;
 
-    if (condition && attributeName && attributeValue !== undefined) {
-      return evaluateCondition(condition, {
-        [attributeName]: attributeValue
-      });
-    }
+  const featuresToRender = _extends({}, MOCK_FEATURES, features);
 
-    return false;
-  }) || null;
-}
-function findChildFeatureSymbol(childStyles, attributes) {
-  const featureStyle = findChildFeatureStyle(childStyles, attributes);
-  return featureStyle ? featureStyle.symbol : null;
+  if (isSGisPolygonSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
+  }
+
+  if (isSGisPolylineSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
+  }
+
+  if (isSGisH3Symbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.h3grid, resolution, plain);
+  }
+
+  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
 }
-function getFeatureSymbol(style, attributes) {
-  if (!style || !style.symbol) {
-    return null;
+const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
   }
 
-  if (style.children !== null) {
-    return findChildFeatureSymbol(style.children, attributes) || style.symbol;
+  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
+};
+const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
   }
 
-  return Object.entries(style.symbol).reduce(evaluateFeatureSymbol(attributes), style.symbol);
+  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
+};
+
+function renderSymbolToCanvas(renders, canvas) {
+  renders.forEach(render => {
+    canvas.draw(render);
+  });
 }
 
-let EvergisLayer = /*#__PURE__*/function () {
-  function EvergisLayer(service) {
-    _classCallCheck(this, EvergisLayer);
+function deserializeSymbol(symbol) {
+  switch (symbol.type) {
+    case "h3grid":
+      return deserializeH3Symbol(symbol);
 
-    this.name = null;
-    this.titleAttribute = null;
-    this.alias = null;
-    this.attributes = null;
-    this.style = null;
-    const evergisService = service;
-    const {
-      name,
-      alias,
-      style,
-      layerDefinition
-    } = evergisService;
-    this.name = name;
-    this.alias = alias || name;
-    this.attributes = getLayerAttributes(layerDefinition);
-    this.style = style && new EvergisStyle(style) || null;
-    this.titleAttribute = layerDefinition && layerDefinition.titleAttribute || null;
-  }
+    case "svgPointSymbol":
+      return deserializeSvgPointSymbol(symbol);
 
-  _createClass(EvergisLayer, [{
-    key: "evaluateFeature",
-    value: function evaluateFeature(feature) {
-      feature.attributes = mergeAttributes(feature.attributes || [], this.attributes || []);
-      feature.symbol = this.style && getFeatureSymbol(this.style, feature.attributes);
-      feature.layerAlias = this.alias;
-      const titleAttribute = (feature.attributes || []).find(_ref => {
-        let {
-          name
-        } = _ref;
-        return name === this.titleAttribute;
-      });
-      const displayName = titleAttribute && formatAttributeValue(titleAttribute)[0].value || feature.id;
-      feature.displayName = displayName ? "" + displayName : feature.id;
-      return feature;
-    }
-  }]);
+    case 'circlePointSymbol':
+      return deserializePointSymbol(symbol);
 
-  return EvergisLayer;
-}();
+    case 'squarePointSymbol':
+      return deserializeSquareSymbol(symbol);
 
-const findFeatureLayer = feature => layer => layer.name === feature.layerName;
+    case 'maskedImagePointSymbol':
+      return deserializeMaskedImageSymbol(symbol);
 
-const evaluateFeature = layers => feature => {
-  const featureLayer = layers.find(findFeatureLayer(feature));
-  return featureLayer ? featureLayer.evaluateFeature(feature) : feature;
-};
+    case 'imagePointSymbol':
+      return deserializeImagePointSymbol(symbol);
 
-const OTHERS_TITLE = 'Другое';
-const createLegendItem = _ref => {
-  let {
-    attributes,
-    renderTitle,
-    skipDefaultValue,
-    reverse
-  } = _ref;
-  return classification => {
-    const {
-      defaultTitle,
-      defaultValue,
-      values,
-      attribute: attributeName,
-      parameter
-    } = classification;
-    const attribute = attributeName && attributes ? getClassificationAttribute(attributeName, attributes) : undefined;
-    const defaultLegendValue = {
-      title: defaultTitle || OTHERS_TITLE,
-      parameterValue: defaultValue
-    };
-    const legendValues = values.map((value, index) => ({
-      title: renderTitle && renderTitle(_extends({}, value, {
-        attribute
-      }), index),
-      parameterValue: value.parameterValue
-    }));
-    const withDefault = skipDefaultValue ? legendValues : [...legendValues, defaultLegendValue];
-    const reversedValues = reverse ? [...withDefault].reverse() : withDefault;
-    return {
-      title: attribute && attribute.alias || attributeName,
-      attribute,
-      parameter,
-      values: reversedValues
-    };
-  };
-};
+    case 'polygonSymbol':
+      return deserializePolygonSymbol(symbol);
+
+    case 'simplePolylineSymbol':
+    case 'polylineSymbol':
+      return deserializePolylineSymbol(symbol);
+
+    case "clusterSymbol":
+      return deserializeSymbol(symbol.singleObjectSymbol);
+
+    default:
+      return null;
+  }
+}
 
-function isValidParameter(parameter) {
-  return !(parameter != null && parameter.includes("labelSymbol")) && !(parameter != null && parameter.includes("singleObjectSymbol"));
+function deserializeH3Symbol(symbol) {
+  var _symbol$stroke, _symbol$stroke2, _symbol$fill;
+
+  return new H3Symbol(_extends({}, symbol, {
+    cellSize: getParameterValue(symbol.cellSize),
+    strokeWidth: getParameterValue(symbol == null ? void 0 : (_symbol$stroke = symbol.stroke) == null ? void 0 : _symbol$stroke.width),
+    strokeColor: getParameterValue(symbol == null ? void 0 : (_symbol$stroke2 = symbol.stroke) == null ? void 0 : _symbol$stroke2.color),
+    fillColor: getParameterValue(symbol == null ? void 0 : (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color)
+  }));
 }
 
-function createStyleLegend(style, config) {
-  const {
-    classificationManager,
-    symbol
-  } = style;
-  const items = classificationManager.filter(_ref => {
-    let {
-      parameter
-    } = _ref;
-    return config.parameters && parameter ? config.parameters.includes(parameter) : isValidParameter(parameter);
-  });
+function deserializePointSymbol(symbol) {
+  // @ts-ignore
+  return new PointSymbol(deserializePointSymbolParams(symbol));
+}
 
-  if (!items.length) {
-    return null;
-  }
+const getOffsetParameterValue = offset => [getParameterValue(offset == null ? void 0 : offset[0]), getParameterValue(offset == null ? void 0 : offset[1])];
 
-  return {
-    symbol: unClassify(symbol.singleObjectSymbol || symbol),
-    items: items.map(createLegendItem(config))
-  };
+function deserializeSvgPointSymbolParams(_ref) {
+  let {
+    type,
+    data,
+    size,
+    offset,
+    angle,
+    background,
+    figure
+  } = _ref;
+  return _extends({
+    type: getParameterValue(type),
+    data: getParameterValue(data),
+    size: getParameterValue(size),
+    offset: getOffsetParameterValue(offset),
+    angle: getParameterValue(angle)
+  }, background ? {
+    background: _extends({}, background, {
+      fillColor: deserializeColor(getParameterValue(background == null ? void 0 : background.fillColor)),
+      strokeColor: deserializeColor(getParameterValue(background == null ? void 0 : background.strokeColor)),
+      strokeWidth: getParameterValue(background == null ? void 0 : background.strokeWidth)
+    })
+  } : {}, figure ? {
+    figure: _extends({}, figure, {
+      fillColor: deserializeColor(getParameterValue(figure == null ? void 0 : figure.fillColor))
+    })
+  } : {});
 }
 
-function createValueTitle$1(value, index) {
-  if (value.title) return value.title;
-  if (isRangeClass(value)) return printRangeClass(value, index);
-  if (isUniqueClass(value)) return value.uniqueValue;
-  return '';
+function deserializeSvgPointSymbol(symbol) {
+  return new PointSymbol(deserializeSvgPointSymbolParams(symbol));
 }
 
-function formatArea(num) {
-  let result = num;
-  let measure = 'м²';
+function deserializeSquareSymbol(symbol) {
+  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle)
+  }));
+}
 
-  if (num >= 10000000) {
-    result = num / 1000000;
-    measure = 'км²';
-  } else if (num >= 10000) {
-    result = num / 10000;
-    measure = 'га';
-  }
+function deserializeMaskedImageSymbol(symbol) {
+  return new MaskedImage(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    imageSource: deserializeBase64(symbol.image),
+    // @ts-ignore
+    maskSource: deserializeBase64(symbol.imageMask),
+    // @ts-ignore
+    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
+  }));
+}
 
-  return numberWithSpaces(result) + " " + measure;
+function deserializeImagePointSymbol(symbol) {
+  return new StaticImageSymbol(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    source: deserializeBase64(symbol.image)
+  }));
 }
-function formatLength(num) {
-  let result = num;
-  let measure = 'м';
 
-  if (num > 10000) {
-    result = num / 1000;
-    measure = 'км';
+function deserializePolygonSymbol(symbol) {
+  if (isPolygonHasPatternBrush(symbol)) {
+    return new SGisImageFill(symbol);
   }
 
-  return numberWithSpaces(result) + " " + measure;
-}
-function formatPolygonMeasure(area, perimiter) {
-  return "S : " + formatArea(area) + "  P : " + formatLength(perimiter);
-}
-function isPolylineLikePolygon(rings, resolution) {
-  if (rings[0].length <= 3) {
-    return false;
+  if (isPolygonHasHatchBrush(symbol)) {
+    return new SGisBrushFill(symbol);
   }
 
-  const coords = rings[0];
-  const firstPoint = coords[0];
-  const lastPoint = coords[coords.length - 1];
-  const distance = resolution * 2;
-  return softEquals(firstPoint[0], lastPoint[0], distance) && softEquals(firstPoint[1], lastPoint[1], distance);
+  return new SGisPolygonSymbol(symbol);
 }
 
-function getScale(scale) {
-  const scales = [1, 2, 5];
-
-  for (let x = 0; x < 21; x++) {
-    for (let y = 0; y < scales.length; y++) {
-      const result = Math.pow(10, x) * scales[y];
-
-      if (result > scale) {
-        return result;
-      }
-    }
-  }
+function deserializePolylineSymbol(symbol) {
+  return new SGisPolylineSymbol(symbol);
+}
 
-  return 1;
+function deserializePointSymbolParams(_ref2) {
+  let {
+    size,
+    offset,
+    strokeColor,
+    strokeWidth,
+    fillColor
+  } = _ref2;
+  return {
+    size: getParameterValue(size),
+    offset: deserializeAnchor(offset),
+    strokeWidth: getParameterValue(strokeWidth),
+    strokeColor: deserializeColor(getParameterValue(strokeColor)),
+    fillColor: deserializeColor(getParameterValue(fillColor))
+  };
 }
 
-const useLegend = (style, config) => useMemo(() => {
-  if (!style || !(config && config.attributes)) return null;
-  return createStyleLegend(style, config);
-}, [style, config]);
+function deserializeBase64(base) {
+  return "data:image/png;base64," + base;
+}
 
-const DEFAULT_LEGEND_CONFIG = {
-  renderTitle: createValueTitle$1
-};
-const useLayerLegend = (layer, config) => {
-  const {
-    style,
-    layerDefinition
-  } = layer || {};
-  const {
-    attributes
-  } = layerDefinition || {};
-  const styleProxy = style && new EvergisStyle(style);
-  return useLegend(styleProxy, _extends({
-    attributes: attributes
-  }, DEFAULT_LEGEND_CONFIG, config));
-};
+function deserializeAnchor(offset) {
+  // @ts-ignore
+  return offset.map(getParameterValue);
+}
 
-const useMapLegend = (layer, config) => {
-  const legend = useLayerLegend(layer, config);
+function deserializeColor(color) {
+  return color ? new Color(color).toString() : null;
+}
 
-  if (!legend) {
-    return null;
+const clampSymbol = (symbol, min, max) => {
+  if (isSGisImageSymbol(symbol)) {
+    symbol.width = clamp(symbol.width, min, max);
+    symbol.height = clamp(symbol.height, min, max);
+  } else if (isSGisPointSymbol(symbol)) {
+    symbol.size = clamp(symbol.size, min, max);
   }
 
-  return {
-    symbol: legend.symbol,
-    items: legend.items
-  };
+  return symbol;
 };
+function centerAlignSymbol(symbol) {
+  if (isSGisImageSymbol(symbol)) {
+    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
+  } else if (isSGisPointSymbol(symbol)) {
+    symbol.offset = [0, 0];
+  }
 
-const LEGEND_SYMBOL_MAX_SIZE = 32;
-const useLegendValueSymbol = _ref => {
+  return symbol;
+}
+const adjustSymbol = (symbol, _ref) => {
   let {
-    parameter,
-    parameterValue
+    size
   } = _ref;
-  const symbol = useLegendContext();
-  const valueSymbol = // @ts-ignore
-  symbol && applyParameterValue(symbol, parameter, parameterValue);
-  let sGisSymbol = null;
-
-  try {
-    sGisSymbol = valueSymbol && deserializeSymbol(valueSymbol);
-  } catch (e) {}
-
-  return sGisSymbol && adjustSymbol(sGisSymbol, {
-    size: LEGEND_SYMBOL_MAX_SIZE - 1
-  });
+  return centerAlignSymbol(clampSymbol(symbol, 0, size));
 };
 
 const DEFAULT_SYMBOL_SIZE$1 = 26;
@@ -5131,6 +5358,12 @@ const useToggle = initial => {
   return [state, toggle, setState];
 };
 
+function useNode() {
+  const [node, onSetNode] = useState(null);
+  const ref = useCallback(onSetNode, [onSetNode]);
+  return [ref, node];
+}
+
 const Symbol = _ref => {
   let {
     symbol,
@@ -5578,7 +5811,7 @@ const Fullscreen = () => {
   }));
 };
 
-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, _templateObject34;
+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, _templateObject34, _templateObject35, _templateObject36;
 const MapLegendDescription = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
 const ItemText = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n"])), _ref => {
   let {
@@ -5590,7 +5823,7 @@ const ItemText = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2
 });
 const ItemSeparator = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :after {\n    content: \"-\";\n    margin: 0 0.5rem;\n    font-size: 0.75rem;\n  }\n"])));
 const SymbolContainer = /*#__PURE__*/styled("span")(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  min-width: 16px;\n  margin-right: 0.5rem;\n"])));
-const ClassifiedItem = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\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 150ms;\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  /* :hover {\n    ", ", ", " {\n      opacity: 1;\n    }\n  }*/\n"])), _ref2 => {
+const ClassifiedItem = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\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 150ms;\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;
@@ -5629,16 +5862,33 @@ const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject8$2 || (
 const MapLegendContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__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(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: bold;\n"])));
 const MapLegendDescriptionContainer = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  font-weight: 400;\n  font-size: 0.625rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MinimizedLegendContainer = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
-const MapLegendSectionContainer = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  \n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject14$1 || (_templateObject14$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 MaximizedLegendContainer = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: 0;\n  opacity: ", ";\n  overflow: hidden;\n  transition: opacity 0.5s;\n"])), _ref8 => {
+  let {
+    isShown
+  } = _ref8;
+  return isShown ? "relative" : "absolute";
+}, _ref9 => {
+  let {
+    isShown
+  } = _ref9;
+  return isShown ? 1 : 0;
+});
+const MinimizedLegendContainer = /*#__PURE__*/styled(MaximizedLegendContainer)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
+const MapLegendSectionContainer = /*#__PURE__*/styled.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  \n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
+const MapLegendSectionItems = /*#__PURE__*/styled.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "px;\n  overflow: hidden;\n  transition: height 0.5s;\n"])), _ref10 => {
+  let {
+    height
+  } = _ref10;
+  return height;
+});
+const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject16$1 || (_templateObject16$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(_templateObject15$1 || (_templateObject15$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);
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  display: flex;\n  align-items: flex-end;\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) {
@@ -5646,79 +5896,79 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
     value = 0;
   }
 
-  return css(_templateObject16$1 || (_templateObject16$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(_templateObject18 || (_templateObject18 = _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(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__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 => {
+const StrokeColorLegendItemMixin = /*#__PURE__*/css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
+const MapLegendItem = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__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"])), _ref11 => {
   let {
     parameter
-  } = _ref8;
+  } = _ref11;
   return isParameterType(["strokeColor", "stroke.color"], parameter) ? 0.25 : 1;
-}, _ref9 => {
+}, _ref12 => {
   let {
     value
-  } = _ref9;
+  } = _ref12;
   return typeof value === "number" ? "none" : value;
-}, _ref10 => {
+}, _ref13 => {
   let {
     isHidden
-  } = _ref10;
+  } = _ref13;
   return isHidden ? 0.28 : 1;
-}, _ref11 => {
+}, _ref14 => {
   let {
     value,
     parameter
-  } = _ref11;
+  } = _ref14;
   return isParameterType("size", parameter) && SizeLegendItemMixin(value);
-}, _ref12 => {
+}, _ref15 => {
   let {
     value,
     parameter
-  } = _ref12;
+  } = _ref15;
   return isParameterType(["strokeWidth", "stroke.width"], parameter) && StrokeWidthLegendItemMixin(value);
 });
-const MapLegendOther = /*#__PURE__*/styled(MapLegendItem)(_templateObject19 || (_templateObject19 = /*#__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(_templateObject20 || (_templateObject20 = /*#__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(_templateObject21 || (_templateObject21 = /*#__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(_templateObject22 || (_templateObject22 = /*#__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(_templateObject23 || (_templateObject23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
-const SizeMinimizedLegendLabel = /*#__PURE__*/styled.div(_templateObject24 || (_templateObject24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
-const SizeMinimizedLegendDown = /*#__PURE__*/styled.div(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const SizeMinimizedLegendUp = /*#__PURE__*/styled(SizeMinimizedLegendDown)(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const SingleSizeLegendItemsMixin = /*#__PURE__*/css(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
-const SingleLegendItemsMixin = /*#__PURE__*/css(_templateObject28 || (_templateObject28 = /*#__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 => {
+const MapLegendOther = /*#__PURE__*/styled(MapLegendItem)(_templateObject21 || (_templateObject21 = /*#__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(_templateObject22 || (_templateObject22 = /*#__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(_templateObject23 || (_templateObject23 = /*#__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(_templateObject24 || (_templateObject24 = /*#__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(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
+const SizeMinimizedLegendLabel = /*#__PURE__*/styled.div(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
+const SizeMinimizedLegendDown = /*#__PURE__*/styled.div(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const SizeMinimizedLegendUp = /*#__PURE__*/styled(SizeMinimizedLegendDown)(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const SingleSizeLegendItemsMixin = /*#__PURE__*/css(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
+const SingleLegendItemsMixin = /*#__PURE__*/css(_templateObject30 || (_templateObject30 = /*#__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"])), _ref16 => {
   let {
     isSize
-  } = _ref13;
+  } = _ref16;
   return isSize && SingleSizeLegendItemsMixin;
-}, MapLegendItem, _ref14 => {
+}, MapLegendItem, _ref17 => {
   let {
     parameter
-  } = _ref14;
+  } = _ref17;
   return isParameterType(["strokeColor", "stroke.color"], parameter) && StrokeColorLegendItemMixin;
 });
-const MapLegendItems = /*#__PURE__*/styled.div(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref15 => {
+const MapLegendItems = /*#__PURE__*/styled.div(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref18 => {
   let {
     isSize
-  } = _ref15;
+  } = _ref18;
   return isSize && SizeLegendItemsMixin;
-}, _ref16 => {
+}, _ref19 => {
   let {
     isStrokeWidth
-  } = _ref16;
+  } = _ref19;
   return isStrokeWidth && StrokeWidthLegendItemsMixin;
-}, _ref17 => {
+}, _ref20 => {
   let {
     isSingle
-  } = _ref17;
+  } = _ref20;
   return isSingle && SingleLegendItemsMixin;
 });
-const MapLegendItemsContainer = /*#__PURE__*/styled.div(_templateObject30 || (_templateObject30 = /*#__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(_templateObject31 || (_templateObject31 = /*#__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(_templateObject32 || (_templateObject32 = /*#__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)(_templateObject33 || (_templateObject33 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+const MapLegendItemsContainer = /*#__PURE__*/styled.div(_templateObject32 || (_templateObject32 = /*#__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(_templateObject33 || (_templateObject33 = /*#__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(_templateObject34 || (_templateObject34 = /*#__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)(_templateObject35 || (_templateObject35 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled.div(_templateObject36 || (_templateObject36 = /*#__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(" - ")) {
@@ -5738,6 +5988,8 @@ const MinimizedLegend = _ref => {
   var _currentValues$, _currentValues, _currentValues$2, _currentValues2;
 
   let {
+    innerRef,
+    isShown,
     values,
     title,
     parameter,
@@ -5750,7 +6002,10 @@ const MinimizedLegend = _ref => {
   const titleMax = getValueFromLegendTitle((_currentValues$ = currentValues[0]) == null ? void 0 : _currentValues$.title, "max");
   const titleMin = getValueFromLegendTitle((_currentValues = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues.title, "min");
   const checkIsHidden = useCallback(hiddenCondition => hiddenCondition ? hiddenLegends == null ? void 0 : hiddenLegends.some(condition => hiddenCondition.includes(condition)) : false, [hiddenLegends]);
-  return React.createElement(MinimizedLegendContainer, null, !!title && React.createElement(MapLegendValueDescr, null, title), isSize ? React.createElement(React.Fragment, null, React.createElement(SizeMinimizedLegend, null, React.createElement(SizeMinimizedLegendSymbol, null, React.createElement(MapLegendItems, {
+  return React.createElement(MinimizedLegendContainer, {
+    ref: innerRef,
+    isShown: isShown
+  }, !!title && React.createElement(MapLegendValueDescr, null, title), isSize ? React.createElement(React.Fragment, null, React.createElement(SizeMinimizedLegend, null, React.createElement(SizeMinimizedLegendSymbol, null, React.createElement(MapLegendItems, {
     parameter: parameter,
     isSize: true
   }, currentValues.map((value, index) => React.createElement(MapLegendItem, {
@@ -6001,11 +6256,16 @@ const LegendSymbolRenderer = /*#__PURE__*/memo(_ref => {
 
 const MaximizedLegend = _ref => {
   let {
+    innerRef,
+    isShown,
+    layerName,
     symbol: sectionSymbol,
     parameter,
     values,
     index: sectionIndex,
-    attributeType
+    attributeType,
+    hiddenLegends,
+    toggleHiddenLegend
   } = _ref;
   const {
     t
@@ -6045,19 +6305,22 @@ const MaximizedLegend = _ref => {
 
     return React.createElement(React.Fragment, null, columns.map(renderColumn));
   }, [isDate, renderColumn, t]);
+  const isHidden = useCallback(hiddenCondition => !!(hiddenLegends != null && hiddenLegends.includes(hiddenCondition)), [hiddenLegends]);
   const renderLegend = useCallback((_ref2, index) => {
     var _parameterValue$value;
 
     let {
       symbol,
-      title
-      /* , hiddenCondition*/
-
+      title,
+      hiddenCondition
     } = _ref2;
-    if (!symbol) return null; // const isClusterFillColor = checkIsClusterFillColor(symbol, parameter);
-
+    if (!symbol) return null;
+    const isClusterFillColor$1 = isClusterFillColor(symbol, parameter);
     return React.createElement(ClassifiedItem, {
-      key: sectionIndex + title + index
+      key: sectionIndex + title + index,
+      isHidden: isHidden(hiddenCondition),
+      isClusterFillColor: isClusterFillColor$1,
+      onClick: () => toggleHiddenLegend == null ? void 0 : toggleHiddenLegend(layerName, hiddenCondition)
     }, isSize || isStrokeWidth || isStrokeColor ? React.createElement(MapLegendItems, {
       parameter: parameter,
       isSize: isSize,
@@ -6067,15 +6330,16 @@ const MaximizedLegend = _ref => {
     }, 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),
+      value: (parameterValue == null ? void 0 : (_parameterValue$value = parameterValue.values[(parameterValue == null ? void 0 : parameterValue.values.length) - index - 1]) == 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)*/
-
+      symbol: isClusterFillColor$1 ? 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));
+  }, [isSize, isStrokeColor, isStrokeWidth, parameter, parameterValue == null ? void 0 : parameterValue.defaultValue, parameterValue == null ? void 0 : parameterValue.values, renderItemText, sectionIndex, hiddenLegends, toggleHiddenLegend]);
+  return React.createElement(MaximizedLegendContainer, {
+    ref: innerRef,
+    isShown: isShown
+  }, values.map(renderLegend));
 };
 
 const LegendParameterDescription = _ref => {
@@ -6090,10 +6354,14 @@ const LegendParameterDescription = _ref => {
 
 const LegendSection = _ref => {
   let {
+    layerName,
     symbol,
-    param,
-    params,
+    parameter,
+    parameters,
     classified,
+    hiddenLegends,
+    toggleHiddenLegend,
+    attributeName,
     attributeTitle,
     attributeType,
     index
@@ -6102,55 +6370,67 @@ const LegendSection = _ref => {
     t
   } = useTranslation("common");
   const [isExpanded, toggleExpanded] = useToggle();
+  const [maxRef, maxNode] = useNode();
+  const [minRef, minNode] = useNode();
   return React.createElement(MapLegendSectionContainer, null, React.createElement(MapLegendHeader, null, attributeTitle), React.createElement(LegendParameterDescription, {
-    parameter: param
-  }), isExpanded ? React.createElement(MaximizedLegend, {
-    key: param,
+    parameter: parameter
+  }), React.createElement(MapLegendSectionItems, {
+    height: isExpanded ? ((maxNode == null ? void 0 : maxNode.offsetHeight) || 0) + 4 : minNode == null ? void 0 : minNode.offsetHeight
+  }, React.createElement(MaximizedLegend, {
+    innerRef: maxRef,
+    isShown: isExpanded,
+    layerName: layerName,
     symbol: symbol,
-    parameter: param,
+    hiddenLegends: hiddenLegends == null ? void 0 : hiddenLegends[layerName],
+    toggleHiddenLegend: toggleHiddenLegend,
+    parameter: parameter,
     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, {
+    values: getMaximizedLegendValues(attributeName, attributeType, parameter, parameters, classified, symbol, index, t("classification.other"))
+  }), React.createElement(MinimizedLegend, {
+    innerRef: minRef,
+    isShown: !isExpanded,
+    values: getMinimizedLegendValues(attributeName, attributeType, classified, index, t("classification.other")),
+    hiddenLegends: hiddenLegends == null ? void 0 : hiddenLegends[layerName],
+    parameter: parameter
+  })), React.createElement(MapLegendExpandButton, {
     onClick: toggleExpanded
   }, t(isExpanded ? "toggleMenu" : "Развернуть")));
 };
 
-const Legend = _ref => {
+const _excluded$3 = ["layerInfo"];
+const Legend = /*#__PURE__*/memo(_ref => {
   let {
     layerInfo
-  } = _ref;
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
   const classified = getClassified(layerInfo);
-  const params = Object.keys(classified);
+  const parameters = Object.keys(classified);
   const attributes = getLayerAttributes(layerInfo.layerDefinition);
   return React.createElement(MapLegendContainer, null, Object.keys(classified).map((param, index) => {
-    var _classified$param$val, _attributes$find, _layerInfo$style;
+    var _classified$param$val, _layerInfo$style, _attributes$find;
 
     const attributeName = getAttributeNameFromCondition((_classified$param$val = classified[param].values[0]) == null ? void 0 : _classified$param$val.condition);
-    const attributeAlias = (_attributes$find = attributes.find(_ref2 => {
-      let {
-        name
-      } = _ref2;
-      return name === attributeName;
-    })) == null ? void 0 : _attributes$find.alias;
-    return React.createElement(LegendSection, {
+    return React.createElement(LegendSection, Object.assign({
       key: index,
+      layerName: layerInfo.name,
       symbol: (_layerInfo$style = layerInfo.style) == null ? void 0 : _layerInfo$style.symbol,
+      attributeName: attributeName,
+      attributeTitle: ((_attributes$find = attributes.find(_ref2 => {
+        let {
+          name
+        } = _ref2;
+        return name === attributeName;
+      })) == null ? void 0 : _attributes$find.alias) || attributeName,
       attributeType: getAttributeType(layerInfo, attributeName),
-      attributeTitle: attributeAlias || attributeName,
       classified: classified[param],
-      param: param,
-      params: params,
+      parameter: param,
+      parameters: parameters,
       index: index
-    });
+    }, rest));
   }));
-};
+});
 
 const Map = _ref => {
   let {
@@ -6375,12 +6655,12 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
   return MeasureTool;
 }(React.Component);
 
-const _excluded$3 = ["isActive"];
+const _excluded$4 = ["isActive"];
 const Measurer = _ref => {
   let {
     isActive
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   const {
     map,
@@ -6494,7 +6774,7 @@ const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$2 || (_templa
   return withArrow && corner;
 });
 
-const _excluded$4 = ["features", "map", "center", "component", "zIndex", "children", "content", "onEachFeature", "clickMode"];
+const _excluded$5 = ["features", "map", "center", "component", "zIndex", "children", "content", "onEachFeature", "clickMode"];
 
 const {
   Provider,
@@ -6513,7 +6793,7 @@ const Tooltip = _ref => {
     onEachFeature,
     clickMode
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   const onTooltip = useTooltip(zIndex);
   useEffect(() => {
@@ -6554,5 +6834,5 @@ const DraggableMarker = _ref => {
   return React.createElement(Fragment, null);
 };
 
-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, LegendParameterDescription, LegendProvider, LegendSection, LegendSymbolRenderer, LineMiterKind, LineMiterRender, Map, MapControl, MapControls, MapLegendContainer, MapLegendControl, MapLegendDescription, MapLegendDescriptionContainer, MapLegendExpandButton, MapLegendHeader, MapLegendItem, MapLegendItems, MapLegendItemsContainer, MapLegendOther, MapLegendSectionContainer, MapLegendValueDescr, MapLegendValues, MapLegendValuesOther, MapLegendValuesRange, MapProvider, MaximizedLegend, Measure, MeasureTool, Measurer, MinimizedLegend, 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 };
+export { ArrowLineMiterRender, BASE_OPERATORS, BETWEEN_OPERATORS, BaseMeasureToolCreator, BaseMeasureToolEditor, CONTAINS_OPERATORS, CRS_MAP, CardAttributes, CardHeader, CircleLineMiterRender, ClassificationCondition, ClassificationManager, ClassifiedItem, ClusterLayer, ClusterSymbol, ComparisonOperator, 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, ENDS_WITH_OPERATORS, 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, FILLED_OPERATORS, FeatureLayer, FilterConditionOperation, Fullscreen, GEOMETRY_ATTRIBUTE, ItemSeparator, ItemText, LabelSymbol, Legend, LegendParameterDescription, LegendProvider, LegendSection, LegendSymbolRenderer, LineMiterKind, LineMiterRender, Map, MapControl, MapControls, MapLegendContainer, MapLegendControl, MapLegendDescription, MapLegendDescriptionContainer, MapLegendExpandButton, MapLegendHeader, MapLegendItem, MapLegendItems, MapLegendItemsContainer, MapLegendOther, MapLegendSectionContainer, MapLegendSectionItems, MapLegendValueDescr, MapLegendValues, MapLegendValuesOther, MapLegendValuesRange, MapProvider, MaximizedLegend, MaximizedLegendContainer, Measure, MeasureTool, Measurer, MinimizedLegend, MinimizedLegendContainer, NO_CONTENT_VALUE, Noop, OPERATOR_CONDITION_REMAP, PARAMETER_INFOS, PREVIEW_LIMITS, RANGE_OPERATORS, SGisBrushFill, SGisImageFill, SGisPolygonSymbol, SGisPolylineSymbol, SOLID_INTERVALS, STARTS_WITH_OPERATORS, 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, createHiddenCondition, createLabelSymbol, createLegendSymbol, createOtherHiddenCondition, createSvgGradient, createValueTitle, dateComparisonOperators, defaultOffset, defineStrokeStylePreset, deserializeSymbol, evaluateFeature, extractStyle, extractSymbol, findChildFeatureStyle, findChildFeatureSymbol, formatArea, formatAttributeValue, formatDate, formatLength, formatPolygonMeasure, formatRangeClassValue, formatUniqueClassValue, formatValue$1 as formatValue, getAttributeFromCondition, getAttributeNameFromClassified, getAttributeNameFromCondition, getAttributeType, getAttributesConfiguration, getChildSymbols, getClassified, getCrs, getDashStylePreset, getDate, getDimensions, getExprFromCondition, getExtractedSymbol, 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, isClusterFillColor, isClusterSymbol, 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, numberComparisonOperators, numberWithSpaces, packStyle, phoneHref, polygonCircleFromPoint, printRangeClass, renderSymbolToCanvas, selectedPoint, selectedPolygon, selectedPolyline, serializeSvgPointSymbol, setDefaultParameterValue, setParameterValue, shouldUpdateMapState, solidStrokeStylePreset, strokeStylePresets, symbolParameterWalker, symbolTypeGuard, textComparisonOperators, toIntervals, toLineDash, unClassify, updateMapResolution, updateSymbolParameter, urlHref, useCanvas, useClusterLayer, useCrs, useDebouncedCallback, useDraggableMarker, useEventPoint, useEvergisContext, useEvergisDynamicLayer, useEvergisSelect, useEvergisSelectContext, useEvergisTileLayer, useFeatureLayer, useLayerOrder, useLayerVisibility, useLegendContext, useMapBboxChange, useMapContext, useMapLevel, useMapPick, useMapResize, useMapState, useMapView, useMapViewActions, useMapWrapper, useMaxMinScale, useMetersToPixels, useMetersToPixelsCb, useMount, useNode, useProperty, useScale, useSvgSymbol, useSymbol, useToggle, useTooltip, useTooltipContext, useUpdate, useUpdateMapView };
 //# sourceMappingURL=react.esm.js.map