@evergis/react 2.0.151 → 2.0.153

package/dist/react.cjs.development.js

@@ -27,10 +27,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');
@@ -45,6 +41,7 @@ var H3Symbol = require('@evergis/sgis/es/symbols/H3Symbol');
 var H3Feature = require('@evergis/sgis/es/features/H3Feature');
 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');
@@ -53,6 +50,9 @@ var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 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)) {
@@ -73,9 +73,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;
 }
 
@@ -109,9 +106,6 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -170,8 +164,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);
@@ -205,7 +197,7 @@ function _superPropBase(object, property) {
   return object;
 }
 
-function _get() {
+function _get(target, property, receiver) {
   if (typeof Reflect !== "undefined" && Reflect.get) {
     _get = Reflect.get;
   } else {
@@ -216,14 +208,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) {
@@ -252,7 +244,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
@@ -270,7 +262,7 @@ const mapContext = /*#__PURE__*/React.createContext({
   map: defaultMap,
   painter: defaultPainter
 });
-const MapProvider = _ref => {
+const MapProvider = (_ref) => {
   let {
     map,
     painter,
@@ -292,7 +284,7 @@ const tooltipContext = /*#__PURE__*/React.createContext({
   layer: defaultLayer,
   popupLayer: defaultPopupLayer
 });
-const TooltipProvider = _ref => {
+const TooltipProvider = (_ref) => {
   let {
     layer,
     popupLayer,
@@ -309,7 +301,7 @@ const TooltipProvider = _ref => {
 const useTooltipContext = () => React.useContext(tooltipContext);
 
 const LegendContext = /*#__PURE__*/React.createContext(null);
-const LegendProvider = _ref => {
+const LegendProvider = (_ref) => {
   let {
     symbol,
     children
@@ -321,7 +313,7 @@ const LegendProvider = _ref => {
 const useLegendContext = () => React.useContext(LegendContext);
 
 const evergisSelectContext = /*#__PURE__*/React.createContext([]);
-const EvergisSelectProvider = _ref => {
+const EvergisSelectProvider = (_ref) => {
   let {
     layers,
     children
@@ -366,7 +358,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,
@@ -396,7 +388,7 @@ function useMapViewActions() {
     const {
       tileScheme
     } = map;
-    let tileLevel = tileScheme.levels.find(_ref2 => {
+    let tileLevel = tileScheme.levels.find((_ref2) => {
       let {
         zIndex
       } = _ref2;
@@ -572,7 +564,7 @@ const formatStringAttribute = value => {
 
   const attributeValues = value.split(/[\s|]/).map(convertStringAttribute);
 
-  if (attributeValues.every(_ref => {
+  if (attributeValues.every((_ref) => {
     let {
       type
     } = _ref;
@@ -580,7 +572,7 @@ const formatStringAttribute = value => {
   }
   /* String */
   )) {
-    return [stringAttribute(attributeValues.map(_ref2 => {
+    return [stringAttribute(attributeValues.map((_ref2) => {
       let {
         value
       } = _ref2;
@@ -1057,7 +1049,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
@@ -1065,7 +1057,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,
@@ -1083,7 +1075,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;
@@ -1498,7 +1490,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);
@@ -1590,1124 +1582,776 @@ 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
+      });
+    }
+  });
 };
 
-const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
-
-const isParameterType = (parameter, type) => {
-  var _parameter$toLowerCas;
-
-  return (_parameter$toLowerCas = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas.includes(type);
-};
+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
+  })];
+}
 
-let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
-  _inherits(CircleLineMiterRender, _LineMiterRender);
+let ShadowedPointSymbol = /*#__PURE__*/function (_PointSymbol) {
+  _inherits(ShadowedPointSymbol, _PointSymbol);
 
-  var _super = /*#__PURE__*/_createSuper(CircleLineMiterRender);
+  var _super = /*#__PURE__*/_createSuper(ShadowedPointSymbol);
 
-  function CircleLineMiterRender() {
-    _classCallCheck(this, CircleLineMiterRender);
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  function ShadowedPointSymbol(options) {
+    _classCallCheck(this, ShadowedPointSymbol);
 
-    return _super.apply(this, arguments);
+    return _super.call(this, options);
   }
 
-  _createClass(CircleLineMiterRender, [{
-    key: "usageSize",
-    get: function get() {
-      return this.miterSize + this.strokeWidth * 3;
+  _createClass(ShadowedPointSymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof PointFeature.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();
 
-  for (let i = 0; i < reversedRing.length; i++) {
-    const coordinates = reversedRing[i];
-
-    if (isLastRing && i === 0) {
-      reversedRing[i] = [coordinates[0] - miterSize, coordinates[1]];
-    }
+  _createClass(ShadowedPolySymbol, [{
+    key: "renderFunction",
+    value: function renderFunction(feature, resolution, crs) {
+      if (!(feature instanceof Poly$1.Poly)) return [];
 
-    const nextCoordinates = reversedRing[i - 1];
+      const coordinates = _get(_getPrototypeOf(ShadowedPolySymbol.prototype), "getRenderedCoordinates", this).call(this, feature, resolution, crs);
 
-    if (nextCoordinates && nextCoordinates[0] < coordinates[0]) {
-      reversedRing[i] = [nextCoordinates[0] - Math.abs(nextCoordinates[0] - coordinates[0]), coordinates[1]];
-    }
-  }
-
-  return reversedRing.reverse();
-};
+      const polyRender = this.getPolyRender(coordinates, feature);
+      const shadowRender = this.getShadow(coordinates, feature);
+      const vertexRenders = this.getVertexRenders(coordinates);
+      let renders = [polyRender];
 
-const updateRingForLeftMiter = (ring, miterSize, isFirstRing) => {
-  const newRing = ring.slice();
+      if (shadowRender) {
+        renders = [shadowRender, polyRender];
+      }
 
-  for (let i = 0; i < newRing.length; i++) {
-    const coordinates = newRing[i];
+      if (vertexRenders) {
+        renders = renders.concat(vertexRenders);
+      }
 
-    if (i === 0 && isFirstRing) {
-      newRing[i] = [coordinates[0] + miterSize, coordinates[1]];
+      return renders;
     }
-
-    const prevCoordinates = newRing[i - 1];
-
-    if (prevCoordinates && prevCoordinates[0] > coordinates[0]) {
-      newRing[i] = [prevCoordinates[0] + Math.abs(coordinates[0] - prevCoordinates[0]), coordinates[1]];
+  }, {
+    key: "getShadow",
+    value: function getShadow(coordinates, _feature) {
+      return new Poly.PolyRender(coordinates, {
+        fillStyle: Poly.FillStyle.None,
+        enclosed: this.enclose,
+        strokeColor: this.shadowColor,
+        strokeWidth: this.shadowSize,
+        lineDash: this.lineDash
+      });
     }
-  }
+  }, {
+    key: "getPolyRender",
+    value: function getPolyRender(coordinates, _feature) {
+      return new Poly.PolyRender(coordinates, {
+        fillStyle: this.enclose ? Poly.FillStyle.Color : Poly.FillStyle.None,
+        enclosed: this.enclose,
+        fillColor: this.fillColor,
+        strokeColor: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        lineDash: this.lineDash
+      });
+    }
+  }, {
+    key: "getVertexRenders",
+    value: function getVertexRenders(coordinates) {
+      if (!this.showVertex) return;
+      const vertexCoordinates = coordinates.reduce((acc, curr) => {
+        return acc.concat(curr);
+      }, []);
+      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
+        size: 6,
+        strokeWidth: 2,
+        shadowColor: this.shadowColor,
+        strokeColor: this.strokeColor,
+        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
+        fillColor: '#ffffff'
+      })).reduce((acc, curr) => acc.concat(curr), []);
+    }
+  }]);
 
-  return 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 ? new PolylineSymbol.PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+      this.setCirclePxRaius(crs);
+      this.container.innerHTML = '';
+      const svg = this.setSvg(coordinates);
+      svg && this.container.append(svg);
+      feature.__dynamicSymbolRender = new Render.DynamicRender({
+        node: this.container,
+        update: (bbox, resolution) => this.update({
+          bbox,
+          resolution,
+          feature,
+          crs
+        }),
+        redraw: () => {
+          this.redrawFeatureNode && this.redrawFeatureNode(feature);
+        }
+      });
+
+      this._setEventListeners(feature);
+
+      return [feature.__dynamicSymbolRender];
     }
   }, {
-    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
-      });
-    }
-  }, {
-    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 = _get(_getPrototypeOf(ShadowedPolySymbol.prototype), "getRenderedCoordinates", this).call(this, feature, resolution, crs);
-
-      const polyRender = this.getPolyRender(coordinates, feature);
-      const shadowRender = this.getShadow(coordinates, feature);
-      const vertexRenders = this.getVertexRenders(coordinates);
-      let renders = [polyRender];
-
-      if (shadowRender) {
-        renders = [shadowRender, polyRender];
-      }
-
-      if (vertexRenders) {
-        renders = renders.concat(vertexRenders);
-      }
-
-      return renders;
-    }
-  }, {
-    key: "getShadow",
-    value: function getShadow(coordinates, _feature) {
-      return new Poly.PolyRender(coordinates, {
-        fillStyle: Poly.FillStyle.None,
-        enclosed: this.enclose,
-        strokeColor: this.shadowColor,
-        strokeWidth: this.shadowSize,
-        lineDash: this.lineDash
-      });
-    }
-  }, {
-    key: "getPolyRender",
-    value: function getPolyRender(coordinates, _feature) {
-      return new Poly.PolyRender(coordinates, {
-        fillStyle: this.enclose ? Poly.FillStyle.Color : Poly.FillStyle.None,
-        enclosed: this.enclose,
-        fillColor: this.fillColor,
-        strokeColor: this.strokeColor,
-        strokeWidth: this.strokeWidth,
-        lineDash: this.lineDash
-      });
-    }
-  }, {
-    key: "getVertexRenders",
-    value: function getVertexRenders(coordinates) {
-      if (!this.showVertex) return;
-      const vertexCoordinates = coordinates.reduce((acc, curr) => {
-        return acc.concat(curr);
-      }, []);
-      return vertexCoordinates.map(coord => getEditorPointRenderer(coord, {
-        size: 6,
-        strokeWidth: 2,
-        shadowColor: this.shadowColor,
-        strokeColor: this.strokeColor,
-        shadowSize: this.vertexShadowSize !== undefined ? this.vertexShadowSize : 2,
-        fillColor: '#ffffff'
-      })).reduce((acc, curr) => acc.concat(curr), []);
-    }
-  }]);
-
-  return 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
-}));
-
-let SelectedPointSymbol = /*#__PURE__*/function (_ShadowedPointSymbol) {
-  _inherits(SelectedPointSymbol, _ShadowedPointSymbol);
-
-  var _super = /*#__PURE__*/_createSuper(SelectedPointSymbol);
-
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPointSymbol(props) {
-    _classCallCheck(this, SelectedPointSymbol);
-
-    return _super.call(this, props);
-  }
-
-  _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;
-      }
-
-      return pointRender;
-    }
-  }]);
-
-  return SelectedPointSymbol;
-}(ShadowedPointSymbol);
-
-let SelectedPolySymbol = /*#__PURE__*/function (_ShadowedPolySymbol) {
-  _inherits(SelectedPolySymbol, _ShadowedPolySymbol);
-
-  var _super = /*#__PURE__*/_createSuper(SelectedPolySymbol);
-
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  function SelectedPolySymbol(props) {
-    _classCallCheck(this, SelectedPolySymbol);
-
-    return _super.call(this, props);
-  }
-
-  _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);
-
-      if (feature.isSelected) {
-        polyRender.fillColor = this.selectedFillColor;
-        polyRender.strokeColor = this.selectedStrokeColor;
-
-        if (this.selectedStrokeWidth !== void 0) {
-          polyRender.strokeWidth = this.selectedStrokeWidth;
-        }
-      }
-
-      return polyRender;
-    }
-  }]);
-
-  return SelectedPolySymbol;
-}(ShadowedPolySymbol);
-
-const selectedPoint = /*#__PURE__*/new SelectedPointSymbol({
-  size: 8,
-  strokeWidth: 2,
-  strokeColor: 'rgba(255, 87, 34, 0.3)',
-  fillColor: 'rgba(255, 255, 255, 0.65)',
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  shadowSize: 3,
-  selectedStrokeColor: '#ff5722',
-  selectedFillColor: 'rgba(255, 255, 255, 0.65)'
-});
-const selectedPolyline = /*#__PURE__*/new SelectedPolySymbol({
-  strokeWidth: 6,
-  strokeColor: 'rgba(255, 87, 34, 0.2)',
-  shadowSize: 8,
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  selectedStrokeColor: '#ff5722',
-  selectedStrokeWidth: 2
-});
-const selectedPolygon = /*#__PURE__*/new SelectedPolySymbol({
-  strokeWidth: 2,
-  strokeColor: 'rgba(255, 87, 34, 0.3)',
-  shadowSize: 8,
-  shadowColor: 'rgba(255, 87, 34, 0.3)',
-  fillColor: 'rgba(255, 255, 255, 0.36)',
-  enclose: true,
-  selectedFillColor: 'rgba(255, 255, 255, 0.56)',
-  selectedStrokeColor: '#ff5722'
-});
-
-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(SVGPoly);
-
-  function SVGPoly(_temp) {
-    var _this;
-
-    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(SVGPoly, [{
-    key: "renderFunction",
-    value: function renderFunction(feature, resolution, crs) {
-      const coordinates = feature instanceof Poly$1.Poly ? new PolylineSymbol.PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-      this.setCirclePxRaius(crs);
-      this.container.innerHTML = '';
-      const svg = this.setSvg(coordinates);
-      svg && this.container.append(svg);
-      feature.__dynamicSymbolRender = new Render.DynamicRender({
-        node: this.container,
-        update: (bbox, resolution) => this.update({
-          bbox,
-          resolution,
-          feature,
-          crs
-        }),
-        redraw: () => {
-          this.redrawFeatureNode && this.redrawFeatureNode(feature);
-        }
-      });
-
-      this._setEventListeners(feature);
-
-      return [feature.__dynamicSymbolRender];
-    }
-  }, {
-    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: "update",
-    value: function update(_ref) {
-      var _this$pathStyles, _this$pathStyles2, _this$pathStyles3, _this$pathStyles4;
-
-      let {
-        bbox,
-        resolution,
-        feature,
-        crs
-      } = _ref;
-      if (!feature) return;
-      if (!bbox) bbox = feature.__lastBbox;
-      if (!resolution) resolution = feature.__lastResolution;
-      if (!bbox || !resolution || !feature.crs.canProjectTo(bbox.crs)) return;
-
-      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
-        const newCoordinates = feature instanceof Poly$1.Poly ? new PolylineSymbol.PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
-        this.setCirclePxRaius(crs);
-        this.container.innerHTML = '';
-        const svg = this.setSvg(newCoordinates);
-        svg && this.container.append(svg);
-      }
-
-      const polygon = feature.projectTo(bbox.crs);
-      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
-      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
-      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
-      this.container.style.left = dx.toString() + "px";
-      this.container.style.top = dy.toString() + "px";
-      feature.__lastBbox = bbox;
-      feature.__lastResolution = resolution;
+      if (!feature) return;
+      if (!bbox) bbox = feature.__lastBbox;
+      if (!resolution) resolution = feature.__lastResolution;
+      if (!bbox || !resolution || !feature.crs.canProjectTo(bbox.crs)) return;
+
+      if (feature.__lastResolution && resolution !== feature.__lastResolution) {
+        const newCoordinates = feature instanceof Poly$1.Poly ? new PolylineSymbol.PolylineSymbol().getRenderedCoordinates(feature, resolution, crs) : feature.centroid;
+        this.setCirclePxRaius(crs);
+        this.container.innerHTML = '';
+        const svg = this.setSvg(newCoordinates);
+        svg && this.container.append(svg);
+      }
+
+      const polygon = feature.projectTo(bbox.crs);
+      const radiusOffset = (_this$pathStyles = this.pathStyles) != null && _this$pathStyles.radius ? ((_this$pathStyles2 = this.pathStyles) == null ? void 0 : _this$pathStyles2.radius) + ((_this$pathStyles3 = this.pathStyles) != null && _this$pathStyles3.strokeWidth ? ((_this$pathStyles4 = this.pathStyles) == null ? void 0 : _this$pathStyles4.strokeWidth) / 2 : 0) : 0;
+      const dx = Math.round((polygon.bbox.xMin - bbox.xMin) / resolution) - radiusOffset;
+      const dy = Math.round((bbox.yMax - polygon.bbox.yMax) / resolution) - radiusOffset;
+      this.container.style.left = dx.toString() + "px";
+      this.container.style.top = dy.toString() + "px";
+      feature.__lastBbox = bbox;
+      feature.__lastResolution = resolution;
     }
   }, {
     key: "setSvg",
@@ -3176,7 +2820,7 @@ function evaluateCondition(condition$1, attributes) {
 }
 
 function getAttributeValue(attributes, attributeName) {
-  const attributeMeta = attributes.find(_ref => {
+  const attributeMeta = attributes.find((_ref) => {
     let {
       name
     } = _ref;
@@ -3190,7 +2834,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;
@@ -3230,7 +2874,7 @@ function evaluateFeatureSymbol(attributes) {
 }
 
 function findChildFeatureStyle(childStyles, attributes) {
-  return (childStyles || []).find(_ref5 => {
+  return (childStyles || []).find((_ref5) => {
     let {
       condition
     } = _ref5;
@@ -3291,7 +2935,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;
@@ -3314,7 +2958,7 @@ const evaluateFeature = layers => feature => {
 };
 
 const OTHERS_TITLE = 'Другое';
-const createLegendItem = _ref => {
+const createLegendItem = (_ref) => {
   let {
     attributes,
     renderTitle,
@@ -3360,7 +3004,7 @@ function createStyleLegend(style, config) {
     classificationManager,
     symbol
   } = style;
-  const items = classificationManager.filter(_ref => {
+  const items = classificationManager.filter((_ref) => {
     let {
       parameter
     } = _ref;
@@ -3476,7 +3120,7 @@ const useMapLegend = (layer, config) => {
 };
 
 const LEGEND_SYMBOL_MAX_SIZE = 32;
-const useLegendValueSymbol = _ref => {
+const useLegendValueSymbol = (_ref) => {
   let {
     parameter,
     parameterValue
@@ -3723,11 +3367,10 @@ function useFeatureLayer(_ref) {
     }),
     destructor: layer => map.indexOf(layer) !== -1 && map.removeLayer(layer),
     update: (layer, _ref2) => {
-      let [features, opacity] = _ref2;
+      let [features] = _ref2;
       layer.features = features;
-      layer.opacity = opacity != null ? opacity : 1;
     }
-  }, [features, opacity]);
+  }, [features]);
   useLayerOrder(layer, zIndex);
   useLayerVisibility(layer, isDisplayed);
   useLayerOpacity(layer, opacity);
@@ -3884,7 +3527,7 @@ function useMapWrapper() {
   return wrapperRef;
 }
 
-const byScale = scale => _ref => {
+const byScale = scale => (_ref) => {
   let {
     zIndex
   } = _ref;
@@ -4083,7 +3726,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,
@@ -4247,7 +3890,7 @@ function useClusterLayer(_ref) {
 }
 
 const INIT_FEATURES = [];
-const useEvergisSelect = _ref => {
+const useEvergisSelect = (_ref) => {
   let {
     onPick,
     onFeatures
@@ -4280,7 +3923,7 @@ function none() {
   return;
 }
 
-const useDraggableMarker = _ref => {
+const useDraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -4402,7 +4045,7 @@ const useToggle = initial => {
   return [state, toggle, setState];
 };
 
-const Symbol = _ref => {
+const Symbol = (_ref) => {
   let {
     symbol,
     size,
@@ -4423,19 +4066,19 @@ const Symbol = _ref => {
 };
 
 var _templateObject, _templateObject2;
-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
   } = _ref;
   return "url(" + icons[geometryType] + ") center center / " + (geometryType === api.GeometryType.Polyline ? '2rem 1.3rem' : 'auto 1rem') + " no-repeat";
 });
-const ClusterSymbol = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 32px;\n  height: 32px;\n\n  :before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: inherit;\n    height: inherit;\n    background-color: ", ";\n    border-radius: 50%;\n    opacity: 0.28;\n  }\n  \n  :after {\n    content: \"99\";\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    background-color: ", ";\n    border-radius: 50%;\n    color: white;\n    font-size: 0.75rem;\n    line-height: 1;\n  }\n"])), _ref2 => {
+const ClusterSymbol = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 32px;\n  height: 32px;\n\n  :before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: inherit;\n    height: inherit;\n    background-color: ", ";\n    border-radius: 50%;\n    opacity: 0.28;\n  }\n  \n  :after {\n    content: \"99\";\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    background-color: ", ";\n    border-radius: 50%;\n    color: white;\n    font-size: 0.75rem;\n    line-height: 1;\n  }\n"])), (_ref2) => {
   let {
     color
   } = _ref2;
   return color;
-}, _ref3 => {
+}, (_ref3) => {
   let {
     color
   } = _ref3;
@@ -4443,7 +4086,7 @@ const ClusterSymbol = /*#__PURE__*/styled__default.div(_templateObject2 || (_tem
 });
 
 const MAX_SIZE = 32;
-const StyleSymbol = _ref => {
+const StyleSymbol = (_ref) => {
   let {
     symbol,
     size = MAX_SIZE,
@@ -4500,7 +4143,7 @@ const AttributeValueContainer = /*#__PURE__*/styled__default.div(_templateObject
 const SimpleAttribute = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 const ValueLink = /*#__PURE__*/styled__default.a(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n  text-decoration: none;\n"])));
 
-const MailValue = _ref => {
+const MailValue = (_ref) => {
   let {
     mail
   } = _ref;
@@ -4511,7 +4154,7 @@ const MailValue = _ref => {
   }, mail);
 };
 
-const PhoneValue = _ref => {
+const PhoneValue = (_ref) => {
   let {
     phone
   } = _ref;
@@ -4522,7 +4165,7 @@ const PhoneValue = _ref => {
   }, phone);
 };
 
-const UrlValue = _ref => {
+const UrlValue = (_ref) => {
   let {
     url
   } = _ref;
@@ -4533,7 +4176,7 @@ const UrlValue = _ref => {
   }, url);
 };
 
-const AttributeValue = _ref => {
+const AttributeValue = (_ref) => {
   let {
     attribute
   } = _ref;
@@ -4547,29 +4190,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
@@ -4585,7 +4228,7 @@ function punycodeDecode(domains) {
   }
 }
 
-const EvergisCardAttribute = _ref => {
+const EvergisCardAttribute = (_ref) => {
   let {
     attribute,
     className
@@ -4597,7 +4240,7 @@ const EvergisCardAttribute = _ref => {
   }));
 };
 
-const StyledCard = _ref => {
+const StyledCard = (_ref) => {
   let {
     features = [],
     className,
@@ -4643,7 +4286,7 @@ const StyledCard = _ref => {
 };
 
 const _excluded$1 = ["renderCard", "className", "children"];
-const EvergisCard = _ref => {
+const EvergisCard = (_ref) => {
   let {
     renderCard,
     className,
@@ -4695,7 +4338,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,
@@ -4740,7 +4383,7 @@ const TileLayer = props => {
 };
 
 const defaultZIndex = 200;
-const EvergisSelect = _ref => {
+const EvergisSelect = (_ref) => {
   let {
     onPick,
     className,
@@ -4775,7 +4418,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.75rem;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
 const LegendSectionHeader = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 
-const LegendSection = _ref => {
+const LegendSection = (_ref) => {
   let {
     item,
     renderLegendTitle,
@@ -4789,7 +4432,7 @@ var _templateObject$3, _templateObject2$3;
 const InputContainer = /*#__PURE__*/styled__default.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 0.125rem;\n  box-sizing: border-box;\n  border: 0.0625rem solid rgba(48, 69, 79, 0.12);\n  margin-bottom: 0.5rem;\n  \n  i {\n    color: rgba(48, 69, 79, 0.54);\n    padding: 0.25rem;\n\n    &:hover {\n      cursor: pointer;\n      color: rgba(48, 69, 79, 0.87);\n    }\n  }\n"])));
 const InputField = /*#__PURE__*/styled__default.input(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 1rem;\n  line-height: 1.1875rem;\n  padding: 0 0.5rem;\n  background-color: transparent;\n  color: rgba(48, 69, 79, 0.87);\n"])));
 
-const SearchInput = _ref => {
+const SearchInput = (_ref) => {
   let {
     onChange
   } = _ref;
@@ -4798,7 +4441,7 @@ const SearchInput = _ref => {
   }));
 };
 
-const LegendSymbol = _ref => {
+const LegendSymbol = (_ref) => {
   let {
     parameter,
     parameterValue,
@@ -4816,7 +4459,7 @@ const LegendSymbol = _ref => {
   return React__default.createElement(React__default.Fragment, null, children(symbol));
 };
 
-const LegendValue = _ref => {
+const LegendValue = (_ref) => {
   let {
     value,
     parameter,
@@ -4838,7 +4481,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
@@ -4863,7 +4506,7 @@ const getSymbolSize = _ref => {
   }
 };
 
-const Legend = _ref => {
+const Legend = (_ref) => {
   let {
     layer,
     children,
@@ -4891,13 +4534,13 @@ const Legend = _ref => {
     className: className
   }, searchable && searchLayer && React__default.createElement(SearchInput, {
     onChange: searchLayer
-  }), renderCustomLegend && layer ? renderCustomLegend(layer) : children ? legend && children(legend) : legend && legend.items.map(legendItem => React__default.createElement(LegendSection, {
+  }), renderCustomLegend && layer ? renderCustomLegend(layer) : children ? legend && children(legend) : legend && legend.items.map((legendItem, index) => React__default.createElement(LegendSection, {
     key: legendItem.attribute + "-" + legendItem.parameter,
     item: legendItem,
     hideTitle: (layer == null ? void 0 : layer.alias) === legendItem.title,
     renderLegendTitle: config && config.renderLegendTitle
   }, legendValue => React__default.createElement(LegendValue, {
-    key: legendValue.title,
+    key: legendValue.title + "-" + index,
     value: legendValue,
     parameter: legendItem.parameter,
     maxSize: getSymbolSize({
@@ -4907,275 +4550,663 @@ const Legend = _ref => {
   })))));
 };
 
-const Map = _ref => {
+const Map = (_ref) => {
+  let {
+    className,
+    position,
+    resolution,
+    minScale,
+    maxScale,
+    children,
+    onBboxChange,
+    style
+  } = _ref;
+  const wrapperRef = useMapWrapper();
+  const {
+    map
+  } = useMapContext();
+  const handleBboxChange = React.useCallback(state => {
+    if (onBboxChange && shouldUpdateMapState(map, {
+      position,
+      resolution
+    })) {
+      onBboxChange(state);
+    }
+  }, [map, onBboxChange, position, resolution]);
+  useUpdateMapView({
+    position,
+    resolution
+  });
+  useMaxMinScale(minScale, maxScale, position, resolution);
+  useMapBboxChange(handleBboxChange);
+  return React__default.createElement("div", {
+    className: className,
+    ref: wrapperRef,
+    style: style
+  }, children);
+};
+
+var _templateObject$4, _templateObject2$4, _templateObject3$2, _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$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
+
+const bottomLeft = distance => styled.css(_templateObject3$2 || (_templateObject3$2 = _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$5, _templateObject3$3, _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(icons.Icon)(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomInBtn.defaultProps = { kind: "plus" };
+
+const ZoomOutBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomOutBtn.defaultProps = { kind: "minus" };
+
+const SearchBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // SearchBtn.defaultProps = { kind: "search" };
+// TODO not exists in fonts
+
+const FullscreenBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // FullscreenBtn.defaultProps = { kind: "maximize" };
+
+const MeasureBtn = /*#__PURE__*/styled__default(icons.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: () => {}
+  }));
+};
+
+const isParameterType = (types, parameter) => {
+  var _parameter$toLowerCas;
+
+  return (typeof types === "string" ? parameter == null ? void 0 : (_parameter$toLowerCas = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas.includes(types.toLowerCase()) : types.some(type => {
+    var _parameter$toLowerCas2;
+
+    return parameter == null ? void 0 : (_parameter$toLowerCas2 = parameter.toLowerCase()) == null ? void 0 : _parameter$toLowerCas2.includes(type.toLowerCase());
+  })) || false;
+};
+
+var _templateObject$6, _templateObject2$6, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
+const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 12.5rem;\n  padding-bottom: 1rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
+const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
+const MapLegendDescriptionContainer = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  font-weight: 400;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.65);\n"])));
+const MinimizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :not(:first-child) {\n    margin-top: 1rem;\n  }\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 1rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
+
+const SizeLegendItemMixin = function SizeLegendItemMixin(value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  return styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 50%;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 0 0 -1rem;\n  background: none;\n  border: none;\n\n  :after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 50%;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
+};
+
+const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  return styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  min-height: 1rem;\n  height: auto;\n  width: calc(100% - 2rem);\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", ";\n    background: rgb(224, 224, 224);\n  }\n"])), value, Math.round(value / 2));
+};
+
+const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n\n  ", "\n\n  ", "\n"])), (_ref) => {
+  let {
+    parameter
+  } = _ref;
+  return isParameterType(["strokeColor", "stroke.color"], parameter) ? 0.25 : 1;
+}, (_ref2) => {
+  let {
+    value
+  } = _ref2;
+  return typeof value === "number" ? "none" : value;
+}, (_ref3) => {
+  let {
+    value,
+    parameter
+  } = _ref3;
+  return isParameterType("size", parameter) && SizeLegendItemMixin(value);
+}, (_ref4) => {
+  let {
+    value,
+    parameter
+  } = _ref4;
+  return isParameterType(["strokeWidth", "stroke.width"], parameter) && StrokeWidthLegendItemMixin(value);
+});
+const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: none;\n  position: relative;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
+const SizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  margin: 0 auto;\n\n  ", " {\n    width: auto;\n    margin-left: 0;\n  }\n"])), MapLegendOther);
+const StrokeWidthLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  flex-direction: column;\n\n  ", " {\n    width: calc(100% - 2rem);\n    margin-left: 0;\n  }\n"])), MapLegendOther);
+const SizeMinimizedLegend = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-top: 0.5rem;\n"])));
+const SizeMinimizedLegendSymbol = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
+const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
+const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  opacity: 0.28;\n"])));
+const SizeMinimizedLegendUp = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  opacity: 0.65;\n"])));
+const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n"])), (_ref5) => {
+  let {
+    isSize
+  } = _ref5;
+  return isSize && SizeLegendItemsMixin;
+}, (_ref6) => {
+  let {
+    isStrokeWidth
+  } = _ref6;
+  return isStrokeWidth && StrokeWidthLegendItemsMixin;
+});
+const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  text-align: center;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin: 0.1rem 0 0.5rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+
+const MapLegendDescription = (_ref) => {
+  let {
+    parameter
+  } = _ref;
+  const isSize = isParameterType("size", parameter);
+  const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
+  const isStrokeColor = isParameterType(["strokeColor", "stroke.color"], parameter);
+  console.info("MapLegendDescription", parameter, isSize, isStrokeWidth, isStrokeColor);
+  return React__default.createElement(MapLegendDescriptionContainer, null, isStrokeWidth || isStrokeColor ? isStrokeWidth ? "Толщина обводки" : "Цвет обводки" : isSize ? "Размер знака" : "Цвет символа");
+};
+
+const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
+
+const getValueFromLegendTitle = (title, minOrMax) => {
+  var _title$split;
+
+  if (title.includes(" - ")) {
+    const result = title == null ? void 0 : title.split(" - ");
+    return minOrMax === "min" ? result == null ? void 0 : result[0] : result == null ? void 0 : result[1];
+  }
+
+  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split.find(isNumeric)) || "";
+};
+
+const MinimizedLegend = (_ref) => {
+  var _currentValues$, _currentValues, _currentValues$2, _currentValues2;
+
+  let {
+    values,
+    title,
+    parameter
+  } = _ref;
+  const currentValues = [...values];
+  const other = currentValues.pop();
+  const isSize = isParameterType("size", parameter);
+  const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
+  const titleMax = getValueFromLegendTitle((_currentValues$ = currentValues[0]) == null ? void 0 : _currentValues$.title, "max");
+  const titleMin = getValueFromLegendTitle((_currentValues = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues.title, "min");
+  return React__default.createElement(MinimizedLegendContainer, null, !!title && React__default.createElement(MapLegendValueDescr, null, title), React__default.createElement(MapLegendDescription, {
+    parameter: parameter
+  }), isSize ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SizeMinimizedLegend, null, React__default.createElement(SizeMinimizedLegendSymbol, null, React__default.createElement(MapLegendItems, {
+    isSize: true
+  }, currentValues.map((value, index) => React__default.createElement(MapLegendItem, {
+    key: "" + value.title + index,
+    title: value.title,
+    value: value.parameterValue,
+    parameter: parameter
+  })))), React__default.createElement(SizeMinimizedLegendLabel, null, React__default.createElement(SizeMinimizedLegendDown, null, (_currentValues$2 = currentValues[0]) == null ? void 0 : _currentValues$2.title), React__default.createElement(SizeMinimizedLegendUp, null, (_currentValues2 = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues2.title))), React__default.createElement(SizeMinimizedLegend, null, React__default.createElement(SizeMinimizedLegendSymbol, null, React__default.createElement(MapLegendItems, {
+    isSize: true
+  }, React__default.createElement(MapLegendOther, {
+    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
+    value: other == null ? void 0 : other.parameterValue,
+    parameter: parameter
+  }))), React__default.createElement(SizeMinimizedLegendLabel, null, React__default.createElement(SizeMinimizedLegendUp, null, "\u0414\u0440\u0443\u0433\u043E\u0435")))) : isStrokeWidth ? React__default.createElement(MapLegendItems, {
+    isStrokeWidth: true
+  }, currentValues.map((value, index) => React__default.createElement(MapLegendItem, {
+    key: "" + value.title + index,
+    title: value.title,
+    value: value.parameterValue,
+    parameter: parameter
+  }, (!index || index === currentValues.length - 1) && value.title)), React__default.createElement(MapLegendOther, {
+    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
+    value: other == null ? void 0 : other.parameterValue,
+    parameter: parameter
+  }, "\u0414\u0440\u0443\u0433\u043E\u0435")) : React__default.createElement(MapLegendItems, null, currentValues.map((value, index) => React__default.createElement(MapLegendItem, {
+    key: "" + value.title + index,
+    title: value.title,
+    value: value.parameterValue,
+    parameter: parameter
+  })), React__default.createElement(MapLegendOther, {
+    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
+    value: other == null ? void 0 : other.parameterValue,
+    parameter: parameter
+  })), typeof (other == null ? void 0 : other.parameterValue) === "string" && (titleMax || titleMin) && React__default.createElement(MapLegendValues, null, React__default.createElement(MapLegendValuesRange, null, React__default.createElement("div", null, titleMax), React__default.createElement("div", null, titleMin)), React__default.createElement(MapLegendValuesOther, null, "-")));
+};
+
+const MapLegend = (_ref) => {
+  let {
+    layer,
+    config,
+    className,
+    hideTitle
+  } = _ref;
+  const legend = useMapLegend(layer, config);
+  const [isExpanded, toggleExpanded] = useToggle();
+
+  if (!legend) {
+    return null;
+  }
+
+  const {
+    symbol,
+    items
+  } = legend;
+  return React__default.createElement(LegendProvider, {
+    symbol: symbol
+  }, React__default.createElement(MapLegendControl, {
+    className: className
+  }, !hideTitle && React__default.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), !!items.length && React__default.createElement(MapLegendContainer, null, isExpanded ? React__default.createElement(Legend, {
+    layer: layer,
+    config: config
+  }) : React__default.createElement(React__default.Fragment, null, items.map(item => {
+    var _symbol$fill;
+
+    return React__default.createElement(React.Fragment, {
+      key: item.title
+    }, React__default.createElement(MinimizedLegend, {
+      values: item.values,
+      defaultValue: (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color,
+      title: item.title !== (layer == null ? void 0 : layer.alias) ? item.title : "",
+      parameter: item.parameter
+    }));
+  })), React__default.createElement(MapLegendExpandButton, {
+    onClick: toggleExpanded,
+    "data-html2canvas-ignore": true
+  }, isExpanded ? "Свернуть" : "Развернуть"))));
+};
+
+const MAX_SIZE$2 = 100;
+const MapLegendSymbol = (_ref) => {
   let {
-    className,
-    position,
-    resolution,
-    minScale,
-    maxScale,
-    children,
-    onBboxChange,
-    style
+    value,
+    parameter
   } = _ref;
-  const wrapperRef = useMapWrapper();
-  const {
-    map
-  } = useMapContext();
-  const handleBboxChange = React.useCallback(state => {
-    if (onBboxChange && shouldUpdateMapState(map, {
-      position,
-      resolution
-    })) {
-      onBboxChange(state);
-    }
-  }, [map, onBboxChange, position, resolution]);
-  useUpdateMapView({
-    position,
-    resolution
-  });
-  useMaxMinScale(minScale, maxScale, position, resolution);
-  useMapBboxChange(handleBboxChange);
-  return React__default.createElement("div", {
-    className: className,
-    ref: wrapperRef,
-    style: style
-  }, children);
+  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
+  }));
 };
 
-var _templateObject$4, _templateObject2$4, _templateObject3$2, _templateObject4$2, _templateObject5$2;
+const DEFAULT_FORMATTERS = {
+  polygon: formatPolygonMeasure,
+  length: formatLength
+};
 
-const topLeft = distance => styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
+const COORD_FRACTION = 6;
+const DEFAULT_LABEL_POSITION = [Infinity, Infinity];
+let BaseMeasureToolCreator = /*#__PURE__*/function (_PolylineControl) {
+  _inherits(BaseMeasureToolCreator, _PolylineControl);
 
-const topRight = distance => styled.css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolCreator);
 
-const bottomLeft = distance => styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
+  function BaseMeasureToolCreator(map, painter, params) {
+    var _this;
 
-const bottomRight = distance => styled.css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
+    _classCallCheck(this, BaseMeasureToolCreator);
 
-const placementMixin = function placementMixin(placement, distance) {
-  if (placement === void 0) {
-    placement = 'bottom-left';
-  }
+    _this = _super.call(this, map, params);
 
-  if (distance === void 0) {
-    distance = '1rem';
+    _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;
   }
 
-  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));
-};
+  _createClass(BaseMeasureToolCreator, [{
+    key: "_handleMousemove",
+    value: function _handleMousemove(event) {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_handleMousemove", this).call(this, event);
 
-var _templateObject$5, _templateObject2$5, _templateObject3$3, _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(icons.Icon)(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomInBtn.defaultProps = { kind: "plus" };
+      this.drawPointOnMouseMove(event);
+    }
+  }, {
+    key: "_activate",
+    value: function _activate() {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_activate", this).call(this);
 
-const ZoomOutBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomOutBtn.defaultProps = { kind: "minus" };
+      this.addTempLabel();
+      this.setCursor('pointer');
+    }
+  }, {
+    key: "_deactivate",
+    value: function _deactivate() {
+      _get(_getPrototypeOf(BaseMeasureToolCreator.prototype), "_deactivate", this).call(this);
 
-const SearchBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // SearchBtn.defaultProps = { kind: "search" };
-// TODO not exists in fonts
+      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;
 
-const FullscreenBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // FullscreenBtn.defaultProps = { kind: "maximize" };
+      if (isPolylineLikePolygon(rings, this.map.resolution)) {
+        this.finishDrawing();
+        this.fire(new Control.DrawingFinishEvent(feature, new MouseEvent('mouseup')));
+        return;
+      }
 
-const MeasureBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // MeasureBtn.defaultProps = { kind: "measure_length" };
+      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 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 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);
 
-const Measure = () => {
-  return React__default.createElement(MapControl, null, React__default.createElement(MeasureBtn, {
-    onClick: () => {}
-  }));
-};
+      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();
+      }
 
-const Search = () => {
-  return React__default.createElement(MapControl, null, React__default.createElement(SearchBtn, {
-    onClick: () => {}
-  }));
-};
+      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 Fullscreen = () => {
-  return React__default.createElement(MapControl, null, React__default.createElement(FullscreenBtn, {
-    onClick: () => {}
-  }));
-};
+      if (wrapper && typeof wrapper !== 'string') {
+        wrapper.style.cursor = cursor;
+      }
+    }
+  }]);
 
-var _templateObject$6, _templateObject2$6, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19;
-const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
-const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 12.5rem;\n  padding-bottom: 1rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
-const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
-const MapLegendDescriptionContainer = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  font-weight: 400;\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.65);\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 1rem;\n  margin-bottom: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 1rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  \n  ", "\n"])), _ref => {
-  let {
-    value
-  } = _ref;
-  return typeof value === "number" ? "none" : value;
-}, _ref2 => {
-  let {
-    value
-  } = _ref2;
-  return !!value && typeof value === "number" && SizeLegendMixin(value);
-});
-const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: none;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
-const SizeOverlayLegendMixin = /*#__PURE__*/styled.css(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  margin: 0 auto;\n  \n  ", ", ", " {\n    flex: none;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    width: inherit;\n    height: inherit;\n    margin-left: -1rem;\n    \n    :after {\n      top: 0;\n      margin-top: 0;\n    }\n  }\n"])), MapLegendItem, MapLegendOther);
-const SizeMinimizedLegend = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-top: 0.5rem;\n  \n  ", " {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
-const SizeMinimizedLegendSymbol = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
-const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
-const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  opacity: 0.28;\n"])));
-const SizeMinimizedLegendUp = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  opacity: 0.65;\n"])));
-const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n"])), _ref3 => {
-  let {
-    overlay
-  } = _ref3;
-  return overlay && SizeOverlayLegendMixin;
-});
+  return BaseMeasureToolCreator;
+}(PolylineControl.PolylineControl);
 
-const SizeLegendMixin = function SizeLegendMixin(value) {
-  if (value === void 0) {
-    value = 0;
-  }
+let BaseMeasureToolEditor = /*#__PURE__*/function (_PolyEditor) {
+  _inherits(BaseMeasureToolEditor, _PolyEditor);
 
-  return styled.css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 2rem;\n  background: none;\n  border: none;\n  margin-right: 0;\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: -", "px 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value / 2, value, value);
-};
+  var _super = /*#__PURE__*/_createSuper(BaseMeasureToolEditor);
 
-const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
-const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  text-align: center;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin: 0.1rem 0 0.5rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+  function BaseMeasureToolEditor(map, painter, params) {
+    var _this;
 
-const MapLegendDescription = _ref => {
-  let {
-    isSize
-  } = _ref;
-  return React__default.createElement(MapLegendDescriptionContainer, null, isSize ? "Размер знака" : "Цвет символа");
-};
+    _classCallCheck(this, BaseMeasureToolEditor);
 
-const getValueFromLegendTitle = (title, minOrMax) => {
-  var _title$split;
+    _this = _super.call(this, map, params);
 
-  if (title.includes(" - ")) {
-    const result = title == null ? void 0 : title.split(" - ");
-    return minOrMax === "min" ? result == null ? void 0 : result[0] : result == null ? void 0 : result[1];
-  }
+    _this.measureResult = () => {
+      const feature = _this.activeFeature;
+      if (!feature) return null;
+      const {
+        rings,
+        isEnclosed,
+        crs
+      } = feature;
+      const pointsCount = rings[0].length;
+      const position = rings[0][pointsCount - 1];
+      const area = 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
+      };
+    };
 
-  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split.find(isNumeric)) || "";
-};
+    _this.removeFeature = () => {
+      _this.fire('remove');
+    };
 
-const MinimizedLegend = _ref => {
-  var _currentValues$, _currentValues, _currentValues$2, _currentValues2;
+    _this.painter = painter;
+    _this.renderLabelSymbol = params.renderLabelSymbol;
+    _this.formatters = params.formatters || DEFAULT_FORMATTERS;
 
-  let {
-    values,
-    title,
-    isSize
-  } = _ref;
-  const currentValues = [...values];
-  const other = currentValues.pop();
-  return React__default.createElement(React__default.Fragment, null, !!title && React__default.createElement(MapLegendValueDescr, null, title), React__default.createElement(MapLegendDescription, {
-    isSize: isSize
-  }), isSize ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SizeMinimizedLegend, null, React__default.createElement(SizeMinimizedLegendSymbol, null, React__default.createElement(MapLegendItems, {
-    overlay: true
-  }, currentValues.map(value => React__default.createElement(MapLegendItem, {
-    key: value.title,
-    title: value.title,
-    value: value.parameterValue
-  })))), React__default.createElement(SizeMinimizedLegendLabel, null, React__default.createElement(SizeMinimizedLegendDown, null, (_currentValues$ = currentValues[0]) == null ? void 0 : _currentValues$.title), React__default.createElement(SizeMinimizedLegendUp, null, (_currentValues = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues.title))), React__default.createElement(SizeMinimizedLegend, null, React__default.createElement(SizeMinimizedLegendSymbol, null, React__default.createElement(MapLegendOther, {
-    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
-    value: other == null ? void 0 : other.parameterValue
-  })), React__default.createElement(SizeMinimizedLegendLabel, null, React__default.createElement(SizeMinimizedLegendUp, null, "\u0414\u0440\u0443\u0433\u043E\u0435")))) : React__default.createElement(MapLegendItems, {
-    overlay: isSize
-  }, currentValues.map(value => React__default.createElement(MapLegendItem, {
-    key: value.title,
-    title: value.title,
-    value: value.parameterValue
-  })), React__default.createElement(MapLegendOther, {
-    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
-    value: other == null ? void 0 : other.parameterValue
-  })), typeof (other == null ? void 0 : other.parameterValue) === "string" && React__default.createElement(MapLegendValues, null, React__default.createElement(MapLegendValuesRange, null, React__default.createElement("div", null, getValueFromLegendTitle((_currentValues$2 = currentValues[0]) == null ? void 0 : _currentValues$2.title, "max")), React__default.createElement("div", null, getValueFromLegendTitle((_currentValues2 = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues2.title, "min"))), React__default.createElement(MapLegendValuesOther, null, "-")));
-};
+    _this.on('change', _this.updateMeasureResult);
 
-const MapLegend = _ref => {
-  let {
-    layer,
-    config,
-    className,
-    hideTitle
-  } = _ref;
-  const legend = useMapLegend(layer, config);
-  const [isExpanded, toggleExpanded] = useToggle();
+    _this.on('edit', _this.updateMeasureResult);
 
-  if (!legend) {
-    return null;
+    return _this;
   }
 
-  const {
-    symbol,
-    items
-  } = legend;
-  return React__default.createElement(LegendProvider, {
-    symbol: symbol
-  }, React__default.createElement(MapLegendControl, {
-    className: className
-  }, !hideTitle && React__default.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), !!items.length && React__default.createElement(MapLegendContainer, null, isExpanded ? React__default.createElement(Legend, {
-    layer: layer,
-    config: config
-  }) : React__default.createElement(React__default.Fragment, null, items.map(item => {
-    var _symbol$fill;
+  _createClass(BaseMeasureToolEditor, [{
+    key: "_activate",
+    value: function _activate() {
+      _get(_getPrototypeOf(BaseMeasureToolEditor.prototype), "_activate", this).call(this);
 
-    return React__default.createElement(React.Fragment, {
-      key: item.title
-    }, React__default.createElement(MinimizedLegend, {
-      values: item.values,
-      defaultValue: (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color,
-      title: item.title !== (layer == null ? void 0 : layer.alias) ? item.title : "",
-      isSize: isParameterType(item.parameter, "size")
-    }));
-  })), React__default.createElement(MapLegendExpandButton, {
-    onClick: toggleExpanded
-  }, isExpanded ? "Свернуть" : "Развернуть"))));
-};
+      this.addMeasureResultLabel();
+    }
+  }, {
+    key: "addMeasureResultLabel",
+    value: function addMeasureResultLabel() {
+      const measureResult = this.measureResult();
+      if (measureResult === null) return;
+      const {
+        content,
+        position
+      } = measureResult;
+      this.measureResultLabel = new 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 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 BaseMeasureToolEditor;
+}(PolyEditor.PolyEditor);
 
 let MeasureTool = /*#__PURE__*/function (_React$Component) {
   _inherits(MeasureTool, _React$Component);
@@ -5365,7 +5396,7 @@ let MeasureTool = /*#__PURE__*/function (_React$Component) {
 }(React__default.Component);
 
 const _excluded$3 = ["isActive"];
-const Measurer = _ref => {
+const Measurer = (_ref) => {
   let {
     isActive
   } = _ref,
@@ -5383,18 +5414,18 @@ const Measurer = _ref => {
 
 var _templateObject$7, _templateObject2$7, _templateObject3$5;
 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$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), _ref => {
+const ScaleRulerBlock = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), (_ref) => {
   let {
     width
   } = _ref;
   return width + "px";
 });
-const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
+const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), (_ref2) => {
   let {
     alignEnd
   } = _ref2;
   return alignEnd ? 'flex-end' : 'center';
-}, _ref3 => {
+}, (_ref3) => {
   let {
     width
   } = _ref3;
@@ -5419,7 +5450,7 @@ const ScaleRuler = () => {
   }, currentScale >= 1000 ? currentScale / 1000 + "km" : currentScale + "m")));
 };
 
-const Zoom = _ref => {
+const Zoom = (_ref) => {
   let {
     children
   } = _ref;
@@ -5468,7 +5499,7 @@ const placementMixin$1 = function placementMixin(placement, distance, cornerSize
   return styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top' && top(distance, cornerSize), placement === 'right' && right(distance, cornerSize), placement === 'left' && left(distance, cornerSize), placement === 'bottom' && bottom(distance, cornerSize));
 };
 const corner = /*#__PURE__*/styled.css(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"])));
-const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), _ref => {
+const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), (_ref) => {
   let {
     placement,
     distance = '0.5rem',
@@ -5476,7 +5507,7 @@ const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$2 ||
     cornerSize = '0.25rem'
   } = _ref;
   return placementMixin$1(placement, distance, withArrow ? cornerSize : null);
-}, _ref2 => {
+}, (_ref2) => {
   let {
     withArrow
   } = _ref2;
@@ -5490,7 +5521,7 @@ const {
   Consumer
 } = /*#__PURE__*/React.createContext([]); // TODO I just cant read that
 
-const Tooltip = _ref => {
+const Tooltip = (_ref) => {
   let {
     features = [],
     map,
@@ -5529,7 +5560,7 @@ const Noop = () => React__default.createElement("div", {
   }
 });
 
-const DraggableMarker = _ref => {
+const DraggableMarker = (_ref) => {
   let {
     position,
     onChange,
@@ -5543,6 +5574,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;