@evergis/react 2.0.201 → 2.0.203

package/dist/components/Legend/components/LegendParameterDescription.d.ts

@@ -2,4 +2,5 @@ import { FC } from 'react';
 import { ClassificationParameterExtended } from "../../../core";
 export declare const LegendParameterDescription: FC<{
     parameter: ClassificationParameterExtended;
+    index?: number;
 }>;

package/dist/components/Legend/styled.d.ts

@@ -16,6 +16,7 @@ export declare const MapLegendControl: import("styled-components").StyledCompone
 export declare const MapLegendContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MapLegendHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MapLegendDescriptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MapLegendBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const MaximizedLegendContainer: import("styled-components").StyledComponent<"div", any, {
     isShown?: boolean | undefined;
 }, never>;

package/dist/components/Legend/types.d.ts

@@ -5,7 +5,7 @@ import { H3Symbol } from '@evergis/sgis/es/symbols/H3Symbol';
 import { Coordinates } from '@evergis/sgis/es/baseTypes';
 import { ClassificationParameterExtended, LayerAttribute, LegendValueType, ParameterByAttribute, ParameterValueWithSymbol, StyleSymbolType, SvgPointSymbol } from '../../core';
 import { SGisBrushFill, SGisImageFill, SGisPolygonSymbol, SGisPolylineSymbol } from '../../symbols';
-export declare type ClassifyParameter = 'fill.color' | 'fill.hatchColor' | 'fillColor' | 'stroke.width' | 'stroke.color' | 'strokeWidth' | 'strokeColor' | 'textBackground.fill.color' | 'background.fillColor' | 'background.strokeColor' | 'background.strokeWidth' | 'figure.fillColor' | 'figure.strokeColor' | 'figure.strokeWidth' | 'fontColor' | 'haloColor' | 'size' | 'symbol' | 'angle' | 'maskedColor' | 'endingSize' | 'beginningSize' | 'maxObjectCount' | 'gridSize' | 'selectionObjectsLimit' | 'singleObjectSymbol.figure.fillColor' | 'singleObjectSymbol.figure.strokeColor' | 'singleObjectSymbol.figure.strokeWidth' | 'singleObjectSymbol.background.fillColor' | 'singleObjectSymbol.background.strokeColor' | 'singleObjectSymbol.background.strokeWidth';
+export declare type ClassifyParameter = 'fill.color' | 'fill.hatchColor' | 'fillColor' | 'stroke.width' | 'stroke.color' | 'strokeWidth' | 'strokeColor' | 'textBackground.fill.color' | 'background.fillColor' | 'background.strokeColor' | 'background.strokeWidth' | 'figure.fillColor' | 'figure.strokeColor' | 'figure.strokeWidth' | 'fontColor' | 'haloColor' | 'size' | 'symbol' | 'angle' | 'maskedColor' | 'endingSize' | 'beginningSize' | 'maxObjectCount' | 'gridSize' | 'selectionObjectsLimit' | 'singleObjectSymbol.size' | 'singleObjectSymbol.figure.fillColor' | 'singleObjectSymbol.figure.strokeColor' | 'singleObjectSymbol.figure.strokeWidth' | 'singleObjectSymbol.background.fillColor' | 'singleObjectSymbol.background.strokeColor' | 'singleObjectSymbol.background.strokeWidth';
 export interface ParameterInfo {
     min: number;
     max: number;
@@ -43,6 +43,7 @@ export declare type LegendSectionProps = Pick<LegendProps, 'hiddenLegends' | 'to
     classified: ParameterByAttribute<ParameterValueWithSymbol>;
     attribute: LayerAttribute | null;
     index: number;
+    count?: number;
 };
 export declare type LegendSectionItem = Pick<LegendProps, 'hiddenLegends' | 'toggleHiddenLegend'> & {
     attributeType: AttributeType;

package/dist/core/style/types/symbol.d.ts

@@ -1,4 +1,4 @@
-import { CirclePointSymbolDc, ClusterSymbolDc, CompositeSymbolDc, H3GridSymbolDc, ImagePointSymbolDc, MaskedImagePointSymbolDc, PolygonSymbolDc, PolylineSymbolDc, RasterSymbolDc, SimplePolylineSymbolDc, SquarePointSymbolDc, StyleDc, SvgPointSymbolDc } from '@evergis/api';
+import { CirclePointSymbolDc, ClusterSymbolDc, CombinedPolylineSymbolDc, CompositeSymbolDc, H3GridSymbolDc, ImagePointSymbolDc, MaskedImagePointSymbolDc, PolygonSymbolDc, PolylineSymbolDc, RasterSymbolDc, SimplePolylineSymbolDc, SquarePointSymbolDc, StyleDc, SvgPointSymbolDc } from '@evergis/api';
 import { LabelType } from './label';
 import { CalculatedAble } from './parameterValue';
 import { ClientSymbol } from './utils';
@@ -43,6 +43,9 @@ export declare const isMaskedImageSymbol: (symbol: {
 export declare const isStaticImageSymbol: (symbol: {
     type?: string | undefined;
 }) => symbol is ClientSymbol<"imagePointSymbol", ImagePointSymbolDc, never>;
+export declare const isCombinedPolylineSymbol: (symbol: {
+    type?: string | undefined;
+}) => symbol is CombinedPolylineSymbolDc;
 export declare const isPolygonSymbol: (symbol: {
     type?: string | undefined;
 }) => symbol is PolygonSymbol<FillBrushType, StrokeBrushType>;

package/dist/react.cjs.development.js

@@ -676,6 +676,7 @@ const isPointSymbol = /*#__PURE__*/symbolTypeGuard('circlePointSymbol');
 const isSquareSymbol = /*#__PURE__*/symbolTypeGuard('squarePointSymbol');
 const isMaskedImageSymbol = /*#__PURE__*/symbolTypeGuard('maskedImagePointSymbol');
 const isStaticImageSymbol = /*#__PURE__*/symbolTypeGuard('imagePointSymbol');
+const isCombinedPolylineSymbol = /*#__PURE__*/symbolTypeGuard("combinedPolylineSymbol");
 const isPolygonSymbol = /*#__PURE__*/symbolTypeGuard('polygonSymbol');
 const isPolylineSymbol = /*#__PURE__*/symbolTypeGuard('polylineSymbol');
 const isSimplePolylineSymbol = /*#__PURE__*/symbolTypeGuard('simplePolylineSymbol');
@@ -2947,8 +2948,18 @@ const getMaximizedLegendValues = (attribute, param, params, classified, symbol,
 
   return [...items, other];
 };
+const classifyParamsReduce = (symbol, classifyParams, index) => {
+  return classifyParams == null ? void 0 : classifyParams.reduce((result, classified) => {
+    const param = get(symbol, classified);
+    return (param == null ? void 0 : param.type) === 'byAttribute' ? _extends({}, result, {
+      [classified]: _extends({
+        index
+      }, param)
+    }) : result;
+  }, {});
+};
 const getClassified = layerInfo => {
-  var _layerInfo$style2, _layerInfo$style2$chi;
+  var _layerInfo$style2, _layerInfo$style2$chi, _layerInfo$style4, _layerInfo$style5;
 
   if ((_layerInfo$style2 = layerInfo.style) != null && (_layerInfo$style2$chi = _layerInfo$style2.children) != null && _layerInfo$style2$chi.length) {
     var _layerInfo$style3;
@@ -2964,14 +2975,17 @@ const getClassified = layerInfo => {
   }
 
   const classifyParams = SYMBOL_CLASSIFICATION[layerInfo.geometryType];
-  return classifyParams == null ? void 0 : classifyParams.reduce((result, classified) => {
-    var _layerInfo$style4;
 
-    const param = get((_layerInfo$style4 = layerInfo.style) == null ? void 0 : _layerInfo$style4.symbol, classified);
-    return (param == null ? void 0 : param.type) === 'byAttribute' ? _extends({}, result, {
-      [classified]: param
-    }) : result;
-  }, {});
+  if ((_layerInfo$style4 = layerInfo.style) != null && _layerInfo$style4.symbol && isCombinedPolylineSymbol(layerInfo.style.symbol)) {
+    var _layerInfo$style$symb;
+
+    if (!((_layerInfo$style$symb = layerInfo.style.symbol.values) != null && _layerInfo$style$symb.length)) return undefined;
+    return layerInfo.style.symbol.values.reduce((result, polyline, index) => {
+      return _extends({}, result, classifyParamsReduce(polyline, classifyParams, index));
+    }, {});
+  }
+
+  return classifyParamsReduce((_layerInfo$style5 = layerInfo.style) == null ? void 0 : _layerInfo$style5.symbol, classifyParams);
 };
 const getSymbolStrokeWidth = symbol => {
   var _symbol$background;
@@ -3147,7 +3161,7 @@ const DEFAULT_CLUSTER_SVG = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox
 const SYMBOL_CLASSIFICATION = {
   [api.GeometryType.Polygon]: ['fill.color', 'stroke.color', 'stroke.width'],
   [api.GeometryType.Polyline]: ['stroke.color', 'stroke.width'],
-  [api.GeometryType.Point]: ['angle', 'size', 'fill.color', 'fillColor', 'background.fillColor', 'background.strokeColor', 'background.strokeWidth', 'figure.fillColor', 'figure.strokeColor', 'figure.strokeWidth', 'singleObjectSymbol.figure.fillColor', 'singleObjectSymbol.figure.strokeColor', 'singleObjectSymbol.figure.strokeWidth', 'singleObjectSymbol.background.fillColor', 'singleObjectSymbol.background.strokeColor', 'singleObjectSymbol.background.strokeWidth']
+  [api.GeometryType.Point]: ['angle', 'size', 'fill.color', 'fillColor', 'background.fillColor', 'background.strokeColor', 'background.strokeWidth', 'figure.fillColor', 'figure.strokeColor', 'figure.strokeWidth', 'singleObjectSymbol.size', 'singleObjectSymbol.figure.fillColor', 'singleObjectSymbol.figure.strokeColor', 'singleObjectSymbol.figure.strokeWidth', 'singleObjectSymbol.background.fillColor', 'singleObjectSymbol.background.strokeColor', 'singleObjectSymbol.background.strokeWidth']
 };
 const SYMBOL_LIMITS = {
   SIZE_MIN: 1,
@@ -5867,7 +5881,7 @@ const Fullscreen = () => {
   }));
 };
 
-var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38;
+var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39;
 const MapLegendDescription = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
 const ItemText = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n"])), _ref => {
   let {
@@ -5918,53 +5932,75 @@ const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObjec
 const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 1rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
 const MapLegendHeader = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: bold;\n"])));
 const MapLegendDescriptionContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.5rem;\n  font-weight: 400;\n  font-size: 0.625rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: 0;\n  opacity: ", ";\n  visibility: ", ";\n  overflow: hidden;\n  transition: opacity 0.5s, visibility 0.5s;\n"])), _ref8 => {
+const MapLegendBadge = /*#__PURE__*/styled__default.span(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-width: 0.5rem;\n  height: 0.75rem;\n  display: inline-block;\n  margin-left: 0.25rem;\n  padding: 0.125rem 0.25rem;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  text-align: center;\n"])), _ref8 => {
   let {
-    isShown
+    theme: {
+      borderRadius
+    }
   } = _ref8;
-  return isShown ? 'relative' : 'absolute';
+  return borderRadius.xSmall;
 }, _ref9 => {
   let {
-    isShown
+    theme: {
+      palette
+    }
   } = _ref9;
-  return isShown ? 1 : 0;
+  return palette.element;
 }, _ref10 => {
   let {
-    isShown
+    theme: {
+      palette
+    }
   } = _ref10;
+  return palette.textPrimary;
+});
+const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: 0;\n  opacity: ", ";\n  visibility: ", ";\n  overflow: hidden;\n  transition: opacity 0.5s, visibility 0.5s;\n"])), _ref11 => {
+  let {
+    isShown
+  } = _ref11;
+  return isShown ? 'relative' : 'absolute';
+}, _ref12 => {
+  let {
+    isShown
+  } = _ref12;
+  return isShown ? 1 : 0;
+}, _ref13 => {
+  let {
+    isShown
+  } = _ref13;
   return isShown ? 'visible' : 'hidden';
 });
-const MinimizedLegendContainer = /*#__PURE__*/styled__default(MaximizedLegendContainer)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
-const LegendHeaderButton = /*#__PURE__*/styled__default.span(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n\n  ", " {\n    padding-left: 0.75rem;\n    visibility: hidden;\n\n    :first-child {\n      padding-left: 1rem;\n    }\n\n    :last-child {\n      margin-left: 0.75rem;\n      border-left: 1px ", " solid;\n    }\n  }\n  \n  :hover {\n    ", " {\n      visibility: visible;\n    }\n  }\n"])), LegendHeaderButton, _ref11 => {
+const MinimizedLegendContainer = /*#__PURE__*/styled__default(MaximizedLegendContainer)(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
+const LegendHeaderButton = /*#__PURE__*/styled__default.span(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n\n  ", " {\n    padding-left: 0.75rem;\n    visibility: hidden;\n\n    :first-child {\n      padding-left: 1rem;\n    }\n\n    :last-child {\n      margin-left: 0.75rem;\n      border-left: 1px ", " solid;\n    }\n  }\n  \n  :hover {\n    ", " {\n      visibility: visible;\n    }\n  }\n"])), LegendHeaderButton, _ref14 => {
   let {
     theme: {
       palette
     }
-  } = _ref11;
+  } = _ref14;
   return palette.elementDeep;
 }, LegendHeaderButton);
-const MapLegendSectionItems = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "px;\n  overflow: ", ";\n  transition: height 0.5s;\n"])), _ref12 => {
+const MapLegendSectionItems = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "px;\n  overflow: ", ";\n  transition: height 0.5s;\n"])), _ref15 => {
   let {
     minHeight,
     maxHeight,
     isExpanded
-  } = _ref12;
+  } = _ref15;
   return isExpanded ? (maxHeight || 0) + 4 : minHeight;
-}, _ref13 => {
+}, _ref16 => {
   let {
     isExpanded
-  } = _ref13;
+  } = _ref16;
   return isExpanded ? 'none' : 'hidden';
 });
-const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__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 MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__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(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  display: flex;\n  align-items: flex-end;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: '';\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
+  return styled.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  display: flex;\n  align-items: flex-end;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: '';\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
 };
 
 const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
@@ -5972,80 +6008,80 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
     value = 0;
   }
 
-  return styled.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n\n  :first-child,\n  :last-child {\n    height: auto;\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
+  return styled.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n\n  :first-child,\n  :last-child {\n    height: auto;\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
 };
 
-const StrokeColorLegendItemMixin = /*#__PURE__*/styled.css(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), _ref14 => {
+const StrokeColorLegendItemMixin = /*#__PURE__*/styled.css(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
+const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  color: rgba(48, 69, 79, 0.65);\n  opacity: ", ";\n\n  ", "\n\n  ", "\n"])), _ref17 => {
   let {
     parameter
-  } = _ref14;
+  } = _ref17;
   return isParameterType(['strokeColor', 'stroke.color'], parameter) ? 0.25 : 1;
-}, _ref15 => {
+}, _ref18 => {
   let {
     value
-  } = _ref15;
+  } = _ref18;
   return typeof value === 'number' ? 'none' : value;
-}, _ref16 => {
+}, _ref19 => {
   let {
     isHidden
-  } = _ref16;
+  } = _ref19;
   return isHidden ? 0.28 : 1;
-}, _ref17 => {
+}, _ref20 => {
   let {
     value,
     parameter
-  } = _ref17;
+  } = _ref20;
   return isParameterType('size', parameter) && SizeLegendItemMixin(value);
-}, _ref18 => {
+}, _ref21 => {
   let {
     value,
     parameter
-  } = _ref18;
+  } = _ref21;
   return isParameterType(['strokeWidth', 'stroke.width'], parameter) && StrokeWidthLegendItemMixin(value);
 });
-const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex: none;\n  position: relative;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
-const SizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject23 || (_templateObject23 = /*#__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(_templateObject24 || (_templateObject24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  flex-direction: column;\n  width: auto;\n\n  ", " {\n    width: calc(100% - 2rem);\n    margin-left: 0;\n  }\n"])), MapLegendOther);
-const SizeMinimizedLegend = /*#__PURE__*/styled__default.div(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin: 0.5rem 0 0.25rem;\n"])));
-const SizeMinimizedLegendSymbol = /*#__PURE__*/styled__default.div(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
-const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 9.75rem;\n  font-size: 0.75rem;\n"])));
-const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject30 || (_templateObject30 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
-const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n\n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), _ref19 => {
+const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject23 || (_templateObject23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex: none;\n  position: relative;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
+const SizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject24 || (_templateObject24 = /*#__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(_templateObject25 || (_templateObject25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  flex-direction: column;\n  width: auto;\n\n  ", " {\n    width: calc(100% - 2rem);\n    margin-left: 0;\n  }\n"])), MapLegendOther);
+const SizeMinimizedLegend = /*#__PURE__*/styled__default.div(_templateObject26 || (_templateObject26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin: 0.5rem 0 0.25rem;\n"])));
+const SizeMinimizedLegendSymbol = /*#__PURE__*/styled__default.div(_templateObject27 || (_templateObject27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n"])));
+const SizeMinimizedLegendLabel = /*#__PURE__*/styled__default.div(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 9.75rem;\n  font-size: 0.75rem;\n"])));
+const SizeMinimizedLegendDown = /*#__PURE__*/styled__default.div(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const SizeMinimizedLegendUp = /*#__PURE__*/styled__default(SizeMinimizedLegendDown)(_templateObject30 || (_templateObject30 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+const SingleSizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 4rem;\n  margin-right: 0.75rem;\n\n  ", ":after {\n    margin: 0 auto;\n  }\n"])), MapLegendItem);
+const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  width: 2rem;\n  height: auto;\n  margin: 0;\n  ", "\n\n  ", " {\n    position: relative;\n    top: 0;\n    left: 0;\n    display: flex;\n    align-content: center;\n    justify-content: center;\n    margin: 0;\n    height: auto;\n    width: auto;\n\n    ", "\n  }\n"])), _ref22 => {
   let {
     isSize
-  } = _ref19;
+  } = _ref22;
   return isSize && SingleSizeLegendItemsMixin;
-}, MapLegendItem, _ref20 => {
+}, MapLegendItem, _ref23 => {
   let {
     parameter
-  } = _ref20;
+  } = _ref23;
   return isParameterType(['strokeColor', 'stroke.color'], parameter) && StrokeColorLegendItemMixin;
 });
-const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject32 || (_templateObject32 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref21 => {
+const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject33 || (_templateObject33 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref24 => {
   let {
     isSize
-  } = _ref21;
+  } = _ref24;
   return isSize && SizeLegendItemsMixin;
-}, _ref22 => {
+}, _ref25 => {
   let {
     isStrokeWidth
-  } = _ref22;
+  } = _ref25;
   return isStrokeWidth && StrokeWidthLegendItemsMixin;
-}, _ref23 => {
+}, _ref26 => {
   let {
     isSingle
-  } = _ref23;
+  } = _ref26;
   return isSingle && SingleLegendItemsMixin;
 });
-const MapLegendItemsContainer = /*#__PURE__*/styled__default.div(_templateObject33 || (_templateObject33 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n\n  ", " {\n    :first-child {\n      border-top-left-radius: 0.125rem;\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    :last-child {\n      border-top-right-radius: 0.125rem;\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n"])), MapLegendItem);
-const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject35 || (_templateObject35 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: calc(100% - 1.25rem);\n\n  div {\n    flex: 1;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    :first-child {\n      margin-right: 0.5rem;\n    }\n\n    :last-child {\n      margin-left: 0.5rem;\n      text-align: right;\n    }\n  }\n"])));
-const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject36 || (_templateObject36 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject37 || (_templateObject37 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1fb3aa;\n"])));
-const ClusterLegendContainer = /*#__PURE__*/styled__default.div(_templateObject38 || (_templateObject38 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: -0.9rem;\n  transform: scale(0.5);\n"])));
+const MapLegendItemsContainer = /*#__PURE__*/styled__default.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n\n  ", " {\n    :first-child {\n      border-top-left-radius: 0.125rem;\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    :last-child {\n      border-top-right-radius: 0.125rem;\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n"])), MapLegendItem);
+const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject35 || (_templateObject35 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject36 || (_templateObject36 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: calc(100% - 1.25rem);\n\n  div {\n    flex: 1;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    :first-child {\n      margin-right: 0.5rem;\n    }\n\n    :last-child {\n      margin-left: 0.5rem;\n      text-align: right;\n    }\n  }\n"])));
+const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject37 || (_templateObject37 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject38 || (_templateObject38 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1fb3aa;\n"])));
+const ClusterLegendContainer = /*#__PURE__*/styled__default.div(_templateObject39 || (_templateObject39 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: -0.9rem;\n  transform: scale(0.5);\n"])));
 
 const useSvgSymbol = (symbol, skipOffset, isClassified) => {
   const SVGWrapperRefElement = React.useRef(null);
@@ -6414,12 +6450,13 @@ const LegendChildren = _ref => {
 
 const LegendParameterDescription = _ref => {
   let {
-    parameter
+    parameter,
+    index
   } = _ref;
   const isSize = isParameterType("size", parameter);
   const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
   const isStrokeColor = isParameterType(["strokeColor", "stroke.color"], parameter);
-  return React__default.createElement(MapLegendDescriptionContainer, null, isStrokeWidth || isStrokeColor ? isStrokeWidth ? "Толщина обводки" : "Цвет обводки" : isSize ? "Размер знака" : "Цвет символа");
+  return React__default.createElement(MapLegendDescriptionContainer, null, isStrokeWidth || isStrokeColor ? isStrokeWidth ? "Толщина обводки" : "Цвет обводки" : isSize ? "Размер знака" : "Цвет символа", !!index && React__default.createElement(MapLegendBadge, null, index));
 };
 
 const getValueFromLegendTitle = (title, minOrMax) => {
@@ -6532,6 +6569,7 @@ const MaximizedLegend = _ref => {
     } = _ref2;
     if (!symbol) return null;
     const isClusterFillColor$1 = isClusterFillColor(symbol, parameter);
+    const value = getParameterValue(parameterValue == null ? void 0 : (_parameterValue$value = parameterValue.values[index]) == null ? void 0 : _parameterValue$value.value) || (parameterValue == null ? void 0 : parameterValue.defaultValue);
     return React__default.createElement(ClassifiedItem, {
       key: sectionIndex + title + index,
       isHidden: isHiddenLegend(hiddenCondition, hiddenLegends),
@@ -6546,7 +6584,7 @@ const MaximizedLegend = _ref => {
     }, React__default.createElement(MapLegendItem, {
       key: "" + title + index,
       title: title,
-      value: (parameterValue == null ? void 0 : (_parameterValue$value = parameterValue.values[(parameterValue == null ? void 0 : parameterValue.values.length) - index - 1]) == null ? void 0 : _parameterValue$value.value) || (parameterValue == null ? void 0 : parameterValue.defaultValue),
+      value: value,
       parameter: parameter
     })) : React__default.createElement(SymbolContainer, null, React__default.createElement(LegendSymbolRenderer, {
       index: index,
@@ -6578,12 +6616,14 @@ const LegendSection = _ref => {
     goToClassification,
     attribute,
     formatValue,
-    index
+    index,
+    count
   } = _ref;
   const [isExpanded, toggleExpanded] = useToggle();
   const [maxRef, maxNode] = useNode();
   const [minRef, minNode] = useNode();
   if (!layerName || !attribute) return null;
+  const currentSymbol = isCombinedPolylineSymbol(symbol) ? symbol.values[index] : symbol;
   return React__default.createElement(MapLegendSectionContainer, {
     hasHiddenLegends: !!(hiddenLegends != null && (_hiddenLegends$layerN = hiddenLegends[layerName]) != null && _hiddenLegends$layerN.length)
   }, React__default.createElement(MapLegendHeader, null, attribute.alias || attribute.name, React__default.createElement(LegendHeaderButtons, {
@@ -6592,7 +6632,8 @@ const LegendSection = _ref => {
     clearHiddenLegends: clearHiddenLegends,
     goToClassification: goToClassification
   })), React__default.createElement(LegendParameterDescription, {
-    parameter: parameter
+    parameter: parameter,
+    index: count && index !== undefined ? count - index : 0
   }), React__default.createElement(MapLegendSectionItems, {
     minHeight: minNode == null ? void 0 : minNode.offsetHeight,
     maxHeight: maxNode == null ? void 0 : maxNode.offsetHeight,
@@ -6601,13 +6642,13 @@ const LegendSection = _ref => {
     innerRef: maxRef,
     isShown: isExpanded,
     layerName: layerName,
-    symbol: symbol,
+    symbol: currentSymbol,
     hiddenLegends: hiddenLegends == null ? void 0 : hiddenLegends[layerName],
     toggleHiddenLegend: toggleHiddenLegend,
     parameter: parameter,
     attributeType: attribute.type,
     index: index,
-    values: getMaximizedLegendValues(attribute, parameter, parameters, classified, symbol, formatValue, index, 'Другое')
+    values: getMaximizedLegendValues(attribute, parameter, parameters, classified, currentSymbol, formatValue, index, 'Другое')
   }), React__default.createElement(MinimizedLegend, {
     innerRef: minRef,
     isShown: !isExpanded,
@@ -6645,28 +6686,58 @@ const Legend = /*#__PURE__*/React.memo(_ref => {
   }
 
   const attributes = getLayerAttributes(layerInfo.layerDefinition);
-  const classified = getClassified(layerInfo);
-  if (!classified) return null;
-  const parameters = Object.keys(classified);
-  return React__default.createElement(MapLegendContainer, null, Object.keys(classified).map((param, index) => {
-    var _layerInfo$style2, _classified$param, _classified$param$val;
+  const renderItems = React.useMemo(() => {
+    var _layerInfo$style2, _layerInfo$style3;
 
-    return React__default.createElement(LegendSection, Object.assign({
-      key: index,
+    const parameters = SYMBOL_CLASSIFICATION[layerInfo.geometryType];
+    const props = {
       layerName: layerInfo.name,
       symbol: (_layerInfo$style2 = layerInfo.style) == null ? void 0 : _layerInfo$style2.symbol,
-      attribute: getConditionAttribute(attributes, (_classified$param = classified[param]) == null ? void 0 : (_classified$param$val = _classified$param.values[0]) == null ? void 0 : _classified$param$val.condition),
-      classified: classified[param],
-      parameter: param,
       parameters: parameters,
-      index: index,
       formatValue: formatValue,
       hiddenLegends: hiddenLegends,
       toggleHiddenLegend: toggleHiddenLegend,
       clearHiddenLegends: clearHiddenLegends,
       goToClassification: goToClassification
-    }, rest));
-  }));
+    };
+
+    if ((_layerInfo$style3 = layerInfo.style) != null && _layerInfo$style3.symbol && isCombinedPolylineSymbol(layerInfo.style.symbol)) {
+      var _layerInfo$style4, _layerInfo$style4$sym, _layerInfo$style4$sym2;
+
+      const values = (_layerInfo$style4 = layerInfo.style) == null ? void 0 : (_layerInfo$style4$sym = _layerInfo$style4.symbol) == null ? void 0 : (_layerInfo$style4$sym2 = _layerInfo$style4$sym.values) == null ? void 0 : _layerInfo$style4$sym2.reduce((result, symbol, index) => {
+        return [classifyParamsReduce(symbol, parameters, index), ...result];
+      }, []);
+      return React__default.createElement(React__default.Fragment, null, values == null ? void 0 : values.map((value, index) => Object.keys(value).map((param, keyIndex) => {
+        var _item$values$;
+
+        const item = value[param];
+        return React__default.createElement(LegendSection, Object.assign({
+          key: [keyIndex, index].join("-"),
+          index: item == null ? void 0 : item.index,
+          count: values == null ? void 0 : values.length,
+          attribute: getConditionAttribute(attributes, item == null ? void 0 : (_item$values$ = item.values[0]) == null ? void 0 : _item$values$.condition),
+          parameter: param,
+          classified: item
+        }, props, rest));
+      })));
+    }
+
+    const classified = getClassified(layerInfo);
+    if (!classified) return null;
+    return React__default.createElement(React__default.Fragment, null, Object.keys(classified).map((param, keyIndex) => {
+      var _item$values$2;
+
+      const item = classified[param];
+      return React__default.createElement(LegendSection, Object.assign({
+        key: [keyIndex, item.index].join("-"),
+        index: item.index,
+        attribute: getConditionAttribute(attributes, item == null ? void 0 : (_item$values$2 = item.values[0]) == null ? void 0 : _item$values$2.condition),
+        parameter: param,
+        classified: item
+      }, props, rest));
+    }));
+  }, [layerInfo, formatValue, hiddenLegends, toggleHiddenLegend, clearHiddenLegends, goToClassification]);
+  return React__default.createElement(MapLegendContainer, null, renderItems);
 });
 
 const Map = _ref => {
@@ -7148,6 +7219,7 @@ exports.LineMiterRender = LineMiterRender;
 exports.Map = Map;
 exports.MapControl = MapControl;
 exports.MapControls = MapControls;
+exports.MapLegendBadge = MapLegendBadge;
 exports.MapLegendContainer = MapLegendContainer;
 exports.MapLegendControl = MapLegendControl;
 exports.MapLegendDescription = MapLegendDescription;
@@ -7219,6 +7291,7 @@ exports.adjustSymbol = adjustSymbol;
 exports.applyParameterValue = applyParameterValue;
 exports.checkLayerHasLegend = checkLayerHasLegend;
 exports.clamp = clamp;
+exports.classifyParamsReduce = classifyParamsReduce;
 exports.convertSvgToBase64 = convertSvgToBase64;
 exports.copyRings = copyRings;
 exports.createCompositeSymbol = createCompositeSymbol;
@@ -7286,6 +7359,7 @@ exports.isCalculatedParameter = isCalculatedParameter;
 exports.isCircleLineMiter = isCircleLineMiter;
 exports.isClusterFillColor = isClusterFillColor;
 exports.isClusterSymbol = isClusterSymbol;
+exports.isCombinedPolylineSymbol = isCombinedPolylineSymbol;
 exports.isCompositeSymbol = isCompositeSymbol;
 exports.isDashedBrush = isDashedBrush;
 exports.isFilledLineMitter = isFilledLineMitter;