@evergis/react 2.0.172 → 2.0.174

package/dist/react.cjs.development.js

@@ -13,15 +13,9 @@ var _Map = require('@evergis/sgis/es/Map');
 var DomPainter = require('@evergis/sgis/es/painters/DomPainter/DomPainter');
 var FeatureLayer$1 = require('@evergis/sgis/es/layers/FeatureLayer');
 var icons = require('@evergis/icons');
-var dateFns = require('date-fns');
-var condition = require('@evergis/condition');
-var MultiPoint = require('@evergis/sgis/es/features/MultiPoint');
-var Polyline = require('@evergis/sgis/es/features/Polyline');
-var Polygon = require('@evergis/sgis/es/features/Polygon');
-var PointFeature = require('@evergis/sgis/es/features/PointFeature');
-var Crs = require('@evergis/sgis/es/Crs');
 var BrushFill = require('@evergis/sgis/es/symbols/polygon/BrushFill');
 var color = require('@evergis/color');
+var condition = require('@evergis/condition');
 var ImageFill = require('@evergis/sgis/es/symbols/polygon/ImageFill');
 var Simple = require('@evergis/sgis/es/symbols/polygon/Simple');
 var PolylineSymbol = require('@evergis/sgis/es/symbols/PolylineSymbol');
@@ -30,9 +24,16 @@ var geotools = require('@evergis/sgis/es/geotools');
 var math = require('@evergis/sgis/es/utils/math');
 var PolylineControl = require('@evergis/sgis/es/controls/PolylineControl');
 var Label = require('@evergis/sgis/es/features/Label');
+var Crs = require('@evergis/sgis/es/Crs');
+var Polygon = require('@evergis/sgis/es/features/Polygon');
 var Control = require('@evergis/sgis/es/controls/Control');
+var dateFns = require('date-fns');
+var MultiPoint = require('@evergis/sgis/es/features/MultiPoint');
+var Polyline = require('@evergis/sgis/es/features/Polyline');
+var PointFeature = require('@evergis/sgis/es/features/PointFeature');
 var PolyEditor = require('@evergis/sgis/es/controls/PolyEditor');
 var get = _interopDefault(require('lodash/get'));
+var lodash = require('lodash');
 var ReactDOM = _interopDefault(require('react-dom'));
 var _Symbol = require('@evergis/sgis/es/symbols/Symbol');
 var Poly$1 = require('@evergis/sgis/es/features/Poly');
@@ -456,226 +457,6 @@ const useEvergisCard = features => {
   };
 };
 
-const NO_CONTENT_VALUE = '—';
-
-(function (DateFormat) {
-  DateFormat["ClientDefaultFormat"] = "dd.MM.yyyy HH:mm";
-  DateFormat["DateTime"] = "dd.MM.yyyy HH:mm:ss";
-  DateFormat["UTC"] = "yyyy-MM-dd'T'HH:mm:ss.sssxxx";
-  DateFormat["AxisTooltip"] = "d MMMM yyyy";
-})(exports.DateFormat || (exports.DateFormat = {}));
-
-const stringDateParsers = [dateFns.parseJSON, dateFns.parseISO, rawDate => new Date(rawDate)];
-const getDate = rawDate => {
-  if (!rawDate) return null;
-
-  if (typeof rawDate === "string") {
-    for (const parser of stringDateParsers) {
-      const date = parser(rawDate);
-
-      if (dateFns.isValid(date)) {
-        return dateFns.toDate(date);
-      }
-    }
-
-    return null;
-  }
-
-  const parsedDate = dateFns.toDate(rawDate);
-  return dateFns.isValid(parsedDate) ? parsedDate : null;
-};
-const formatDate = function formatDate(date, _temp) {
-  let {
-    dateFormat = exports.DateFormat.ClientDefaultFormat,
-    defaultValue = NO_CONTENT_VALUE
-  } = _temp === void 0 ? {} : _temp;
-  const dateValue = date ? getDate(date) : null;
-
-  if (dateFns.isValid(dateValue)) {
-    return dateFns.format(dateValue, dateFormat);
-  }
-
-  return "" + defaultValue;
-};
-
-function numberWithSpaces(x, fractionDigits, delim) {
-  if (fractionDigits === void 0) {
-    fractionDigits = 2;
-  }
-
-  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);
 }
@@ -837,28 +618,95 @@ 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 _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));
@@ -1063,134 +911,6 @@ function getRangeValues(_ref, isDouble, isDate, index) {
   };
 }
 
-(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";
-})(exports.SrId || (exports.SrId = {}));
-
-const CRS_MAP = {
-  [exports.SrId.WebMercator]: Crs.webMercator,
-  [exports.SrId.Geo]: Crs.geo,
-  [exports.SrId.Wgs84]: Crs.wgs84,
-  [exports.SrId.EllipticalMercator]: Crs.ellipticalMercator
-};
-const DEFAULT_SRID = exports.SrId.WebMercator;
-const DEFAULT_CRS = CRS_MAP[DEFAULT_SRID];
-const getCrs = srId => CRS_MAP[srId];
-
-const getFeatureAttributeType = attributeValue => {
-  if (attributeValue instanceof Date) {
-    return api.AttributeType.DateTime;
-  }
-
-  if (typeof attributeValue === 'string') {
-    return api.AttributeType.String;
-  }
-
-  if (typeof attributeValue === 'number') {
-    return api.AttributeType.Int64;
-  }
-
-  return api.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) || api.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);
@@ -1637,35 +1357,659 @@ 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);
+const NO_CONTENT_VALUE = '—';
 
-  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
+(function (DateFormat) {
+  DateFormat["ClientDefaultFormat"] = "dd.MM.yyyy HH:mm";
+  DateFormat["DateTime"] = "dd.MM.yyyy HH:mm:ss";
+  DateFormat["UTC"] = "yyyy-MM-dd'T'HH:mm:ss.sssxxx";
+  DateFormat["AxisTooltip"] = "d MMMM yyyy";
+})(exports.DateFormat || (exports.DateFormat = {}));
 
-  function BaseMeasureToolCreator(map, painter, params) {
-    var _this;
+const stringDateParsers = [dateFns.parseJSON, dateFns.parseISO, rawDate => new Date(rawDate)];
+const getDate = rawDate => {
+  if (!rawDate) return null;
 
-    _classCallCheck(this, BaseMeasureToolCreator);
+  if (typeof rawDate === "string") {
+    for (const parser of stringDateParsers) {
+      const date = parser(rawDate);
 
-    _this = _super.call(this, map, params);
+      if (dateFns.isValid(date)) {
+        return dateFns.toDate(date);
+      }
+    }
 
-    _this.cancel = () => {
-      _this.fire('cancel');
-    };
+    return null;
+  }
 
-    _this.painter = painter;
-    _this.renderLabelSymbol = params.renderLabelSymbol;
-    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
-    _this.areaSymbol = params.areaSymbol;
+  const parsedDate = dateFns.toDate(rawDate);
+  return dateFns.isValid(parsedDate) ? parsedDate : null;
+};
+const formatDate = function formatDate(date, _temp) {
+  let {
+    dateFormat = exports.DateFormat.ClientDefaultFormat,
+    defaultValue = NO_CONTENT_VALUE
+  } = _temp === void 0 ? {} : _temp;
+  const dateValue = date ? getDate(date) : null;
 
-    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+  if (dateFns.isValid(dateValue)) {
+    return dateFns.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 (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";
+})(exports.SrId || (exports.SrId = {}));
+
+const CRS_MAP = {
+  [exports.SrId.WebMercator]: Crs.webMercator,
+  [exports.SrId.Geo]: Crs.geo,
+  [exports.SrId.Wgs84]: Crs.wgs84,
+  [exports.SrId.EllipticalMercator]: Crs.ellipticalMercator
+};
+const DEFAULT_SRID = exports.SrId.WebMercator;
+const DEFAULT_CRS = CRS_MAP[DEFAULT_SRID];
+const getCrs = srId => CRS_MAP[srId];
+
+const getFeatureAttributeType = attributeValue => {
+  if (attributeValue instanceof Date) {
+    return api.AttributeType.DateTime;
+  }
+
+  if (typeof attributeValue === 'string') {
+    return api.AttributeType.String;
+  }
+
+  if (typeof attributeValue === 'number') {
+    return api.AttributeType.Int64;
+  }
+
+  return api.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 api.GeometryType.Point:
+          return new PointFeature.PointFeature(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
+
+        case api.GeometryType.Multipoint:
+          return new MultiPoint.MultiPoint(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
+
+        case api.GeometryType.Polyline:
+          return new Polyline.Polyline(coordinates, {
+            symbol: selectedPolyline,
+            crs
+          });
+
+        case api.GeometryType.Polygon:
+          return new Polygon.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$1, attributes) {
+  try {
+    const evaluator = new condition.ConditionEvaluator(attributes);
+    const result = evaluator.evaluate(condition$1);
+
+    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"));
+}
+
+(function (FilterConditionOperation) {
+  FilterConditionOperation["AND"] = "&&";
+  FilterConditionOperation["OR"] = "||";
+})(exports.FilterConditionOperation || (exports.FilterConditionOperation = {}));
+
+(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";
+})(exports.ComparisonOperator || (exports.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 math.softEquals(firstPoint[0], lastPoint[0], distance) && math.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);
@@ -1974,6 +2318,197 @@ const isParameterType = (types, parameter) => {
   })) || false;
 };
 
+const comparisonOperatorMapReversed = {
+  [condition.TokenType.ArEq]: exports.ComparisonOperator.Equals,
+  [condition.TokenType.ArNotEq]: exports.ComparisonOperator.NotEquals,
+  [condition.TokenType.ArGr]: exports.ComparisonOperator.GreaterThan,
+  [condition.TokenType.ArLs]: exports.ComparisonOperator.LessThan,
+  [condition.TokenType.ArGre]: exports.ComparisonOperator.GreaterOrEquals,
+  [condition.TokenType.ArLse]: exports.ComparisonOperator.LessOrEquals,
+  [condition.TokenType.Between]: exports.ComparisonOperator.Between,
+  [condition.TokenType.Outside]: exports.ComparisonOperator.Outside
+};
+const NUMERIC_ATTRIBUTE_TYPES = [api.AttributeType.Int32, api.AttributeType.Int64, api.AttributeType.DateTime, api.AttributeType.Double];
+
+const formatValue = (value, isDate) => {
+  return isDate ? "#'" + formatDate(value, {
+    dateFormat: exports.DateFormat.UTC,
+    defaultValue: value
+  }) + "'" : value ? value.toString() : 0;
+};
+
+function formatCondition(condition$1) {
+  const {
+    comparisonOperator,
+    value,
+    type,
+    attribute
+  } = condition$1;
+  const operator = OPERATOR_CONDITION_REMAP[comparisonOperator] || comparisonOperator;
+  const preparedValue = typeof value === "string" && value.includes(" - ") ? value.split(" - ") : value;
+  const isDate = type === api.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 = lodash.isNil(preparedValue) ? "{null}" : formattedValue;
+  const valueEscaped = escapeValue && typeof nulledValue === "string" ? "'" + condition.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 === exports.ComparisonOperator.NotEquals);
+
+    if (value.startsWith(condition.Char.PERCENTAGE) && value.endsWith(condition.Char.PERCENTAGE)) {
+      return {
+        value: value.slice(1, -1),
+        comparisonOperator: CONTAINS_OPERATORS[operatorIndex]
+      };
+    }
+
+    if (value.startsWith(condition.Char.PERCENTAGE)) {
+      return {
+        value: value.slice(1),
+        comparisonOperator: ENDS_WITH_OPERATORS[operatorIndex]
+      };
+    }
+
+    if (value.endsWith(condition.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 exports.ComparisonOperator.Contains:
+    case exports.ComparisonOperator.NotContains:
+      return addContains(value);
+
+    case exports.ComparisonOperator.StartsWith:
+    case exports.ComparisonOperator.NotStartsWith:
+      return addStartsWith(value);
+
+    case exports.ComparisonOperator.EndsWith:
+    case exports.ComparisonOperator.NotEndsWith:
+      return addEndsWith(value);
+
+    case exports.ComparisonOperator.Between:
+      return condition.Char.BETWEEN;
+
+    case exports.ComparisonOperator.Outside:
+      return condition.Char.OUTSIDE;
+
+    default:
+      return value;
+  }
+}
+
+let FilterCondition = /*#__PURE__*/function () {
+  function FilterCondition(condition$1) {
+    if (condition$1 === void 0) {
+      condition$1 = null;
+    }
+
+    _classCallCheck(this, FilterCondition);
+
+    this.condition = condition$1;
+    this.conditionInterpreter = new condition.ConditionInterpreter(condition$1);
+  }
+
+  _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(condition.TokenType.BoolOr);
+      const isAndCondition = value.boolOperations.includes(condition.TokenType.BoolAnd);
+
+      if (isOrCondition && isAndCondition) {
+        return null;
+      }
+
+      return isOrCondition ? exports.FilterConditionOperation.OR : isAndCondition ? exports.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(" ");
@@ -2007,7 +2542,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 === api.AttributeType.DateTime) {
@@ -2026,7 +2561,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 {
@@ -2077,7 +2612,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),
@@ -2315,8 +2850,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 = exports.ComparisonOperator.Outside;
+    } else if (value.from) {
+      newValue = value.from;
+      comparisonOperator = exports.ComparisonOperator.LessThan;
+    } else if (value.to) {
+      newValue = value.to;
+      comparisonOperator = exports.ComparisonOperator.GreaterThan;
+    }
+  } else {
+    newValue = value.uniqueValue;
+    comparisonOperator = exports.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: exports.ComparisonOperator.LessOrEquals,
+      value: value.to || value.from
+    })).toString();
+  } else {
+    const conditions = values.map(val => new FilterCondition(createConditionString({
+      attribute: attributeName,
+      type: attributeType,
+      comparisonOperator: exports.ComparisonOperator.Equals,
+      value: val.uniqueValue
+    })).toString());
+    hiddenCondition = "( " + conditions.filter(Boolean).join(" " + exports.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,
@@ -2330,33 +2920,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 !== api.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 !== api.AttributeType.String) {
+    items.reverse();
+  }
+
   return [...items, other];
 };
 const getClassified = layerInfo => {
@@ -2492,6 +3090,16 @@ function getAttributeType(layer, attributeName) {
   return attribute ? attribute.type : api.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,
@@ -2574,6 +3182,34 @@ const PARAMETER_INFOS = {
 
   })
 };
+const OPERATOR_CONDITION_REMAP = {
+  [exports.ComparisonOperator.Equals]: "==",
+  [exports.ComparisonOperator.NotEquals]: "!=",
+  [exports.ComparisonOperator.GreaterThan]: ">",
+  [exports.ComparisonOperator.GreaterOrEquals]: ">=",
+  [exports.ComparisonOperator.LessThan]: "<",
+  [exports.ComparisonOperator.LessOrEquals]: "<=",
+  [exports.ComparisonOperator.Filled]: "!=",
+  [exports.ComparisonOperator.Empty]: "==",
+  [exports.ComparisonOperator.Contains]: "==",
+  [exports.ComparisonOperator.NotContains]: "!=",
+  [exports.ComparisonOperator.StartsWith]: "==",
+  [exports.ComparisonOperator.NotStartsWith]: "!=",
+  [exports.ComparisonOperator.EndsWith]: "==",
+  [exports.ComparisonOperator.NotEndsWith]: "!=",
+  [exports.ComparisonOperator.Between]: "between",
+  [exports.ComparisonOperator.Outside]: "!between"
+};
+const BASE_OPERATORS = [exports.ComparisonOperator.Equals, exports.ComparisonOperator.NotEquals];
+const CONTAINS_OPERATORS = [exports.ComparisonOperator.Contains, exports.ComparisonOperator.NotContains];
+const FILLED_OPERATORS = [exports.ComparisonOperator.Filled, exports.ComparisonOperator.Empty];
+const STARTS_WITH_OPERATORS = [exports.ComparisonOperator.StartsWith, exports.ComparisonOperator.NotStartsWith];
+const ENDS_WITH_OPERATORS = [exports.ComparisonOperator.EndsWith, exports.ComparisonOperator.NotEndsWith];
+const RANGE_OPERATORS = [exports.ComparisonOperator.LessThan, exports.ComparisonOperator.LessOrEquals, exports.ComparisonOperator.GreaterThan, exports.ComparisonOperator.GreaterOrEquals];
+const BETWEEN_OPERATORS = [exports.ComparisonOperator.Between, exports.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];
 
 (function (SvgSymbolBg) {
   SvgSymbolBg["Rect"] = "rect";
@@ -2650,1578 +3286,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 === exports.LineMiterKind.FilledCircle;
-      return new Poly.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 === exports.LineMiterKind.FilledSquare;
-      return new Poly.PolyRender(miterRings, {
-        enclosed: true,
-        fillColor: isFilled ? this.color : void 0,
-        fillStyle: isFilled ? Poly.FillStyle.Color : Poly.FillStyle.None,
-        lineCap: 'square',
-        lineJoin: 'miter',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth
-      });
-    }
-  }]);
-
-  return SquareLineMiterRender;
-}(LineMiterRender);
-
-const getLineMiterRender = options => {
-  switch (options.kind) {
-    case exports.LineMiterKind.Arrow:
-    case exports.LineMiterKind.FilledArrow:
-      return new ArrowLineMiterRender(options);
-
-    case exports.LineMiterKind.Square:
-    case exports.LineMiterKind.FilledSquare:
-      return new SquareLineMiterRender(options);
-
-    case exports.LineMiterKind.Circle:
-    case exports.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.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__default.createElement(Component, {
-          content: content
-        }), node);
-      } else {
-        node.innerText = content;
-      }
-    }
-  }]);
-
-  return LabelSymbol;
-}(_Symbol.DynamicPointSymbol);
-
-const defaultOffset = [8, -16];
-const createLabelSymbol = props => {
-  const {
-    offset = defaultOffset,
-    renderLabel = _ref => {
-      let {
-        content
-      } = _ref;
-      return React__default.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 === exports.LineMiterKind.FilledCircle;
+      return new Poly.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 Poly.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 Poly.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.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 Poly.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 Poly.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 === exports.LineMiterKind.FilledSquare;
+      return new Poly.PolyRender(miterRings, {
+        enclosed: true,
+        fillColor: isFilled ? this.color : void 0,
+        fillStyle: isFilled ? Poly.FillStyle.Color : Poly.FillStyle.None,
+        lineCap: 'square',
+        lineJoin: 'miter',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth
+      });
     }
   }]);
 
-  return ShadowedPointSymbol;
-}(Point.PointSymbol);
+  return SquareLineMiterRender;
+}(LineMiterRender);
 
-let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
-  _inherits(ShadowedPolySymbol, _PolylineSymbol);
+const getLineMiterRender = options => {
+  switch (options.kind) {
+    case exports.LineMiterKind.Arrow:
+    case exports.LineMiterKind.FilledArrow:
+      return new ArrowLineMiterRender(options);
 
-  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
+    case exports.LineMiterKind.Square:
+    case exports.LineMiterKind.FilledSquare:
+      return new SquareLineMiterRender(options);
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPolySymbol(options) {
-    _classCallCheck(this, ShadowedPolySymbol);
+    case exports.LineMiterKind.Circle:
+    case exports.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$1.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 Poly.PolyRender(coordinates, {
-        fillStyle: Poly.FillStyle.None,
-        enclosed: this.enclose,
-        strokeColor: this.shadowColor,
-        strokeWidth: this.shadowSize,
-        lineDash: this.lineDash
-      });
-    }
-  }, {
-    key: "getPolyRender",
-    value: function getPolyRender(coordinates, _feature) {
-      return new Poly.PolyRender(coordinates, {
-        fillStyle: this.enclose ? Poly.FillStyle.Color : Poly.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.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.PolylineSymbol);
 
-const defaultPathStyles = {
-  strokeWidth: 2,
-  strokeColor: 'rgb(0, 163, 245)',
-  fillStyle: Poly.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$1.Poly ? new PolylineSymbol.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 Render.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$1.Poly ? new PolylineSymbol.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__default.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;
+}(_Symbol.DynamicPointSymbol);
+
+const defaultOffset = [8, -16];
+const createLabelSymbol = props => {
+  const {
+    offset = defaultOffset,
+    renderLabel = _ref => {
+      let {
+        content
+      } = _ref;
+      return React__default.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.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 Poly.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 Poly.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.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 Poly.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 === EventHandler.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(EventHandler.mouseEvents).forEach(eventName => {
-        if (dynamicFeature.eventFlags & EventHandler.mouseEvents[eventName].flag) {
-          domEvent.listenDomEvent(svgNode, EventHandler.mouseEvents[eventName].type, event => {
-            dynamicFeature.fire(EventHandler.mouseEvents[eventName].type, {
-              node: svgNode,
-              browserEvent: event
-            });
-          });
-        }
+    key: "getPointArc",
+    value: function getPointArc(position, _ref2) {
+      let {
+        strokeWidth,
+        fillColor,
+        strokeColor,
+        size = 6
+      } = _ref2;
+      return new Poly.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.Symbol);
-
-function isSGisPointSymbol(symbol) {
-  return symbol instanceof Point.PointSymbol || symbol instanceof StaticImageSymbol.StaticImageSymbol || symbol instanceof Square.SquareSymbol || symbol instanceof MaskedImage.MaskedImage;
-}
-function isSGisImageSymbol(symbol) {
-  return symbol instanceof StaticImageSymbol.StaticImageSymbol || symbol instanceof MaskedImage.MaskedImage;
-}
-function isSGisPolygonSymbol(symbol) {
-  return symbol instanceof Simple.PolygonSymbol || symbol instanceof BrushFill.BrushFill || symbol instanceof ImageFill.ImageFill;
-}
-function isSGisPolylineSymbol(symbol) {
-  return symbol instanceof PolylineSymbol.PolylineSymbol;
-}
-function isSGisH3Symbol(symbol) {
-  return symbol instanceof H3Symbol.H3Symbol;
-}
-function isSGisClusterSymbol(symbol) {
-  return !!symbol.singleObjectSymbol;
-}
+  return ShadowedPointSymbol;
+}(Point.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.PointFeature([50, -50], {
-  crs: Crs.plain
-});
-const lineFeature = /*#__PURE__*/new Polyline.Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
-  crs: Crs.plain
-});
-const polygonFeature = /*#__PURE__*/new Polygon.Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
-  crs: Crs.plain
-});
-const h3gridFeature = /*#__PURE__*/new H3Feature.H3Feature([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
-  crs: Crs.plain
-});
-const lineLegendFeature = /*#__PURE__*/new Polyline.Polyline([[0, -50], [100, -50]], {
-  crs: Crs.plain
-});
-const polygonLegendFeature = /*#__PURE__*/new Polygon.Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
-  crs: Crs.plain
-});
-const polygonMapLegendFeature = /*#__PURE__*/new Polygon.Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
-  crs: 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$1.Poly)) return [];
 
-  if (isSGisPolygonSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, Crs.plain);
-  }
+      const coordinates = _get(_getPrototypeOf(ShadowedPolySymbol.prototype), "getRenderedCoordinates", this).call(this, feature, resolution, crs);
 
-  if (isSGisPolylineSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, Crs.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, Crs.plain);
-  }
+      if (shadowRender) {
+        renders = [shadowRender, polyRender];
+      }
 
-  return symbol.renderFunctionAsync(featuresToRender.point, resolution, Crs.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 Poly.PolyRender(coordinates, {
+        fillStyle: Poly.FillStyle.None,
+        enclosed: this.enclose,
+        strokeColor: this.shadowColor,
+        strokeWidth: this.shadowSize,
+        lineDash: this.lineDash
+      });
+    }
+  }, {
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, _feature) {
+      return new Poly.PolyRender(coordinates, {
+        fillStyle: this.enclose ? Poly.FillStyle.Color : Poly.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.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.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 Point.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 Point.PointSymbol(deserializeSvgPointSymbolParams(symbol));
-}
+    return _super.call(this, props);
+  }
 
-function deserializeSquareSymbol(symbol) {
-  return new Square.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.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.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: Poly.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$1) {
-  return color$1 ? new color.Color(color$1).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$1.Poly ? new PolylineSymbol.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 Render.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$1.Poly ? new PolylineSymbol.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.SvgRender(_extends({
+        coordinates
+      }, defaultPathStyles, {
+        appendToSvg: this.appendToSvg
+      }, this.pathStyles));
 
-      if (!crs) {
-        return null;
+      if (this.circle) {
+        svgRender._setArcNode();
+      } else {
+        svgRender._setPolyNode();
       }
 
-      switch (type) {
-        case api.GeometryType.Point:
-          return new PointFeature.PointFeature(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case api.GeometryType.Multipoint:
-          return new MultiPoint.MultiPoint(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case api.GeometryType.Polyline:
-          return new Polyline.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 api.GeometryType.Polygon:
-          return new Polygon.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$1, attributes) {
-  try {
-    const evaluator = new condition.ConditionEvaluator(attributes);
-    const result = evaluator.evaluate(condition$1);
+    key: "_setEventListeners",
+    value: function _setEventListeners(dynamicFeature) {
+      var _dynamicFeature$__dyn;
 
-    if (result instanceof Error) {
-      return null;
+      if (dynamicFeature.eventFlags === EventHandler.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(EventHandler.mouseEvents).forEach(eventName => {
+        if (dynamicFeature.eventFlags & EventHandler.mouseEvents[eventName].flag) {
+          domEvent.listenDomEvent(svgNode, EventHandler.mouseEvents[eventName].type, event => {
+            dynamicFeature.fire(EventHandler.mouseEvents[eventName].type, {
+              node: svgNode,
+              browserEvent: event
+            });
+          });
+        }
+      });
     }
+  }]);
 
-    return result;
-  } catch (_unused) {
-    return null;
-  }
-}
+  return SVGPoly;
+}(_Symbol.Symbol);
 
-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 Point.PointSymbol || symbol instanceof StaticImageSymbol.StaticImageSymbol || symbol instanceof Square.SquareSymbol || symbol instanceof MaskedImage.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.StaticImageSymbol || symbol instanceof MaskedImage.MaskedImage;
 }
-
-function extractValuesAttribute(parameterValues, attributes) {
-  const name = getAttributeNameFromClassified(parameterValues) || '';
-  const value = name && getAttributeValue(attributes, name);
-  return [name, value];
+function isSGisPolygonSymbol(symbol) {
+  return symbol instanceof Simple.PolygonSymbol || symbol instanceof BrushFill.BrushFill || symbol instanceof ImageFill.ImageFill;
+}
+function isSGisPolylineSymbol(symbol) {
+  return symbol instanceof PolylineSymbol.PolylineSymbol;
+}
+function isSGisH3Symbol(symbol) {
+  return symbol instanceof H3Symbol.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.PointFeature([50, -50], {
+  crs: Crs.plain
+});
+const lineFeature = /*#__PURE__*/new Polyline.Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
+  crs: Crs.plain
+});
+const polygonFeature = /*#__PURE__*/new Polygon.Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
+  crs: Crs.plain
+});
+const h3gridFeature = /*#__PURE__*/new H3Feature.H3Feature([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
+  crs: Crs.plain
+});
+const lineLegendFeature = /*#__PURE__*/new Polyline.Polyline([[0, -50], [100, -50]], {
+  crs: Crs.plain
+});
+const polygonLegendFeature = /*#__PURE__*/new Polygon.Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
+  crs: Crs.plain
+});
+const polygonMapLegendFeature = /*#__PURE__*/new Polygon.Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
+  crs: 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, Crs.plain);
+  }
+
+  if (isSGisPolylineSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, Crs.plain);
+  }
+
+  if (isSGisH3Symbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.h3grid, resolution, Crs.plain);
+  }
+
+  return symbol.renderFunctionAsync(featuresToRender.point, resolution, Crs.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.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 Point.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 Point.PointSymbol(deserializeSvgPointSymbolParams(symbol));
 }
 
-function formatArea(num) {
-  let result = num;
-  let measure = 'м²';
+function deserializeSquareSymbol(symbol) {
+  return new Square.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.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.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 math.softEquals(firstPoint[0], lastPoint[0], distance) && math.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) => React.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$1) {
+  return color$1 ? new color.Color(color$1).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;
@@ -5130,6 +5353,12 @@ const useToggle = initial => {
   return [state, toggle, setState];
 };
 
+function useNode() {
+  const [node, onSetNode] = React.useState(null);
+  const ref = React.useCallback(onSetNode, [onSetNode]);
+  return [ref, node];
+}
+
 const Symbol = _ref => {
   let {
     symbol,
@@ -5577,7 +5806,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__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
 const ItemText = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n"])), _ref => {
   let {
@@ -5589,7 +5818,7 @@ const ItemText = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templa
 });
 const ItemSeparator = /*#__PURE__*/styled__default.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__default("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__default.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__default.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;
@@ -5628,16 +5857,33 @@ const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObjec
 const MapLegendContainer = /*#__PURE__*/styled__default.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__default.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__default.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__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
-const MapLegendSectionContainer = /*#__PURE__*/styled__default.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__default.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__default.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__default(MaximizedLegendContainer)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
+const MapLegendSectionContainer = /*#__PURE__*/styled__default.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__default.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__default.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 styled.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 styled.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) {
@@ -5645,79 +5891,79 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
     value = 0;
   }
 
-  return styled.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 styled.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__*/styled.css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled__default.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__*/styled.css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
+const MapLegendItem = /*#__PURE__*/styled__default.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__default(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__*/styled.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__*/styled.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__default.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__default.div(_templateObject23 || (_templateObject23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
-const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject24 || (_templateObject24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
-const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.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__*/styled.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__default(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__*/styled.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__*/styled.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__default.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__default.div(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
+const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
+const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.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__*/styled.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__default.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__default.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__default.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__default.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__default.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__default(MapLegendOther)(_templateObject33 || (_templateObject33 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled__default.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__default.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__default.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__default.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__default(MapLegendOther)(_templateObject35 || (_templateObject35 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled__default.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(" - ")) {
@@ -5737,6 +5983,8 @@ const MinimizedLegend = _ref => {
   var _currentValues$, _currentValues, _currentValues$2, _currentValues2;
 
   let {
+    innerRef,
+    isShown,
     values,
     title,
     parameter,
@@ -5749,7 +5997,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 = React.useCallback(hiddenCondition => hiddenCondition ? hiddenLegends == null ? void 0 : hiddenLegends.some(condition => hiddenCondition.includes(condition)) : false, [hiddenLegends]);
-  return React__default.createElement(MinimizedLegendContainer, null, !!title && React__default.createElement(MapLegendValueDescr, null, title), isSize ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SizeMinimizedLegend, null, React__default.createElement(SizeMinimizedLegendSymbol, null, React__default.createElement(MapLegendItems, {
+  return React__default.createElement(MinimizedLegendContainer, {
+    ref: innerRef,
+    isShown: isShown
+  }, !!title && React__default.createElement(MapLegendValueDescr, null, title), isSize ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SizeMinimizedLegend, null, React__default.createElement(SizeMinimizedLegendSymbol, null, React__default.createElement(MapLegendItems, {
     parameter: parameter,
     isSize: true
   }, currentValues.map((value, index) => React__default.createElement(MapLegendItem, {
@@ -6000,11 +6251,16 @@ const LegendSymbolRenderer = /*#__PURE__*/React.memo(_ref => {
 
 const MaximizedLegend = _ref => {
   let {
+    innerRef,
+    isShown,
+    layerName,
     symbol: sectionSymbol,
     parameter,
     values,
     index: sectionIndex,
-    attributeType
+    attributeType,
+    hiddenLegends,
+    toggleHiddenLegend
   } = _ref;
   const {
     t
@@ -6044,19 +6300,22 @@ const MaximizedLegend = _ref => {
 
     return React__default.createElement(React__default.Fragment, null, columns.map(renderColumn));
   }, [isDate, renderColumn, t]);
+  const isHidden = React.useCallback(hiddenCondition => !!(hiddenLegends != null && hiddenLegends.includes(hiddenCondition)), [hiddenLegends]);
   const renderLegend = React.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__default.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__default.createElement(MapLegendItems, {
       parameter: parameter,
       isSize: isSize,
@@ -6066,15 +6325,16 @@ const MaximizedLegend = _ref => {
     }, React__default.createElement(MapLegendItem, {
       key: "" + title + index,
       title: title,
-      value: (parameterValue == null ? void 0 : (_parameterValue$value = parameterValue.values[index]) == null ? void 0 : _parameterValue$value.value) || (parameterValue == null ? void 0 : parameterValue.defaultValue),
+      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__default.createElement(SymbolContainer, null, React__default.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__default.createElement(React__default.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__default.createElement(MaximizedLegendContainer, {
+    ref: innerRef,
+    isShown: isShown
+  }, values.map(renderLegend));
 };
 
 const LegendParameterDescription = _ref => {
@@ -6089,10 +6349,14 @@ const LegendParameterDescription = _ref => {
 
 const LegendSection = _ref => {
   let {
+    layerName,
     symbol,
-    param,
-    params,
+    parameter,
+    parameters,
     classified,
+    hiddenLegends,
+    toggleHiddenLegend,
+    attributeName,
     attributeTitle,
     attributeType,
     index
@@ -6101,55 +6365,67 @@ const LegendSection = _ref => {
     t
   } = reactI18next.useTranslation("common");
   const [isExpanded, toggleExpanded] = useToggle();
+  const [maxRef, maxNode] = useNode();
+  const [minRef, minNode] = useNode();
   return React__default.createElement(MapLegendSectionContainer, null, React__default.createElement(MapLegendHeader, null, attributeTitle), React__default.createElement(LegendParameterDescription, {
-    parameter: param
-  }), isExpanded ? React__default.createElement(MaximizedLegend, {
-    key: param,
+    parameter: parameter
+  }), React__default.createElement(MapLegendSectionItems, {
+    height: isExpanded ? ((maxNode == null ? void 0 : maxNode.offsetHeight) || 0) + 4 : minNode == null ? void 0 : minNode.offsetHeight
+  }, React__default.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__default.createElement(MinimizedLegend, {
-    key: param,
-    values: getMinimizedLegendValues(attributeType, classified, index),
-    defaultValue: classified.defaultValue,
-    parameter: param,
-    attributeType: attributeType
-  }), React__default.createElement(MapLegendExpandButton, {
+    values: getMaximizedLegendValues(attributeName, attributeType, parameter, parameters, classified, symbol, index, t("classification.other"))
+  }), React__default.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__default.createElement(MapLegendExpandButton, {
     onClick: toggleExpanded
   }, t(isExpanded ? "toggleMenu" : "Развернуть")));
 };
 
-const Legend = _ref => {
+const _excluded$3 = ["layerInfo"];
+const Legend = /*#__PURE__*/React.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__default.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__default.createElement(LegendSection, {
+    return React__default.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 {
@@ -6374,12 +6650,12 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
   return MeasureTool;
 }(React__default.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,
@@ -6493,7 +6769,7 @@ const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$2 ||
   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,
@@ -6512,7 +6788,7 @@ const Tooltip = _ref => {
     onEachFeature,
     clickMode
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   const onTooltip = useTooltip(zIndex);
   React.useEffect(() => {
@@ -6554,8 +6830,11 @@ const DraggableMarker = _ref => {
 };
 
 exports.ArrowLineMiterRender = ArrowLineMiterRender;
+exports.BASE_OPERATORS = BASE_OPERATORS;
+exports.BETWEEN_OPERATORS = BETWEEN_OPERATORS;
 exports.BaseMeasureToolCreator = BaseMeasureToolCreator;
 exports.BaseMeasureToolEditor = BaseMeasureToolEditor;
+exports.CONTAINS_OPERATORS = CONTAINS_OPERATORS;
 exports.CRS_MAP = CRS_MAP;
 exports.CardAttributes = CardAttributes;
 exports.CardHeader = CardHeader;
@@ -6579,6 +6858,7 @@ exports.DEFAULT_SYMBOL_SIZE = DEFAULT_SYMBOL_SIZE;
 exports.DEFAULT_SYMBOL_STROKE_COLOR = DEFAULT_SYMBOL_STROKE_COLOR;
 exports.DEFAULT_SYMBOL_WITH_BG_SIZE = DEFAULT_SYMBOL_WITH_BG_SIZE;
 exports.DraggableMarker = DraggableMarker;
+exports.ENDS_WITH_OPERATORS = ENDS_WITH_OPERATORS;
 exports.EXTRA_BORDER_SIZE = EXTRA_BORDER_SIZE;
 exports.EvergisCard = EvergisCard;
 exports.EvergisCardAttribute = EvergisCardAttribute;
@@ -6605,6 +6885,7 @@ exports.EvergisSelectLayer = EvergisSelectLayer;
 exports.EvergisSelectProvider = EvergisSelectProvider;
 exports.EvergisStyle = EvergisStyle;
 exports.EvergisTileLayer = EvergisTileLayer;
+exports.FILLED_OPERATORS = FILLED_OPERATORS;
 exports.FeatureLayer = FeatureLayer;
 exports.Fullscreen = Fullscreen;
 exports.GEOMETRY_ATTRIBUTE = GEOMETRY_ATTRIBUTE;
@@ -6631,12 +6912,14 @@ exports.MapLegendItems = MapLegendItems;
 exports.MapLegendItemsContainer = MapLegendItemsContainer;
 exports.MapLegendOther = MapLegendOther;
 exports.MapLegendSectionContainer = MapLegendSectionContainer;
+exports.MapLegendSectionItems = MapLegendSectionItems;
 exports.MapLegendValueDescr = MapLegendValueDescr;
 exports.MapLegendValues = MapLegendValues;
 exports.MapLegendValuesOther = MapLegendValuesOther;
 exports.MapLegendValuesRange = MapLegendValuesRange;
 exports.MapProvider = MapProvider;
 exports.MaximizedLegend = MaximizedLegend;
+exports.MaximizedLegendContainer = MaximizedLegendContainer;
 exports.Measure = Measure;
 exports.MeasureTool = MeasureTool;
 exports.Measurer = Measurer;
@@ -6644,13 +6927,16 @@ exports.MinimizedLegend = MinimizedLegend;
 exports.MinimizedLegendContainer = MinimizedLegendContainer;
 exports.NO_CONTENT_VALUE = NO_CONTENT_VALUE;
 exports.Noop = Noop;
+exports.OPERATOR_CONDITION_REMAP = OPERATOR_CONDITION_REMAP;
 exports.PARAMETER_INFOS = PARAMETER_INFOS;
 exports.PREVIEW_LIMITS = PREVIEW_LIMITS;
+exports.RANGE_OPERATORS = RANGE_OPERATORS;
 exports.SGisBrushFill = SGisBrushFill;
 exports.SGisImageFill = SGisImageFill;
 exports.SGisPolygonSymbol = SGisPolygonSymbol;
 exports.SGisPolylineSymbol = SGisPolylineSymbol;
 exports.SOLID_INTERVALS = SOLID_INTERVALS;
+exports.STARTS_WITH_OPERATORS = STARTS_WITH_OPERATORS;
 exports.SVGPoly = SVGPoly;
 exports.SYMBOL_CLASSIFICATION = SYMBOL_CLASSIFICATION;
 exports.SYMBOL_LIMITS = SYMBOL_LIMITS;
@@ -6689,11 +6975,13 @@ exports.clamp = clamp;
 exports.convertSvgToBase64 = convertSvgToBase64;
 exports.copyRings = copyRings;
 exports.createCompositeSymbol = createCompositeSymbol;
+exports.createHiddenCondition = createHiddenCondition;
 exports.createLabelSymbol = createLabelSymbol;
 exports.createLegendSymbol = createLegendSymbol;
-exports.createStyleLegend = createStyleLegend;
+exports.createOtherHiddenCondition = createOtherHiddenCondition;
 exports.createSvgGradient = createSvgGradient;
-exports.createValueTitle = createValueTitle$1;
+exports.createValueTitle = createValueTitle;
+exports.dateComparisonOperators = dateComparisonOperators;
 exports.defaultOffset = defaultOffset;
 exports.defineStrokeStylePreset = defineStrokeStylePreset;
 exports.deserializeSymbol = deserializeSymbol;
@@ -6709,7 +6997,7 @@ exports.formatLength = formatLength;
 exports.formatPolygonMeasure = formatPolygonMeasure;
 exports.formatRangeClassValue = formatRangeClassValue;
 exports.formatUniqueClassValue = formatUniqueClassValue;
-exports.formatValue = formatValue;
+exports.formatValue = formatValue$1;
 exports.getAttributeFromCondition = getAttributeFromCondition;
 exports.getAttributeNameFromClassified = getAttributeNameFromClassified;
 exports.getAttributeNameFromCondition = getAttributeNameFromCondition;
@@ -6722,6 +7010,7 @@ exports.getDashStylePreset = getDashStylePreset;
 exports.getDate = getDate;
 exports.getDimensions = getDimensions;
 exports.getExprFromCondition = getExprFromCondition;
+exports.getExtractedSymbol = getExtractedSymbol;
 exports.getFeatureSymbol = getFeatureSymbol;
 exports.getHexColor = getHexColor;
 exports.getLayerDefinition = getLayerDefinition;
@@ -6747,6 +7036,8 @@ exports.getValueFromConditionPart = getValueFromConditionPart;
 exports.isArrowLineMiter = isArrowLineMiter;
 exports.isCalculatedParameter = isCalculatedParameter;
 exports.isCircleLineMiter = isCircleLineMiter;
+exports.isClusterFillColor = isClusterFillColor;
+exports.isClusterSymbol = isClusterSymbol;
 exports.isCompositeSymbol = isCompositeSymbol;
 exports.isDashedBrush = isDashedBrush;
 exports.isFilledLineMitter = isFilledLineMitter;
@@ -6817,6 +7108,7 @@ exports.measureAreaSymbol = measureAreaSymbol;
 exports.measureLengthSymbol = measureLengthSymbol;
 exports.measurePolygonSnapSymbol = measurePolygonSnapSymbol;
 exports.metersToPixels = metersToPixels;
+exports.numberComparisonOperators = numberComparisonOperators;
 exports.numberWithSpaces = numberWithSpaces;
 exports.packStyle = packStyle;
 exports.phoneHref = phoneHref;
@@ -6834,6 +7126,7 @@ exports.solidStrokeStylePreset = solidStrokeStylePreset;
 exports.strokeStylePresets = strokeStylePresets;
 exports.symbolParameterWalker = symbolParameterWalker;
 exports.symbolTypeGuard = symbolTypeGuard;
+exports.textComparisonOperators = textComparisonOperators;
 exports.toIntervals = toIntervals;
 exports.toLineDash = toLineDash;
 exports.unClassify = unClassify;
@@ -6852,15 +7145,11 @@ exports.useEvergisSelect = useEvergisSelect;
 exports.useEvergisSelectContext = useEvergisSelectContext;
 exports.useEvergisTileLayer = useEvergisTileLayer;
 exports.useFeatureLayer = useFeatureLayer;
-exports.useLayerLegend = useLayerLegend;
 exports.useLayerOrder = useLayerOrder;
 exports.useLayerVisibility = useLayerVisibility;
-exports.useLegend = useLegend;
 exports.useLegendContext = useLegendContext;
-exports.useLegendValueSymbol = useLegendValueSymbol;
 exports.useMapBboxChange = useMapBboxChange;
 exports.useMapContext = useMapContext;
-exports.useMapLegend = useMapLegend;
 exports.useMapLevel = useMapLevel;
 exports.useMapPick = useMapPick;
 exports.useMapResize = useMapResize;
@@ -6872,6 +7161,7 @@ exports.useMaxMinScale = useMaxMinScale;
 exports.useMetersToPixels = useMetersToPixels;
 exports.useMetersToPixelsCb = useMetersToPixelsCb;
 exports.useMount = useMount;
+exports.useNode = useNode;
 exports.useProperty = useProperty;
 exports.useScale = useScale;
 exports.useSvgSymbol = useSvgSymbol;