@evergis/react 2.0.101 → 2.0.103

package/dist/react.cjs.development.js

@@ -26,10 +26,6 @@ var PolylineSymbol = require('@evergis/sgis/es/symbols/PolylineSymbol');
 var Poly = require('@evergis/sgis/es/renders/Poly');
 var geotools = require('@evergis/sgis/es/geotools');
 var math = require('@evergis/sgis/es/utils/math');
-var PolylineControl = require('@evergis/sgis/es/controls/PolylineControl');
-var Label = require('@evergis/sgis/es/features/Label');
-var Control = require('@evergis/sgis/es/controls/Control');
-var PolyEditor = require('@evergis/sgis/es/controls/PolyEditor');
 var ReactDOM = _interopDefault(require('react-dom'));
 var _Symbol = require('@evergis/sgis/es/symbols/Symbol');
 var Poly$1 = require('@evergis/sgis/es/features/Poly');
@@ -42,6 +38,7 @@ var Square = require('@evergis/sgis/es/symbols/point/Square');
 var MaskedImage = require('@evergis/sgis/es/symbols/point/MaskedImage');
 var Canvas = require('@evergis/sgis/es/painters/DomPainter/Canvas');
 var commonEvents = require('@evergis/sgis/es/commonEvents');
+var Label = require('@evergis/sgis/es/features/Label');
 var ClusterLayer$1 = require('@evergis/sgis/es/layers/ClusterLayer');
 var GridClusterProvider = require('@evergis/sgis/es/layers/clusterProviders/GridClusterProvider');
 var PointEditor = require('@evergis/sgis/es/controls/PointEditor');
@@ -51,6 +48,9 @@ var styled__default = _interopDefault(styled);
 var ui = require('@evergis/ui');
 var punycode = _interopDefault(require('punycode'));
 var TileLayer$1 = require('@evergis/sgis/es/layers/TileLayer');
+var PolylineControl = require('@evergis/sgis/es/controls/PolylineControl');
+var Control = require('@evergis/sgis/es/controls/Control');
+var PolyEditor = require('@evergis/sgis/es/controls/PolyEditor');
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -71,9 +71,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;
 }
 
@@ -107,9 +104,6 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -168,8 +162,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);
@@ -203,7 +195,7 @@ function _superPropBase(object, property) {
   return object;
 }
 
-function _get() {
+function _get(target, property, receiver) {
   if (typeof Reflect !== "undefined" && Reflect.get) {
     _get = Reflect.get;
   } else {
@@ -214,14 +206,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) {
@@ -250,7 +242,7 @@ const defaultApi = /*#__PURE__*/new api.Api({
   url: BASE_URL
 });
 const evergisContext = /*#__PURE__*/React.createContext(defaultApi);
-const EvergisProvider = _ref => {
+const EvergisProvider = (_ref) => {
   let {
     api,
     children
@@ -268,7 +260,7 @@ const mapContext = /*#__PURE__*/React.createContext({
   map: defaultMap,
   painter: defaultPainter
 });
-const MapProvider = _ref => {
+const MapProvider = (_ref) => {
   let {
     map,
     painter,
@@ -290,7 +282,7 @@ const tooltipContext = /*#__PURE__*/React.createContext({
   layer: defaultLayer,
   popupLayer: defaultPopupLayer
 });
-const TooltipProvider = _ref => {
+const TooltipProvider = (_ref) => {
   let {
     layer,
     popupLayer,
@@ -307,7 +299,7 @@ const TooltipProvider = _ref => {
 const useTooltipContext = () => React.useContext(tooltipContext);
 
 const LegendContext = /*#__PURE__*/React.createContext(null);
-const LegendProvider = _ref => {
+const LegendProvider = (_ref) => {
   let {
     symbol,
     children
@@ -319,7 +311,7 @@ const LegendProvider = _ref => {
 const useLegendContext = () => React.useContext(LegendContext);
 
 const evergisSelectContext = /*#__PURE__*/React.createContext([]);
-const EvergisSelectProvider = _ref => {
+const EvergisSelectProvider = (_ref) => {
   let {
     layers,
     children
@@ -364,7 +356,7 @@ function useMapViewActions() {
   }, [map]);
   const zoomIn = React.useCallback(() => zoomTo(1), [zoomTo]);
   const zoomOut = React.useCallback(() => zoomTo(-1), [zoomTo]);
-  const animateTo = React.useCallback(_ref => {
+  const animateTo = React.useCallback((_ref) => {
     let {
       position,
       resolution,
@@ -394,7 +386,7 @@ function useMapViewActions() {
     const {
       tileScheme
     } = map;
-    let tileLevel = tileScheme.levels.find(_ref2 => {
+    let tileLevel = tileScheme.levels.find((_ref2) => {
       let {
         zIndex
       } = _ref2;
@@ -570,7 +562,7 @@ const formatStringAttribute = value => {
 
   const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
 
-  if (attributeValues.every(_ref => {
+  if (attributeValues.every((_ref) => {
     let {
       type
     } = _ref;
@@ -578,7 +570,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 = geotools.projectRings(rings, fromCrs, toCrs);
   return math.simplifyCoordinates(projected.map(ring => // @ts-ignore
-  ring.map(_ref => {
+  ring.map((_ref) => {
     let [x, y] = _ref;
     return [x / resolution, y / -resolution];
   })), 1);
@@ -1588,1518 +1580,1178 @@ 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 === exports.LineMiterKind.FilledCircle;
+      return new Poly.PolyRender(polygonCircleFromPoint(miterRings[0][0], this.miterSize), {
+        fillColor: isFilled ? this.color : 'transparent',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth,
+        enclosed: true
+      });
+    }
+  }]);
 
-    _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 === exports.LineMiterKind.FilledSquare;
+      return new Poly.PolyRender(miterRings, {
+        enclosed: true,
+        fillColor: isFilled ? this.color : void 0,
+        fillStyle: isFilled ? Poly.FillStyle.Color : Poly.FillStyle.None,
+        lineCap: 'square',
+        lineJoin: 'miter',
+        strokeColor: this.color,
+        strokeWidth: this.strokeWidth
+      });
+    }
+  }]);
 
-      this.removeCoordLabel();
-      this.removeTempLabel();
-      this.removeMeasureLabel();
-      this.removeTempPolygon();
-      this.setCursor('default');
+  return SquareLineMiterRender;
+}(LineMiterRender);
+
+const getLineMiterRender = options => {
+  switch (options.kind) {
+    case exports.LineMiterKind.Arrow:
+    case exports.LineMiterKind.FilledArrow:
+      return new ArrowLineMiterRender(options);
+
+    case exports.LineMiterKind.Square:
+    case exports.LineMiterKind.FilledSquare:
+      return new SquareLineMiterRender(options);
+
+    case exports.LineMiterKind.Circle:
+    case exports.LineMiterKind.FilledCircle:
+      return new CircleLineMiterRender(options);
+
+    default:
+      return null;
+  }
+};
+
+const updateRingForRightMiter = (ring, miterSize, isLastRing) => {
+  const reversedRing = ring.slice().reverse();
+
+  for (let i = 0; i < reversedRing.length; i++) {
+    const coordinates = reversedRing[i];
+
+    if (isLastRing && i === 0) {
+      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
     }
-  }, {
-    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 Control.DrawingFinishEvent(feature, new MouseEvent('mouseup')));
-        return;
-      }
+    const nextCoordinates = reversedRing[i - 1];
 
-      if (rings[0].length === 2) {
-        const projection = crs.projectionTo(Crs.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.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 = geotools.length(rings, crs);
-      let content = this.formatters.length(length);
+  }
 
-      if (isPolylineLikePolygon(rings, this.map.resolution)) {
-        this.polygonPreview();
-        const area = geotools.area(rings, crs);
-        content = this.formatters.polygon(area, length);
-      } 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 Label.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 Label.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 Label.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.PolylineControl);
+  return SGisPolylineSymbol;
+}(PolylineSymbol.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 = geotools.area(rings, crs);
-      const length = geotools.length(rings, crs, isEnclosed);
-      const content = isEnclosed ? _this.formatters.polygon(area, length) : _this.formatters.length(length);
-      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 Label.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.PolyEditor);
+      const Component = this.component;
 
-const metersToPixels = (meters, _ref) => {
-  let {
-    painter,
-    crs = Crs.geo
-  } = _ref;
-  const {
-    width
-  } = painter;
-  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
-  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
-  const widthDistance = geotools.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__default.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;
+}(_Symbol.DynamicPointSymbol);
 
-  return [coordinates];
+const defaultOffset = [8, -16];
+const createLabelSymbol = props => {
+  const {
+    offset = defaultOffset,
+    renderLabel = (_ref) => {
+      let {
+        content
+      } = _ref;
+      return React__default.createElement("div", null, content);
+    },
+    onClose = undefined
+  } = props || {};
+  return new LabelSymbol({
+    offset,
+    component: (_ref2) => {
+      let {
+        content
+      } = _ref2;
+      return renderLabel({
+        content,
+        onClose
+      });
+    }
+  });
 };
 
-let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
-  _inherits(CircleLineMiterRender, _LineMiterRender);
+function createShadowRender(position, _ref) {
+  let {
+    strokeWidth = 2,
+    shadowColor,
+    shadowSize,
+    size = 6
+  } = _ref;
+  const shadowDiameter = size + strokeWidth + shadowSize;
+  return new Poly.PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
+    fillColor: 'transparent',
+    strokeColor: shadowColor,
+    strokeWidth: shadowSize,
+    enclosed: true
+  });
+}
+function getEditorPointRenderer(position, _ref2) {
+  let {
+    strokeColor,
+    strokeWidth,
+    shadowColor,
+    fillColor,
+    shadowSize,
+    size = 0
+  } = _ref2;
+  return [createShadowRender(position, {
+    strokeWidth,
+    strokeColor,
+    shadowSize,
+    shadowColor,
+    size
+  }), new Poly.PolyRender(polygonCircleFromPoint(position, size), {
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    enclosed: true
+  })];
+}
 
-  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
+let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
+  _inherits(ShadowedPointSymbol, _PointSymbol);
 
-  function CircleLineMiterRender() {
-    _classCallCheck(this, CircleLineMiterRender);
+  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
 
-    return _super.apply(this, arguments);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPointSymbol(options) {
+    _classCallCheck(this, ShadowedPointSymbol);
+
+    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.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 === exports.LineMiterKind.FilledCircle;
-      return new Poly.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 Poly.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 Poly.PolyRender(polygonCircleFromPoint(position, size), {
+        fillColor,
+        strokeColor,
+        strokeWidth,
+        enclosed: true
+      });
     }
   }, {
-    key: "createRender",
-    value: function createRender(miterRings) {
-      const isFilled = this.kind === exports.LineMiterKind.FilledSquare;
-      return new Poly.PolyRender(miterRings, {
-        enclosed: true,
-        fillColor: isFilled ? this.color : void 0,
-        fillStyle: isFilled ? Poly.FillStyle.Color : Poly.FillStyle.None,
-        lineCap: 'square',
-        lineJoin: 'miter',
-        strokeColor: this.color,
-        strokeWidth: this.strokeWidth
-      });
+    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;
+}(Point.PointSymbol);
 
-const getLineMiterRender = options => {
-  switch (options.kind) {
-    case exports.LineMiterKind.Arrow:
-    case exports.LineMiterKind.FilledArrow:
-      return new ArrowLineMiterRender(options);
+let ShadowedPolySymbol = /*#__PURE__*/function (_PolylineSymbol) {
+  _inherits(ShadowedPolySymbol, _PolylineSymbol);
 
-    case exports.LineMiterKind.Square:
-    case exports.LineMiterKind.FilledSquare:
-      return new SquareLineMiterRender(options);
+  var _super = /*#__PURE__*/_createSuper(ShadowedPolySymbol);
 
-    case exports.LineMiterKind.Circle:
-    case exports.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();
+  _createClass(ShadowedPolySymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof Poly$1.Poly)) return [];
+      const coordinates = PolylineSymbol.PolylineSymbol.getRenderedCoordinates(feature, resolution, crs);
+      const polyRender = this.getPolyRender(coordinates, feature);
+      const shadowRender = this.getShadow(coordinates, feature);
+      const vertexRenders = this.getVertexRenders(coordinates);
+      let renders = [polyRender];
 
-  for (let i = 0; i < reversedRing.length; i++) {
-    const coordinates = reversedRing[i];
+      if (shadowRender) {
+        renders = [shadowRender, polyRender];
+      }
 
-    if (isLastRing && i === 0) {
-      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
-    }
-
-    const nextCoordinates = reversedRing[i - 1];
+      if (vertexRenders) {
+        renders = renders.concat(vertexRenders);
+      }
 
-    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
-      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
+      return renders;
     }
-  }
-
-  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: "getShadow",
+    value: function getShadow(coordinates, _feature) {
+      return new Poly.PolyRender(coordinates, {
+        fillStyle: Poly.FillStyle.None,
+        enclosed: this.enclose,
+        strokeColor: this.shadowColor,
+        strokeWidth: this.shadowSize,
+        lineDash: this.lineDash
+      });
     }
-
-    const prevCoordinates = newRing[i - 1];
-
-    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
-      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
+  }, {
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, _feature) {
+      return new Poly.PolyRender(coordinates, {
+        fillStyle: this.enclose ? Poly.FillStyle.Color : Poly.FillStyle.None,
+        enclosed: this.enclose,
+        fillColor: this.fillColor,
+        strokeColor: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        lineDash: this.lineDash
+      });
     }
-  }
+  }, {
+    key: "getVertexRenders",
+    value: function getVertexRenders(coordinates) {
+      if (!this.showVertex) return;
+      const vertexCoordinates = coordinates.reduce((acc, curr) => {
+        return acc.concat(curr);
+      }, []);
+      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
+        size: 6,
+        strokeWidth: 2,
+        shadowColor: this.shadowColor,
+        strokeColor: this.strokeColor,
+        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
+        fillColor: '#ffffff'
+      })).reduce((acc, curr) => acc.concat(curr), []);
+    }
+  }]);
 
-  return newRing;
+  return ShadowedPolySymbol;
+}(PolylineSymbol.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.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__default.createElement(Component, {
-          content: content
-        }), node);
-      } else {
-        node.innerText = content;
+        if (this.selectedStrokeWidth !== void 0) {
+          polyRender.strokeWidth = this.selectedStrokeWidth;
+        }
       }
+
+      return polyRender;
     }
   }]);
 
-  return LabelSymbol;
-}(_Symbol.DynamicPointSymbol);
+  return SelectedPolySymbol;
+}(ShadowedPolySymbol);
 
-const defaultOffset = [8, -16];
-const createLabelSymbol = props => {
-  const {
-    offset = defaultOffset,
-    renderLabel = _ref => {
-      let {
-        content
-      } = _ref;
-      return React__default.createElement("div", null, content);
-    },
-    onClose = undefined
-  } = props || {};
-  return new LabelSymbol({
-    offset,
-    component: _ref2 => {
-      let {
-        content
-      } = _ref2;
-      return renderLabel({
-        content,
-        onClose
-      });
-    }
-  });
-};
+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 = Crs.geo
   } = _ref;
-  const shadowDiameter = size + strokeWidth + shadowSize;
-  return new Poly.PolyRender(polygonCircleFromPoint(position, shadowDiameter), {
-    fillColor: 'transparent',
-    strokeColor: shadowColor,
-    strokeWidth: shadowSize,
-    enclosed: true
-  });
-}
-function getEditorPointRenderer(position, _ref2) {
-  let {
-    strokeColor,
-    strokeWidth,
-    shadowColor,
-    fillColor,
-    shadowSize,
-    size = 0
-  } = _ref2;
-  return [createShadowRender(position, {
-    strokeWidth,
-    strokeColor,
-    shadowSize,
-    shadowColor,
-    size
-  }), new Poly.PolyRender(polygonCircleFromPoint(position, size), {
-    fillColor,
-    strokeColor,
-    strokeWidth,
-    enclosed: true
-  })];
-}
+  const {
+    width
+  } = painter;
+  const zeroPoint = painter.getPointFromPxPosition(0, 0).projectTo(crs);
+  const maxWidthPoint = painter.getPointFromPxPosition(width, 0).projectTo(crs);
+  const widthDistance = geotools.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: Poly.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.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$1.Poly ? PolylineSymbol.PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+      this.setCirclePxRaius(crs);
+      this.container.innerHTML = '';
+      const svg = this.setSvg(coordinates);
+      svg && this.container.append(svg);
+      feature.__dynamicSymbolRender = new Render.DynamicRender({
+        node: this.container,
+        update: (bbox, resolution) => this.update({
+          bbox,
+          resolution,
+          feature,
+          crs
+        }),
+        redraw: () => {
+          this.redrawFeatureNode && this.redrawFeatureNode(feature);
+        }
+      });
+
+      this._setEventListeners(feature);
+
+      return [feature.__dynamicSymbolRender];
     }
   }, {
-    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 Poly.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$1.Poly ? PolylineSymbol.PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+        this.setCirclePxRaius(crs);
+        this.container.innerHTML = '';
+        const svg = this.setSvg(newCoordinates);
+        svg && this.container.append(svg);
+      }
+
+      const polygon = feature.projectTo(bbox.crs);
+      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
+      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
+      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
+      this.container.style.left = dx.toString() + "px";
+      this.container.style.top = dy.toString() + "px";
+      feature.__lastBbox = bbox;
+      feature.__lastResolution = resolution;
     }
   }, {
-    key: "getPointArc",
-    value: function getPointArc(position, _ref2) {
-      let {
-        strokeWidth,
-        fillColor,
-        strokeColor,
-        size = 6
-      } = _ref2;
-      return new Poly.PolyRender(polygonCircleFromPoint(position, size), {
-        fillColor,
-        strokeColor,
-        strokeWidth,
-        enclosed: true
-      });
-    }
-  }, {
-    key: "getArcs",
-    value: function getArcs(position, params) {
-      const shadowRender = ShadowedPointSymbol.getShadowArc(position, params);
-      const pointRender = ShadowedPointSymbol.getPointArc(position, params);
-      return shadowRender ? [shadowRender, pointRender] : [pointRender];
-    }
-  }]);
-
-  return ShadowedPointSymbol;
-}(Point.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$1.Poly)) return [];
-      const coordinates = PolylineSymbol.PolylineSymbol.getRenderedCoordinates(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.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 Poly.PolyRender(coordinates, {
-        fillStyle: Poly.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 Poly.PolyRender(coordinates, {
-        fillStyle: this.enclose ? Poly.FillStyle.Color : Poly.FillStyle.None,
-        enclosed: this.enclose,
-        fillColor: this.fillColor,
-        strokeColor: this.strokeColor,
-        strokeWidth: this.strokeWidth,
-        lineDash: this.lineDash
+    key: "_setEventListeners",
+    value: function _setEventListeners(dynamicFeature) {
+      var _dynamicFeature$__dyn;
+
+      if (dynamicFeature.eventFlags === EventHandler.MouseEventFlags.None) return;
+      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
+      Object.keys(EventHandler.mouseEvents).forEach(eventName => {
+        if (dynamicFeature.eventFlags & EventHandler.mouseEvents[eventName].flag) {
+          domEvent.listenDomEvent(svgNode, EventHandler.mouseEvents[eventName].type, event => {
+            dynamicFeature.fire(EventHandler.mouseEvents[eventName].type, {
+              node: svgNode,
+              browserEvent: event
+            });
+          });
+        }
       });
     }
-  }, {
-    key: "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.PolylineSymbol);
-const polySymbolParams = {
-  strokeWidth: 2,
-  strokeColor: '#e33600',
-  shadowSize: 8,
-  shadowColor: 'rgba(227, 54, 0, 0.3)'
-};
-const measureSymbolParams = {
-  strokeColor: '#ff6933',
-  shadowSize: 0,
-  vertexShadowSize: 0
-};
-const measureLengthSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
-  enclose: false,
-  showVertex: true
-}));
-const measureAreaSymbol = /*#__PURE__*/new ShadowedPolySymbol( /*#__PURE__*/_extends({}, polySymbolParams, measureSymbolParams, {
-  fillColor: 'rgba(255, 105, 51, 0.25)',
-  enclose: true,
-  showVertex: true
-}));
-const snapSymbolParams = {
-  size: 10,
-  strokeWidth: 2,
-  strokeColor: '#e33600',
-  fillColor: '#ffffff',
-  shadowColor: 'rgba(227, 54, 0, 0.3)',
-  shadowSize: 3
-};
-const measurePolygonSnapSymbol = /*#__PURE__*/new ShadowedPointSymbol( /*#__PURE__*/_extends({}, snapSymbolParams, {
-  strokeColor: '#ff6933',
-  shadowSize: 0
-}));
+  return SVGPoly;
+}(_Symbol.Symbol);
 
-let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
-  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
+function isSGisPointSymbol(symbol) {
+  return symbol instanceof Point.PointSymbol || symbol instanceof StaticImageSymbol.StaticImageSymbol || symbol instanceof Square.SquareSymbol || symbol instanceof MaskedImage.MaskedImage;
+}
+function isSGisImageSymbol(symbol) {
+  return symbol instanceof StaticImageSymbol.StaticImageSymbol || symbol instanceof MaskedImage.MaskedImage;
+}
+function isSGisPolygonSymbol(symbol) {
+  return symbol instanceof Simple.PolygonSymbol || symbol instanceof BrushFill.BrushFill || symbol instanceof ImageFill.ImageFill;
+}
+function isSGisPolylineSymbol(symbol) {
+  return symbol instanceof PolylineSymbol.PolylineSymbol;
+}
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
+/**
+ * Моки фич для отображения превью символа
+ * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
+ */
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPointSymbol(props) {
-    _classCallCheck(this, SelectedPointSymbol);
+const viewBoxSize = 100;
+const pointFeature = /*#__PURE__*/new PointFeature.PointFeature([50, -50], {
+  crs: Crs.plain
+});
+const lineFeature = /*#__PURE__*/new Polyline.Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
+  crs: Crs.plain
+});
+const polygonFeature = /*#__PURE__*/new Polygon.Polygon([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
+  crs: Crs.plain
+});
+const lineLegendFeature = /*#__PURE__*/new Polyline.Polyline([[0, -50], [100, -50]], {
+  crs: Crs.plain
+});
+const polygonLegendFeature = /*#__PURE__*/new Polygon.Polygon([[0, 0], [100, 0], [100, -100], [0, -100]], {
+  crs: Crs.plain
+});
+const polygonMapLegendFeature = /*#__PURE__*/new Polygon.Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
+  crs: Crs.plain
+});
+const MAP_LEGEND_FEATURES = {
+  polygon: polygonMapLegendFeature
+};
+const LEGEND_FEATURES = {
+  polyline: lineLegendFeature,
+  polygon: polygonLegendFeature
+};
+const MOCK_FEATURES = {
+  point: pointFeature,
+  polyline: lineFeature,
+  polygon: polygonFeature
+};
 
-    return _super.call(this, props);
+function getSymbolRenders(symbol, size, features) {
+  if (size === void 0) {
+    size = viewBoxSize;
   }
 
-  _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 (feature.isSelected) {
-        pointRender.strokeColor = this.selectedStrokeColor;
-        pointRender.fillColor = this.selectedFillColor;
-      }
+  if (features === void 0) {
+    features = {};
+  }
 
-      return pointRender;
-    }
-  }]);
+  const resolution = viewBoxSize / size;
 
-  return SelectedPointSymbol;
-}(ShadowedPointSymbol);
+  const featuresToRender = _extends({}, MOCK_FEATURES, features);
 
-let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
-  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
+  if (isSGisPolygonSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, Crs.plain);
+  }
 
-  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
+  if (isSGisPolylineSymbol(symbol)) {
+    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, Crs.plain);
+  }
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPolySymbol(props) {
-    _classCallCheck(this, SelectedPolySymbol);
+  return symbol.renderFunctionAsync(featuresToRender.point, resolution, Crs.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 'circlePointSymbol':
+      return deserializePointSymbol(symbol);
 
-      return polyRender;
-    }
-  }]);
+    case 'squarePointSymbol':
+      return deserializeSquareSymbol(symbol);
 
-  return SelectedPolySymbol;
-}(ShadowedPolySymbol);
+    case 'maskedImagePointSymbol':
+      return deserializeMaskedImageSymbol(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 'imagePointSymbol':
+      return deserializeImagePointSymbol(symbol);
 
-const defaultPathStyles = {
-  strokeWidth: 2,
-  strokeColor: 'rgb(0, 163, 245)',
-  fillStyle: Poly.FillStyle.None
-};
-let SVGPoly = /*#__PURE__*/function (_Symbol) {
-  _inherits(SVGPoly, _Symbol);
+    case 'polygonSymbol':
+      return deserializePolygonSymbol(symbol);
 
-  var _super = /*#__PURE__*/_createSuper(SVGPoly);
+    case 'simplePolylineSymbol':
+    case 'polylineSymbol':
+      return deserializePolylineSymbol(symbol);
 
-  function SVGPoly(_temp) {
-    var _this;
+    default:
+      return null;
+  }
+}
 
-    let {
-      redrawFeatureNode,
-      pathStyles,
-      circle,
-      className,
-      appendToSvg
-    } = _temp === void 0 ? {} : _temp;
+function deserializePointSymbol(symbol) {
+  // @ts-ignore
+  return new Point.PointSymbol(deserializePointSymbolParams(symbol));
+}
 
-    _classCallCheck(this, SVGPoly);
+function deserializeSquareSymbol(symbol) {
+  return new Square.SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle)
+  }));
+}
 
-    _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;
+function deserializeMaskedImageSymbol(symbol) {
+  return new MaskedImage.MaskedImage(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    imageSource: deserializeBase64(symbol.image),
+    // @ts-ignore
+    maskSource: deserializeBase64(symbol.imageMask),
+    // @ts-ignore
+    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
+  }));
+}
+
+function deserializeImagePointSymbol(symbol) {
+  return new StaticImageSymbol.StaticImageSymbol(_extends({}, symbol, {
+    // @ts-ignore
+    angle: getParameterValue(symbol.angle),
+    // @ts-ignore
+    width: getParameterValue(symbol.width),
+    // @ts-ignore
+    height: getParameterValue(symbol.height),
+    // @ts-ignore
+    anchorPoint: deserializeAnchor(symbol.offset),
+    // @ts-ignore
+    source: deserializeBase64(symbol.image)
+  }));
+}
+
+function deserializePolygonSymbol(symbol) {
+  if (isPolygonHasPatternBrush(symbol)) {
+    return new SGisImageFill(symbol);
   }
 
-  _createClass(SVGPoly, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      const coordinates = feature instanceof Poly$1.Poly ? PolylineSymbol.PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-      this.setCirclePxRaius(crs);
-      this.container.innerHTML = '';
-      const svg = this.setSvg(coordinates);
-      svg && this.container.append(svg);
-      feature.__dynamicSymbolRender = new Render.DynamicRender({
-        node: this.container,
-        update: (bbox, resolution) => this.update({
-          bbox,
-          resolution,
-          feature,
-          crs
-        }),
-        redraw: () => {
-          this.redrawFeatureNode && this.redrawFeatureNode(feature);
-        }
-      });
+  if (isPolygonHasHatchBrush(symbol)) {
+    return new SGisBrushFill(symbol);
+  }
 
-      this._setEventListeners(feature);
+  return new SGisPolygonSymbol(symbol);
+}
 
-      return [feature.__dynamicSymbolRender];
-    }
-  }, {
-    key: "setCirclePxRaius",
-    value: function setCirclePxRaius(crs) {
-      if (this.circle && this.pathStyles) {
-        var _this$circle;
+function deserializePolylineSymbol(symbol) {
+  return new SGisPolylineSymbol(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;
+function deserializePointSymbolParams(_ref) {
+  let {
+    size,
+    offset,
+    strokeColor,
+    strokeWidth,
+    fillColor
+  } = _ref;
+  return {
+    size: getParameterValue(size),
+    offset: deserializeAnchor(offset),
+    strokeWidth: getParameterValue(strokeWidth),
+    strokeColor: deserializeColor(getParameterValue(strokeColor)),
+    fillColor: deserializeColor(getParameterValue(fillColor))
+  };
+}
 
-      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 deserializeBase64(base) {
+  return "data:image/png;base64," + base;
+}
 
-      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
-        const newCoordinates = feature instanceof Poly$1.Poly ? PolylineSymbol.PolylineSymbol.getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-        this.setCirclePxRaius(crs);
-        this.container.innerHTML = '';
-        const svg = this.setSvg(newCoordinates);
-        svg && this.container.append(svg);
-      }
+function deserializeAnchor(offset) {
+  // @ts-ignore
+  return offset.map(getParameterValue);
+}
 
-      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.SvgRender(_extends({
-        coordinates
-      }, defaultPathStyles, {
-        appendToSvg: this.appendToSvg
-      }, this.pathStyles));
+function deserializeColor(color$1) {
+  return color$1 ? new color.Color(color$1).toString() : null;
+}
 
-      if (this.circle) {
-        svgRender._setArcNode();
-      } else {
-        svgRender._setPolyNode();
-      }
+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);
+  }
 
-      let svgElement;
-      svgRender.getNode((_, svg) => {
-        svgElement = svg;
-        this.className && svgElement.classList.add(this.className);
-        const path = svgElement && svgElement.querySelector(this.circle ? 'circle' : 'path');
+  return symbol;
+};
+function centerAlignSymbol(symbol) {
+  if (isSGisImageSymbol(symbol)) {
+    symbol.anchorPoint = [symbol.width / 2, symbol.height / 2];
+  } else if (isSGisPointSymbol(symbol)) {
+    symbol.offset = [0, 0];
+  }
 
-        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());
+  return symbol;
+}
+const adjustSymbol = (symbol, _ref) => {
+  let {
+    size
+  } = _ref;
+  return centerAlignSymbol(clampSymbol(symbol, 0, size));
+};
 
-          if (this.circle) {
-            path.setAttribute('stroke-dasharray', lineDash && lineDash.length > 0 ? lineDash.join(',') : '');
-          }
-        }
-      });
-      return svgElement;
-    }
-  }, {
-    key: "_setEventListeners",
-    value: function _setEventListeners(dynamicFeature) {
-      var _dynamicFeature$__dyn;
+let EvergisFeature = /*#__PURE__*/function () {
+  function EvergisFeature(feature) {
+    _classCallCheck(this, EvergisFeature);
 
-      if (dynamicFeature.eventFlags === EventHandler.MouseEventFlags.None) return;
-      const svgNode = dynamicFeature == null ? void 0 : (_dynamicFeature$__dyn = dynamicFeature.__dynamicSymbolRender) == null ? void 0 : _dynamicFeature$__dyn.node.querySelector(this.circle ? 'circle' : 'path');
-      Object.keys(EventHandler.mouseEvents).forEach(eventName => {
-        if (dynamicFeature.eventFlags & EventHandler.mouseEvents[eventName].flag) {
-          domEvent.listenDomEvent(svgNode, EventHandler.mouseEvents[eventName].type, event => {
-            dynamicFeature.fire(EventHandler.mouseEvents[eventName].type, {
-              node: svgNode,
-              browserEvent: event
-            });
-          });
-        }
-      });
-    }
-  }]);
+    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);
+  }
 
-  return SVGPoly;
-}(_Symbol.Symbol);
+  _createClass(EvergisFeature, [{
+    key: "sGisFeature",
+    value: function sGisFeature() {
+      if (!this.geometry || !this.symbol) {
+        return null;
+      } // @ts-ignore
 
-function isSGisPointSymbol(symbol) {
-  return symbol instanceof Point.PointSymbol || symbol instanceof StaticImageSymbol.StaticImageSymbol || symbol instanceof Square.SquareSymbol || symbol instanceof MaskedImage.MaskedImage;
-}
-function isSGisImageSymbol(symbol) {
-  return symbol instanceof StaticImageSymbol.StaticImageSymbol || symbol instanceof MaskedImage.MaskedImage;
-}
-function isSGisPolygonSymbol(symbol) {
-  return symbol instanceof Simple.PolygonSymbol || symbol instanceof BrushFill.BrushFill || symbol instanceof ImageFill.ImageFill;
-}
-function isSGisPolylineSymbol(symbol) {
-  return symbol instanceof PolylineSymbol.PolylineSymbol;
-}
 
-/**
- * Моки фич для отображения превью символа
- * http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217
- */
+      const {
+        type,
+        coordinates,
+        sr
+      } = this.geometry;
+      const crs = CRS_MAP[sr];
 
-const viewBoxSize = 100;
-const pointFeature = /*#__PURE__*/new PointFeature.PointFeature([50, -50], {
-  crs: Crs.plain
-});
-const lineFeature = /*#__PURE__*/new Polyline.Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
-  crs: Crs.plain
-});
-const polygonFeature = /*#__PURE__*/new Polygon.Polygon([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
-  crs: Crs.plain
-});
-const lineLegendFeature = /*#__PURE__*/new Polyline.Polyline([[0, -50], [100, -50]], {
-  crs: Crs.plain
-});
-const polygonLegendFeature = /*#__PURE__*/new Polygon.Polygon([[0, 0], [100, 0], [100, -100], [0, -100]], {
-  crs: Crs.plain
-});
-const polygonMapLegendFeature = /*#__PURE__*/new Polygon.Polygon([[50, 0], [100, -25], [100, -75], [50, -100], [0, -75], [0, -25]], {
-  crs: Crs.plain
-});
-const MAP_LEGEND_FEATURES = {
-  polygon: polygonMapLegendFeature
-};
-const LEGEND_FEATURES = {
-  polyline: lineLegendFeature,
-  polygon: polygonLegendFeature
-};
-const MOCK_FEATURES = {
-  point: pointFeature,
-  polyline: lineFeature,
-  polygon: polygonFeature
-};
+      if (!crs) {
+        return null;
+      }
 
-function getSymbolRenders(symbol, size, features) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+      switch (type) {
+        case api.GeometryType.Point:
+          return new PointFeature.PointFeature(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-  if (features === void 0) {
-    features = {};
-  }
+        case api.GeometryType.Multipoint:
+          return new MultiPoint.MultiPoint(coordinates, {
+            symbol: selectedPoint,
+            crs
+          });
 
-  const resolution = viewBoxSize / size;
+        case api.GeometryType.Polyline:
+          return new Polyline.Polyline(coordinates, {
+            symbol: selectedPolyline,
+            crs
+          });
 
-  const featuresToRender = _extends({}, MOCK_FEATURES, features);
+        case api.GeometryType.Polygon:
+          return new Polygon.Polygon(coordinates, {
+            symbol: selectedPolygon,
+            crs
+          });
 
-  if (isSGisPolygonSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polygon, resolution, Crs.plain);
-  }
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "extent",
+    value: function extent() {
+      const feature = this.sGisFeature();
+      return feature && feature.bbox;
+    }
+  }]);
 
-  if (isSGisPolylineSymbol(symbol)) {
-    return symbol.renderFunctionAsync(featuresToRender.polyline, resolution, Crs.plain);
-  }
+  return EvergisFeature;
+}();
 
-  return symbol.renderFunctionAsync(featuresToRender.point, resolution, Crs.plain);
-}
-const getMapLegendSymbolRenders = function getMapLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+function evaluateCondition(condition$1, attributes) {
+  try {
+    const evaluator = new condition.ConditionEvaluator(attributes);
+    const result = evaluator.evaluate(condition$1);
 
-  return getSymbolRenders(symbol, size, MAP_LEGEND_FEATURES);
-};
-const getLegendSymbolRenders = function getLegendSymbolRenders(symbol, size) {
-  if (size === void 0) {
-    size = viewBoxSize;
-  }
+    if (result instanceof Error) {
+      return null;
+    }
 
-  return getSymbolRenders(symbol, size, LEGEND_FEATURES);
-};
+    return result;
+  } catch (_unused) {
+    return null;
+  }
+}
 
-function renderSymbolToCanvas(renders, canvas) {
-  renders.forEach(render => {
-    canvas.draw(render);
+function getAttributeValue(attributes, attributeName) {
+  const attributeMeta = attributes.find((_ref) => {
+    let {
+      name
+    } = _ref;
+    return name === attributeName;
   });
-}
-
-function deserializeSymbol(symbol) {
-  switch (symbol.type) {
-    case 'circlePointSymbol':
-      return deserializePointSymbol(symbol);
-
-    case 'squarePointSymbol':
-      return deserializeSquareSymbol(symbol);
-
-    case 'maskedImagePointSymbol':
-      return deserializeMaskedImageSymbol(symbol);
-
-    case 'imagePointSymbol':
-      return deserializeImagePointSymbol(symbol);
-
-    case 'polygonSymbol':
-      return deserializePolygonSymbol(symbol);
-
-    case 'simplePolylineSymbol':
-    case 'polylineSymbol':
-      return deserializePolylineSymbol(symbol);
-
-    default:
-      return null;
-  }
-}
-
-function deserializePointSymbol(symbol) {
-  // @ts-ignore
-  return new Point.PointSymbol(deserializePointSymbolParams(symbol));
-}
-
-function deserializeSquareSymbol(symbol) {
-  return new Square.SquareSymbol(_extends({}, deserializePointSymbolParams(symbol), {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle)
-  }));
-}
-
-function deserializeMaskedImageSymbol(symbol) {
-  return new MaskedImage.MaskedImage(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    imageSource: deserializeBase64(symbol.image),
-    // @ts-ignore
-    maskSource: deserializeBase64(symbol.imageMask),
-    // @ts-ignore
-    maskColor: deserializeColor(getParameterValue(symbol.maskedColor))
-  }));
-}
-
-function deserializeImagePointSymbol(symbol) {
-  return new StaticImageSymbol.StaticImageSymbol(_extends({}, symbol, {
-    // @ts-ignore
-    angle: getParameterValue(symbol.angle),
-    // @ts-ignore
-    width: getParameterValue(symbol.width),
-    // @ts-ignore
-    height: getParameterValue(symbol.height),
-    // @ts-ignore
-    anchorPoint: deserializeAnchor(symbol.offset),
-    // @ts-ignore
-    source: deserializeBase64(symbol.image)
-  }));
-}
-
-function deserializePolygonSymbol(symbol) {
-  if (isPolygonHasPatternBrush(symbol)) {
-    return new SGisImageFill(symbol);
-  }
-
-  if (isPolygonHasHatchBrush(symbol)) {
-    return new SGisBrushFill(symbol);
-  }
-
-  return new SGisPolygonSymbol(symbol);
-}
-
-function deserializePolylineSymbol(symbol) {
-  return new SGisPolylineSymbol(symbol);
-}
-
-function deserializePointSymbolParams(_ref) {
-  let {
-    size,
-    offset,
-    strokeColor,
-    strokeWidth,
-    fillColor
-  } = _ref;
-  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$1) {
-  return color$1 ? new color.Color(color$1).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 api.GeometryType.Point:
-          return new PointFeature.PointFeature(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case api.GeometryType.Multipoint:
-          return new MultiPoint.MultiPoint(coordinates, {
-            symbol: selectedPoint,
-            crs
-          });
-
-        case api.GeometryType.Polyline:
-          return new Polyline.Polyline(coordinates, {
-            symbol: selectedPolyline,
-            crs
-          });
-
-        case api.GeometryType.Polygon:
-          return new Polygon.Polygon(coordinates, {
-            symbol: selectedPolygon,
-            crs
-          });
-
-        default:
-          return null;
-      }
-    }
-  }, {
-    key: "extent",
-    value: function extent() {
-      const feature = this.sGisFeature();
-      return feature && feature.bbox;
-    }
-  }]);
-
-  return EvergisFeature;
-}();
-
-function evaluateCondition(condition$1, attributes) {
-  try {
-    const evaluator = new condition.ConditionEvaluator(attributes);
-    const result = evaluator.evaluate(condition$1);
-
-    if (result instanceof Error) {
-      return null;
-    }
-
-    return result;
-  } catch (_unused) {
-    return null;
-  }
-}
-
-function getAttributeValue(attributes, attributeName) {
-  const attributeMeta = attributes.find(_ref => {
-    let {
-      name
-    } = _ref;
-    return name === attributeName;
-  });
-  return attributeMeta ? attributeMeta.value : null;
+  return attributeMeta ? attributeMeta.value : null;
 }
 
 const getAttributeNameFromCondition = condition => new ClassificationCondition(condition).attributeName;
@@ -3107,7 +2759,7 @@ const getAttributeNameFromClassified = values => values.length > 0 ? getAttribut
 
 function findFeatureValue(parameterValues, _ref2) {
   let [name, value] = _ref2;
-  return value !== null ? parameterValues.find(_ref3 => {
+  return value !== null ? parameterValues.find((_ref3) => {
     let {
       condition
     } = _ref3;
@@ -3147,7 +2799,7 @@ function evaluateFeatureSymbol(attributes) {
 }
 
 function findChildFeatureStyle(childStyles, attributes) {
-  return (childStyles || []).find(_ref5 => {
+  return (childStyles || []).find((_ref5) => {
     let {
       condition
     } = _ref5;
@@ -3208,7 +2860,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;
@@ -3231,7 +2883,7 @@ const evaluateFeature = layers => feature => {
 };
 
 const OTHERS_TITLE = 'Другое';
-const createLegendItem = _ref => {
+const createLegendItem = (_ref) => {
   let {
     attributes,
     renderTitle,
@@ -3273,7 +2925,7 @@ function createStyleLegend(style, config) {
     classificationManager,
     symbol
   } = style;
-  const items = classificationManager.filter(_ref => {
+  const items = classificationManager.filter((_ref) => {
     let {
       parameter
     } = _ref;
@@ -3390,7 +3042,7 @@ const useMapLegend = (layer, config) => {
 };
 
 const LEGEND_SYMBOL_MAX_SIZE = 32;
-const useLegendValueSymbol = _ref => {
+const useLegendValueSymbol = (_ref) => {
   let {
     parameter,
     parameterValue
@@ -3588,7 +3240,8 @@ function useEvergisTileLayer(_ref) {
     subDomains,
     zIndex,
     isDisplayed,
-    crs
+    crs,
+    opacity
   } = _ref;
   const api$1 = useEvergisContext();
   const {
@@ -3597,9 +3250,10 @@ function useEvergisTileLayer(_ref) {
   const layer = React.useMemo(() => new api.EvergisTileLayer({
     name,
     subDomains,
-    crs
+    crs,
+    opacity
   }, api$1), // eslint-disable-next-line react-hooks/exhaustive-deps
-  [name, subDomains, crs]);
+  [name, subDomains, crs, opacity]);
   React.useEffect(() => () => {
     map.indexOf(layer) !== -1 && map.removeLayer(layer);
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3783,7 +3437,7 @@ function useMapWrapper() {
   return wrapperRef;
 }
 
-const byScale = scale => _ref => {
+const byScale = scale => (_ref) => {
   let {
     zIndex
   } = _ref;
@@ -3982,7 +3636,7 @@ const useTooltip = function useTooltip(zIndex) {
 
     return reset;
   }, [reset, map, layer, zIndex]);
-  const onSetLabelFeature = React.useCallback(_ref => {
+  const onSetLabelFeature = React.useCallback((_ref) => {
     let {
       point,
       position,
@@ -4146,7 +3800,7 @@ function useClusterLayer(_ref) {
 }
 
 const INIT_FEATURES = [];
-const useEvergisSelect = _ref => {
+const useEvergisSelect = (_ref) => {
   let {
     onPick,
     onFeatures
@@ -4179,7 +3833,7 @@ function none() {
   return;
 }
 
-const useDraggableMarker = _ref => {
+const useDraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -4295,7 +3949,7 @@ const useDebouncedCallback = interval => {
   }, interval), [interval]);
 };
 
-const Symbol = _ref => {
+const Symbol = (_ref) => {
   let {
     symbol,
     size,
@@ -4316,7 +3970,7 @@ const Symbol = _ref => {
 };
 
 var _templateObject;
-const CompoundIcon = /*#__PURE__*/styled__default.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), _ref => {
+const CompoundIcon = /*#__PURE__*/styled__default.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  height: 32px;\n  width: 32px;\n"])), (_ref) => {
   let {
     geometryType,
     icons
@@ -4325,7 +3979,7 @@ const CompoundIcon = /*#__PURE__*/styled__default.div(_templateObject || (_templ
 });
 
 const MAX_SIZE = 32;
-const StyleSymbol = _ref => {
+const StyleSymbol = (_ref) => {
   let {
     symbol,
     size = MAX_SIZE,
@@ -4370,7 +4024,7 @@ const CloseIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject20 || (_t
 const PrevIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
 const NextIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
 
-const MailValue = _ref => {
+const MailValue = (_ref) => {
   let {
     mail
   } = _ref;
@@ -4381,7 +4035,7 @@ const MailValue = _ref => {
   }, mail);
 };
 
-const PhoneValue = _ref => {
+const PhoneValue = (_ref) => {
   let {
     phone
   } = _ref;
@@ -4392,7 +4046,7 @@ const PhoneValue = _ref => {
   }, phone);
 };
 
-const UrlValue = _ref => {
+const UrlValue = (_ref) => {
   let {
     url
   } = _ref;
@@ -4403,7 +4057,7 @@ const UrlValue = _ref => {
   }, url);
 };
 
-const AttributeValue = _ref => {
+const AttributeValue = (_ref) => {
   let {
     attribute
   } = _ref;
@@ -4417,29 +4071,29 @@ const AttributeValue = _ref => {
     if (attributeValue.type === 2
     /* Url */
     ) {
-      return React__default.createElement(UrlValue, {
-        key: key,
-        url: punycodeDecode(value)
-      });
-    }
+        return React__default.createElement(UrlValue, {
+          key: key,
+          url: punycodeDecode(value)
+        });
+      }
 
     if (attributeValue.type === 3
     /* Mail */
     ) {
-      return React__default.createElement(MailValue, {
-        key: key,
-        mail: value
-      });
-    }
+        return React__default.createElement(MailValue, {
+          key: key,
+          mail: value
+        });
+      }
 
     if (attributeValue.type === 1
     /* Phone */
     ) {
-      return React__default.createElement(PhoneValue, {
-        key: key,
-        phone: value
-      });
-    }
+        return React__default.createElement(PhoneValue, {
+          key: key,
+          phone: value
+        });
+      }
 
     return React__default.createElement(SimpleAttribute, {
       key: value
@@ -4455,7 +4109,7 @@ function punycodeDecode(domains) {
   }
 }
 
-const EvergisCardAttribute = _ref => {
+const EvergisCardAttribute = (_ref) => {
   let {
     attribute,
     className
@@ -4467,7 +4121,7 @@ const EvergisCardAttribute = _ref => {
   }));
 };
 
-const StyledCard = _ref => {
+const StyledCard = (_ref) => {
   let {
     features = [],
     className,
@@ -4518,7 +4172,7 @@ const StyledCard = _ref => {
 };
 
 const _excluded$1 = ["renderCard", "className", "children"];
-const EvergisCard = _ref => {
+const EvergisCard = (_ref) => {
   let {
     renderCard,
     className,
@@ -4570,7 +4224,7 @@ const toSgis = feature => feature.sGisFeature(); // TODO inner hooks???
 
 const useSGisFeatures = (features, currentIndex) => React.useMemo(() => features.map(toSgis).filter(truthly).map(setSelected(currentIndex)), [features, currentIndex]);
 
-const EvergisSelectLayer = _ref => {
+const EvergisSelectLayer = (_ref) => {
   let {
     features,
     zIndex,
@@ -4615,7 +4269,7 @@ const TileLayer = props => {
 };
 
 const defaultZIndex = 200;
-const EvergisSelect = _ref => {
+const EvergisSelect = (_ref) => {
   let {
     onPick,
     className,
@@ -4650,7 +4304,7 @@ const LegendSymbolTitle = /*#__PURE__*/styled__default.p(_templateObject3$1 || (
 const LegendValueContainer = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.625rem;\n  padding: 0.125rem 0;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
 const LegendSectionHeader = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])));
 
-const LegendSection = _ref => {
+const LegendSection = (_ref) => {
   let {
     item,
     renderLegendTitle,
@@ -4667,7 +4321,7 @@ SearchPrefix.defaultProps = {
   kind: "search"
 };
 
-const SearchInput = _ref => {
+const SearchInput = (_ref) => {
   let {
     onChange
   } = _ref;
@@ -4676,7 +4330,7 @@ const SearchInput = _ref => {
   }));
 };
 
-const LegendSymbol = _ref => {
+const LegendSymbol = (_ref) => {
   let {
     parameter,
     parameterValue,
@@ -4694,7 +4348,7 @@ const LegendSymbol = _ref => {
   return React__default.createElement(React__default.Fragment, null, children(symbol));
 };
 
-const LegendValue = _ref => {
+const LegendValue = (_ref) => {
   let {
     value,
     parameter,
@@ -4716,7 +4370,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
@@ -4741,7 +4395,7 @@ const getSymbolSize = _ref => {
   }
 };
 
-const Legend = _ref => {
+const Legend = (_ref) => {
   let {
     layer,
     children,
@@ -4784,7 +4438,7 @@ const Legend = _ref => {
   })))));
 };
 
-const Map = _ref => {
+const Map = (_ref) => {
   let {
     className,
     position,
@@ -4806,163 +4460,488 @@ const Map = _ref => {
     })) {
       onBboxChange(state);
     }
-  }, [map, onBboxChange, position, resolution]);
-  useUpdateMapView({
-    position,
-    resolution
-  });
-  useMaxMinScale(minScale, maxScale, position, resolution);
-  useMapBboxChange(handleBboxChange);
-  return React__default.createElement("div", {
-    className: className,
-    ref: wrapperRef,
-    style: style
-  }, children);
-};
-
-var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2;
-
-const topLeft = distance => styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
+  }, [map, onBboxChange, position, resolution]);
+  useUpdateMapView({
+    position,
+    resolution
+  });
+  useMaxMinScale(minScale, maxScale, position, resolution);
+  useMapBboxChange(handleBboxChange);
+  return React__default.createElement("div", {
+    className: className,
+    ref: wrapperRef,
+    style: style
+  }, children);
+};
+
+var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2;
+
+const topLeft = distance => styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
+
+const topRight = distance => styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
+
+const bottomLeft = distance => styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
+
+const bottomRight = distance => styled.css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
+
+const placementMixin = function placementMixin(placement, distance) {
+  if (placement === void 0) {
+    placement = 'bottom-left';
+  }
+
+  if (distance === void 0) {
+    distance = '1rem';
+  }
+
+  return styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
+};
+
+var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
+const mapControlBtnMixin = /*#__PURE__*/styled.css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
+const ZoomInBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+ZoomInBtn.defaultProps = {
+  kind: "plus"
+};
+const ZoomOutBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+ZoomOutBtn.defaultProps = {
+  kind: "minus"
+};
+const SearchBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+SearchBtn.defaultProps = {
+  kind: "search"
+}; // TODO not exists in fonts
+
+const FullscreenBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+FullscreenBtn.defaultProps = {
+  kind: "maximize"
+};
+const MeasureBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
+MeasureBtn.defaultProps = {
+  kind: "measure_length"
+};
+const MapControl = /*#__PURE__*/styled__default.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__default.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) => {
+  let {
+    placement
+  } = _ref2;
+  return placementMixin(placement);
+}, MapControl, (_ref3) => {
+  let {
+    vertical
+  } = _ref3;
+  return vertical ? '0.5rem' : '0';
+}, (_ref4) => {
+  let {
+    vertical
+  } = _ref4;
+  return vertical ? '0' : '0.5rem';
+}, (_ref5) => {
+  let {
+    vertical
+  } = _ref5;
+  return vertical ? 'column' : 'row';
+});
+
+const Measure = () => {
+  return React__default.createElement(MapControl, null, React__default.createElement(MeasureBtn, {
+    onClick: () => {}
+  }));
+};
+
+const Search = () => {
+  return React__default.createElement(MapControl, null, React__default.createElement(SearchBtn, {
+    onClick: () => {}
+  }));
+};
+
+const Fullscreen = () => {
+  return React__default.createElement(MapControl, null, React__default.createElement(FullscreenBtn, {
+    onClick: () => {}
+  }));
+};
+
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
+const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
+const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 16.5rem;\n  height: 3.875rem;\n  align-items: center;\n  padding: 0.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 0.835rem;\n  }\n"])));
+const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
+const MapLegendSection = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  font-size: 0.625rem;\n  opacity: 0.65;\n"])));
+
+const MAX_SIZE$2 = 100;
+const MapLegendSymbol = (_ref) => {
+  let {
+    value,
+    parameter
+  } = _ref;
+  return React__default.createElement(LegendSymbol, {
+    key: value.title,
+    parameter: parameter,
+    parameterValue: value.parameterValue
+  }, symbol => React__default.createElement(Symbol, {
+    render: getMapLegendSymbolRenders,
+    symbol: symbol,
+    size: MAX_SIZE$2
+  }));
+};
+
+const DEFAULT_FROM_TO = ['Выше', 'Ниже'];
+const MapLegend = (_ref) => {
+  let {
+    layer,
+    config,
+    fromToTitle = DEFAULT_FROM_TO,
+    className
+  } = _ref;
+  const legend = useMapLegend(layer, config);
+
+  if (!legend) {
+    return null;
+  }
+
+  const {
+    symbol,
+    item
+  } = legend;
+  return React__default.createElement(LegendProvider, {
+    symbol: symbol
+  }, React__default.createElement(MapLegendControl, {
+    className: className
+  }, React__default.createElement(MapLegendContainer, null, React__default.createElement(MapLegendHeader, null, item.title), React__default.createElement(MapLegendSection, null, React__default.createElement(MapLegendValueDescr, null, fromToTitle[0]), item.values.map(value => React__default.createElement(MapLegendSymbol, {
+    key: value.title,
+    value: value,
+    parameter: item.parameter
+  })), React__default.createElement(MapLegendValueDescr, null, fromToTitle[1])))));
+};
+
+const DEFAULT_FORMATTERS = {
+  polygon: formatPolygonMeasure,
+  length: formatLength
+};
+
+const COORD_FRACTION = 6;
+const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
+let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
+  _inherits(BaseMeasureToolCreator, _PolylineControl);
+
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
+
+  function BaseMeasureToolCreator(map, painter, params) {
+    var _this;
+
+    _classCallCheck(this, BaseMeasureToolCreator);
+
+    _this = _super.call(this, map, params);
+
+    _this.cancel = () => {
+      _this.fire('cancel');
+    };
+
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
+    _this.areaSymbol = params.areaSymbol;
+
+    _this.on('pointAdd', _this.handlePointAdd); // @ts-ignore
+
+
+    _this.on('change', _this.updateDistance);
+
+    return _this;
+  }
+
+  _createClass(BaseMeasureToolCreator, [{
+    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 Control.DrawingFinishEvent(feature, new MouseEvent('mouseup')));
+        return;
+      }
+
+      if (rings[0].length === 2) {
+        const projection = crs.projectionTo(Crs.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.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 = geotools.length(rings, crs);
+      let content = this.formatters.length(length);
+
+      if (isPolylineLikePolygon(rings, this.map.resolution)) {
+        this.polygonPreview();
+        const area = geotools.area(rings, crs);
+        content = this.formatters.polygon(area, length);
+      } 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 Label.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 Label.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 Label.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;
 
-const topRight = distance => styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
+      if (wrapper && typeof wrapper !== 'string') {
+        wrapper.style.cursor = cursor;
+      }
+    }
+  }]);
 
-const bottomLeft = distance => styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
+  return BaseMeasureToolCreator;
+}(PolylineControl.PolylineControl);
 
-const bottomRight = distance => styled.css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
+let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
+  _inherits(BaseMeasureToolEditor, _PolyEditor);
 
-const placementMixin = function placementMixin(placement, distance) {
-  if (placement === void 0) {
-    placement = 'bottom-left';
-  }
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolEditor);
 
-  if (distance === void 0) {
-    distance = '1rem';
-  }
+  function BaseMeasureToolEditor(map, painter, params) {
+    var _this;
 
-  return styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
-};
+    _classCallCheck(this, BaseMeasureToolEditor);
 
-var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
-const mapControlBtnMixin = /*#__PURE__*/styled.css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
-const ZoomInBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-ZoomInBtn.defaultProps = {
-  kind: "plus"
-};
-const ZoomOutBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-ZoomOutBtn.defaultProps = {
-  kind: "minus"
-};
-const SearchBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-SearchBtn.defaultProps = {
-  kind: "search"
-}; // TODO not exists in fonts
+    _this = _super.call(this, map, params);
 
-const FullscreenBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-FullscreenBtn.defaultProps = {
-  kind: "maximize"
-};
-const MeasureBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-MeasureBtn.defaultProps = {
-  kind: "measure_length"
-};
-const MapControl = /*#__PURE__*/styled__default.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__default.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 => {
-  let {
-    placement
-  } = _ref2;
-  return placementMixin(placement);
-}, MapControl, _ref3 => {
-  let {
-    vertical
-  } = _ref3;
-  return vertical ? '0.5rem' : '0';
-}, _ref4 => {
-  let {
-    vertical
-  } = _ref4;
-  return vertical ? '0' : '0.5rem';
-}, _ref5 => {
-  let {
-    vertical
-  } = _ref5;
-  return vertical ? 'column' : 'row';
-});
+    _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 = geotools.area(rings, crs);
+      const length = geotools.length(rings, crs, isEnclosed);
+      const content = isEnclosed ? _this.formatters.polygon(area, length) : _this.formatters.length(length);
+      return {
+        content,
+        position
+      };
+    };
 
-const Measure = () => {
-  return React__default.createElement(MapControl, null, React__default.createElement(MeasureBtn, {
-    onClick: () => {}
-  }));
-};
+    _this.removeFeature = () => {
+      _this.fire('remove');
+    };
 
-const Search = () => {
-  return React__default.createElement(MapControl, null, React__default.createElement(SearchBtn, {
-    onClick: () => {}
-  }));
-};
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
 
-const Fullscreen = () => {
-  return React__default.createElement(MapControl, null, React__default.createElement(FullscreenBtn, {
-    onClick: () => {}
-  }));
-};
+    _this.on('change', _this.updateMeasureResult);
 
-var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
-const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
-const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 16.5rem;\n  height: 3.875rem;\n  align-items: center;\n  padding: 0.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 0.835rem;\n  }\n"])));
-const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-const MapLegendSection = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  font-size: 0.625rem;\n  opacity: 0.65;\n"])));
+    _this.on('edit', _this.updateMeasureResult);
 
-const MAX_SIZE$2 = 100;
-const MapLegendSymbol = _ref => {
-  let {
-    value,
-    parameter
-  } = _ref;
-  return React__default.createElement(LegendSymbol, {
-    key: value.title,
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React__default.createElement(Symbol, {
-    render: getMapLegendSymbolRenders,
-    symbol: symbol,
-    size: MAX_SIZE$2
-  }));
-};
+    return _this;
+  }
 
-const DEFAULT_FROM_TO = ['Выше', 'Ниже'];
-const MapLegend = _ref => {
-  let {
-    layer,
-    config,
-    fromToTitle = DEFAULT_FROM_TO,
-    className
-  } = _ref;
-  const legend = useMapLegend(layer, config);
+  _createClass(BaseMeasureToolEditor, [{
+    key: "_activate",
+    value: function _activate() {
+      _get(_getPrototypeOf(BaseMeasureToolEditor.prototype), "_activate", this).call(this);
 
-  if (!legend) {
-    return null;
-  }
+      this.addMeasureResultLabel();
+    }
+  }, {
+    key: "addMeasureResultLabel",
+    value: function addMeasureResultLabel() {
+      const measureResult = this.measureResult();
+      if (measureResult === null) return;
+      const {
+        content,
+        position
+      } = measureResult;
+      this.measureResultLabel = new Label.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 {
-    symbol,
-    item
-  } = legend;
-  return React__default.createElement(LegendProvider, {
-    symbol: symbol
-  }, React__default.createElement(MapLegendControl, {
-    className: className
-  }, React__default.createElement(MapLegendContainer, null, React__default.createElement(MapLegendHeader, null, item.title), React__default.createElement(MapLegendSection, null, React__default.createElement(MapLegendValueDescr, null, fromToTitle[0]), item.values.map(value => React__default.createElement(MapLegendSymbol, {
-    key: value.title,
-    value: value,
-    parameter: item.parameter
-  })), React__default.createElement(MapLegendValueDescr, null, fromToTitle[1])))));
-};
+  return BaseMeasureToolEditor;
+}(PolyEditor.PolyEditor);
 
 let MeasureTool = /*#__PURE__*/function (_React$Component) {
   _inherits(MeasureTool, _React$Component);
@@ -5152,7 +5131,7 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
 }(React__default.Component);
 
 const _excluded$3 = ["isActive"];
-const Measurer = _ref => {
+const Measurer = (_ref) => {
   let {
     isActive
   } = _ref,
@@ -5170,18 +5149,18 @@ const Measurer = _ref => {
 
 var _templateObject$7, _templateObject2$6, _templateObject3$6;
 const ScaleRulerContainer = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"])));
-const ScaleRulerBlock = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), _ref => {
+const ScaleRulerBlock = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), (_ref) => {
   let {
     width
   } = _ref;
   return width + "px";
 });
-const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
+const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__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;
@@ -5206,7 +5185,7 @@ const ScaleRuler = () => {
   }, currentScale >= 1000 ? currentScale / 1000 + "km" : currentScale + "m")));
 };
 
-const Zoom = _ref => {
+const Zoom = (_ref) => {
   let {
     children
   } = _ref;
@@ -5255,7 +5234,7 @@ const placementMixin$1 = function placementMixin(placement, distance, cornerSize
   return styled.css(_templateObject9$1 || (_templateObject9$1 = _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__*/styled.css(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"])));
-const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__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__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__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',
@@ -5263,7 +5242,7 @@ const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$1 ||
     cornerSize = '0.25rem'
   } = _ref;
   return placementMixin$1(placement, distance, withArrow ? cornerSize : null);
-}, _ref2 => {
+}, (_ref2) => {
   let {
     withArrow
   } = _ref2;
@@ -5277,7 +5256,7 @@ const {
   Consumer
 } = /*#__PURE__*/React.createContext([]); // TODO I just cant read that
 
-const Tooltip = _ref => {
+const Tooltip = (_ref) => {
   let {
     features = [],
     map,
@@ -5316,7 +5295,7 @@ const Noop = () => React__default.createElement("div", {
   }
 });
 
-const DraggableMarker = _ref => {
+const DraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -5330,6 +5309,21 @@ const DraggableMarker = _ref => {
   return React__default.createElement(React.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];
+};
+
 exports.ArrowLineMiterRender = ArrowLineMiterRender;
 exports.BaseMeasureToolCreator = BaseMeasureToolCreator;
 exports.BaseMeasureToolEditor = BaseMeasureToolEditor;