@dartcom/ui-kit 3.7.1 → 3.7.2

package/dist/index.cjs

@@ -43870,586 +43870,191 @@ const getParkingLineLayers = (source) => {
     return layers;
 };
 
-const getLayerName = ({ id, data: { source, layer }, }) => {
-    const layerName = `${id}-${source}-${layer}`;
-    return layerName;
+const getBuiltupAreaLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: '"MapAdminBuiltupArea"',
+    };
+    const layer = {
+        id: uuid(),
+        data,
+        draw: {
+            polygons: {
+                color: '#CFC8C8',
+            },
+        },
+    };
+    layers.push(layer);
+    return layers;
 };
-const setLayerOrder = ({ layer, order, }) => {
-    const cloneLayer = structuredClone(layer);
-    const { draw, sublayers } = cloneLayer;
-    if (draw) {
-        const { points, lines, polygons, text, styles } = draw;
-        if (points) {
-            draw.points = {
-                ...structuredClone(points),
-                order,
+
+const getPointAddressLayers = (source) => {
+    const layer = {
+        id: uuid(),
+        data: {
+            source,
+            layer: '"PointAddress"',
+            minzoom: 15,
+        },
+        draw: {
+            text: {
+                interactive: true,
+                text_source: 'address',
+                font: {
+                    fill: 'black',
+                    size: '12px',
+                },
+            },
+        },
+    };
+    return [layer];
+};
+
+const text_source = `function() {
+  const { poi_name, cat_id } = feature;
+
+  switch (+cat_id) {
+    case 4100: {
+      const text = poi_name.replaceAll(/(Метро-|Станция-|МЦД-)/g, "");
+
+      return text;
+    }
+
+    default: {
+      return poi_name;
+    }
+  }
+}`;
+const catIds = [
+    3578, 4013, 4100, 5400, 5511, 5512, 5540, 5541, 5800, 5813, 5999, 6000, 7011,
+    7389, 7832, 7929, 7990, 8060, 8410, 9517, 9530, 9565, 9583, 9718, 9992,
+];
+
+const getDefaultPOI = (cat_id) => {
+    const defaultPOI = {};
+    switch (cat_id) {
+        case 4100: {
+            defaultPOI[`_${cat_id}-metro`] = {
+                filter: `function() {
+          const { poi_name, cat_id } = feature;
+
+          const isMetro = poi_name.startsWith('Метро-');
+          const isStation = poi_name.startsWith('Станция-');
+
+          const isCatId = +cat_id === ${cat_id};
+
+          const isFilter = isCatId && (isMetro || isStation);
+
+          return isFilter;
+        }`,
+                draw: {
+                    points: getPOITypeLayer(`POI_${cat_id}(metro)`),
+                },
             };
-        }
-        if (lines) {
-            draw.lines = {
-                ...structuredClone(lines),
-                order,
+            defaultPOI[`_${cat_id}-diameter`] = {
+                filter: `function() {
+          const { cat_id, poi_name } = feature;
+
+          const isDiameter = poi_name.startsWith('МЦД-');
+
+          const isCatId = +cat_id === ${cat_id};
+
+          const isFilter = isCatId && isDiameter;
+
+          return isFilter;
+        }`,
+                draw: {
+                    points: getPOITypeLayer(`POI_${cat_id}(diameter)`),
+                },
             };
+            break;
         }
-        if (polygons) {
-            draw.polygons = {
-                ...structuredClone(polygons),
-                order,
+        case 9530: {
+            defaultPOI[`_${cat_id}-mail`] = {
+                filter: `function() {
+          const { cat_id, poi_name = '' } = feature;
+
+          const isCatId = +cat_id === ${cat_id};
+
+          const isMail = poi_name.startsWith('Почта');
+
+          const isFilter = isCatId && isMail;
+
+          return isFilter;
+        }`,
+                draw: {
+                    points: getPOITypeLayer(`POI_${cat_id}(Mail)`),
+                },
+            };
+            defaultPOI[`_${cat_id}-delivery`] = {
+                filter: `function() {
+          const { cat_id, poi_name = '' } = feature;
+
+          const isCatId = +cat_id === ${cat_id};
+          
+          const isMail = poi_name.startsWith('Почта');
+
+          const isFilter = isCatId && !isMail;
+
+          return isFilter;
+        }`,
+                draw: {
+                    points: getPOITypeLayer(`POI_${cat_id}(Delivery)`),
+                },
             };
+            break;
         }
-        if (text) {
-            draw.text = {
-                ...structuredClone(text),
-                order,
+        case 9992: {
+            const subcat = {
+                mosque: 1,
+                church: 2,
+                temple: 3,
+                davidStar: 4,
+                mortar: 6,
             };
+            Object.entries(subcat).forEach(([subcat_name, subcat_id]) => {
+                defaultPOI[`_${cat_id}-${subcat_name}`] = {
+                    filter: `function() {
+            const { cat_id, subcat_id } = feature;
+
+            const isCatId = +cat_id === ${cat_id};
+            const isSubcatId = +subcat_id === ${subcat_id};
+
+            const isFilter = isCatId && isSubcatId;
+
+            return isFilter;
+          }`,
+                    draw: {
+                        points: getPOITypeLayer(`POI_${cat_id}(${subcat_name})`),
+                    },
+                };
+            });
+            break;
         }
-        if (styles) {
-            draw.styles = Object.entries(styles).reduce((accum, [name, style]) => ({
-                ...accum,
-                [name]: {
-                    ...structuredClone(style),
-                    order,
+        default: {
+            defaultPOI[`_${cat_id}`] = {
+                filter: `function {
+          const { cat_id } = feature;
+
+          const isFilter = +cat_id === ${cat_id};
+
+          return isFilter;
+        }`,
+                draw: {
+                    points: getPOITypeLayer(`POI_${cat_id}`),
                 },
-            }), {});
+            };
         }
-        cloneLayer.draw = structuredClone(draw);
-    }
-    if (sublayers) {
-        Object.entries(sublayers).forEach(([name, sublayer]) => {
-            if (sublayer) {
-                const { draw } = sublayer;
-                if (draw) {
-                    const { points, lines, polygons } = draw;
-                    if (points) {
-                        points.order = order;
-                        draw.points = points;
-                    }
-                    if (lines) {
-                        lines.order = order;
-                        draw.lines = lines;
-                    }
-                    if (polygons) {
-                        polygons.order = order;
-                        draw.polygons = polygons;
-                    }
-                    sublayer.draw = structuredClone(draw);
-                }
-                sublayers[name] = structuredClone(sublayer);
-            }
-        });
-        cloneLayer.sublayers = structuredClone(sublayers);
     }
-    return cloneLayer;
+    return defaultPOI;
 };
-
-const useGetLeafletLayer = () => {
-    const { instance: { isValidApiKey }, } = GlobalConfig;
-    const [layer, setLayer] = React__namespace.useState(null);
-    const [scene, setScene] = React__namespace.useState(null);
-    const [config, setConfig] = React__namespace.useState(null);
-    const getLeafletLayer = () => {
-        Promise.resolve().then(function () { return tangram_min; }).then(() => {
-            if (window.Tangram) {
-                const leafletLayer = window.Tangram.leafletLayer({
-                    scene: sceneTiles,
-                });
-                const { scene } = leafletLayer;
-                setLayer(leafletLayer);
-                setScene(scene);
-            }
-        });
-    };
-    const addSource = React__namespace.useCallback((sourceConfig) => {
-        if (!scene) {
-            console.warn('Scene не инициализирована');
-            return;
-        }
-        if (!config) {
-            console.warn('Config не инициализирована');
-            return;
-        }
-        const { name } = sourceConfig;
-        config.sources[name] = structuredClone(sourceConfig);
-        scene.updateConfig({ rebuild: true });
-        return getSources();
-    }, [scene, config]);
-    const getSource = React__namespace.useCallback((sourceName) => {
-        if (!config) {
-            console.warn('Config не инициализирована');
-            return;
-        }
-        return structuredClone(config.sources[sourceName]);
-    }, [config]);
-    const updateSource = React__namespace.useCallback((sourceName, newUrl) => {
-        if (!scene) {
-            console.warn('Scene не инициализирована');
-            return;
-        }
-        if (!config) {
-            console.warn('Config не инициализирована');
-            return;
-        }
-        config.sources[sourceName].url = newUrl;
-        scene.updateConfig({ rebuild: true });
-        return getSources();
-    }, [config, scene]);
-    const addLayer = React__namespace.useCallback((layer) => {
-        if (!scene) {
-            console.warn('Scene не инициализирован');
-            return;
-        }
-        if (!config) {
-            console.warn('Config не инициализирован');
-            return;
-        }
-        const order = getLayers().length + 1;
-        const layerWithOrder = setLayerOrder({
-            layer,
-            order,
-        });
-        const layerName = getLayerName(layerWithOrder);
-        const { sublayers = {}, draw } = layerWithOrder;
-        if (draw) {
-            const { styles = {} } = draw;
-            if (styles) {
-                layerWithOrder.draw = {
-                    ...structuredClone(draw),
-                    ...structuredClone(styles),
-                };
-            }
-        }
-        config.layers[layerName] = {
-            ...structuredClone(layerWithOrder),
-            ...structuredClone(sublayers),
-        };
-        scene.updateConfig({ rebuild: true });
-        return getLayers();
-    }, [config, scene]);
-    const removeLayer = React__namespace.useCallback((layer) => {
-        if (!scene) {
-            console.warn('Scene не инициализирован');
-            return;
-        }
-        if (!config) {
-            console.warn('Config не инициализирован');
-            return;
-        }
-        const layerName = getLayerName(layer);
-        if (config.layers[layerName]) {
-            delete config.layers[layerName];
-        }
-        scene.updateConfig({ rebuild: true });
-        return getLayers();
-    }, [config, scene]);
-    const addStyle = React__namespace.useCallback(({ name, style }) => {
-        if (!scene) {
-            console.warn('Scene не инициализирована');
-            return;
-        }
-        if (!config) {
-            console.warn('Config не инициализирована');
-            return;
-        }
-        config.styles[name] = structuredClone(style);
-        scene.updateConfig({ rebuild: true });
-    }, [config, scene]);
-    const getLayerVisibility = React__namespace.useCallback((layer) => {
-        if (!config) {
-            console.warn('Config не инициализирована');
-            return;
-        }
-        const layerName = getLayerName(layer);
-        const { visible: layerVisibility } = config.layers[layerName];
-        return layerVisibility;
-    }, [config]);
-    const toggleLayerVisibility = React__namespace.useCallback(({ layer, visible }) => {
-        if (!scene) {
-            console.warn('Scene не инициализирована');
-            return;
-        }
-        if (!config) {
-            console.warn('Config не инициализирована');
-            return;
-        }
-        const layerName = getLayerName(layer);
-        config.layers[layerName].visible = visible;
-        scene.updateConfig();
-        return getLayerVisibility(layer);
-    }, [config, scene]);
-    const getLayers = React__namespace.useCallback(() => {
-        if (!config)
-            return [];
-        const { layers } = config;
-        return Object.keys(layers);
-    }, [config]);
-    const removeLayers = React__namespace.useCallback(() => {
-        if (!config)
-            return [];
-        const { layers } = config;
-        Object.values(layers).forEach(removeLayer);
-    }, [config]);
-    const getSources = React__namespace.useCallback(() => {
-        if (!config)
-            return [];
-        const { sources } = config;
-        return Object.keys(sources);
-    }, [config]);
-    React__namespace.useEffect(() => {
-        if (isValidApiKey) {
-            getLeafletLayer();
-        }
-        return () => {
-            setLayer(null);
-            setScene(null);
-            setConfig(null);
-        };
-    }, [isValidApiKey]);
-    React__namespace.useEffect(() => {
-        if (scene) {
-            scene.subscribe({
-                load: ({ config }) => {
-                    setConfig(config);
-                },
-            });
-        }
-    }, [scene]);
-    React__namespace.useEffect(() => {
-        addStyle({
-            name: 'space-tile',
-            style: {
-                shaders: {
-                    defines: {
-                        TILE_SCALE: 0.0002445,
-                        'NORMALIZED_SHORT(x)': '(x * 32767.)',
-                    },
-                    blocks: {
-                        global: `
-              varying vec3 v_pos;
-              vec2 getTileCoords() {
-                return fract(v_pos.xy);
-              }
-            `,
-                        position: `
-              v_pos = modelPosition().xyz;
-            `,
-                    },
-                },
-            },
-        });
-        addStyle({
-            name: 'tools-aastep',
-            style: {
-                shaders: {
-                    extensions: 'OES_standard_derivatives',
-                    blocks: {
-                        global: `
-              float aastep(float threshold, float value) {
-                #ifdef TANGRAM_FRAGMENT_SHADER
-                  #ifdef TANGRAM_EXTENSION_OES_standard_derivatives
-                    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
-                      return smoothstep(threshold-afwidth, threshold+afwidth, value);
-                  #else
-                    return step(threshold, value);
-                  #endif
-                #else
-                  return step(threshold, value);
-                #endif
-              }
-            `,
-                    },
-                },
-            },
-        });
-        addStyle({
-            name: 'pattern-diagonal-grid',
-            style: {
-                mix: ['space-tile', 'tools-aastep'],
-                shaders: {
-                    blocks: {
-                        global: `
-              float DiagonalGrid(float scale, float lineWidth) {
-                vec2 st = getTileCoords() * scale;
-
-                float d1 = mod(st.x + st.y, 1.0);
-                float line1 = aastep(lineWidth, d1) * aastep(1.0 - lineWidth, d1);
-
-                float d2 = mod(st.x - st.y, 1.0);
-                float line2 = aastep(lineWidth, d2) * aastep(1.0 - lineWidth, d2);
-
-                return max(line1, line2);
-              } 
-            `,
-                    },
-                },
-            },
-        });
-        addStyle({
-            name: 'diagonal-grid',
-            style: {
-                mix: 'pattern-diagonal-grid',
-                blend: 'overlay',
-                base: 'polygons',
-                shaders: {
-                    blocks: {
-                        color: `
-              float grid = DiagonalGrid(12.0, 0.08);
-
-              color.a = grid;
-            `,
-                    },
-                },
-            },
-        });
-        addStyle({
-            name: 'zebra_crossing',
-            style: {
-                base: 'polygons',
-                lighting: false,
-                shaders: {
-                    attributes: {
-                        a_angle: {
-                            type: 'float',
-                            default: 0.0,
-                        },
-                    },
-                    uniforms: {
-                        u_stripe_width: 1,
-                    },
-                    blocks: {
-                        filter: `
-              vec3 pos = worldPosition().xyz;
-
-              float ang = radians(a_angle);
-
-              vec2 dir = vec2(sin(ang), cos(ang));
-
-              float positionAlongLine = dot(pos.xy, dir);
-
-              float stripe = step(1.0, mod(positionAlongLine / u_stripe_width, 2.0));
-
-              color.rgb = mix(vec3(1.0, 1.0, 1.0), vec3(1.0, 0.8, 0.0), stripe);
-              
-              color.a = 1.0;
-            `,
-                    },
-                },
-            },
-        });
-    }, [addStyle]);
-    React__namespace.useEffect(() => {
-        Object.values(exports.TangramSourceNames).forEach((name) => {
-            const url = sourceUrl[name];
-            addSource({
-                tile_size,
-                name,
-                url,
-                type: 'MVT',
-            });
-        });
-    }, [addSource]);
-    return {
-        layer,
-        scene,
-        config,
-        addSource,
-        getSource,
-        updateSource,
-        addLayer,
-        removeLayer,
-        addStyle,
-        getLayerVisibility,
-        toggleLayerVisibility,
-        getSources,
-        getLayers,
-        removeLayers,
-    };
-};
-
-const getBuiltupAreaLayers = (source) => {
-    const layers = [];
-    const data = {
-        source,
-        layer: '"MapAdminBuiltupArea"',
-    };
-    const layer = {
-        id: uuid(),
-        data,
-        draw: {
-            polygons: {
-                color: '#CFC8C8',
-            },
-        },
-    };
-    layers.push(layer);
-    return layers;
-};
-
-const getPointAddressLayers = (source) => {
-    const layer = {
-        id: uuid(),
-        data: {
-            source,
-            layer: '"PointAddress"',
-            minzoom: 15,
-        },
-        draw: {
-            text: {
-                interactive: true,
-                text_source: 'address',
-                font: {
-                    fill: 'black',
-                    size: '12px',
-                },
-            },
-        },
-    };
-    return [layer];
-};
-
-const text_source = `function() {
-  const { poi_name, cat_id } = feature;
-
-  switch (+cat_id) {
-    case 4100: {
-      const text = poi_name.replaceAll(/(Метро-|Станция-|МЦД-)/g, "");
-
-      return text;
-    }
-
-    default: {
-      return poi_name;
-    }
-  }
-}`;
-const catIds = [
-    3578, 4013, 4100, 5400, 5511, 5512, 5540, 5541, 5800, 5813, 5999, 6000, 7011,
-    7389, 7832, 7929, 7990, 8060, 8410, 9517, 9530, 9565, 9583, 9718, 9992,
-];
-
-const getDefaultPOI = (cat_id) => {
-    const defaultPOI = {};
-    switch (cat_id) {
-        case 4100: {
-            defaultPOI[`_${cat_id}-metro`] = {
-                filter: `function() {
-          const { poi_name, cat_id } = feature;
-
-          const isMetro = poi_name.startsWith('Метро-');
-          const isStation = poi_name.startsWith('Станция-');
-
-          const isCatId = +cat_id === ${cat_id};
-
-          const isFilter = isCatId && (isMetro || isStation);
-
-          return isFilter;
-        }`,
-                draw: {
-                    points: getPOITypeLayer(`POI_${cat_id}(metro)`),
-                },
-            };
-            defaultPOI[`_${cat_id}-diameter`] = {
-                filter: `function() {
-          const { cat_id, poi_name } = feature;
-
-          const isDiameter = poi_name.startsWith('МЦД-');
-
-          const isCatId = +cat_id === ${cat_id};
-
-          const isFilter = isCatId && isDiameter;
-
-          return isFilter;
-        }`,
-                draw: {
-                    points: getPOITypeLayer(`POI_${cat_id}(diameter)`),
-                },
-            };
-            break;
-        }
-        case 9530: {
-            defaultPOI[`_${cat_id}-mail`] = {
-                filter: `function() {
-          const { cat_id, poi_name = '' } = feature;
-
-          const isCatId = +cat_id === ${cat_id};
-
-          const isMail = poi_name.startsWith('Почта');
-
-          const isFilter = isCatId && isMail;
-
-          return isFilter;
-        }`,
-                draw: {
-                    points: getPOITypeLayer(`POI_${cat_id}(Mail)`),
-                },
-            };
-            defaultPOI[`_${cat_id}-delivery`] = {
-                filter: `function() {
-          const { cat_id, poi_name = '' } = feature;
-
-          const isCatId = +cat_id === ${cat_id};
-          
-          const isMail = poi_name.startsWith('Почта');
-
-          const isFilter = isCatId && !isMail;
-
-          return isFilter;
-        }`,
-                draw: {
-                    points: getPOITypeLayer(`POI_${cat_id}(Delivery)`),
-                },
-            };
-            break;
-        }
-        case 9992: {
-            const subcat = {
-                mosque: 1,
-                church: 2,
-                temple: 3,
-                davidStar: 4,
-                mortar: 6,
-            };
-            Object.entries(subcat).forEach(([subcat_name, subcat_id]) => {
-                defaultPOI[`_${cat_id}-${subcat_name}`] = {
-                    filter: `function() {
-            const { cat_id, subcat_id } = feature;
-
-            const isCatId = +cat_id === ${cat_id};
-            const isSubcatId = +subcat_id === ${subcat_id};
-
-            const isFilter = isCatId && isSubcatId;
-
-            return isFilter;
-          }`,
-                    draw: {
-                        points: getPOITypeLayer(`POI_${cat_id}(${subcat_name})`),
-                    },
-                };
-            });
-            break;
-        }
-        default: {
-            defaultPOI[`_${cat_id}`] = {
-                filter: `function {
-          const { cat_id } = feature;
-
-          const isFilter = +cat_id === ${cat_id};
-
-          return isFilter;
-        }`,
-                draw: {
-                    points: getPOITypeLayer(`POI_${cat_id}`),
-                },
-            };
-        }
-    }
-    return defaultPOI;
-};
-const getPOITypeLayer = (texture) => {
-    const typeLayer = {
-        texture,
-        sprite: 'base',
-        size: '20px',
-        placement: 'midpoint',
+const getPOITypeLayer = (texture) => {
+    const typeLayer = {
+        texture,
+        sprite: 'base',
+        size: '20px',
+        placement: 'midpoint',
     };
     return typeLayer;
 };
@@ -44729,13 +44334,15 @@ const getWaterAreaLayers = (source) => {
 };
 
 const getWaterLinkLayers = (source) => {
+    const layers = [];
     const sublayers = {};
+    const data = {
+        source,
+        layer: '"MapWaterLink"',
+    };
     const layer = {
         id: uuid(),
-        data: {
-            source,
-            layer: '"MapWaterLink"',
-        },
+        data,
     };
     sublayers.geometry = {
         draw: {
@@ -44763,10 +44370,12 @@ const getWaterLinkLayers = (source) => {
         },
     };
     layer.sublayers = sublayers;
-    return [layer];
+    layers.push(layer);
+    return layers;
 };
 
 const getOceanAreaLayers = (source) => {
+    const layers = [];
     const geometryLayer = {
         id: uuid(),
         data: {
@@ -44796,691 +44405,1165 @@ const getOceanAreaLayers = (source) => {
             },
         },
     };
-    return [geometryLayer, textLayer];
+    layers.push(geometryLayer, textLayer);
+    return layers;
 };
 
 const getLanduseAreaLayers = (source) => {
     const layers = [];
-    switch (source) {
-        case exports.TangramSourceNames.NATURE_TILE: {
-            const geometryLayer = {
-                id: uuid(),
-                data: {
-                    source,
-                    layer: '"MapNatureForest"',
-                },
-                draw: {
-                    polygons: {
-                        interactive: true,
-                        color: `function() {
+    const geometryLayer = {
+        id: uuid(),
+        data: {
+            source,
+            layer: '"MapLanduseArea"',
+        },
+        draw: {
+            polygons: {
+                interactive: true,
+                color: `function() {
               const { feature_type } = feature;
 
               switch (feature_type) {
-                case '900202': {
+                case '509998': {
+                  return '#ECD175';
+                }
+
+                case '600102':
+                case '900140': {
+                  return '#3E9A8C';
+                }
+
+                case '900202':
+                case '900130':
+                case '900150':
+                case '900103': {
                   return '#96BE7D';
                 }
 
-                default : {
+                case '9997010': {
                   return null;
                 }
               }
             }`,
-                    },
-                },
-            };
-            layers.push(geometryLayer);
-            break;
-        }
-        default: {
-            const geometryLayer = {
-                id: uuid(),
-                data: {
-                    source,
-                    layer: '"MapLanduseArea"',
-                },
-                draw: {
-                    polygons: {
-                        interactive: true,
-                        color: `function() {
+                order: `function() {
               const { feature_type } = feature;
 
-              switch (feature_type) {
+              switch(feature_type) {
+                case '900150':
+                case '900130':
                 case '509998': {
-                  return '#ECD175';
+                  return 300;
+                }
+
+                default: {
+                  return 299;
+                }
+              }
+            }`,
+            },
+        },
+    };
+    const labelLayer = {
+        id: uuid(),
+        data: {
+            source,
+            layer: '"MapLanduseAreaLabel"',
+        },
+        filter: `function() {
+      return $zoom >= 15;
+    }`,
+        draw: {
+            text: {
+                text_source: 'name',
+                font: {
+                    size: '13px',
+                    fill: `function() {
+                const { feature_type } = feature;
+
+                switch(feature_type) {
+                  case '509998': {
+                    return '#CD7F32';
+                  }
+
+                  default: {
+                    return '#00541F';
+                  }
                 }
+              }`,
+                    stroke: { color: 'white', width: '3px' },
+                },
+            },
+        },
+    };
+    layers.push(geometryLayer, labelLayer);
+    return layers;
+};
+
+const getBuildingLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: '"MapBuildingECArea"',
+        minzoom: 15,
+    };
+    const layer = {
+        id: uuid(),
+        data,
+        extruded: {
+            draw: {
+                polygons: {
+                    interactive: true,
+                    style: 'buildings',
+                    extrude: `function() {
+            return $zoom >= 17;
+          }`,
+                },
+            },
+        },
+        draw: {
+            polygons: {
+                color: '#DDB07B',
+                height: { property: 'height' },
+            },
+            lines: {
+                color: '#DB933F',
+                width: '2px',
+                cap: 'round',
+                join: 'round',
+            },
+        },
+    };
+    layers.push(layer);
+    return layers;
+};
+
+const getFacilityAreaLayers = (source) => {
+    const layers = [];
+    const geometryLayer = {
+        id: uuid(),
+        data: {
+            source,
+            layer: '"MapFacilityArea"',
+        },
+        draw: {
+            polygons: {
+                color: `function() {
+          const { feature_type } = feature;
+
+          switch (feature_type) {
+            case '2000408': {
+              return '#DBBAC4';
+            }
+
+            case '1900403': {
+              return '#B6C3C7';
+            }
+
+            case '1907403': {
+              return '#A3B9C0';
+            }
+
+            case '2000123': {
+              return '#E4BA7D';
+            }
+
+            case '2000124': {
+              return '#BFE6E3';
+            }
+
+            case '2000200': {
+              return '#A0A9A8';
+            }
+
+            case '2000403': {
+              return '#AF7136';
+            }
+
+            case '2000420': {
+              return '#89AC76';
+            }
+
+            case '2000457': {
+              return '#9494C0';
+            }
+
+            default: {
+              return '#E1D4D4';
+            }
+          }
+        }`,
+                order: `function() {
+          const { feature_type } = feature;
+
+          switch (feature_type) {
+            case '1907403': {
+              return 301;
+            }
+
+            default: {
+              return 300;
+            }
+          }
+        }`,
+            },
+            lines: {
+                color: '#857F7F',
+                width: '2px',
+                cap: 'round',
+                join: 'round',
+            },
+        },
+    };
+    const labelLayer = {
+        id: uuid(),
+        data: {
+            source,
+            layer: '"MapFacilityAreaLabel"',
+        },
+        draw: {
+            text: {
+                text_source: 'name',
+                font: {
+                    fill: `function() {
+            const { feature_type } = feature;
+
+            switch(feature_type) {
+              case '1900403':
+              case '1907403': {
+                return '#256D7B';
+              }
+
+               case '2000420':
+              case '2000460':
+              case '2000123': {
+                return '#00541F';
+              }
 
-                case '600102':
-                case '900140': {
-                  return '#3E9A8C';
-                }
+               case '2000408': {
+                return '#5E2129';
+              }
 
-                case '900202':
-                case '900130':
-                case '900150':
-                case '900103': {
-                  return '#96BE7D';
-                }
+               case '2000124': {
+                return '#3E5F8A';
+              }
 
-                case '9997010': {
-                  return null;
-                }
+               case '2000200': {
+                return '#464451';
               }
-            }`,
-                        order: `function() {
-              const { feature_type } = feature;
 
-              switch(feature_type) {
-                case '900150':
-                case '900130':
-                case '509998': {
-                  return 300;
-                }
+               case '2000403': {
+                return '#B03F35';
+              }
 
-                default: {
-                  return 299;
-                }
+               case '2000457': {
+                return '#6A5ACD';
               }
-            }`,
-                    },
-                },
-            };
-            const labelLayer = {
-                id: uuid(),
-                data: {
-                    source,
-                    layer: '"MapLanduseAreaLabel"',
-                },
-                filter: `function() {
-          return $zoom >= 15;
-        }`,
-                draw: {
-                    text: {
-                        text_source: 'name',
-                        font: {
-                            size: '13px',
-                            fill: `function() {
-                const { feature_type } = feature;
 
-                switch(feature_type) {
-                  case '509998': {
-                    return '#CD7F32';
-                  }
+               case '1700215':
+              case '900159':
+              case '900158': {
+                return '#474A51';
+              }
 
-                  default: {
-                    return '#00541F';
-                  }
-                }
-              }`,
-                            stroke: { color: 'white', width: '3px' },
-                        },
+               default: {
+                return black;
+              }
+            }
+          }`,
+                    size: '12px',
+                    stroke: {
+                        color: 'white',
+                        width: '3px',
                     },
                 },
-            };
-            layers.push(geometryLayer, labelLayer);
-        }
-    }
+            },
+        },
+    };
+    layers.push(geometryLayer, labelLayer);
     return layers;
 };
 
-const getBuildingLayers = (source) => {
+const adminAreaLayerName = '"MapAdminArea"';
+
+const getAdminAreaLayers = (source) => {
     const layers = [];
     const data = {
         source,
-        layer: '"MapBuildingECArea"',
-        minzoom: 15,
+        layer: adminAreaLayerName,
     };
     const layer = {
         id: uuid(),
         data,
-        extruded: {
-            draw: {
-                polygons: {
-                    interactive: true,
-                    style: 'buildings',
-                    extrude: `function() {
-            return $zoom >= 17;
-          }`,
-                },
+        draw: {
+            polygons: {
+                color: '#D3D2CF',
             },
         },
+    };
+    const borderRegionLayer = {
+        id: uuid(),
+        data,
+        filter: `function() {
+      const { type } = feature;
+
+      const isFilter = type === 'R';
+
+      return isFilter;
+    }`,
         draw: {
-            polygons: {
-                color: '#DDB07B',
-                height: { property: 'height' },
+            lines: {
+                color: '#696969',
+                width: '1px',
+                cap: 'round',
+                join: 'round',
             },
+        },
+    };
+    const borderDistrictLayer = {
+        id: uuid(),
+        data,
+        filter: `function() {
+      const { type } = feature;
+
+      const isFilter = type === 'D' && $zoom >= 12;
+
+      return isFilter;
+    }`,
+        draw: {
             lines: {
-                color: '#DB933F',
-                width: '2px',
+                color: '#696969',
+                dash: [4, 7],
+                width: '1px',
                 cap: 'round',
                 join: 'round',
             },
         },
     };
-    layers.push(layer);
+    layers.push(layer, borderRegionLayer, borderDistrictLayer);
     return layers;
 };
 
-const getFacilityAreaLayers = (source) => {
+const getNatureFieldLayers = () => {
     const layers = [];
-    const geometryLayer = {
+    const data = {
+        source: exports.TangramSourceNames.NATURE_TILE,
+        layer: '"MapNatureField"',
+    };
+    const layer = {
         id: uuid(),
-        data: {
-            source,
-            layer: '"MapFacilityArea"',
-        },
+        data,
         draw: {
             polygons: {
-                color: `function() {
-          const { feature_type } = feature;
+                interactive: true,
+                color: '#EBEEC7',
+            },
+        },
+    };
+    layers.push(layer);
+    return layers;
+};
 
-          switch (feature_type) {
-            case '2000408': {
-              return '#DBBAC4';
-            }
+const linkLayerName = '"Link"';
+const zLvlOrders = [
+    '-1.0',
+    '-0.5',
+    '-0.3',
+    '0.0',
+    '0.3',
+    '0.5',
+    '0.7',
+    '1.0',
+    '1.5',
+    '2.0',
+];
+const functionInterval = [[5], [3, 4], [1, 2]];
+const colorFunction = `function() {
+  const { functional_class, tunnel, tollway } = feature;
 
-            case '1900403': {
-              return '#B6C3C7';
-            }
+  const alpha = tunnel ? 0.89 : 1;
 
-            case '1907403': {
-              return '#A3B9C0';
-            }
+  const getRGB = (hex, alpha) => {
+    const r = +(parseInt(hex.slice(1, 3), 16) / 255).toFixed(2);
+    const g = +(parseInt(hex.slice(3, 5), 16) / 255).toFixed(2);
+    const b = +(parseInt(hex.slice(5, 7), 16) / 255).toFixed(2);
 
-            case '2000123': {
-              return '#E4BA7D';
-            }
+    return [r, g, b, alpha];
+  }
+
+  if (tollway) {
+    return '#D72740';
+  }
+
+  switch (functional_class) {
+    case 1:
+    case 2: {
+      const color = getRGB('#D1747F', alpha);
+
+      return color;
+    }
+
+    case 3:
+    case 4: {
+      const color = getRGB('#B1A7AA', alpha);
+
+      return color;
+    }
+
+    case 5: {
+      const color = getRGB('#D5CEC3', alpha);
+
+      return color;
+    }
+  }
+}`;
+const widthFunction = `function() {
+  const { functional_class, road_number } = feature;
+
+  const getScale = () => {
+    if ($zoom <= 15 && $zoom >= 14) { return 7; }
+
+    if ($zoom <= 13 && $zoom >= 12) { return 9; }
+
+    if ($zoom <= 5) { return 400; }
+
+    if ($zoom <= 7) { return 200; }
+
+    if ($zoom < 12) { return 50; }
+
+    return 1;
+  }
+
+  const scale = getScale();
+
+  switch(functional_class) {
+    case 1:
+    case 2: {
+      return 8 * scale;
+    }
+
+    case 3:
+    case 4: {
+      return 7 * scale;
+    }
+
+    case 5: {
+      if (Boolean(road_number)) {
+        return 7 * scale;
+      }
 
-            case '2000124': {
-              return '#BFE6E3';
-            }
+      return 6;
+    }
+  }
+}`;
+const outlineColorFunction = `function() {
+  const { functional_class, access_id, tollway } = feature;
 
-            case '2000200': {
-              return '#A0A9A8';
-            }
+  if (tollway) {
+    return '#B9263B';
+  }
 
-            case '2000403': {
-              return '#AF7136';
-            }
+  switch(functional_class) {
+    case 5: {
+      return '#989898';
+    }
 
-            case '2000420': {
-              return '#89AC76';
-            }
+    case 3:
+    case 4: {
+      return '#8F6E78';
+    }
 
-            case '2000457': {
-              return '#9494C0';
-            }
+    case 1:
+    case 2: {
+      return '#9A414B';
+    }
+  }
+}`;
+const outlineWidthFunction = `function() {
+  const { functional_class, access_id } = feature;
 
-            default: {
-              return '#E1D4D4';
-            }
-          }
-        }`,
-                order: `function() {
-          const { feature_type } = feature;
+  switch(functional_class) {
+    case 5: {
+      switch (access_id) {
+        case 32: {
+          return 0;
+        }
 
-          switch (feature_type) {
-            case '1907403': {
-              return 301;
-            }
+        default: {
+          return 1;
+        }
+      }
+    }
 
-            default: {
-              return 300;
-            }
-          }
-        }`,
-            },
-            lines: {
-                color: '#857F7F',
-                width: '2px',
-                cap: 'round',
-                join: 'round',
-            },
-        },
+    default: {
+      return 1;
+    }
+  }
+}`;
+
+const getLinkLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: linkLayerName,
     };
-    const labelLayer = {
+    const roadNumberLayer = {
         id: uuid(),
-        data: {
-            source,
-            layer: '"MapFacilityAreaLabel"',
-        },
+        data,
         draw: {
             text: {
-                text_source: 'name',
+                text_source: 'road_number',
                 font: {
-                    fill: `function() {
-            const { feature_type } = feature;
-
-            switch(feature_type) {
-              case '1900403':
-              case '1907403': {
-                return '#256D7B';
-              }
-
-               case '2000420':
-              case '2000460':
-              case '2000123': {
-                return '#00541F';
-              }
-
-               case '2000408': {
-                return '#5E2129';
-              }
+                    fill: '#181bff',
+                    size: '16px',
+                    weight: 'bold',
+                    underline: true,
+                    background: {
+                        color: 'black',
+                    },
+                },
+            },
+        },
+    };
+    layers.push(roadNumberLayer);
+    const text = {
+        text_source: 'street_name',
+        font: {
+            fill: 'black',
+            size: '14px',
+            stroke: { color: 'white', width: '3px' },
+        },
+    };
+    zLvlOrders.forEach((zLvl) => {
+        const filter = `function() {
+      const { z_lvl = '0.0' } = feature;
 
-               case '2000124': {
-                return '#3E5F8A';
-              }
+      const isFilter = z_lvl === '${zLvl}';
 
-               case '2000200': {
-                return '#464451';
-              }
+      return isFilter;
+    }`;
+        const getBaseLayerDraw = () => ({
+            text,
+            lines: {
+                color: colorFunction,
+                width: widthFunction,
+                cap: 'round',
+                join: 'round',
+            },
+        });
+        const getBorderLayerDraw = () => ({
+            lines: {
+                color: colorFunction,
+                width: widthFunction,
+                cap: 'round',
+                join: 'round',
+                outline: {
+                    color: outlineColorFunction,
+                    width: outlineWidthFunction,
+                },
+            },
+        });
+        switch (zLvl) {
+            case '0.0': {
+                functionInterval.forEach((functionClasses) => {
+                    functionClasses.forEach((functionClass) => {
+                        const baseLayer = {
+                            id: uuid(),
+                            data,
+                            filter: `function() {
+                const { functional_class, z_lvl = '0.0' } = feature;
 
-               case '2000403': {
-                return '#B03F35';
-              }
+                const isFilter = z_lvl === '${zLvl}' && functional_class === ${functionClass};
 
-               case '2000457': {
-                return '#6A5ACD';
-              }
+                return isFilter;
+              }`,
+                            draw: getBaseLayerDraw(),
+                            sublayers: {
+                                construction: {
+                                    filter: `function() {
+                    return global.links.getIsConstruction(feature);
+                  }`,
+                                    draw: {
+                                        lines: {
+                                            width: 3,
+                                            color: '#9AA096',
+                                            dash: [2, 1],
+                                        },
+                                    },
+                                },
+                                functionalClassAccessId32: {
+                                    filter: `function() {
+                    return global.links.getIsFunctionalClass(feature);
+                  }`,
+                                    draw: {
+                                        lines: {
+                                            width: 2,
+                                            color: '#9AA096',
+                                            dash: [2, 1],
+                                        },
+                                    },
+                                },
+                                lowMobility: {
+                                    filter: `function() {
+                    return global.links.getIsLowMobility(feature);
+                  }`,
+                                    draw: {
+                                        lines: {
+                                            width: 4,
+                                        },
+                                    },
+                                },
+                            },
+                        };
+                        const borderLayer = {
+                            id: uuid(),
+                            data,
+                            filter: `function() {
+                const { functional_class, z_lvl = '0.0' } = feature;
 
-               case '1700215':
-              case '900159':
-              case '900158': {
-                return '#474A51';
-              }
+                const isFilter = z_lvl === '${zLvl}' && functional_class === ${functionClass} && !global.links.getIsConstruction(feature) && !global.links.getIsFunctionalClass(feature);
 
-               default: {
-                return black;
-              }
+                return isFilter;
+              }`,
+                            draw: getBorderLayerDraw(),
+                            sublayers: {
+                                lowMobility: {
+                                    filter: `function() {
+                    return global.links.getIsLowMobility(feature);
+                  }`,
+                                    draw: {
+                                        lines: {
+                                            width: 4,
+                                        },
+                                    },
+                                },
+                            },
+                        };
+                        layers.push(baseLayer, borderLayer);
+                    });
+                });
+                break;
             }
-          }`,
-                    size: '12px',
-                    stroke: {
-                        color: 'white',
-                        width: '3px',
-                    },
-                },
-            },
-        },
-    };
-    layers.push(geometryLayer, labelLayer);
+            default: {
+                const baseLayer = {
+                    id: uuid(),
+                    data,
+                    filter,
+                    draw: getBaseLayerDraw(),
+                };
+                const borderLayer = {
+                    id: uuid(),
+                    data,
+                    filter,
+                    draw: getBorderLayerDraw(),
+                };
+                layers.push(baseLayer, borderLayer);
+            }
+        }
+    });
     return layers;
 };
 
-const adminAreaLayerName = '"MapAdminArea"';
-
-const getAdminAreaLayers = (source) => {
+const getNatureForestLayers = () => {
     const layers = [];
     const data = {
-        source,
-        layer: adminAreaLayerName,
+        source: exports.TangramSourceNames.NATURE_TILE,
+        layer: '"MapNatureForest"',
     };
     const layer = {
         id: uuid(),
         data,
         draw: {
             polygons: {
-                color: '#D3D2CF',
-            },
-        },
-    };
-    const borderRegionLayer = {
-        id: uuid(),
-        data,
-        filter: `function() {
-      const { type } = feature;
-
-      const isFilter = type === 'R';
-
-      return isFilter;
-    }`,
-        draw: {
-            lines: {
-                color: '#696969',
-                width: '1px',
-                cap: 'round',
-                join: 'round',
-            },
-        },
-    };
-    const borderDistrictLayer = {
-        id: uuid(),
-        data,
-        filter: `function() {
-      const { type } = feature;
+                interactive: true,
+                color: `function() {
+          const { feature_type } = feature;
 
-      const isFilter = type === 'D' && $zoom >= 12;
+          switch (feature_type) {
+            case '900202': {
+              return '#96BE7D';
+            }
 
-      return isFilter;
-    }`,
-        draw: {
-            lines: {
-                color: '#696969',
-                dash: [4, 7],
-                width: '1px',
-                cap: 'round',
-                join: 'round',
+            default : {
+              return null;
+            }
+          }
+        }`,
             },
         },
     };
-    layers.push(layer, borderRegionLayer, borderDistrictLayer);
+    layers.push(layer);
     return layers;
 };
 
-const getNatureFieldLayers = (source) => {
-    const layer = {
-        id: uuid(),
-        data: {
-            source,
-            layer: '"MapNatureField"',
-        },
-        draw: {
-            polygons: {
-                interactive: true,
-                color: '#EBEEC7',
-            },
-        },
-    };
-    return [layer];
+const getLayerName = ({ id, data: { source, layer }, }) => {
+    const layerName = `${id}-${source}-${layer}`;
+    return layerName;
 };
-
-const linkLayerName = '"Link"';
-const zLvlOrders = [
-    '-1.0',
-    '-0.5',
-    '-0.3',
-    '0.0',
-    '0.3',
-    '0.5',
-    '0.7',
-    '1.0',
-    '1.5',
-    '2.0',
-];
-const functionInterval = [[5], [3, 4], [1, 2]];
-const colorFunction = `function() {
-  const { functional_class, tunnel, tollway } = feature;
-
-  const alpha = tunnel ? 0.89 : 1;
-
-  const getRGB = (hex, alpha) => {
-    const r = +(parseInt(hex.slice(1, 3), 16) / 255).toFixed(2);
-    const g = +(parseInt(hex.slice(3, 5), 16) / 255).toFixed(2);
-    const b = +(parseInt(hex.slice(5, 7), 16) / 255).toFixed(2);
-
-    return [r, g, b, alpha];
-  }
-
-  if (tollway) {
-    return '#D72740';
-  }
-
-  switch (functional_class) {
-    case 1:
-    case 2: {
-      const color = getRGB('#D1747F', alpha);
-
-      return color;
-    }
-
-    case 3:
-    case 4: {
-      const color = getRGB('#B1A7AA', alpha);
-
-      return color;
-    }
-
-    case 5: {
-      const color = getRGB('#D5CEC3', alpha);
-
-      return color;
-    }
-  }
-}`;
-const widthFunction = `function() {
-  const { functional_class, road_number } = feature;
-
-  const getScale = () => {
-    if ($zoom <= 15 && $zoom >= 14) { return 7; }
-
-    if ($zoom <= 13 && $zoom >= 12) { return 9; }
-
-    if ($zoom <= 5) { return 400; }
-
-    if ($zoom <= 7) { return 200; }
-
-    if ($zoom < 12) { return 50; }
-
-    return 1;
-  }
-
-  const scale = getScale();
-
-  switch(functional_class) {
-    case 1:
-    case 2: {
-      return 8 * scale;
-    }
-
-    case 3:
-    case 4: {
-      return 7 * scale;
-    }
-
-    case 5: {
-      if (Boolean(road_number)) {
-        return 7 * scale;
-      }
-
-      return 6;
-    }
-  }
-}`;
-const outlineColorFunction = `function() {
-  const { functional_class, access_id, tollway } = feature;
-
-  if (tollway) {
-    return '#B9263B';
-  }
-
-  switch(functional_class) {
-    case 5: {
-      return '#989898';
+const setLayerOrder = ({ layer, order, }) => {
+    const cloneLayer = structuredClone(layer);
+    const { draw, sublayers } = cloneLayer;
+    if (draw) {
+        const { points, lines, polygons, text, styles } = draw;
+        if (points) {
+            draw.points = {
+                ...structuredClone(points),
+                order,
+            };
+        }
+        if (lines) {
+            draw.lines = {
+                ...structuredClone(lines),
+                order,
+            };
+        }
+        if (polygons) {
+            draw.polygons = {
+                ...structuredClone(polygons),
+                order,
+            };
+        }
+        if (text) {
+            draw.text = {
+                ...structuredClone(text),
+                order,
+            };
+        }
+        if (styles) {
+            draw.styles = Object.entries(styles).reduce((accum, [name, style]) => ({
+                ...accum,
+                [name]: {
+                    ...structuredClone(style),
+                    order,
+                },
+            }), {});
+        }
+        cloneLayer.draw = structuredClone(draw);
     }
-
-    case 3:
-    case 4: {
-      return '#8F6E78';
+    if (sublayers) {
+        Object.entries(sublayers).forEach(([name, sublayer]) => {
+            if (sublayer) {
+                const { draw } = sublayer;
+                if (draw) {
+                    const { points, lines, polygons } = draw;
+                    if (points) {
+                        points.order = order;
+                        draw.points = points;
+                    }
+                    if (lines) {
+                        lines.order = order;
+                        draw.lines = lines;
+                    }
+                    if (polygons) {
+                        polygons.order = order;
+                        draw.polygons = polygons;
+                    }
+                    sublayer.draw = structuredClone(draw);
+                }
+                sublayers[name] = structuredClone(sublayer);
+            }
+        });
+        cloneLayer.sublayers = structuredClone(sublayers);
     }
-
-    case 1:
-    case 2: {
-      return '#9A414B';
+    return cloneLayer;
+};
+const getAllPolygonLayers = (source) => {
+    const adminAreaLayers = getAdminAreaLayers(source);
+    const natureFieldLayers = getNatureFieldLayers();
+    const natureForestLayers = getNatureForestLayers();
+    const builtupAreaLayers = getBuiltupAreaLayers(source);
+    const facilityAreaLayers = getFacilityAreaLayers(source);
+    const landuseAreaLayers = getLanduseAreaLayers(source);
+    const waterAreaLayers = getWaterAreaLayers(source);
+    const oceanAreaLayers = getOceanAreaLayers(source);
+    const allPolygonLayers = [];
+    switch (source) {
+        case exports.TangramSourceNames.MSK: {
+            allPolygonLayers.push(...adminAreaLayers, ...builtupAreaLayers, ...facilityAreaLayers, ...landuseAreaLayers, ...waterAreaLayers, ...oceanAreaLayers);
+            break;
+        }
+        default: {
+            allPolygonLayers.push(...adminAreaLayers, ...builtupAreaLayers, ...facilityAreaLayers, ...natureFieldLayers, ...natureForestLayers, ...landuseAreaLayers, ...waterAreaLayers, ...oceanAreaLayers);
+        }
     }
-  }
-}`;
-const outlineWidthFunction = `function() {
-  const { functional_class, access_id } = feature;
-
-  switch(functional_class) {
-    case 5: {
-      switch (access_id) {
-        case 32: {
-          return 0;
+    return allPolygonLayers;
+};
+const getAllPolylineLayers = (source) => {
+    const linkLayers = getLinkLayers(source);
+    const railroadLayers = getRailroadLayers(source);
+    const waterLinkLayers = getWaterLinkLayers(source);
+    const oneWayLayers = getOneWayLayers(source);
+    const conditionLayers = getConditionLayers(source);
+    const allPolylineLayers = [
+        ...waterLinkLayers,
+        ...railroadLayers,
+        ...linkLayers,
+    ];
+    switch (source) {
+        case exports.TangramSourceNames.MSK: {
+            allPolylineLayers.push(...waterLinkLayers, ...railroadLayers, ...linkLayers);
+            break;
         }
-
         default: {
-          return 1;
+            allPolylineLayers.push(...waterLinkLayers, ...railroadLayers, ...linkLayers, ...oneWayLayers, ...conditionLayers);
         }
-      }
     }
-
-    default: {
-      return 1;
+    return allPolylineLayers;
+};
+const getAllPointLayers = (source) => {
+    const POILayers = getPOILayers(source);
+    const cityPOILayers = getCityPOILayers(source);
+    const pointAddressLayers = getPointAddressLayers(source);
+    const allPointLayers = [
+        ...POILayers,
+        ...pointAddressLayers,
+        ...cityPOILayers,
+    ];
+    return allPointLayers;
+};
+const getAllLayers = (source) => {
+    const allLayers = [];
+    const buildingLayers = getBuildingLayers(source);
+    const allPolygonLayers = getAllPolygonLayers(source);
+    const allPolylineLayers = getAllPolylineLayers(source);
+    const allPointLayers = getAllPointLayers(source);
+    const roadPolyLayers = getRoadPolyLayers(source);
+    const laneMarkingPolyLayers = getLaneMarkingPolyLayers(source);
+    const laneMarkingLineLayers = getLaneMarkingLineLayers(source);
+    const laneMarkingPointLayers = getLaneMarkingPointLayers(source);
+    const parkingLineLayers = getParkingLineLayers(source);
+    switch (source) {
+        case exports.TangramSourceNames.MSK: {
+            allLayers.push(...allPolygonLayers, ...allPolylineLayers, ...roadPolyLayers, ...laneMarkingPolyLayers, ...laneMarkingLineLayers, ...laneMarkingPointLayers, ...parkingLineLayers, ...buildingLayers, ...allPointLayers);
+            break;
+        }
+        default: {
+            allLayers.push(...allPolygonLayers, ...allPolylineLayers, ...buildingLayers, ...allPointLayers);
+        }
     }
-  }
-}`;
+    return allLayers;
+};
 
-const getLinkLayers = (source) => {
-    const layers = [];
-    const data = {
-        source,
-        layer: linkLayerName,
+const useGetLeafletLayer = () => {
+    const { instance: { isValidApiKey }, } = GlobalConfig;
+    const [layer, setLayer] = React__namespace.useState(null);
+    const [scene, setScene] = React__namespace.useState(null);
+    const [config, setConfig] = React__namespace.useState(null);
+    const getLeafletLayer = () => {
+        Promise.resolve().then(function () { return tangram_min; }).then(() => {
+            if (window.Tangram) {
+                const leafletLayer = window.Tangram.leafletLayer({
+                    scene: sceneTiles,
+                });
+                const { scene } = leafletLayer;
+                setLayer(leafletLayer);
+                setScene(scene);
+            }
+        });
     };
-    const roadNumberLayer = {
-        id: uuid(),
-        data,
-        draw: {
-            text: {
-                text_source: 'road_number',
-                font: {
-                    fill: '#181bff',
-                    size: '16px',
-                    weight: 'bold',
-                    underline: true,
-                    background: {
-                        color: 'black',
+    const addSource = React__namespace.useCallback((sourceConfig) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        const { name } = sourceConfig;
+        config.sources[name] = structuredClone(sourceConfig);
+        scene.updateConfig({ rebuild: true });
+        return getSources();
+    }, [scene, config]);
+    const getSource = React__namespace.useCallback((sourceName) => {
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        return structuredClone(config.sources[sourceName]);
+    }, [config]);
+    const updateSource = React__namespace.useCallback((sourceName, newUrl) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        config.sources[sourceName].url = newUrl;
+        scene.updateConfig({ rebuild: true });
+        return getSources();
+    }, [config, scene]);
+    const addLayer = React__namespace.useCallback((layer) => {
+        if (!scene) {
+            console.warn('Scene не инициализирован');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирован');
+            return;
+        }
+        const order = getLayers().length + 1;
+        const layerWithOrder = setLayerOrder({
+            layer,
+            order,
+        });
+        const layerName = getLayerName(layerWithOrder);
+        const { sublayers = {}, draw } = layerWithOrder;
+        if (draw) {
+            const { styles = {} } = draw;
+            if (styles) {
+                layerWithOrder.draw = {
+                    ...structuredClone(draw),
+                    ...structuredClone(styles),
+                };
+            }
+        }
+        config.layers[layerName] = {
+            ...structuredClone(layerWithOrder),
+            ...structuredClone(sublayers),
+        };
+        scene.updateConfig({ rebuild: true });
+        return getLayers();
+    }, [config, scene]);
+    const removeLayer = React__namespace.useCallback((layer) => {
+        if (!scene) {
+            console.warn('Scene не инициализирован');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирован');
+            return;
+        }
+        const layerName = getLayerName(layer);
+        if (config.layers[layerName]) {
+            delete config.layers[layerName];
+        }
+        scene.updateConfig({ rebuild: true });
+        return getLayers();
+    }, [config, scene]);
+    const addStyle = React__namespace.useCallback(({ name, style }) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        config.styles[name] = structuredClone(style);
+        scene.updateConfig({ rebuild: true });
+    }, [config, scene]);
+    const getLayerVisibility = React__namespace.useCallback((layer) => {
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        const layerName = getLayerName(layer);
+        const { visible: layerVisibility } = config.layers[layerName];
+        return layerVisibility;
+    }, [config]);
+    const toggleLayerVisibility = React__namespace.useCallback(({ layer, visible }) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        const layerName = getLayerName(layer);
+        config.layers[layerName].visible = visible;
+        scene.updateConfig();
+        return getLayerVisibility(layer);
+    }, [config, scene]);
+    const getLayers = React__namespace.useCallback(() => {
+        if (!config)
+            return [];
+        const { layers } = config;
+        return Object.keys(layers);
+    }, [config]);
+    const removeLayers = React__namespace.useCallback(() => {
+        if (!config)
+            return [];
+        const { layers } = config;
+        Object.values(layers).forEach(removeLayer);
+    }, [config]);
+    const getSources = React__namespace.useCallback(() => {
+        if (!config)
+            return [];
+        const { sources } = config;
+        return Object.keys(sources);
+    }, [config]);
+    React__namespace.useEffect(() => {
+        if (isValidApiKey) {
+            getLeafletLayer();
+        }
+        return () => {
+            setLayer(null);
+            setScene(null);
+            setConfig(null);
+        };
+    }, [isValidApiKey]);
+    React__namespace.useEffect(() => {
+        if (scene) {
+            scene.subscribe({
+                load: ({ config }) => {
+                    setConfig(config);
+                },
+            });
+        }
+    }, [scene]);
+    React__namespace.useEffect(() => {
+        addStyle({
+            name: 'space-tile',
+            style: {
+                shaders: {
+                    defines: {
+                        TILE_SCALE: 0.0002445,
+                        'NORMALIZED_SHORT(x)': '(x * 32767.)',
+                    },
+                    blocks: {
+                        global: `
+              varying vec3 v_pos;
+              vec2 getTileCoords() {
+                return fract(v_pos.xy);
+              }
+            `,
+                        position: `
+              v_pos = modelPosition().xyz;
+            `,
+                    },
+                },
+            },
+        });
+        addStyle({
+            name: 'tools-aastep',
+            style: {
+                shaders: {
+                    extensions: 'OES_standard_derivatives',
+                    blocks: {
+                        global: `
+              float aastep(float threshold, float value) {
+                #ifdef TANGRAM_FRAGMENT_SHADER
+                  #ifdef TANGRAM_EXTENSION_OES_standard_derivatives
+                    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+                      return smoothstep(threshold-afwidth, threshold+afwidth, value);
+                  #else
+                    return step(threshold, value);
+                  #endif
+                #else
+                  return step(threshold, value);
+                #endif
+              }
+            `,
                     },
                 },
             },
-        },
-    };
-    layers.push(roadNumberLayer);
-    const text = {
-        text_source: 'street_name',
-        font: {
-            fill: 'black',
-            size: '14px',
-            stroke: { color: 'white', width: '3px' },
-        },
-    };
-    zLvlOrders.forEach((zLvl) => {
-        const filter = `function() {
-      const { z_lvl = '0.0' } = feature;
-
-      const isFilter = z_lvl === '${zLvl}';
-
-      return isFilter;
-    }`;
-        const getBaseLayerDraw = () => ({
-            text,
-            lines: {
-                color: colorFunction,
-                width: widthFunction,
-                cap: 'round',
-                join: 'round',
+        });
+        addStyle({
+            name: 'pattern-diagonal-grid',
+            style: {
+                mix: ['space-tile', 'tools-aastep'],
+                shaders: {
+                    blocks: {
+                        global: `
+              float DiagonalGrid(float scale, float lineWidth) {
+                vec2 st = getTileCoords() * scale;
+
+                float d1 = mod(st.x + st.y, 1.0);
+                float line1 = aastep(lineWidth, d1) * aastep(1.0 - lineWidth, d1);
+
+                float d2 = mod(st.x - st.y, 1.0);
+                float line2 = aastep(lineWidth, d2) * aastep(1.0 - lineWidth, d2);
+
+                return max(line1, line2);
+              } 
+            `,
+                    },
+                },
             },
         });
-        const getBorderLayerDraw = () => ({
-            lines: {
-                color: colorFunction,
-                width: widthFunction,
-                cap: 'round',
-                join: 'round',
-                outline: {
-                    color: outlineColorFunction,
-                    width: outlineWidthFunction,
+        addStyle({
+            name: 'diagonal-grid',
+            style: {
+                mix: 'pattern-diagonal-grid',
+                blend: 'overlay',
+                base: 'polygons',
+                shaders: {
+                    blocks: {
+                        color: `
+              float grid = DiagonalGrid(12.0, 0.08);
+
+              color.a = grid;
+            `,
+                    },
                 },
             },
         });
-        switch (zLvl) {
-            case '0.0': {
-                functionInterval.forEach((functionClasses) => {
-                    functionClasses.forEach((functionClass) => {
-                        const baseLayer = {
-                            id: uuid(),
-                            data,
-                            filter: `function() {
-                const { functional_class, z_lvl = '0.0' } = feature;
-
-                const isFilter = z_lvl === '${zLvl}' && functional_class === ${functionClass};
-
-                return isFilter;
-              }`,
-                            draw: getBaseLayerDraw(),
-                            sublayers: {
-                                construction: {
-                                    filter: `function() {
-                    return global.links.getIsConstruction(feature);
-                  }`,
-                                    draw: {
-                                        lines: {
-                                            width: 3,
-                                            color: '#9AA096',
-                                            dash: [2, 1],
-                                        },
-                                    },
-                                },
-                                functionalClassAccessId32: {
-                                    filter: `function() {
-                    return global.links.getIsFunctionalClass(feature);
-                  }`,
-                                    draw: {
-                                        lines: {
-                                            width: 2,
-                                            color: '#9AA096',
-                                            dash: [2, 1],
-                                        },
-                                    },
-                                },
-                                lowMobility: {
-                                    filter: `function() {
-                    return global.links.getIsLowMobility(feature);
-                  }`,
-                                    draw: {
-                                        lines: {
-                                            width: 4,
-                                        },
-                                    },
-                                },
-                            },
-                        };
-                        const borderLayer = {
-                            id: uuid(),
-                            data,
-                            filter: `function() {
-                const { functional_class, z_lvl = '0.0' } = feature;
-
-                const isFilter = z_lvl === '${zLvl}' && functional_class === ${functionClass} && !global.links.getIsConstruction(feature) && !global.links.getIsFunctionalClass(feature);
-
-                return isFilter;
-              }`,
-                            draw: getBorderLayerDraw(),
-                            sublayers: {
-                                lowMobility: {
-                                    filter: `function() {
-                    return global.links.getIsLowMobility(feature);
-                  }`,
-                                    draw: {
-                                        lines: {
-                                            width: 4,
-                                        },
-                                    },
-                                },
-                            },
-                        };
-                        layers.push(baseLayer, borderLayer);
-                    });
-                });
-                break;
-            }
-            default: {
-                const baseLayer = {
-                    id: uuid(),
-                    data,
-                    filter,
-                    draw: getBaseLayerDraw(),
-                };
-                const borderLayer = {
-                    id: uuid(),
-                    data,
-                    filter,
-                    draw: getBorderLayerDraw(),
-                };
-                layers.push(baseLayer, borderLayer);
-            }
-        }
-    });
-    return layers;
+        addStyle({
+            name: 'zebra_crossing',
+            style: {
+                base: 'polygons',
+                lighting: false,
+                shaders: {
+                    attributes: {
+                        a_angle: {
+                            type: 'float',
+                            default: 0.0,
+                        },
+                    },
+                    uniforms: {
+                        u_stripe_width: 1,
+                    },
+                    blocks: {
+                        filter: `
+              vec3 pos = worldPosition().xyz;
+
+              float ang = radians(a_angle);
+
+              vec2 dir = vec2(sin(ang), cos(ang));
+
+              float positionAlongLine = dot(pos.xy, dir);
+
+              float stripe = step(1.0, mod(positionAlongLine / u_stripe_width, 2.0));
+
+              color.rgb = mix(vec3(1.0, 1.0, 1.0), vec3(1.0, 0.8, 0.0), stripe);
+              
+              color.a = 1.0;
+            `,
+                    },
+                },
+            },
+        });
+    }, [addStyle]);
+    React__namespace.useEffect(() => {
+        Object.values(exports.TangramSourceNames).forEach((name) => {
+            const url = sourceUrl[name];
+            addSource({
+                tile_size,
+                name,
+                url,
+                type: 'MVT',
+            });
+        });
+    }, [addSource]);
+    return {
+        layer,
+        scene,
+        config,
+        addSource,
+        getSource,
+        updateSource,
+        addLayer,
+        removeLayer,
+        addStyle,
+        getLayerVisibility,
+        toggleLayerVisibility,
+        getSources,
+        getLayers,
+        removeLayers,
+    };
 };
 
 const LeafletLayer = () => {
@@ -45492,22 +45575,7 @@ const LeafletLayer = () => {
         }
     }, [layer]);
     React__namespace.useEffect(() => {
-        const POILayers = getPOILayers(exports.TangramSourceNames.MSK);
-        const linkLayers = getLinkLayers(exports.TangramSourceNames.MSK);
-        const roadPolyLayers = getRoadPolyLayers(exports.TangramSourceNames.MSK);
-        const markingPolyLayers = getLaneMarkingPolyLayers(exports.TangramSourceNames.MSK);
-        const laneMarkingLineLayers = getLaneMarkingLineLayers(exports.TangramSourceNames.MSK);
-        const laneMarkingPointLayers = getLaneMarkingPointLayers(exports.TangramSourceNames.MSK);
-        const parkingLineLayers = getParkingLineLayers(exports.TangramSourceNames.MSK);
-        [
-            ...POILayers,
-            ...linkLayers,
-            ...roadPolyLayers,
-            ...markingPolyLayers,
-            ...laneMarkingLineLayers,
-            ...laneMarkingPointLayers,
-            ...parkingLineLayers,
-        ].map(addLayer);
+        getAllLayers(exports.TangramSourceNames.MSK).map(addLayer);
     }, [addLayer]);
     return null;
 };
@@ -45593,6 +45661,7 @@ exports.getLaneMarkingPointLayers = getLaneMarkingPointLayers;
 exports.getLaneMarkingPolyLayers = getLaneMarkingPolyLayers;
 exports.getLinkLayers = getLinkLayers;
 exports.getNatureFieldLayers = getNatureFieldLayers;
+exports.getNatureForestLayers = getNatureForestLayers;
 exports.getOceanAreaLayers = getOceanAreaLayers;
 exports.getOneWayLayers = getOneWayLayers;
 exports.getPOILayers = getPOILayers;