@evergis/react 2.0.146 → 2.0.148

package/dist/react.esm.js

@@ -18,12 +18,8 @@ import { ImageFill } from '@evergis/sgis/es/symbols/polygon/ImageFill';
 import { PolygonSymbol } from '@evergis/sgis/es/symbols/polygon/Simple';
 import { PolylineSymbol } from '@evergis/sgis/es/symbols/PolylineSymbol';
 import { PolyRender, FillStyle } from '@evergis/sgis/es/renders/Poly';
-import { projectRings, length, area, distance } from '@evergis/sgis/es/geotools';
+import { projectRings, distance, length, area } from '@evergis/sgis/es/geotools';
 import { simplifyCoordinates, softEquals } from '@evergis/sgis/es/utils/math';
-import { PolylineControl } from '@evergis/sgis/es/controls/PolylineControl';
-import { LabelFeature } from '@evergis/sgis/es/features/Label';
-import { DrawingFinishEvent } from '@evergis/sgis/es/controls/Control';
-import { PolyEditor } from '@evergis/sgis/es/controls/PolyEditor';
 import ReactDOM from 'react-dom';
 import { DynamicPointSymbol, Symbol as Symbol$1 } from '@evergis/sgis/es/symbols/Symbol';
 import { Poly } from '@evergis/sgis/es/features/Poly';
@@ -38,6 +34,7 @@ import { H3Symbol } from '@evergis/sgis/es/symbols/H3Symbol';
 import { H3Feature } from '@evergis/sgis/es/features/H3Feature';
 import { Canvas } from '@evergis/sgis/es/painters/DomPainter/Canvas';
 import { sGisClickEvent } from '@evergis/sgis/es/commonEvents';
+import { LabelFeature } from '@evergis/sgis/es/features/Label';
 import { ClusterLayer as ClusterLayer$1 } from '@evergis/sgis/es/layers/ClusterLayer';
 import { GridClusterProvider } from '@evergis/sgis/es/layers/clusterProviders/GridClusterProvider';
 import { PointEditor } from '@evergis/sgis/es/controls/PointEditor';
@@ -45,6 +42,9 @@ import { debounce } from '@evergis/sgis/es/utils/utils';
 import styled, { css } from 'styled-components';
 import punycode from 'punycode';
 import { TileLayer as TileLayer$1 } from '@evergis/sgis/es/layers/TileLayer';
+import { PolylineControl } from '@evergis/sgis/es/controls/PolylineControl';
+import { DrawingFinishEvent } from '@evergis/sgis/es/controls/Control';
+import { PolyEditor } from '@evergis/sgis/es/controls/PolyEditor';
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -65,9 +65,6 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
   return Constructor;
 }
 
@@ -101,9 +98,6 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -162,8 +156,6 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
-  } else if (call !== void 0) {
-    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -197,7 +189,7 @@ function _superPropBase(object, property) {
   return object;
 }
 
-function _get() {
+function _get(target, property, receiver) {
   if (typeof Reflect !== "undefined" && Reflect.get) {
     _get = Reflect.get;
   } else {
@@ -208,14 +200,14 @@ function _get() {
       var desc = Object.getOwnPropertyDescriptor(base, property);
 
       if (desc.get) {
-        return desc.get.call(arguments.length < 3 ? target : receiver);
+        return desc.get.call(receiver);
       }
 
       return desc.value;
     };
   }
 
-  return _get.apply(this, arguments);
+  return _get(target, property, receiver || target);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -244,7 +236,7 @@ const defaultApi = /*#__PURE__*/new Api({
   url: BASE_URL
 });
 const evergisContext = /*#__PURE__*/createContext(defaultApi);
-const EvergisProvider = _ref => {
+const EvergisProvider = (_ref) => {
   let {
     api,
     children
@@ -262,7 +254,7 @@ const mapContext = /*#__PURE__*/createContext({
   map: defaultMap,
   painter: defaultPainter
 });
-const MapProvider = _ref => {
+const MapProvider = (_ref) => {
   let {
     map,
     painter,
@@ -284,7 +276,7 @@ const tooltipContext = /*#__PURE__*/createContext({
   layer: defaultLayer,
   popupLayer: defaultPopupLayer
 });
-const TooltipProvider = _ref => {
+const TooltipProvider = (_ref) => {
   let {
     layer,
     popupLayer,
@@ -301,7 +293,7 @@ const TooltipProvider = _ref => {
 const useTooltipContext = () => useContext(tooltipContext);
 
 const LegendContext = /*#__PURE__*/createContext(null);
-const LegendProvider = _ref => {
+const LegendProvider = (_ref) => {
   let {
     symbol,
     children
@@ -313,7 +305,7 @@ const LegendProvider = _ref => {
 const useLegendContext = () => useContext(LegendContext);
 
 const evergisSelectContext = /*#__PURE__*/createContext([]);
-const EvergisSelectProvider = _ref => {
+const EvergisSelectProvider = (_ref) => {
   let {
     layers,
     children
@@ -358,7 +350,7 @@ function useMapViewActions() {
   }, [map]);
   const zoomIn = useCallback(() => zoomTo(1), [zoomTo]);
   const zoomOut = useCallback(() => zoomTo(-1), [zoomTo]);
-  const animateTo = useCallback(_ref => {
+  const animateTo = useCallback((_ref) => {
     let {
       position,
       resolution,
@@ -388,7 +380,7 @@ function useMapViewActions() {
     const {
       tileScheme
     } = map;
-    let tileLevel = tileScheme.levels.find(_ref2 => {
+    let tileLevel = tileScheme.levels.find((_ref2) => {
       let {
         zIndex
       } = _ref2;
@@ -564,7 +556,7 @@ const formatStringAttribute = value => {
 
   const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
 
-  if (attributeValues.every(_ref => {
+  if (attributeValues.every((_ref) => {
     let {
       type
     } = _ref;
@@ -572,7 +564,7 @@ const formatStringAttribute = value => {
   }
   /* String */
   )) {
-    return [stringAttribute(attributeValues.map(_ref2 => {
+    return [stringAttribute(attributeValues.map((_ref2) => {
       let {
         value
       } = _ref2;
@@ -1055,7 +1047,7 @@ const getFeatureAttributeType = attributeValue => {
 };
 const getLayerAttributes = layerDefinition => {
   const attributes = layerDefinition && layerDefinition.attributes || {};
-  return Object.entries(attributes).map(_ref => {
+  return Object.entries(attributes).map((_ref) => {
     let [name, definition] = _ref;
     return _extends({
       name
@@ -1063,7 +1055,7 @@ const getLayerAttributes = layerDefinition => {
   });
 };
 const getFeatureAttributes = attributes => {
-  return attributes ? Object.entries(attributes).map(_ref2 => {
+  return attributes ? Object.entries(attributes).map((_ref2) => {
     let [name, value] = _ref2;
     return {
       name,
@@ -1081,7 +1073,7 @@ const getClassificationAttribute = (attributeName, attributes) => {
   return attribute ? _extends({}, attrNamePart, attribute) : attrNamePart;
 };
 const mergeAttributes = (attributes1, attributes2) => {
-  return attributes1.map(attribute => _extends({}, attribute, attributes2.find(_ref3 => {
+  return attributes1.map(attribute => _extends({}, attribute, attributes2.find((_ref3) => {
     let {
       name
     } = _ref3;
@@ -1496,7 +1488,7 @@ let SGisPolygonSymbol = /*#__PURE__*/function (_sPolygonSymbol) {
 const adaptMiterRings = (rings, resolution, fromCrs, toCrs) => {
   const projected = projectRings(rings, fromCrs, toCrs);
   return simplifyCoordinates(projected.map(ring => // @ts-ignore
-  ring.map(_ref => {
+  ring.map((_ref) => {
     let [x, y] = _ref;
     return [x / resolution, y / -resolution];
   })), 1);
@@ -1588,1675 +1580,1333 @@ let ArrowLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   return ArrowLineMiterRender;
 }(LineMiterRender);
 
-const DEFAULT_FORMATTERS = {
-  polygon: formatPolygonMeasure,
-  length: formatLength
-};
-
-const COORD_FRACTION = 6;
-const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
-let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
-  _inherits(BaseMeasureToolCreator, _PolylineControl);
-
-  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
+let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
+  _inherits(CircleLineMiterRender, _LineMiterRender);
 
-  function BaseMeasureToolCreator(map, painter, params) {
-    var _this;
+  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
 
-    _classCallCheck(this, BaseMeasureToolCreator);
+  function CircleLineMiterRender() {
+    _classCallCheck(this, CircleLineMiterRender);
 
-    _this = _super.call(this, map, params);
+    return _super.apply(this, arguments);
+  }
 
-    _this.cancel = () => {
-      _this.fire('cancel');
-    };
+  _createClass(CircleLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth * 3;
+    }
+  }, {
+    key: "createRings",
+    value: function createRings(_ref, xMultiplier) {
+      let [x, y] = _ref;
+      return [[[x + (this.miterSize / 2 + this.strokeWidth) * xMultiplier, y]]];
+    }
+  }, {
+    key: "createRender",
+    value: function createRender(miterRings) {
+      const isFilled = this.kind === LineMiterKind.FilledCircle;
+      return new PolyRender(polygonCircleFromPoint(miterRings[0][0], this.miterSize), {
+        fillColor: isFilled ? this.color : 'transparent',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth,
+        enclosed: true
+      });
+    }
+  }]);
 
-    _this.painter = painter;
-    _this.renderLabelSymbol = params.renderLabelSymbol;
-    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
-    _this.areaSymbol = params.areaSymbol;
+  return CircleLineMiterRender;
+}(LineMiterRender);
 
-    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+let SquareLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
+  _inherits(SquareLineMiterRender, _LineMiterRender);
 
+  var _super = /*#__PURE__*/_createSuper(SquareLineMiterRender);
 
-    _this.on('change', _this.updateDistance);
+  function SquareLineMiterRender() {
+    _classCallCheck(this, SquareLineMiterRender);
 
-    return _this;
+    return _super.apply(this, arguments);
   }
 
-  _createClass(BaseMeasureToolCreator, [{
-    key: "_handleMousemove",
-    value: function _handleMousemove(event) {
-      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_handleMousemove", this).call(this, event);
-
-      this.drawPointOnMouseMove(event);
+  _createClass(SquareLineMiterRender, [{
+    key: "usageSize",
+    get: function get() {
+      return this.miterSize + this.strokeWidth;
     }
   }, {
-    key: "_activate",
-    value: function _activate() {
-      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_activate", this).call(this);
-
-      this.addTempLabel();
-      this.setCursor('pointer');
+    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: "_deactivate",
-    value: function _deactivate() {
-      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_deactivate", this).call(this);
+    key: "createRender",
+    value: function createRender(miterRings) {
+      const isFilled = this.kind === LineMiterKind.FilledSquare;
+      return new PolyRender(miterRings, {
+        enclosed: true,
+        fillColor: isFilled ? this.color : void 0,
+        fillStyle: isFilled ? FillStyle.Color : FillStyle.None,
+        lineCap: 'square',
+        lineJoin: 'miter',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth
+      });
+    }
+  }]);
 
-      this.removeCoordLabel();
-      this.removeTempLabel();
-      this.removeMeasureLabel();
-      this.removeTempPolygon();
-      this.setCursor('default');
+  return SquareLineMiterRender;
+}(LineMiterRender);
+
+const getLineMiterRender = options => {
+  switch (options.kind) {
+    case LineMiterKind.Arrow:
+    case LineMiterKind.FilledArrow:
+      return new ArrowLineMiterRender(options);
+
+    case LineMiterKind.Square:
+    case LineMiterKind.FilledSquare:
+      return new SquareLineMiterRender(options);
+
+    case LineMiterKind.Circle:
+    case LineMiterKind.FilledCircle:
+      return new CircleLineMiterRender(options);
+
+    default:
+      return null;
+  }
+};
+
+const updateRingForRightMiter = (ring, miterSize, isLastRing) => {
+  const reversedRing = ring.slice().reverse();
+
+  for (let i = 0; i < reversedRing.length; i++) {
+    const coordinates = reversedRing[i];
+
+    if (isLastRing && i === 0) {
+      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
     }
-  }, {
-    key: "handlePointAdd",
-    value: function handlePointAdd() {
-      const feature = this.activeFeature;
-      if (!feature) return;
-      const {
-        rings,
-        crs
-      } = feature;
 
-      if (isPolylineLikePolygon(rings, this.map.resolution)) {
-        this.finishDrawing();
-        this.fire(new DrawingFinishEvent(feature, new MouseEvent('mouseup')));
-        return;
-      }
+    const nextCoordinates = reversedRing[i - 1];
 
-      if (rings[0].length === 2) {
-        const projection = crs.projectionTo(geo);
-        const point = rings[0][0];
-        if (!projection) return;
-        const [lat, long] = projection(point);
-        this.removeTempLabel();
-        this.addMeasureResultLabel();
-        this.addCoordLabel(lat.toFixed(COORD_FRACTION) + ", " + long.toFixed(COORD_FRACTION), point);
-      } else {
-        this.removeCoordLabel();
-      }
+    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
+      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
     }
-  }, {
-    key: "polygonPreview",
-    value: function polygonPreview() {
-      if (this.tempPolygon) {
-        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
-      }
+  }
 
-      const feature = this.activeFeature;
-      if (!feature) return;
-      const {
-        rings,
-        crs
-      } = feature;
-      const polygonRings = [...rings[0]];
-      polygonRings.shift();
-      this.tempPolygon = new Polygon(polygonRings, {
-        crs
-      });
-      this.tempPolygon.symbol = this.areaSymbol || measureAreaSymbol;
-      this.activeFeature && this.activeFeature.hide();
-      this._tempLayer && this._tempLayer.add(this.tempPolygon);
+  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]];
     }
-  }, {
-    key: "removeTempPolygon",
-    value: function removeTempPolygon() {
-      if (this.tempPolygon) {
-        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
-        delete this.tempPolygon;
-      }
+
+    const prevCoordinates = newRing[i - 1];
+
+    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
+      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
     }
-  }, {
-    key: "updateDistance",
-    value: function updateDistance(event) {
-      const feature = this.activeFeature;
-      const {
-        ringIndex,
-        pointIndex
-      } = event;
-      if (!feature || ringIndex === null || pointIndex === null) return;
-      const {
-        rings,
-        crs
-      } = feature;
-      const position = rings[ringIndex][pointIndex];
-      const length$1 = length(rings, crs);
-      let content = this.formatters.length(length$1);
+  }
 
-      if (isPolylineLikePolygon(rings, this.map.resolution)) {
-        this.polygonPreview();
-        const area$1 = area(rings, crs);
-        content = this.formatters.polygon(area$1, length$1);
-      } else if (this.tempPolygon) {
-        feature.show();
-        this.removeTempPolygon();
-      }
+  return newRing;
+};
 
-      if (this.measureResultLabel) {
-        this.measureResultLabel.position = position;
-        this.measureResultLabel.content = content;
-      }
+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);
     }
-  }, {
-    key: "addTempLabel",
-    value: function addTempLabel() {
-      this.tempLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
-        content: 'Нажмите на карту, чтобы начать измерение',
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          renderLabel: this.renderLabelSymbol
-        })
-      });
-      this._tempLayer && this._tempLayer.add(this.tempLabel);
-    }
-  }, {
-    key: "addCoordLabel",
-    value: function addCoordLabel(content, position) {
-      this.coordLabel = new LabelFeature(position, {
-        content,
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          renderLabel: this.renderLabelSymbol,
-          onClose: this.cancel
-        })
+  });
+};
+
+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
       });
-      this._tempLayer && this.coordLabel && this._tempLayer.add(this.coordLabel);
-    }
-  }, {
-    key: "addMeasureResultLabel",
-    value: function addMeasureResultLabel() {
-      this.measureResultLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          renderLabel: this.renderLabelSymbol
-        })
+      const endingMiterRender = getLineMiterRender({
+        color: this.strokeColor,
+        // @ts-ignore
+        kind: ending,
+        position: 'right',
+        // @ts-ignore
+        size: endingSize,
+        strokeWidth: this.strokeWidth
       });
-      this._tempLayer && this.measureResultLabel && this._tempLayer.add(this.measureResultLabel);
-    }
-  }, {
-    key: "removeTempLabel",
-    value: function removeTempLabel() {
-      if (this.tempLabel) {
-        this._tempLayer && this._tempLayer.remove(this.tempLabel);
-        delete this.tempLabel;
-      }
-    }
-  }, {
-    key: "removeCoordLabel",
-    value: function removeCoordLabel() {
-      if (this.coordLabel) {
-        this._tempLayer && this._tempLayer.remove(this.coordLabel);
-        delete this.coordLabel;
-      }
-    }
-  }, {
-    key: "removeMeasureLabel",
-    value: function removeMeasureLabel() {
-      if (this.measureResultLabel) {
-        this._tempLayer && this._tempLayer.remove(this.measureResultLabel);
-        delete this.measureResultLabel;
-      }
-    }
-  }, {
-    key: "drawPointOnMouseMove",
-    value: function drawPointOnMouseMove(event) {
-      if (this.tempLabel) {
-        this.tempLabel.position = event.point.position;
+
+      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 (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: линия должна быть в начале чтобы быть под митерами
+
+
+      renders.unshift(..._get(_getPrototypeOf(SGisPolylineSymbol.prototype), "renderFunction", this).call(this, featureCopy, resolution, crs));
+      return renders;
     }
   }, {
-    key: "setCursor",
-    value: function setCursor(cursor) {
-      const {
-        wrapper
-      } = this.painter;
-
-      if (wrapper && typeof wrapper !== 'string') {
-        wrapper.style.cursor = cursor;
-      }
+    key: "clone",
+    value: function clone() {
+      return new SGisPolylineSymbol(this.originalSymbol);
     }
   }]);
 
-  return BaseMeasureToolCreator;
-}(PolylineControl);
+  return SGisPolylineSymbol;
+}(PolylineSymbol);
 
-let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
-  _inherits(BaseMeasureToolEditor, _PolyEditor);
+let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
+  _inherits(LabelSymbol, _DynamicPointSymbol);
 
-  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolEditor);
+  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
 
-  function BaseMeasureToolEditor(map, painter, params) {
+  function LabelSymbol(_temp) {
     var _this;
 
-    _classCallCheck(this, BaseMeasureToolEditor);
-
-    _this = _super.call(this, map, params);
-
-    _this.measureResult = () => {
-      const feature = _this.activeFeature;
-      if (!feature) return null;
-      const {
-        rings,
-        isEnclosed,
-        crs
-      } = feature;
-      const pointsCount = rings[0].length;
-      const position = rings[0][pointsCount - 1];
-      const area$1 = area(rings, crs);
-      const length$1 = length(rings, crs, isEnclosed);
-      const content = isEnclosed ? _this.formatters.polygon(area$1, length$1) : _this.formatters.length(length$1);
-      return {
-        content,
-        position
-      };
-    };
-
-    _this.removeFeature = () => {
-      _this.fire('remove');
-    };
-
-    _this.painter = painter;
-    _this.renderLabelSymbol = params.renderLabelSymbol;
-    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
-
-    _this.on('change', _this.updateMeasureResult);
+    let {
+      component,
+      offset
+    } = _temp === void 0 ? {} : _temp;
 
-    _this.on('edit', _this.updateMeasureResult);
+    _classCallCheck(this, LabelSymbol);
 
+    _this = _super.call(this, {
+      offset
+    });
+    _this.component = component;
     return _this;
   }
 
-  _createClass(BaseMeasureToolEditor, [{
-    key: "_activate",
-    value: function _activate() {
-      _get(_getPrototypeOf(BaseMeasureToolEditor.prototype), "_activate", this).call(this);
-
-      this.addMeasureResultLabel();
+  _createClass(LabelSymbol, [{
+    key: "_getFeatureNode",
+    value: function _getFeatureNode(feature) {
+      const node = document.createElement('div');
+      this.renderDom(feature.content, node);
+      return node;
     }
   }, {
-    key: "addMeasureResultLabel",
-    value: function addMeasureResultLabel() {
-      const measureResult = this.measureResult();
-      if (measureResult === null) return;
-      const {
-        content,
-        position
-      } = measureResult;
-      this.measureResultLabel = new LabelFeature(position, {
-        content,
-        crs: this.map.crs,
-        symbol: createLabelSymbol({
-          onClose: this.removeFeature,
-          renderLabel: this.renderLabelSymbol
-        })
-      });
-      this._tempLayer && this._tempLayer.add(this.measureResultLabel);
+    key: "_updateFeatureNode",
+    value: function _updateFeatureNode(feature) {
+      this.renderDom(feature.content, this.getNode(feature));
     }
   }, {
-    key: "updateMeasureResult",
-    value: function updateMeasureResult() {
-      if (this.measureResultLabel) {
-        const measureResult = this.measureResult();
-        if (measureResult === null) return;
-        const {
-          content,
-          position
-        } = measureResult;
-        this.measureResultLabel.content = content;
-        this.measureResultLabel.position = position;
+    key: "renderDom",
+    value: function renderDom(content, node) {
+      if (!node) {
+        return;
       }
-    }
-  }]);
 
-  return BaseMeasureToolEditor;
-}(PolyEditor);
+      const Component = this.component;
 
-const metersToPixels = (meters, _ref) => {
-  let {
-    painter,
-    crs = geo
-  } = _ref;
-  const {
-    width
-  } = painter;
-  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
-  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
-  const widthDistance = distance(zeroPoint, maxWidthPoint);
-  const pxK = width / (widthDistance || 1);
-  return Math.round(meters * pxK);
-};
-
-const polygonCircleFromPoint = (center, diameter) => {
-  const coordinates = [];
-  const radius = diameter / 2;
-  const endAngle = Math.PI * 2;
-  const step = Math.max(Math.PI / 2 / radius, endAngle / 128);
-  let start = 0;
-  let end = endAngle;
+      if (Component) {
+        ReactDOM.render(React.createElement(Component, {
+          content: content
+        }), node);
+      } else {
+        node.innerText = content;
+      }
+    }
+  }]);
 
-  for (let ang = start; ang < end; ang += step) {
-    coordinates.push([Math.cos(ang) * radius + center[0], Math.sin(ang) * radius + center[1]]);
-  }
+  return LabelSymbol;
+}(DynamicPointSymbol);
 
-  return [coordinates];
+const defaultOffset = [8, -16];
+const createLabelSymbol = props => {
+  const {
+    offset = defaultOffset,
+    renderLabel = (_ref) => {
+      let {
+        content
+      } = _ref;
+      return React.createElement("div", null, content);
+    },
+    onClose = undefined
+  } = props || {};
+  return new LabelSymbol({
+    offset,
+    component: (_ref2) => {
+      let {
+        content
+      } = _ref2;
+      return renderLabel({
+        content,
+        onClose
+      });
+    }
+  });
 };
 
-const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
+function createShadowRender(position, _ref) {
+  let {
+    strokeWidth = 2,
+    shadowColor,
+    shadowSize,
+    size = 6
+  } = _ref;
+  const shadowDiameter = size + strokeWidth + shadowSize;
+  return new PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
+    fillColor: 'transparent',
+    strokeColor: shadowColor,
+    strokeWidth: shadowSize,
+    enclosed: true
+  });
+}
+function getEditorPointRenderer(position, _ref2) {
+  let {
+    strokeColor,
+    strokeWidth,
+    shadowColor,
+    fillColor,
+    shadowSize,
+    size = 0
+  } = _ref2;
+  return [createShadowRender(position, {
+    strokeWidth,
+    strokeColor,
+    shadowSize,
+    shadowColor,
+    size
+  }), new PolyRender(polygonCircleFromPoint(position, size), {
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    enclosed: true
+  })];
+}
 
-let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
-  _inherits(CircleLineMiterRender, _LineMiterRender);
+let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
+  _inherits(ShadowedPointSymbol, _PointSymbol);
 
-  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
+  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
 
-  function CircleLineMiterRender() {
-    _classCallCheck(this, CircleLineMiterRender);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPointSymbol(options) {
+    _classCallCheck(this, ShadowedPointSymbol);
 
-    return _super.apply(this, arguments);
+    return _super.call(this, options);
   }
 
-  _createClass(CircleLineMiterRender, [{
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth * 3;
+  _createClass(ShadowedPointSymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof PointFeature)) return [];
+      const {
+        position
+      } = feature.projectTo(crs);
+      const pxPosition = [position[0] / resolution + (this.offset[0] || 0), -position[1] / resolution + (this.offset[1] || 0)];
+      const shadowRender = this.getShadow(pxPosition, feature);
+      const pointArc = this.getPoint(pxPosition, feature);
+      return shadowRender ? [shadowRender, pointArc] : [pointArc];
     }
   }, {
-    key: "createRings",
-    value: function createRings(_ref, xMultiplier) {
-      let [x, y] = _ref;
-      return [[[x + (this.miterSize / 2 + this.strokeWidth) * xMultiplier, y]]];
+    key: "getShadow",
+    value: function getShadow(position, _feature) {
+      return ShadowedPointSymbol.getShadowArc(position, this);
     }
   }, {
-    key: "createRender",
-    value: function createRender(miterRings) {
-      const isFilled = this.kind === LineMiterKind.FilledCircle;
-      return new PolyRender(polygonCircleFromPoint(miterRings[0][0], this.miterSize), {
-        fillColor: isFilled ? this.color : 'transparent',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth,
+    key: "getPoint",
+    value: function getPoint(position, _feature) {
+      return ShadowedPointSymbol.getPointArc(position, this);
+    }
+  }], [{
+    key: "getShadowArc",
+    value: function getShadowArc(position, _ref) {
+      let {
+        strokeWidth = 2,
+        shadowColor,
+        shadowSize,
+        size = 6
+      } = _ref;
+      return new PolyRender(polygonCircleFromPoint(position, size + strokeWidth + shadowSize), {
+        fillColor: 'transparent',
+        strokeColor: shadowColor,
+        strokeWidth: shadowSize,
         enclosed: true
       });
     }
-  }]);
-
-  return 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: "getPointArc",
+    value: function getPointArc(position, _ref2) {
+      let {
+        strokeWidth,
+        fillColor,
+        strokeColor,
+        size = 6
+      } = _ref2;
+      return new PolyRender(polygonCircleFromPoint(position, size), {
+        fillColor,
+        strokeColor,
+        strokeWidth,
+        enclosed: true
+      });
     }
   }, {
-    key: "createRender",
-    value: function createRender(miterRings) {
-      const isFilled = this.kind === LineMiterKind.FilledSquare;
-      return new PolyRender(miterRings, {
-        enclosed: true,
-        fillColor: isFilled ? this.color : void 0,
-        fillStyle: isFilled ? FillStyle.Color : FillStyle.None,
-        lineCap: 'square',
-        lineJoin: 'miter',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth
-      });
+    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 SquareLineMiterRender;
-}(LineMiterRender);
+  return ShadowedPointSymbol;
+}(PointSymbol);
 
-const getLineMiterRender = options => {
-  switch (options.kind) {
-    case LineMiterKind.Arrow:
-    case LineMiterKind.FilledArrow:
-      return new ArrowLineMiterRender(options);
+let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
+  _inherits(ShadowedPolySymbol, _PolylineSymbol);
 
-    case LineMiterKind.Square:
-    case LineMiterKind.FilledSquare:
-      return new SquareLineMiterRender(options);
+  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
 
-    case LineMiterKind.Circle:
-    case LineMiterKind.FilledCircle:
-      return new CircleLineMiterRender(options);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPolySymbol(options) {
+    _classCallCheck(this, ShadowedPolySymbol);
 
-    default:
-      return null;
+    return _super.call(this, options);
   }
-};
-
-const updateRingForRightMiter = (ring, miterSize, isLastRing) => {
-  const reversedRing = ring.slice().reverse();
 
-  for (let i = 0; i < reversedRing.length; i++) {
-    const coordinates = reversedRing[i];
+  _createClass(ShadowedPolySymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof Poly)) return [];
 
-    if (isLastRing && i === 0) {
-      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
-    }
+      const coordinates = _get(_getPrototypeOf(ShadowedPolySymbol.prototype), "getRenderedCoordinates", this).call(this, feature, resolution, crs);
 
-    const nextCoordinates = reversedRing[i - 1];
+      const polyRender = this.getPolyRender(coordinates, feature);
+      const shadowRender = this.getShadow(coordinates, feature);
+      const vertexRenders = this.getVertexRenders(coordinates);
+      let renders = [polyRender];
 
-    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();
+      if (shadowRender) {
+        renders = [shadowRender, polyRender];
+      }
 
-  for (let i = 0; i < newRing.length; i++) {
-    const coordinates = newRing[i];
+      if (vertexRenders) {
+        renders = renders.concat(vertexRenders);
+      }
 
-    if (i === 0 && isFirstRing) {
-      newRing[i] = [coordinates[0] + miterSize, coordinates[1]];
+      return renders;
     }
-
-    const prevCoordinates = newRing[i - 1];
-
-    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
-      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
+  }, {
+    key: "getShadow",
+    value: function getShadow(coordinates, _feature) {
+      return new PolyRender(coordinates, {
+        fillStyle: FillStyle.None,
+        enclosed: this.enclose,
+        strokeColor: this.shadowColor,
+        strokeWidth: this.shadowSize,
+        lineDash: this.lineDash
+      });
     }
-  }
+  }, {
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, _feature) {
+      return new PolyRender(coordinates, {
+        fillStyle: this.enclose ? FillStyle.Color : FillStyle.None,
+        enclosed: this.enclose,
+        fillColor: this.fillColor,
+        strokeColor: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        lineDash: this.lineDash
+      });
+    }
+  }, {
+    key: "getVertexRenders",
+    value: function getVertexRenders(coordinates) {
+      if (!this.showVertex) return;
+      const vertexCoordinates = coordinates.reduce((acc, curr) => {
+        return acc.concat(curr);
+      }, []);
+      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
+        size: 6,
+        strokeWidth: 2,
+        shadowColor: this.shadowColor,
+        strokeColor: this.strokeColor,
+        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
+        fillColor: '#ffffff'
+      })).reduce((acc, curr) => acc.concat(curr), []);
+    }
+  }]);
 
-  return newRing;
+  return ShadowedPolySymbol;
+}(PolylineSymbol);
+const polySymbolParams = {
+  strokeWidth: 2,
+  strokeColor: '#e33600',
+  shadowSize: 8,
+  shadowColor: 'rgba(227, 54, 0, 0.3)'
 };
-
-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 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
+}));
 
-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;
+let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
+  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
 
-    var _this;
+  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
 
-    _classCallCheck(this, SGisPolylineSymbol);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPointSymbol(props) {
+    _classCallCheck(this, SelectedPointSymbol);
 
-    _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;
+    return _super.call(this, props);
   }
 
-  _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);
+  _createClass(SelectedPointSymbol, [{
+    key: "getShadow",
+    value: function getShadow(position, feature) {
+      if (feature.isSelected) {
+        return _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getShadow", this).call(this, position, feature);
       }
-
-      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: линия должна быть в начале чтобы быть под митерами
-
-
-      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);
-    }
-  }]);
+    key: "getPoint",
+    value: function getPoint(position, feature) {
+      const pointRender = _get(_getPrototypeOf(SelectedPointSymbol.prototype), "getPoint", this).call(this, position, feature);
 
-  return SGisPolylineSymbol;
-}(PolylineSymbol);
+      if (feature.isSelected) {
+        pointRender.strokeColor = this.selectedStrokeColor;
+        pointRender.fillColor = this.selectedFillColor;
+      }
 
-let LabelSymbol = /*#__PURE__*/function (_DynamicPointSymbol) {
-  _inherits(LabelSymbol, _DynamicPointSymbol);
+      return pointRender;
+    }
+  }]);
 
-  var _super = /*#__PURE__*/_createSuper(LabelSymbol);
+  return SelectedPointSymbol;
+}(ShadowedPointSymbol);
 
-  function LabelSymbol(_temp) {
-    var _this;
+let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
+  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
 
-    let {
-      component,
-      offset
-    } = _temp === void 0 ? {} : _temp;
+  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
 
-    _classCallCheck(this, LabelSymbol);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function SelectedPolySymbol(props) {
+    _classCallCheck(this, SelectedPolySymbol);
 
-    _this = _super.call(this, {
-      offset
-    });
-    _this.component = component;
-    return _this;
+    return _super.call(this, props);
   }
 
-  _createClass(LabelSymbol, [{
-    key: "_getFeatureNode",
-    value: function _getFeatureNode(feature) {
-      const node = document.createElement('div');
-      this.renderDom(feature.content, node);
-      return node;
-    }
-  }, {
-    key: "_updateFeatureNode",
-    value: function _updateFeatureNode(feature) {
-      this.renderDom(feature.content, this.getNode(feature));
+  _createClass(SelectedPolySymbol, [{
+    key: "getShadow",
+    value: function getShadow(coordinates, feature) {
+      if (feature.isSelected) {
+        return _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getShadow", this).call(this, coordinates, feature);
+      }
     }
   }, {
-    key: "renderDom",
-    value: function renderDom(content, node) {
-      if (!node) {
-        return;
-      }
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, feature) {
+      const polyRender = _get(_getPrototypeOf(SelectedPolySymbol.prototype), "getPolyRender", this).call(this, coordinates, feature);
 
-      const Component = this.component;
+      if (feature.isSelected) {
+        polyRender.fillColor = this.selectedFillColor;
+        polyRender.strokeColor = this.selectedStrokeColor;
 
-      if (Component) {
-        ReactDOM.render(React.createElement(Component, {
-          content: content
-        }), node);
-      } else {
-        node.innerText = content;
+        if (this.selectedStrokeWidth !== void 0) {
+          polyRender.strokeWidth = this.selectedStrokeWidth;
+        }
       }
+
+      return polyRender;
     }
   }]);
 
-  return LabelSymbol;
-}(DynamicPointSymbol);
+  return SelectedPolySymbol;
+}(ShadowedPolySymbol);
 
-const defaultOffset = [8, -16];
-const createLabelSymbol = props => {
-  const {
-    offset = defaultOffset,
-    renderLabel = _ref => {
-      let {
-        content
-      } = _ref;
-      return React.createElement("div", null, content);
-    },
-    onClose = undefined
-  } = props || {};
-  return new LabelSymbol({
-    offset,
-    component: _ref2 => {
-      let {
-        content
-      } = _ref2;
-      return renderLabel({
-        content,
-        onClose
-      });
-    }
-  });
-};
+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 createShadowRender(position, _ref) {
+const metersToPixels = (meters, _ref) => {
   let {
-    strokeWidth = 2,
-    shadowColor,
-    shadowSize,
-    size = 6
+    painter,
+    crs = geo
   } = _ref;
-  const shadowDiameter = size + strokeWidth + shadowSize;
-  return new PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
-    fillColor: 'transparent',
-    strokeColor: shadowColor,
-    strokeWidth: shadowSize,
-    enclosed: true
-  });
-}
-function getEditorPointRenderer(position, _ref2) {
-  let {
-    strokeColor,
-    strokeWidth,
-    shadowColor,
-    fillColor,
-    shadowSize,
-    size = 0
-  } = _ref2;
-  return [createShadowRender(position, {
-    strokeWidth,
-    strokeColor,
-    shadowSize,
-    shadowColor,
-    size
-  }), new PolyRender(polygonCircleFromPoint(position, size), {
-    fillColor,
-    strokeColor,
-    strokeWidth,
-    enclosed: true
-  })];
-}
+  const {
+    width
+  } = painter;
+  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
+  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
+  const widthDistance = distance(zeroPoint, maxWidthPoint);
+  const pxK = width / (widthDistance || 1);
+  return Math.round(meters * pxK);
+};
 
-let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
-  _inherits(ShadowedPointSymbol, _PointSymbol);
+const defaultPathStyles = {
+  strokeWidth: 2,
+  strokeColor: 'rgb(0, 163, 245)',
+  fillStyle: FillStyle.None
+};
+let SVGPoly = /*#__PURE__*/function (_Symbol) {
+  _inherits(SVGPoly, _Symbol);
 
-  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
+  var _super = /*#__PURE__*/_createSuper(SVGPoly);
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPointSymbol(options) {
-    _classCallCheck(this, ShadowedPointSymbol);
+  function SVGPoly(_temp) {
+    var _this;
 
-    return _super.call(this, options);
+    let {
+      redrawFeatureNode,
+      pathStyles,
+      circle,
+      className,
+      appendToSvg
+    } = _temp === void 0 ? {} : _temp;
+
+    _classCallCheck(this, SVGPoly);
+
+    _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;
   }
 
-  _createClass(ShadowedPointSymbol, [{
+  _createClass(SVGPoly, [{
     key: "renderFunction",
     value: function renderFunction(feature, resolution, crs) {
-      if (!(feature instanceof PointFeature)) return [];
-      const {
-        position
-      } = feature.projectTo(crs);
-      const pxPosition = [position[0] / resolution + (this.offset[0] || 0), -position[1] / resolution + (this.offset[1] || 0)];
-      const shadowRender = this.getShadow(pxPosition, feature);
-      const pointArc = this.getPoint(pxPosition, feature);
-      return shadowRender ? [shadowRender, pointArc] : [pointArc];
+      const coordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+      this.setCirclePxRaius(crs);
+      this.container.innerHTML = '';
+      const svg = this.setSvg(coordinates);
+      svg && this.container.append(svg);
+      feature.__dynamicSymbolRender = new DynamicRender({
+        node: this.container,
+        update: (bbox, resolution) => this.update({
+          bbox,
+          resolution,
+          feature,
+          crs
+        }),
+        redraw: () => {
+          this.redrawFeatureNode && this.redrawFeatureNode(feature);
+        }
+      });
+
+      this._setEventListeners(feature);
+
+      return [feature.__dynamicSymbolRender];
     }
   }, {
-    key: "getShadow",
-    value: function getShadow(position, _feature) {
-      return ShadowedPointSymbol.getShadowArc(position, this);
+    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: "getPoint",
-    value: function getPoint(position, _feature) {
-      return ShadowedPointSymbol.getPointArc(position, this);
-    }
-  }], [{
-    key: "getShadowArc",
-    value: function getShadowArc(position, _ref) {
+    key: "update",
+    value: function update(_ref) {
+      var _this$pathStyles, _this$pathStyles2, _this$pathStyles3, _this$pathStyles4;
+
       let {
-        strokeWidth = 2,
-        shadowColor,
-        shadowSize,
-        size = 6
+        bbox,
+        resolution,
+        feature,
+        crs
       } = _ref;
-      return new PolyRender(polygonCircleFromPoint(position, size + strokeWidth + shadowSize), {
-        fillColor: 'transparent',
-        strokeColor: shadowColor,
-        strokeWidth: shadowSize,
-        enclosed: true
-      });
+      if (!feature) return;
+      if (!bbox) bbox = feature.__lastBbox;
+      if (!resolution) resolution = feature.__lastResolution;
+      if (!bbox || !resolution || !feature.crs.canProjectTo(bbox.crs)) return;
+
+      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
+        const newCoordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+        this.setCirclePxRaius(crs);
+        this.container.innerHTML = '';
+        const svg = this.setSvg(newCoordinates);
+        svg && this.container.append(svg);
+      }
+
+      const polygon = feature.projectTo(bbox.crs);
+      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
+      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
+      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
+      this.container.style.left = dx.toString() + "px";
+      this.container.style.top = dy.toString() + "px";
+      feature.__lastBbox = bbox;
+      feature.__lastResolution = resolution;
     }
   }, {
-    key: "getPointArc",
-    value: function getPointArc(position, _ref2) {
-      let {
-        strokeWidth,
-        fillColor,
-        strokeColor,
-        size = 6
-      } = _ref2;
-      return new PolyRender(polygonCircleFromPoint(position, size), {
-        fillColor,
-        strokeColor,
-        strokeWidth,
-        enclosed: true
-      });
-    }
-  }, {
-    key: "getArcs",
-    value: function getArcs(position, params) {
-      const shadowRender = ShadowedPointSymbol.getShadowArc(position, params);
-      const pointRender = ShadowedPointSymbol.getPointArc(position, params);
-      return shadowRender ? [shadowRender, pointRender] : [pointRender];
-    }
-  }]);
-
-  return ShadowedPointSymbol;
-}(PointSymbol);
-
-let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
-  _inherits(ShadowedPolySymbol, _PolylineSymbol);
-
-  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
-
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function ShadowedPolySymbol(options) {
-    _classCallCheck(this, ShadowedPolySymbol);
-
-    return _super.call(this, options);
-  }
-
-  _createClass(ShadowedPolySymbol, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      if (!(feature instanceof Poly)) return [];
-
-      const coordinates = _get(_getPrototypeOf(ShadowedPolySymbol.prototype), "getRenderedCoordinates", this).call(this, feature, resolution, crs);
-
-      const polyRender = this.getPolyRender(coordinates, feature);
-      const shadowRender = this.getShadow(coordinates, feature);
-      const vertexRenders = this.getVertexRenders(coordinates);
-      let renders = [polyRender];
+    key: "setSvg",
+    value: function setSvg(coordinates) {
+      const {
+        lineCap,
+        lineJoin,
+        miterLimit,
+        lineDash,
+        dashOffset
+      } = this.pathStyles || {};
+      const svgRender = new SvgRender(_extends({
+        coordinates
+      }, defaultPathStyles, {
+        appendToSvg: this.appendToSvg
+      }, this.pathStyles));
 
-      if (shadowRender) {
-        renders = [shadowRender, polyRender];
+      if (this.circle) {
+        svgRender._setArcNode();
+      } else {
+        svgRender._setPolyNode();
       }
 
-      if (vertexRenders) {
-        renders = renders.concat(vertexRenders);
-      }
+      let svgElement;
+      svgRender.getNode((_, svg) => {
+        svgElement = svg;
+        this.className && svgElement.classList.add(this.className);
+        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
 
-      return renders;
-    }
-  }, {
-    key: "getShadow",
-    value: function getShadow(coordinates, _feature) {
-      return new PolyRender(coordinates, {
-        fillStyle: FillStyle.None,
-        enclosed: this.enclose,
-        strokeColor: this.shadowColor,
-        strokeWidth: this.shadowSize,
-        lineDash: this.lineDash
+        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());
+
+          if (this.circle) {
+            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
+          }
+        }
       });
+      return svgElement;
     }
   }, {
-    key: "getPolyRender",
-    value: function getPolyRender(coordinates, _feature) {
-      return new PolyRender(coordinates, {
-        fillStyle: this.enclose ? FillStyle.Color : FillStyle.None,
-        enclosed: this.enclose,
-        fillColor: this.fillColor,
-        strokeColor: this.strokeColor,
-        strokeWidth: this.strokeWidth,
-        lineDash: this.lineDash
+    key: "_setEventListeners",
+    value: function _setEventListeners(dynamicFeature) {
+      var _dynamicFeature$__dyn;
+
+      if (dynamicFeature.eventFlags === MouseEventFlags.None) return;
+      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
+      Object.keys(mouseEvents).forEach(eventName => {
+        if (dynamicFeature.eventFlags & mouseEvents[eventName].flag) {
+          listenDomEvent(svgNode, mouseEvents[eventName].type, event => {
+            dynamicFeature.fire(mouseEvents[eventName].type, {
+              node: svgNode,
+              browserEvent: event
+            });
+          });
+        }
       });
     }
-  }, {
-    key: "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 ShadowedPolySymbol;
-}(PolylineSymbol);
-const polySymbolParams = {
-  strokeWidth: 2,
-  strokeColor: '#e33600',
-  shadowSize: 8,
-  shadowColor: 'rgba(227, 54, 0, 0.3)'
+  return SVGPoly;
+}(Symbol$1);
+
+function isSGisPointSymbol(symbol) {
+  return symbol instanceof PointSymbol || symbol instanceof StaticImageSymbol || symbol instanceof SquareSymbol || symbol instanceof MaskedImage;
+}
+function isSGisImageSymbol(symbol) {
+  return symbol instanceof StaticImageSymbol || symbol instanceof MaskedImage;
+}
+function isSGisPolygonSymbol(symbol) {
+  return symbol instanceof PolygonSymbol || symbol instanceof BrushFill || symbol instanceof ImageFill;
+}
+function isSGisPolylineSymbol(symbol) {
+  return symbol instanceof PolylineSymbol;
+}
+function isSGisH3Symbol(symbol) {
+  return symbol instanceof H3Symbol;
+}
+function isSGisClusterSymbol(symbol) {
+  return !!symbol.singleObjectSymbol;
+}
+
+/**
+ * Моки фич для отображения превью символа
+ * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
+ */
+
+const viewBoxSize = 100;
+const pointFeature = /*#__PURE__*/new PointFeature([50, -50], {
+  crs: plain
+});
+const lineFeature = /*#__PURE__*/new Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
+  crs: plain
+});
+const polygonFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
+  crs: plain
+});
+const h3gridFeature = /*#__PURE__*/new H3Feature([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
+  crs: plain
+});
+const lineLegendFeature = /*#__PURE__*/new Polyline([[0, -50], [100, -50]], {
+  crs: plain
+});
+const polygonLegendFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
+  crs: plain
+});
+const polygonMapLegendFeature = /*#__PURE__*/new Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
+  crs: plain
+});
+const MAP_LEGEND_FEATURES = {
+  polygon: polygonMapLegendFeature
 };
-const measureSymbolParams = {
-  strokeColor: '#ff6933',
-  shadowSize: 0,
-  vertexShadowSize: 0
+const LEGEND_FEATURES = {
+  point: pointFeature,
+  polyline: lineLegendFeature,
+  polygon: polygonLegendFeature,
+  h3grid: h3gridFeature
 };
-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 MOCK_FEATURES = {
+  point: pointFeature,
+  polyline: lineFeature,
+  polygon: polygonFeature,
+  h3grid: h3gridFeature
 };
-const measurePolygonSnapSymbol = /*#__PURE__*/new ShadowedPointSymbol( /*#__PURE__*/_extends({}, snapSymbolParams, {
-  strokeColor: '#ff6933',
-  shadowSize: 0
-}));
 
-let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
-  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
+function getSymbolRenders(symbol, size, features) {
+  if (size === void 0) {
+    size = viewBoxSize;
+  }
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
+  if (features === void 0) {
+    features = {};
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPointSymbol(props) {
-    _classCallCheck(this, SelectedPointSymbol);
+  const resolution = viewBoxSize / size;
 
-    return _super.call(this, props);
+  const featuresToRender = _extends({}, MOCK_FEATURES, features);
+
+  if (isSGisPolygonSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
   }
 
-  _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);
+  if (isSGisPolylineSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
+  }
 
-      if (feature.isSelected) {
-        pointRender.strokeColor = this.selectedStrokeColor;
-        pointRender.fillColor = this.selectedFillColor;
-      }
-
-      return pointRender;
-    }
-  }]);
-
-  return SelectedPointSymbol;
-}(ShadowedPointSymbol);
-
-let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
-  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
-
-  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
+  if (isSGisH3Symbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.h3grid, resolution, plain);
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPolySymbol(props) {
-    _classCallCheck(this, SelectedPolySymbol);
+  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
+}
+const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
+  }
 
-    return _super.call(this, props);
+  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
+};
+const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
+  if (size === void 0) {
+    size = viewBoxSize;
   }
 
-  _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);
+  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
+};
 
-      if (feature.isSelected) {
-        polyRender.fillColor = this.selectedFillColor;
-        polyRender.strokeColor = this.selectedStrokeColor;
+function renderSymbolToCanvas(renders, canvas) {
+  renders.forEach(render => {
+    canvas.draw(render);
+  });
+}
 
-        if (this.selectedStrokeWidth !== void 0) {
-          polyRender.strokeWidth = this.selectedStrokeWidth;
-        }
-      }
+function deserializeSymbol(symbol) {
+  switch (symbol.type) {
+    case "h3grid":
+      return deserializeH3Symbol(symbol);
 
-      return polyRender;
-    }
-  }]);
+    case "svgPointSymbol":
+      return deserializeSvgPointSymbol(symbol);
 
-  return SelectedPolySymbol;
-}(ShadowedPolySymbol);
+    case 'circlePointSymbol':
+      return deserializePointSymbol(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'
-});
+    case 'squarePointSymbol':
+      return deserializeSquareSymbol(symbol);
 
-const defaultPathStyles = {
-  strokeWidth: 2,
-  strokeColor: 'rgb(0, 163, 245)',
-  fillStyle: FillStyle.None
-};
-let SVGPoly = /*#__PURE__*/function (_Symbol) {
-  _inherits(SVGPoly, _Symbol);
+    case 'maskedImagePointSymbol':
+      return deserializeMaskedImageSymbol(symbol);
 
-  var _super = /*#__PURE__*/_createSuper(SVGPoly);
+    case 'imagePointSymbol':
+      return deserializeImagePointSymbol(symbol);
 
-  function SVGPoly(_temp) {
-    var _this;
+    case 'polygonSymbol':
+      return deserializePolygonSymbol(symbol);
 
-    let {
-      redrawFeatureNode,
-      pathStyles,
-      circle,
-      className,
-      appendToSvg
-    } = _temp === void 0 ? {} : _temp;
+    case 'simplePolylineSymbol':
+    case 'polylineSymbol':
+      return deserializePolylineSymbol(symbol);
 
-    _classCallCheck(this, SVGPoly);
+    case "clusterSymbol":
+      return deserializeSymbol(symbol.singleObjectSymbol);
 
-    _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;
+    default:
+      return null;
   }
+}
 
-  _createClass(SVGPoly, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      const coordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-      this.setCirclePxRaius(crs);
-      this.container.innerHTML = '';
-      const svg = this.setSvg(coordinates);
-      svg && this.container.append(svg);
-      feature.__dynamicSymbolRender = new DynamicRender({
-        node: this.container,
-        update: (bbox, resolution) => this.update({
-          bbox,
-          resolution,
-          feature,
-          crs
-        }),
-        redraw: () => {
-          this.redrawFeatureNode && this.redrawFeatureNode(feature);
-        }
-      });
+function deserializeH3Symbol(symbol) {
+  var _symbol$stroke, _symbol$stroke2, _symbol$fill;
 
-      this._setEventListeners(feature);
+  return new H3Symbol(_extends({}, symbol, {
+    cellSize: getParameterValue(symbol.cellSize),
+    strokeWidth: getParameterValue(symbol == null ? void 0 : (_symbol$stroke = symbol.stroke) == null ? void 0 : _symbol$stroke.width),
+    strokeColor: getParameterValue(symbol == null ? void 0 : (_symbol$stroke2 = symbol.stroke) == null ? void 0 : _symbol$stroke2.color),
+    fillColor: getParameterValue(symbol == null ? void 0 : (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color)
+  }));
+}
 
-      return [feature.__dynamicSymbolRender];
-    }
-  }, {
-    key: "setCirclePxRaius",
-    value: function setCirclePxRaius(crs) {
-      if (this.circle && this.pathStyles) {
-        var _this$circle;
+function deserializePointSymbol(symbol) {
+  // @ts-ignore
+  return new PointSymbol(deserializePointSymbolParams(symbol));
+}
 
-        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;
+const getOffsetParameterValue = offset => [getParameterValue(offset == null ? void 0 : offset[0]), getParameterValue(offset == null ? void 0 : offset[1])];
 
-      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;
+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))
+    })
+  } : {});
+}
 
-      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
-        const newCoordinates = feature instanceof Poly ? new PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-        this.setCirclePxRaius(crs);
-        this.container.innerHTML = '';
-        const svg = this.setSvg(newCoordinates);
-        svg && this.container.append(svg);
-      }
+function deserializeSvgPointSymbol(symbol) {
+  return new PointSymbol(deserializeSvgPointSymbolParams(symbol));
+}
 
-      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 {
-        lineCap,
-        lineJoin,
-        miterLimit,
-        lineDash,
-        dashOffset
-      } = this.pathStyles || {};
-      const svgRender = new SvgRender(_extends({
-        coordinates
-      }, defaultPathStyles, {
-        appendToSvg: this.appendToSvg
-      }, this.pathStyles));
-
-      if (this.circle) {
-        svgRender._setArcNode();
-      } else {
-        svgRender._setPolyNode();
-      }
-
-      let svgElement;
-      svgRender.getNode((_, svg) => {
-        svgElement = svg;
-        this.className && svgElement.classList.add(this.className);
-        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
+function deserializeSquareSymbol(symbol) {
+  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle)
+  }));
+}
 
-        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());
+function deserializeMaskedImageSymbol(symbol) {
+  return new MaskedImage(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    imageSource: deserializeBase64(symbol.image),
+    // @ts-ignore
+    maskSource: deserializeBase64(symbol.imageMask),
+    // @ts-ignore
+    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
+  }));
+}
 
-          if (this.circle) {
-            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
-          }
-        }
-      });
-      return svgElement;
-    }
-  }, {
-    key: "_setEventListeners",
-    value: function _setEventListeners(dynamicFeature) {
-      var _dynamicFeature$__dyn;
+function deserializeImagePointSymbol(symbol) {
+  return new StaticImageSymbol(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    source: deserializeBase64(symbol.image)
+  }));
+}
 
-      if (dynamicFeature.eventFlags === MouseEventFlags.None) return;
-      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
-      Object.keys(mouseEvents).forEach(eventName => {
-        if (dynamicFeature.eventFlags & mouseEvents[eventName].flag) {
-          listenDomEvent(svgNode, mouseEvents[eventName].type, event => {
-            dynamicFeature.fire(mouseEvents[eventName].type, {
-              node: svgNode,
-              browserEvent: event
-            });
-          });
-        }
-      });
-    }
-  }]);
+function deserializePolygonSymbol(symbol) {
+  if (isPolygonHasPatternBrush(symbol)) {
+    return new SGisImageFill(symbol);
+  }
 
-  return SVGPoly;
-}(Symbol$1);
+  if (isPolygonHasHatchBrush(symbol)) {
+    return new SGisBrushFill(symbol);
+  }
 
-function isSGisPointSymbol(symbol) {
-  return symbol instanceof PointSymbol || symbol instanceof StaticImageSymbol || symbol instanceof SquareSymbol || symbol instanceof MaskedImage;
+  return new SGisPolygonSymbol(symbol);
 }
-function isSGisImageSymbol(symbol) {
-  return symbol instanceof StaticImageSymbol || symbol instanceof MaskedImage;
+
+function deserializePolylineSymbol(symbol) {
+  return new SGisPolylineSymbol(symbol);
 }
-function isSGisPolygonSymbol(symbol) {
-  return symbol instanceof PolygonSymbol || symbol instanceof BrushFill || symbol instanceof ImageFill;
+
+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))
+  };
 }
-function isSGisPolylineSymbol(symbol) {
-  return symbol instanceof PolylineSymbol;
+
+function deserializeBase64(base) {
+  return "data:image/png;base64," + base;
 }
-function isSGisH3Symbol(symbol) {
-  return symbol instanceof H3Symbol;
+
+function deserializeAnchor(offset) {
+  // @ts-ignore
+  return offset.map(getParameterValue);
 }
-function isSGisClusterSymbol(symbol) {
-  return !!symbol.singleObjectSymbol;
+
+function deserializeColor(color) {
+  return color ? new Color(color).toString() : null;
 }
 
-/**
- * Моки фич для отображения превью символа
- * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
- */
+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);
+  }
 
-const viewBoxSize = 100;
-const pointFeature = /*#__PURE__*/new PointFeature([50, -50], {
-  crs: plain
-});
-const lineFeature = /*#__PURE__*/new Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
-  crs: plain
-});
-const polygonFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
-  crs: plain
-});
-const h3gridFeature = /*#__PURE__*/new H3Feature([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
-  crs: plain
-});
-const lineLegendFeature = /*#__PURE__*/new Polyline([[0, -50], [100, -50]], {
-  crs: plain
-});
-const polygonLegendFeature = /*#__PURE__*/new Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
-  crs: plain
-});
-const polygonMapLegendFeature = /*#__PURE__*/new Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
-  crs: plain
-});
-const MAP_LEGEND_FEATURES = {
-  polygon: polygonMapLegendFeature
-};
-const LEGEND_FEATURES = {
-  point: pointFeature,
-  polyline: lineLegendFeature,
-  polygon: polygonLegendFeature,
-  h3grid: h3gridFeature
+  return symbol;
 };
-const MOCK_FEATURES = {
-  point: pointFeature,
-  polyline: lineFeature,
-  polygon: polygonFeature,
-  h3grid: h3gridFeature
+function centerAlignSymbol(symbol) {
+  if (isSGisImageSymbol(symbol)) {
+    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
+  } else if (isSGisPointSymbol(symbol)) {
+    symbol.offset = [0, 0];
+  }
+
+  return symbol;
+}
+const adjustSymbol = (symbol, _ref) => {
+  let {
+    size
+  } = _ref;
+  return centerAlignSymbol(clampSymbol(symbol, 0, size));
 };
 
-function getSymbolRenders(symbol, size, features) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+let EvergisFeature = /*#__PURE__*/function () {
+  function EvergisFeature(feature) {
+    _classCallCheck(this, EvergisFeature);
 
-  if (features === void 0) {
-    features = {};
+    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);
   }
 
-  const resolution = viewBoxSize / size;
-
-  const featuresToRender = _extends({}, MOCK_FEATURES, features);
+  _createClass(EvergisFeature, [{
+    key: "sGisFeature",
+    value: function sGisFeature() {
+      if (!this.geometry || !this.symbol) {
+        return null;
+      } // @ts-ignore
 
-  if (isSGisPolygonSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, plain);
-  }
 
-  if (isSGisPolylineSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, plain);
-  }
+      const {
+        type,
+        coordinates,
+        sr
+      } = this.geometry;
+      const crs = CRS_MAP[sr];
 
-  if (isSGisH3Symbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.h3grid, resolution, plain);
-  }
+      if (!crs) {
+        return null;
+      }
 
-  return symbol.renderFunctionAsync(featuresToRender.point, resolution, plain);
-}
-const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
-
-  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
-};
-const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
-
-  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
-};
+      switch (type) {
+        case GeometryType.Point:
+          return new PointFeature(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-function renderSymbolToCanvas(renders, canvas) {
-  renders.forEach(render => {
-    canvas.draw(render);
-  });
-}
+        case GeometryType.Multipoint:
+          return new MultiPoint(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-function deserializeSymbol(symbol) {
-  switch (symbol.type) {
-    case "h3grid":
-      return deserializeH3Symbol(symbol);
+        case GeometryType.Polyline:
+          return new Polyline(coordinates, {
+            symbol: selectedPolyline,
+            crs
+          });
 
-    case "svgPointSymbol":
-      return deserializeSvgPointSymbol(symbol);
+        case GeometryType.Polygon:
+          return new Polygon(coordinates, {
+            symbol: selectedPolygon,
+            crs
+          });
 
-    case 'circlePointSymbol':
-      return deserializePointSymbol(symbol);
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "extent",
+    value: function extent() {
+      const feature = this.sGisFeature();
+      return feature && feature.bbox;
+    }
+  }]);
 
-    case 'squarePointSymbol':
-      return deserializeSquareSymbol(symbol);
+  return EvergisFeature;
+}();
 
-    case 'maskedImagePointSymbol':
-      return deserializeMaskedImageSymbol(symbol);
+function evaluateCondition(condition, attributes) {
+  try {
+    const evaluator = new ConditionEvaluator(attributes);
+    const result = evaluator.evaluate(condition);
 
-    case 'imagePointSymbol':
-      return deserializeImagePointSymbol(symbol);
+    if (result instanceof Error) {
+      return null;
+    }
 
-    case 'polygonSymbol':
-      return deserializePolygonSymbol(symbol);
+    return result;
+  } catch (_unused) {
+    return null;
+  }
+}
 
-    case 'simplePolylineSymbol':
-    case 'polylineSymbol':
-      return deserializePolylineSymbol(symbol);
+function getAttributeValue(attributes, attributeName) {
+  const attributeMeta = attributes.find((_ref) => {
+    let {
+      name
+    } = _ref;
+    return name === attributeName;
+  });
+  return attributeMeta ? attributeMeta.value : null;
+}
 
-    case "clusterSymbol":
-      return deserializeSymbol(symbol.singleObjectSymbol);
+const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
+const getAttributeNameFromClassified = values => values.length > 0 ? getAttributeNameFromCondition(values[0].condition) : null;
 
-    default:
-      return 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 deserializeH3Symbol(symbol) {
-  var _symbol$stroke, _symbol$stroke2, _symbol$fill;
-
-  return new H3Symbol(_extends({}, symbol, {
-    cellSize: getParameterValue(symbol.cellSize),
-    strokeWidth: getParameterValue(symbol == null ? void 0 : (_symbol$stroke = symbol.stroke) == null ? void 0 : _symbol$stroke.width),
-    strokeColor: getParameterValue(symbol == null ? void 0 : (_symbol$stroke2 = symbol.stroke) == null ? void 0 : _symbol$stroke2.color),
-    fillColor: getParameterValue(symbol == null ? void 0 : (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color)
-  }));
+function extractValuesAttribute(parameterValues, attributes) {
+  const name = getAttributeNameFromClassified(parameterValues) || '';
+  const value = name && getAttributeValue(attributes, name);
+  return [name, value];
 }
 
-function deserializePointSymbol(symbol) {
+function evaluateFeatureSymbol(attributes) {
   // @ts-ignore
-  return new PointSymbol(deserializePointSymbolParams(symbol));
-}
+  function calc(result, _ref4) {
+    let [parameterName, parameterValue] = _ref4;
+    let newParameterValue;
 
-const getOffsetParameterValue = offset => [getParameterValue(offset == null ? void 0 : offset[0]), getParameterValue(offset == null ? void 0 : offset[1])];
+    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);
+    }
 
-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))
-    })
-  } : {});
-}
+    return newParameterValue !== undefined ? _extends({}, result, {
+      [parameterName]: newParameterValue
+    }) : result;
+  }
 
-function deserializeSvgPointSymbol(symbol) {
-  return new PointSymbol(deserializeSvgPointSymbolParams(symbol));
+  return calc;
 }
 
-function deserializeSquareSymbol(symbol) {
-  return new SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle)
-  }));
-}
+function findChildFeatureStyle(childStyles, attributes) {
+  return (childStyles || []).find((_ref5) => {
+    let {
+      condition
+    } = _ref5;
+    const attributeName = condition && getAttributeNameFromCondition(condition);
+    const attributeValue = attributeName && getAttributeValue(attributes, attributeName);
 
-function deserializeMaskedImageSymbol(symbol) {
-  return new MaskedImage(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    imageSource: deserializeBase64(symbol.image),
-    // @ts-ignore
-    maskSource: deserializeBase64(symbol.imageMask),
-    // @ts-ignore
-    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
-  }));
-}
+    if (condition && attributeName && attributeValue !== undefined) {
+      return evaluateCondition(condition, {
+        [attributeName]: attributeValue
+      });
+    }
 
-function deserializeImagePointSymbol(symbol) {
-  return new StaticImageSymbol(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    source: deserializeBase64(symbol.image)
-  }));
+    return false;
+  }) || null;
 }
-
-function deserializePolygonSymbol(symbol) {
-  if (isPolygonHasPatternBrush(symbol)) {
-    return new SGisImageFill(symbol);
+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 (isPolygonHasHatchBrush(symbol)) {
-    return new SGisBrushFill(symbol);
+  if (style.children !== null) {
+    return findChildFeatureSymbol(style.children, attributes) || style.symbol;
   }
 
-  return new SGisPolygonSymbol(symbol);
+  return Object.entries(style.symbol).reduce(evaluateFeatureSymbol(attributes), style.symbol);
 }
 
-function deserializePolylineSymbol(symbol) {
-  return new SGisPolylineSymbol(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))
-  };
-}
-
-function deserializeBase64(base) {
-  return "data:image/png;base64," + base;
-}
-
-function deserializeAnchor(offset) {
-  // @ts-ignore
-  return offset.map(getParameterValue);
-}
-
-function deserializeColor(color) {
-  return color ? new Color(color).toString() : 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;
-};
-function centerAlignSymbol(symbol) {
-  if (isSGisImageSymbol(symbol)) {
-    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
-  } else if (isSGisPointSymbol(symbol)) {
-    symbol.offset = [0, 0];
-  }
-
-  return symbol;
-}
-const adjustSymbol = (symbol, _ref) => {
-  let {
-    size
-  } = _ref;
-  return centerAlignSymbol(clampSymbol(symbol, 0, size));
-};
-
-let EvergisFeature = /*#__PURE__*/function () {
-  function EvergisFeature(feature) {
-    _classCallCheck(this, EvergisFeature);
-
-    this.id = null;
-    this.displayName = null;
-    this.geometry = null;
-    this.layerName = null;
-    this.layerAlias = null;
-    this.attributes = null;
-    this.symbol = null;
-    this.id = feature.id;
-    this.displayName = feature.id;
-    this.geometry = feature.geometry;
-    this.layerName = feature.layer;
-    this.layerAlias = feature.layer;
-    this.attributes = getFeatureAttributes(feature.attributes);
-  }
-
-  _createClass(EvergisFeature, [{
-    key: "sGisFeature",
-    value: function sGisFeature() {
-      if (!this.geometry || !this.symbol) {
-        return null;
-      } // @ts-ignore
-
-
-      const {
-        type,
-        coordinates,
-        sr
-      } = this.geometry;
-      const crs = CRS_MAP[sr];
-
-      if (!crs) {
-        return null;
-      }
-
-      switch (type) {
-        case GeometryType.Point:
-          return new PointFeature(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case GeometryType.Multipoint:
-          return new MultiPoint(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case GeometryType.Polyline:
-          return new Polyline(coordinates, {
-            symbol: selectedPolyline,
-            crs
-          });
-
-        case GeometryType.Polygon:
-          return new Polygon(coordinates, {
-            symbol: selectedPolygon,
-            crs
-          });
-
-        default:
-          return null;
-      }
-    }
-  }, {
-    key: "extent",
-    value: function extent() {
-      const feature = this.sGisFeature();
-      return feature && feature.bbox;
-    }
-  }]);
-
-  return EvergisFeature;
-}();
-
-function evaluateCondition(condition, attributes) {
-  try {
-    const evaluator = new ConditionEvaluator(attributes);
-    const result = evaluator.evaluate(condition);
-
-    if (result instanceof Error) {
-      return null;
-    }
-
-    return result;
-  } catch (_unused) {
-    return null;
-  }
-}
-
-function getAttributeValue(attributes, attributeName) {
-  const attributeMeta = attributes.find(_ref => {
-    let {
-      name
-    } = _ref;
-    return name === attributeName;
-  });
-  return attributeMeta ? attributeMeta.value : null;
-}
-
-const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
-const getAttributeNameFromClassified = values => values.length > 0 ? getAttributeNameFromCondition(values[0].condition) : null;
-
-function findFeatureValue(parameterValues, _ref2) {
-  let [name, value] = _ref2;
-  return value !== null ? parameterValues.find(_ref3 => {
-    let {
-      condition
-    } = _ref3;
-    return value !== undefined && evaluateCondition(condition, {
-      [name]: value
-    });
-  }) : null;
-}
-
-function extractValuesAttribute(parameterValues, attributes) {
-  const name = getAttributeNameFromClassified(parameterValues) || '';
-  const value = name && getAttributeValue(attributes, name);
-  return [name, value];
-}
-
-function evaluateFeatureSymbol(attributes) {
-  // @ts-ignore
-  function calc(result, _ref4) {
-    let [parameterName, parameterValue] = _ref4;
-    let newParameterValue;
-
-    if (isParameterByAttribute(parameterValue)) {
-      const [attributeName, attributeValue] = extractValuesAttribute(parameterValue.values, attributes);
-      const featureValue = findFeatureValue(parameterValue.values, [attributeName, attributeValue]);
-      newParameterValue = featureValue ? featureValue.value : parameterValue.defaultValue;
-    } else if (isObject(parameterValue)) {
-      // @ts-ignore
-      newParameterValue = Object.entries(parameterValue).reduce(calc, parameterValue);
-    }
-
-    return newParameterValue !== undefined ? _extends({}, result, {
-      [parameterName]: newParameterValue
-    }) : result;
-  }
-
-  return calc;
-}
-
-function findChildFeatureStyle(childStyles, attributes) {
-  return (childStyles || []).find(_ref5 => {
-    let {
-      condition
-    } = _ref5;
-    const attributeName = condition && getAttributeNameFromCondition(condition);
-    const attributeValue = attributeName && getAttributeValue(attributes, attributeName);
-
-    if (condition && attributeName && attributeValue !== undefined) {
-      return evaluateCondition(condition, {
-        [attributeName]: attributeValue
-      });
-    }
-
-    return false;
-  }) || null;
-}
-function findChildFeatureSymbol(childStyles, attributes) {
-  const featureStyle = findChildFeatureStyle(childStyles, attributes);
-  return featureStyle ? featureStyle.symbol : null;
-}
-function getFeatureSymbol(style, attributes) {
-  if (!style || !style.symbol) {
-    return null;
-  }
-
-  if (style.children !== null) {
-    return findChildFeatureSymbol(style.children, attributes) || style.symbol;
-  }
-
-  return Object.entries(style.symbol).reduce(evaluateFeatureSymbol(attributes), style.symbol);
-}
-
-let EvergisLayer = /*#__PURE__*/function () {
-  function EvergisLayer(service) {
-    _classCallCheck(this, EvergisLayer);
+let EvergisLayer = /*#__PURE__*/function () {
+  function EvergisLayer(service) {
+    _classCallCheck(this, EvergisLayer);
 
     this.name = null;
     this.titleAttribute = null;
@@ -3283,7 +2933,7 @@ let EvergisLayer = /*#__PURE__*/function () {
       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 => {
+      const titleAttribute = (feature.attributes || []).find((_ref) => {
         let {
           name
         } = _ref;
@@ -3306,7 +2956,7 @@ const evaluateFeature = layers => feature => {
 };
 
 const OTHERS_TITLE = 'Другое';
-const createLegendItem = _ref => {
+const createLegendItem = (_ref) => {
   let {
     attributes,
     renderTitle,
@@ -3352,7 +3002,7 @@ function createStyleLegend(style, config) {
     classificationManager,
     symbol
   } = style;
-  const items = classificationManager.filter(_ref => {
+  const items = classificationManager.filter((_ref) => {
     let {
       parameter
     } = _ref;
@@ -3468,7 +3118,7 @@ const useMapLegend = (layer, config) => {
 };
 
 const LEGEND_SYMBOL_MAX_SIZE = 32;
-const useLegendValueSymbol = _ref => {
+const useLegendValueSymbol = (_ref) => {
   let {
     parameter,
     parameterValue
@@ -3702,23 +3352,26 @@ function useFeatureLayer(_ref) {
   let {
     zIndex,
     isDisplayed = true,
-    features
+    features,
+    opacity
   } = _ref;
   const {
     map
   } = useMapContext();
   const layer = useProperty({
     factory: () => new FeatureLayer$1({
-      features
+      features,
+      opacity
     }),
     destructor: layer => map.indexOf(layer) !== -1 && map.removeLayer(layer),
     update: (layer, _ref2) => {
       let [features] = _ref2;
       layer.features = features;
     }
-  }, [features]);
+  }, [features, opacity]);
   useLayerOrder(layer, zIndex);
   useLayerVisibility(layer, isDisplayed);
+  useLayerOpacity(layer, opacity);
   return layer;
 }
 
@@ -3872,7 +3525,7 @@ function useMapWrapper() {
   return wrapperRef;
 }
 
-const byScale = scale => _ref => {
+const byScale = scale => (_ref) => {
   let {
     zIndex
   } = _ref;
@@ -4071,7 +3724,7 @@ const useTooltip = function useTooltip(zIndex) {
 
     return reset;
   }, [reset, map, layer, zIndex]);
-  const onSetLabelFeature = useCallback(_ref => {
+  const onSetLabelFeature = useCallback((_ref) => {
     let {
       point,
       position,
@@ -4235,7 +3888,7 @@ function useClusterLayer(_ref) {
 }
 
 const INIT_FEATURES = [];
-const useEvergisSelect = _ref => {
+const useEvergisSelect = (_ref) => {
   let {
     onPick,
     onFeatures
@@ -4268,7 +3921,7 @@ function none() {
   return;
 }
 
-const useDraggableMarker = _ref => {
+const useDraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -4390,7 +4043,7 @@ const useToggle = initial => {
   return [state, toggle, setState];
 };
 
-const Symbol = _ref => {
+const Symbol = (_ref) => {
   let {
     symbol,
     size,
@@ -4411,19 +4064,19 @@ const Symbol = _ref => {
 };
 
 var _templateObject, _templateObject2;
-const CompoundIcon = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), _ref => {
+const CompoundIcon = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), (_ref) => {
   let {
     geometryType,
     icons
   } = _ref;
   return "url(" + icons[geometryType] + ") center center / " + (geometryType === GeometryType.Polyline ? '2rem 1.3rem' : 'auto 1rem') + " no-repeat";
 });
-const ClusterSymbol = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 32px;\n  height: 32px;\n\n  :before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: inherit;\n    height: inherit;\n    background-color: ", ";\n    border-radius: 50%;\n    opacity: 0.28;\n  }\n  \n  :after {\n    content: \"99\";\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    background-color: ", ";\n    border-radius: 50%;\n    color: white;\n    font-size: 0.75rem;\n    line-height: 1;\n  }\n"])), _ref2 => {
+const ClusterSymbol = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 32px;\n  height: 32px;\n\n  :before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: inherit;\n    height: inherit;\n    background-color: ", ";\n    border-radius: 50%;\n    opacity: 0.28;\n  }\n  \n  :after {\n    content: \"99\";\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    background-color: ", ";\n    border-radius: 50%;\n    color: white;\n    font-size: 0.75rem;\n    line-height: 1;\n  }\n"])), (_ref2) => {
   let {
     color
   } = _ref2;
   return color;
-}, _ref3 => {
+}, (_ref3) => {
   let {
     color
   } = _ref3;
@@ -4431,7 +4084,7 @@ const ClusterSymbol = /*#__PURE__*/styled.div(_templateObject2 || (_templateObje
 });
 
 const MAX_SIZE = 32;
-const StyleSymbol = _ref => {
+const StyleSymbol = (_ref) => {
   let {
     symbol,
     size = MAX_SIZE,
@@ -4488,7 +4141,7 @@ const AttributeValueContainer = /*#__PURE__*/styled.div(_templateObject14 || (_t
 const SimpleAttribute = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 const ValueLink = /*#__PURE__*/styled.a(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n  text-decoration: none;\n"])));
 
-const MailValue = _ref => {
+const MailValue = (_ref) => {
   let {
     mail
   } = _ref;
@@ -4499,7 +4152,7 @@ const MailValue = _ref => {
   }, mail);
 };
 
-const PhoneValue = _ref => {
+const PhoneValue = (_ref) => {
   let {
     phone
   } = _ref;
@@ -4510,7 +4163,7 @@ const PhoneValue = _ref => {
   }, phone);
 };
 
-const UrlValue = _ref => {
+const UrlValue = (_ref) => {
   let {
     url
   } = _ref;
@@ -4521,7 +4174,7 @@ const UrlValue = _ref => {
   }, url);
 };
 
-const AttributeValue = _ref => {
+const AttributeValue = (_ref) => {
   let {
     attribute
   } = _ref;
@@ -4535,29 +4188,29 @@ const AttributeValue = _ref => {
     if (attributeValue.type === 2
     /* Url */
     ) {
-      return React.createElement(UrlValue, {
-        key: key,
-        url: punycodeDecode(value)
-      });
-    }
+        return React.createElement(UrlValue, {
+          key: key,
+          url: punycodeDecode(value)
+        });
+      }
 
     if (attributeValue.type === 3
     /* Mail */
     ) {
-      return React.createElement(MailValue, {
-        key: key,
-        mail: value
-      });
-    }
+        return React.createElement(MailValue, {
+          key: key,
+          mail: value
+        });
+      }
 
     if (attributeValue.type === 1
     /* Phone */
     ) {
-      return React.createElement(PhoneValue, {
-        key: key,
-        phone: value
-      });
-    }
+        return React.createElement(PhoneValue, {
+          key: key,
+          phone: value
+        });
+      }
 
     return React.createElement(SimpleAttribute, {
       key: value
@@ -4573,7 +4226,7 @@ function punycodeDecode(domains) {
   }
 }
 
-const EvergisCardAttribute = _ref => {
+const EvergisCardAttribute = (_ref) => {
   let {
     attribute,
     className
@@ -4585,7 +4238,7 @@ const EvergisCardAttribute = _ref => {
   }));
 };
 
-const StyledCard = _ref => {
+const StyledCard = (_ref) => {
   let {
     features = [],
     className,
@@ -4631,7 +4284,7 @@ const StyledCard = _ref => {
 };
 
 const _excluded$1 = ["renderCard", "className", "children"];
-const EvergisCard = _ref => {
+const EvergisCard = (_ref) => {
   let {
     renderCard,
     className,
@@ -4683,7 +4336,7 @@ const toSgis = feature => feature.sGisFeature(); // TODO inner hooks???
 
 const useSGisFeatures = (features, currentIndex) => useMemo(() => features.map(toSgis).filter(truthly).map(setSelected(currentIndex)), [features, currentIndex]);
 
-const EvergisSelectLayer = _ref => {
+const EvergisSelectLayer = (_ref) => {
   let {
     features,
     zIndex,
@@ -4728,7 +4381,7 @@ const TileLayer = props => {
 };
 
 const defaultZIndex = 200;
-const EvergisSelect = _ref => {
+const EvergisSelect = (_ref) => {
   let {
     onPick,
     className,
@@ -4763,7 +4416,7 @@ const LegendSymbolTitle = /*#__PURE__*/styled.p(_templateObject3$1 || (_template
 const LegendValueContainer = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
 const LegendSectionHeader = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 
-const LegendSection = _ref => {
+const LegendSection = (_ref) => {
   let {
     item,
     renderLegendTitle,
@@ -4777,7 +4430,7 @@ var _templateObject$3, _templateObject2$3;
 const InputContainer = /*#__PURE__*/styled.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 0.125rem;\n  box-sizing: border-box;\n  border: 0.0625rem solid rgba(48, 69, 79, 0.12);\n  margin-bottom: 0.5rem;\n  \n  i {\n    color: rgba(48, 69, 79, 0.54);\n    padding: 0.25rem;\n\n    &:hover {\n      cursor: pointer;\n      color: rgba(48, 69, 79, 0.87);\n    }\n  }\n"])));
 const InputField = /*#__PURE__*/styled.input(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 1rem;\n  line-height: 1.1875rem;\n  padding: 0 0.5rem;\n  background-color: transparent;\n  color: rgba(48, 69, 79, 0.87);\n"])));
 
-const SearchInput = _ref => {
+const SearchInput = (_ref) => {
   let {
     onChange
   } = _ref;
@@ -4786,7 +4439,7 @@ const SearchInput = _ref => {
   }));
 };
 
-const LegendSymbol = _ref => {
+const LegendSymbol = (_ref) => {
   let {
     parameter,
     parameterValue,
@@ -4804,7 +4457,7 @@ const LegendSymbol = _ref => {
   return React.createElement(React.Fragment, null, children(symbol));
 };
 
-const LegendValue = _ref => {
+const LegendValue = (_ref) => {
   let {
     value,
     parameter,
@@ -4826,7 +4479,7 @@ const getNumberParam = (parameterValue, param) => {
   return typeof parameterValue === 'object' && param in parameterValue && typeof parameterValue[param] === 'number' ? parameterValue[param] : null;
 };
 
-const getSymbolSize = _ref => {
+const getSymbolSize = (_ref) => {
   let {
     parameterValue,
     maxSize
@@ -4851,7 +4504,7 @@ const getSymbolSize = _ref => {
   }
 };
 
-const Legend = _ref => {
+const Legend = (_ref) => {
   let {
     layer,
     children,
@@ -4895,7 +4548,7 @@ const Legend = _ref => {
   })))));
 };
 
-const Map = _ref => {
+const Map = (_ref) => {
   let {
     className,
     position,
@@ -4967,27 +4620,27 @@ const FullscreenBtn = /*#__PURE__*/styled(Icon)(_templateObject5$3 || (_template
 const MeasureBtn = /*#__PURE__*/styled(Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // MeasureBtn.defaultProps = { kind: "measure_length" };
 
 const MapControl = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0.15rem;\n  background: rgba(28, 33, 48, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 1.5rem;\n  cursor: pointer;\n  height: auto;\n  width: auto;\n  padding: 0.25rem;\n"])));
-const MapControls = /*#__PURE__*/styled.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n\n  ", "\n\n  ", " {\n    margin-bottom: ", ";\n    margin-right: ", ";\n    flex-direction: ", ";\n  }\n"])), _ref => {
+const MapControls = /*#__PURE__*/styled.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n\n  ", "\n\n  ", " {\n    margin-bottom: ", ";\n    margin-right: ", ";\n    flex-direction: ", ";\n  }\n"])), (_ref) => {
   let {
     vertical
   } = _ref;
   return vertical ? 'column' : 'row';
-}, _ref2 => {
+}, (_ref2) => {
   let {
     placement
   } = _ref2;
   return placementMixin(placement);
-}, MapControl, _ref3 => {
+}, MapControl, (_ref3) => {
   let {
     vertical
   } = _ref3;
   return vertical ? '0.5rem' : '0';
-}, _ref4 => {
+}, (_ref4) => {
   let {
     vertical
   } = _ref4;
   return vertical ? '0' : '0.5rem';
-}, _ref5 => {
+}, (_ref5) => {
   let {
     vertical
   } = _ref5;
@@ -5000,148 +4653,475 @@ const Measure = () => {
   }));
 };
 
-const Search = () => {
-  return React.createElement(MapControl, null, React.createElement(SearchBtn, {
-    onClick: () => {}
-  }));
-};
+const Search = () => {
+  return React.createElement(MapControl, null, React.createElement(SearchBtn, {
+    onClick: () => {}
+  }));
+};
+
+const Fullscreen = () => {
+  return React.createElement(MapControl, null, React.createElement(FullscreenBtn, {
+    onClick: () => {}
+  }));
+};
+
+var _templateObject$6, _templateObject2$6, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1;
+const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
+const MapLegendContainer = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 12.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
+const MapLegendHeader = /*#__PURE__*/styled(LegendSectionHeader)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
+const MapLegendItem = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 1rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  \n  ", "\n"])), (_ref) => {
+  let {
+    value
+  } = _ref;
+  return typeof value === "number" ? "none" : value;
+}, (_ref2) => {
+  let {
+    value
+  } = _ref2;
+  return !!value && typeof value === "number" && SizeLegendMixin(value);
+});
+const MapLegendOther = /*#__PURE__*/styled(MapLegendItem)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: none;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
+const SizeOverlayLegendMixin = /*#__PURE__*/css(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  \n  ", ", ", " {\n    flex: none;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    width: inherit;\n    height: inherit;\n    margin-left: -1rem;\n    \n    :after {\n      top: 0;\n      margin-top: 0;\n    }\n  }\n"])), MapLegendItem, MapLegendOther);
+const MapLegendItems = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n"])), (_ref3) => {
+  let {
+    overlay
+  } = _ref3;
+  return overlay && SizeOverlayLegendMixin;
+});
+
+const SizeLegendMixin = function SizeLegendMixin(value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 2rem;\n  background: none;\n  border: none;\n  margin-right: 0;\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: -", "px 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value / 2, value, value);
+};
+
+const MapLegendValues = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const MapLegendValuesRange = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const MapLegendValuesOther = /*#__PURE__*/styled(MapLegendOther)(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  text-align: center;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin: 0.1rem 0 0.5rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+
+const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
+
+const getValueFromLegendTitle = (title, minOrMax) => {
+  var _title$split;
+
+  if (title.includes(" - ")) {
+    const result = title == null ? void 0 : title.split(" - ");
+    return minOrMax === "min" ? result == null ? void 0 : result[0] : result == null ? void 0 : result[1];
+  }
+
+  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split.find(isNumeric)) || "";
+};
+
+const MinimizedLegend = (_ref) => {
+  var _currentValues$, _currentValues;
+
+  let {
+    values,
+    title,
+    overlay
+  } = _ref;
+  const currentValues = [...values];
+  const other = currentValues.pop();
+  return React.createElement(React.Fragment, null, !!title && React.createElement(MapLegendValueDescr, null, title), React.createElement(MapLegendItems, {
+    overlay: overlay
+  }, currentValues.map(value => React.createElement(MapLegendItem, {
+    key: value.title,
+    title: value.title,
+    value: value.parameterValue
+  })), React.createElement(MapLegendOther, {
+    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
+    value: other == null ? void 0 : other.parameterValue
+  })), typeof (other == null ? void 0 : other.parameterValue) === "string" && React.createElement(MapLegendValues, null, React.createElement(MapLegendValuesRange, null, React.createElement("div", null, getValueFromLegendTitle((_currentValues$ = currentValues[0]) == null ? void 0 : _currentValues$.title, "max")), React.createElement("div", null, getValueFromLegendTitle((_currentValues = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues.title, "min"))), React.createElement(MapLegendValuesOther, null, "-")));
+};
+
+const MapLegend = (_ref) => {
+  let {
+    layer,
+    config,
+    className
+  } = _ref;
+  const legend = useMapLegend(layer, config);
+  const [isExpanded, toggleExpanded] = useToggle();
+
+  if (!legend) {
+    return null;
+  }
+
+  const {
+    symbol,
+    items
+  } = legend;
+  return React.createElement(LegendProvider, {
+    symbol: symbol
+  }, React.createElement(MapLegendControl, {
+    className: className
+  }, React.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), !!items.length && React.createElement(MapLegendContainer, null, isExpanded ? React.createElement(Legend, {
+    layer: layer,
+    config: config
+  }) : React.createElement(React.Fragment, null, items.map(item => {
+    var _symbol$fill, _item$parameter, _symbol$fill2;
+
+    return React.createElement(Fragment, {
+      key: item.title
+    }, React.createElement(MinimizedLegend, {
+      values: item.values,
+      defaultValue: (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color,
+      title: item.title !== (layer == null ? void 0 : layer.alias) ? item.title : ""
+    }), ((_item$parameter = item.parameter) == null ? void 0 : _item$parameter.includes("size")) && React.createElement(MinimizedLegend, {
+      values: item.values,
+      defaultValue: (_symbol$fill2 = symbol.fill) == null ? void 0 : _symbol$fill2.color,
+      overlay: true
+    }));
+  })), React.createElement(MapLegendExpandButton, {
+    onClick: toggleExpanded
+  }, isExpanded ? "Свернуть" : "Развернуть"))));
+};
+
+const MAX_SIZE$2 = 100;
+const MapLegendSymbol = (_ref) => {
+  let {
+    value,
+    parameter
+  } = _ref;
+  return React.createElement(LegendSymbol, {
+    key: value.title,
+    parameter: parameter,
+    parameterValue: value.parameterValue
+  }, symbol => React.createElement(Symbol, {
+    render: getMapLegendSymbolRenders,
+    symbol: symbol,
+    size: MAX_SIZE$2
+  }));
+};
+
+const DEFAULT_FORMATTERS = {
+  polygon: formatPolygonMeasure,
+  length: formatLength
+};
+
+const COORD_FRACTION = 6;
+const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
+let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
+  _inherits(BaseMeasureToolCreator, _PolylineControl);
+
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
+
+  function BaseMeasureToolCreator(map, painter, params) {
+    var _this;
+
+    _classCallCheck(this, BaseMeasureToolCreator);
+
+    _this = _super.call(this, map, params);
+
+    _this.cancel = () => {
+      _this.fire('cancel');
+    };
+
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
+    _this.areaSymbol = params.areaSymbol;
+
+    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+
+
+    _this.on('change', _this.updateDistance);
+
+    return _this;
+  }
+
+  _createClass(BaseMeasureToolCreator, [{
+    key: "_handleMousemove",
+    value: function _handleMousemove(event) {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_handleMousemove", this).call(this, event);
+
+      this.drawPointOnMouseMove(event);
+    }
+  }, {
+    key: "_activate",
+    value: function _activate() {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_activate", this).call(this);
+
+      this.addTempLabel();
+      this.setCursor('pointer');
+    }
+  }, {
+    key: "_deactivate",
+    value: function _deactivate() {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_deactivate", this).call(this);
+
+      this.removeCoordLabel();
+      this.removeTempLabel();
+      this.removeMeasureLabel();
+      this.removeTempPolygon();
+      this.setCursor('default');
+    }
+  }, {
+    key: "handlePointAdd",
+    value: function handlePointAdd() {
+      const feature = this.activeFeature;
+      if (!feature) return;
+      const {
+        rings,
+        crs
+      } = feature;
+
+      if (isPolylineLikePolygon(rings, this.map.resolution)) {
+        this.finishDrawing();
+        this.fire(new DrawingFinishEvent(feature, new MouseEvent('mouseup')));
+        return;
+      }
+
+      if (rings[0].length === 2) {
+        const projection = crs.projectionTo(geo);
+        const point = rings[0][0];
+        if (!projection) return;
+        const [lat, long] = projection(point);
+        this.removeTempLabel();
+        this.addMeasureResultLabel();
+        this.addCoordLabel(lat.toFixed(COORD_FRACTION) + ", " + long.toFixed(COORD_FRACTION), point);
+      } else {
+        this.removeCoordLabel();
+      }
+    }
+  }, {
+    key: "polygonPreview",
+    value: function polygonPreview() {
+      if (this.tempPolygon) {
+        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
+      }
+
+      const feature = this.activeFeature;
+      if (!feature) return;
+      const {
+        rings,
+        crs
+      } = feature;
+      const polygonRings = [...rings[0]];
+      polygonRings.shift();
+      this.tempPolygon = new Polygon(polygonRings, {
+        crs
+      });
+      this.tempPolygon.symbol = this.areaSymbol || measureAreaSymbol;
+      this.activeFeature && this.activeFeature.hide();
+      this._tempLayer && this._tempLayer.add(this.tempPolygon);
+    }
+  }, {
+    key: "removeTempPolygon",
+    value: function removeTempPolygon() {
+      if (this.tempPolygon) {
+        this._tempLayer && this._tempLayer.remove(this.tempPolygon);
+        delete this.tempPolygon;
+      }
+    }
+  }, {
+    key: "updateDistance",
+    value: function updateDistance(event) {
+      const feature = this.activeFeature;
+      const {
+        ringIndex,
+        pointIndex
+      } = event;
+      if (!feature || ringIndex === null || pointIndex === null) return;
+      const {
+        rings,
+        crs
+      } = feature;
+      const position = rings[ringIndex][pointIndex];
+      const length$1 = length(rings, crs);
+      let content = this.formatters.length(length$1);
+
+      if (isPolylineLikePolygon(rings, this.map.resolution)) {
+        this.polygonPreview();
+        const area$1 = area(rings, crs);
+        content = this.formatters.polygon(area$1, length$1);
+      } else if (this.tempPolygon) {
+        feature.show();
+        this.removeTempPolygon();
+      }
+
+      if (this.measureResultLabel) {
+        this.measureResultLabel.position = position;
+        this.measureResultLabel.content = content;
+      }
+    }
+  }, {
+    key: "addTempLabel",
+    value: function addTempLabel() {
+      this.tempLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
+        content: 'Нажмите на карту, чтобы начать измерение',
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          renderLabel: this.renderLabelSymbol
+        })
+      });
+      this._tempLayer && this._tempLayer.add(this.tempLabel);
+    }
+  }, {
+    key: "addCoordLabel",
+    value: function addCoordLabel(content, position) {
+      this.coordLabel = new LabelFeature(position, {
+        content,
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          renderLabel: this.renderLabelSymbol,
+          onClose: this.cancel
+        })
+      });
+      this._tempLayer && this.coordLabel && this._tempLayer.add(this.coordLabel);
+    }
+  }, {
+    key: "addMeasureResultLabel",
+    value: function addMeasureResultLabel() {
+      this.measureResultLabel = new LabelFeature(DEFAULT_LABEL_POSITION, {
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          renderLabel: this.renderLabelSymbol
+        })
+      });
+      this._tempLayer && this.measureResultLabel && this._tempLayer.add(this.measureResultLabel);
+    }
+  }, {
+    key: "removeTempLabel",
+    value: function removeTempLabel() {
+      if (this.tempLabel) {
+        this._tempLayer && this._tempLayer.remove(this.tempLabel);
+        delete this.tempLabel;
+      }
+    }
+  }, {
+    key: "removeCoordLabel",
+    value: function removeCoordLabel() {
+      if (this.coordLabel) {
+        this._tempLayer && this._tempLayer.remove(this.coordLabel);
+        delete this.coordLabel;
+      }
+    }
+  }, {
+    key: "removeMeasureLabel",
+    value: function removeMeasureLabel() {
+      if (this.measureResultLabel) {
+        this._tempLayer && this._tempLayer.remove(this.measureResultLabel);
+        delete this.measureResultLabel;
+      }
+    }
+  }, {
+    key: "drawPointOnMouseMove",
+    value: function drawPointOnMouseMove(event) {
+      if (this.tempLabel) {
+        this.tempLabel.position = event.point.position;
+      }
+    }
+  }, {
+    key: "setCursor",
+    value: function setCursor(cursor) {
+      const {
+        wrapper
+      } = this.painter;
+
+      if (wrapper && typeof wrapper !== 'string') {
+        wrapper.style.cursor = cursor;
+      }
+    }
+  }]);
 
-const Fullscreen = () => {
-  return React.createElement(MapControl, null, React.createElement(FullscreenBtn, {
-    onClick: () => {}
-  }));
-};
+  return BaseMeasureToolCreator;
+}(PolylineControl);
 
-var _templateObject$6, _templateObject2$6, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1;
-const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
-const MapLegendContainer = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 12.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
-const MapLegendHeader = /*#__PURE__*/styled(LegendSectionHeader)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 1rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  \n  ", "\n"])), _ref => {
-  let {
-    value
-  } = _ref;
-  return typeof value === "number" ? "none" : value;
-}, _ref2 => {
-  let {
-    value
-  } = _ref2;
-  return !!value && typeof value === "number" && SizeLegendMixin(value);
-});
-const MapLegendOther = /*#__PURE__*/styled(MapLegendItem)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: none;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
-const SizeOverlayLegendMixin = /*#__PURE__*/css(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  \n  ", ", ", " {\n    flex: none;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    width: inherit;\n    height: inherit;\n    margin-left: -1rem;\n    \n    :after {\n      top: 0;\n      margin-top: 0;\n    }\n  }\n"])), MapLegendItem, MapLegendOther);
-const MapLegendItems = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n"])), _ref3 => {
-  let {
-    overlay
-  } = _ref3;
-  return overlay && SizeOverlayLegendMixin;
-});
+let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
+  _inherits(BaseMeasureToolEditor, _PolyEditor);
 
-const SizeLegendMixin = function SizeLegendMixin(value) {
-  if (value === void 0) {
-    value = 0;
-  }
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolEditor);
 
-  return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 2rem;\n  background: none;\n  border: none;\n  margin-right: 0;\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: -", "px 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value / 2, value, value);
-};
+  function BaseMeasureToolEditor(map, painter, params) {
+    var _this;
 
-const MapLegendValues = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MapLegendValuesRange = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
-const MapLegendValuesOther = /*#__PURE__*/styled(MapLegendOther)(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  text-align: center;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin: 0.1rem 0 0.5rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+    _classCallCheck(this, BaseMeasureToolEditor);
 
-const getValueFromLegendTitle = (title, minOrMax) => {
-  var _title$split;
+    _this = _super.call(this, map, params);
 
-  if (title.includes(" - ")) {
-    const result = title == null ? void 0 : title.split(" - ");
-    return minOrMax === "min" ? result == null ? void 0 : result[0] : result == null ? void 0 : result[1];
-  }
+    _this.measureResult = () => {
+      const feature = _this.activeFeature;
+      if (!feature) return null;
+      const {
+        rings,
+        isEnclosed,
+        crs
+      } = feature;
+      const pointsCount = rings[0].length;
+      const position = rings[0][pointsCount - 1];
+      const area$1 = area(rings, crs);
+      const length$1 = length(rings, crs, isEnclosed);
+      const content = isEnclosed ? _this.formatters.polygon(area$1, length$1) : _this.formatters.length(length$1);
+      return {
+        content,
+        position
+      };
+    };
 
-  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split.find(isNumeric)) || "";
-};
+    _this.removeFeature = () => {
+      _this.fire('remove');
+    };
 
-const MinimizedLegend = _ref => {
-  var _currentValues$, _currentValues;
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
 
-  let {
-    values,
-    title,
-    overlay
-  } = _ref;
-  const currentValues = [...values];
-  const other = currentValues.pop();
-  return React.createElement(React.Fragment, null, !!title && React.createElement(MapLegendValueDescr, null, title), React.createElement(MapLegendItems, {
-    overlay: overlay
-  }, currentValues.map(value => React.createElement(MapLegendItem, {
-    key: value.title,
-    title: value.title,
-    value: value.parameterValue
-  })), React.createElement(MapLegendOther, {
-    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
-    value: other == null ? void 0 : other.parameterValue
-  })), typeof (other == null ? void 0 : other.parameterValue) === "string" && React.createElement(MapLegendValues, null, React.createElement(MapLegendValuesRange, null, React.createElement("div", null, getValueFromLegendTitle((_currentValues$ = currentValues[0]) == null ? void 0 : _currentValues$.title, "max")), React.createElement("div", null, getValueFromLegendTitle((_currentValues = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues.title, "min"))), React.createElement(MapLegendValuesOther, null, "-")));
-};
+    _this.on('change', _this.updateMeasureResult);
 
-const MapLegend = _ref => {
-  let {
-    layer,
-    config,
-    className
-  } = _ref;
-  const legend = useMapLegend(layer, config);
-  const [isExpanded, toggleExpanded] = useToggle();
+    _this.on('edit', _this.updateMeasureResult);
 
-  if (!legend) {
-    return null;
+    return _this;
   }
 
-  const {
-    symbol,
-    items
-  } = legend;
-  return React.createElement(LegendProvider, {
-    symbol: symbol
-  }, React.createElement(MapLegendControl, {
-    className: className
-  }, React.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), !!items.length && React.createElement(MapLegendContainer, null, isExpanded ? React.createElement(Legend, {
-    layer: layer,
-    config: config
-  }) : React.createElement(React.Fragment, null, items.map(item => {
-    var _symbol$fill, _item$parameter, _symbol$fill2;
+  _createClass(BaseMeasureToolEditor, [{
+    key: "_activate",
+    value: function _activate() {
+      _get(_getPrototypeOf(BaseMeasureToolEditor.prototype), "_activate", this).call(this);
 
-    return React.createElement(Fragment, {
-      key: item.title
-    }, React.createElement(MinimizedLegend, {
-      values: item.values,
-      defaultValue: (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color,
-      title: item.title !== (layer == null ? void 0 : layer.alias) ? item.title : ""
-    }), ((_item$parameter = item.parameter) == null ? void 0 : _item$parameter.includes("size")) && React.createElement(MinimizedLegend, {
-      values: item.values,
-      defaultValue: (_symbol$fill2 = symbol.fill) == null ? void 0 : _symbol$fill2.color,
-      overlay: true
-    }));
-  })), React.createElement(MapLegendExpandButton, {
-    onClick: toggleExpanded
-  }, isExpanded ? "Свернуть" : "Развернуть"))));
-};
+      this.addMeasureResultLabel();
+    }
+  }, {
+    key: "addMeasureResultLabel",
+    value: function addMeasureResultLabel() {
+      const measureResult = this.measureResult();
+      if (measureResult === null) return;
+      const {
+        content,
+        position
+      } = measureResult;
+      this.measureResultLabel = new LabelFeature(position, {
+        content,
+        crs: this.map.crs,
+        symbol: createLabelSymbol({
+          onClose: this.removeFeature,
+          renderLabel: this.renderLabelSymbol
+        })
+      });
+      this._tempLayer && this._tempLayer.add(this.measureResultLabel);
+    }
+  }, {
+    key: "updateMeasureResult",
+    value: function updateMeasureResult() {
+      if (this.measureResultLabel) {
+        const measureResult = this.measureResult();
+        if (measureResult === null) return;
+        const {
+          content,
+          position
+        } = measureResult;
+        this.measureResultLabel.content = content;
+        this.measureResultLabel.position = position;
+      }
+    }
+  }]);
 
-const MAX_SIZE$2 = 100;
-const MapLegendSymbol = _ref => {
-  let {
-    value,
-    parameter
-  } = _ref;
-  return React.createElement(LegendSymbol, {
-    key: value.title,
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React.createElement(Symbol, {
-    render: getMapLegendSymbolRenders,
-    symbol: symbol,
-    size: MAX_SIZE$2
-  }));
-};
+  return BaseMeasureToolEditor;
+}(PolyEditor);
 
 let MeasureTool = /*#__PURE__*/function (_React$Component) {
   _inherits(MeasureTool, _React$Component);
@@ -5331,7 +5311,7 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 const _excluded$3 = ["isActive"];
-const Measurer = _ref => {
+const Measurer = (_ref) => {
   let {
     isActive
   } = _ref,
@@ -5349,18 +5329,18 @@ const Measurer = _ref => {
 
 var _templateObject$7, _templateObject2$7, _templateObject3$5;
 const ScaleRulerContainer = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"])));
-const ScaleRulerBlock = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), _ref => {
+const ScaleRulerBlock = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), (_ref) => {
   let {
     width
   } = _ref;
   return width + "px";
 });
-const TextContainer = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
+const TextContainer = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), (_ref2) => {
   let {
     alignEnd
   } = _ref2;
   return alignEnd ? 'flex-end' : 'center';
-}, _ref3 => {
+}, (_ref3) => {
   let {
     width
   } = _ref3;
@@ -5385,7 +5365,7 @@ const ScaleRuler = () => {
   }, currentScale >= 1000 ? currentScale / 1000 + "km" : currentScale + "m")));
 };
 
-const Zoom = _ref => {
+const Zoom = (_ref) => {
   let {
     children
   } = _ref;
@@ -5434,7 +5414,7 @@ const placementMixin$1 = function placementMixin(placement, distance, cornerSize
   return css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top' && top(distance, cornerSize), placement === 'right' && right(distance, cornerSize), placement === 'left' && left(distance, cornerSize), placement === 'bottom' && bottom(distance, cornerSize));
 };
 const corner = /*#__PURE__*/css(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"])));
-const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), _ref => {
+const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), (_ref) => {
   let {
     placement,
     distance = '0.5rem',
@@ -5442,7 +5422,7 @@ const TooltipComponent = /*#__PURE__*/styled.div(_templateObject11$2 || (_templa
     cornerSize = '0.25rem'
   } = _ref;
   return placementMixin$1(placement, distance, withArrow ? cornerSize : null);
-}, _ref2 => {
+}, (_ref2) => {
   let {
     withArrow
   } = _ref2;
@@ -5456,7 +5436,7 @@ const {
   Consumer
 } = /*#__PURE__*/createContext([]); // TODO I just cant read that
 
-const Tooltip = _ref => {
+const Tooltip = (_ref) => {
   let {
     features = [],
     map,
@@ -5495,7 +5475,7 @@ const Noop = () => React.createElement("div", {
   }
 });
 
-const DraggableMarker = _ref => {
+const DraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -5509,5 +5489,20 @@ const DraggableMarker = _ref => {
   return React.createElement(Fragment, null);
 };
 
+const polygonCircleFromPoint = (center, diameter) => {
+  const coordinates = [];
+  const radius = diameter / 2;
+  const endAngle = Math.PI * 2;
+  const step = Math.max(Math.PI / 2 / radius, endAngle / 128);
+  let start = 0;
+  let end = endAngle;
+
+  for (let ang = start; ang < end; ang += step) {
+    coordinates.push([Math.cos(ang) * radius + center[0], Math.sin(ang) * radius + center[1]]);
+  }
+
+  return [coordinates];
+};
+
 export { ArrowLineMiterRender, BaseMeasureToolCreator, BaseMeasureToolEditor, CRS_MAP, CardAttributes, CardHeader, CircleLineMiterRender, ClassificationCondition, ClassificationManager, ClusterLayer, ClusterSymbol, CompoundIcon, DEFAULT_CRS, DEFAULT_SRID, DEFAULT_SYMBOL_SIZE, DraggableMarker, EvergisCard, EvergisCardAttribute, AttributeContainer as EvergisCardAttributeContainer, AttributeTitle as EvergisCardAttributeTitle, AttributeValueContainer as EvergisCardAttributeValueContainer, CardControls as EvergisCardCardControls, CardTitle as EvergisCardCardTitle, EvergisCardContainer, CurrentFeatureIndex as EvergisCardCurrentFeatureIndex, FeatureName as EvergisCardFeatureName, LayerName as EvergisCardLayerName, CardPagination as EvergisCardPagination, PaginationDescription as EvergisCardPaginationDescription, SimpleAttribute as EvergisCardSimpleValue, StickyHeader as EvergisCardStickyHeader, ValueLink as EvergisCardValueLink, EvergisDynamicLayer, EvergisFeature, EvergisLayer, EvergisProvider, EvergisSelect, EvergisSelectLayer, EvergisSelectProvider, EvergisStyle, EvergisTileLayer, FeatureLayer, Fullscreen, LabelSymbol, Legend, LegendContainer, LegendProvider, LegendSection, LegendSectionContainer, LegendSymbol, LegendValue, LegendValueContainer, LineMiterKind, LineMiterRender, Map, MapControl, MapControls, MapLegend, MapLegendContainer, MapLegendExpandButton, MapLegendHeader, MapLegendSymbol, MapLegendValueDescr, MapProvider, Measure, MeasureTool, Measurer, NO_CONTENT_VALUE, Noop, PREVIEW_LIMITS, SGisBrushFill, SGisImageFill, SGisPolygonSymbol, SGisPolylineSymbol, SOLID_INTERVALS, SVGPoly, ScaleRuler, ScaleRulerBlock, ScaleRulerContainer, Search, SelectedPointSymbol, SelectedPolySymbol, ShadowedPointSymbol, ShadowedPolySymbol, SquareLineMiterRender, SrId, StyleSymbol, Symbol, TextContainer, TileLayer, Tooltip, TooltipComponent, TooltipProvider, Zoom, ZoomLevel, adjustSymbol, applyParameterValue, clamp, copyRings, createCompositeSymbol, createLabelSymbol, createStyleLegend, createValueTitle, defaultOffset, defineStrokeStylePreset, deserializeSymbol, evaluateFeature, extractStyle, extractSymbol, findChildFeatureStyle, findChildFeatureSymbol, formatArea, formatAttributeValue, formatLength, formatPolygonMeasure, getAttributeNameFromClassified, getAttributeNameFromCondition, getChildSymbols, getCrs, getDashStylePreset, getFeatureSymbol, getLegendSymbolRenders, getLineDash, getMapLegendSymbolRenders, getMapState, getParameterValue, getScale, getSymbolRenders, isArrowLineMiter, isCalculatedParameter, isCircleLineMiter, isCompositeSymbol, isDashedBrush, isFilledLineMitter, isHatchBrush, isImageSymbol, isLabelSymbol, isMaskedImageSymbol, isMiterExist, isNumeric, isParameterByAttribute, isParameterValueSimple, isParameterValueSymbol, isPatternBrush, isPointLabelSymbol, isPointSymbol, isPolygonHasHatchBrush, isPolygonHasPatternBrush, isPolygonLabelSymbol, isPolygonSymbol, isPolylineLabelSymbol, isPolylineLikePolygon, isPolylineSymbol, isPolylineSymbols, isRangeClass, isRasterSymbol, isSGisClusterSymbol, isSGisH3Symbol, isSGisImageSymbol, isSGisPointSymbol, isSGisPolygonSymbol, isSGisPolylineSymbol, isScalablePolylineSymbol, isSimpleOffset, isSimplePolylineSymbol, isSimpleSymbol, isSizableSymbol, isSolidBrush, isSquareLineMiter, isSquareSymbol, isStaticImageSymbol, isStringParameterValue, isStrokeStyledSymbol, isStyle, isSymbolWithOffset, isTwoDimensionalSymbol, isUniqueClass, isValidParameter, measureAreaSymbol, measureLengthSymbol, measurePolygonSnapSymbol, metersToPixels, numberWithSpaces, packStyle, polygonCircleFromPoint, printRangeClass, renderSymbolToCanvas, selectedPoint, selectedPolygon, selectedPolyline, setDefaultParameterValue, setParameterValue, shouldUpdateMapState, solidStrokeStylePreset, strokeStylePresets, symbolParameterWalker, symbolTypeGuard, toIntervals, toLineDash, unClassify, updateMapResolution, useCanvas, useClusterLayer, useCrs, useDebouncedCallback, useDraggableMarker, useEventPoint, useEvergisContext, useEvergisDynamicLayer, useEvergisSelect, useEvergisSelectContext, useEvergisTileLayer, useFeatureLayer, useLayerLegend, useLayerOrder, useLayerVisibility, useLegend, useLegendContext, useLegendValueSymbol, useMapBboxChange, useMapContext, useMapLegend, useMapLevel, useMapPick, useMapResize, useMapState, useMapView, useMapViewActions, useMapWrapper, useMaxMinScale, useMetersToPixels, useMetersToPixelsCb, useMount, useProperty, useScale, useSymbol, useToggle, useTooltip, useTooltipContext, useUpdate, useUpdateMapView };
 //# sourceMappingURL=react.esm.js.map