@m4l/components 3.1.7 → 3.1.8

package/components/maps/components/Map/index-2Lx5ARXa.js

@@ -1,2546 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMap, LayerGroup, MapContainer, Marker, Polyline, Circle, Polygon } from "react-leaflet";
-import { shallow } from "zustand/shallow";
-import React__default, { createContext, useRef, useEffect, useContext, useMemo, useState, useCallback } from "react";
-import * as L from "leaflet";
-import L__default from "leaflet";
-import { Loader } from "@googlemaps/js-api-loader";
-import { createPortal } from "react-dom";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment, useModulePrivileges } from "@m4l/core";
-import clsx from "clsx";
-import { useFormContext, useWatch } from "react-hook-form";
-import { A as Actions } from "../../../CommonActions/components/Actions/index-CuG1pnXW.js";
-import { B as Button } from "../../../mui_extended/Button/index-CGfZbaea.js";
-import * as Yup from "yup";
-import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index-B3HygFCM.js";
-import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index-BfzjLHG8.js";
-import { S as Stack } from "../../../mui_extended/Stack/index-DzEeCYfp.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index-D_nK759o.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index-CusYFjie.js";
-import { u as usePopupsStore, P as PopupsProvider } from "../../../popups/PopupsProvider/index-DhSxmtfJ.js";
-import { T as ToggleIconButton } from "../../../mui_extended/ToggleIconButton/index--0b3Td6C.js";
-import { D as DataGrid } from "../../../DataGrid/index-BZ-lbmuU.js";
-import { generateUtilityClasses, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
-import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index-BaCawLr1.js";
-import { I as Icon, M as MarkerIconLabel } from "../../../Icon/index-C89MAkeH.js";
-import { u as useStateRef } from "../../../../hooks/useStateRef/index-C3P6ZK3m.js";
-import { C as CheckBox } from "../../../mui_extended/CheckBox-BXUrbonB.js";
-import { P as Popover } from "../../../mui_extended/Popover/index-DfrJAQkV.js";
-import { P as PopupsViewer } from "../../../popups/PopupsViewer/index-BecevSns.js";
-import { createPathComponent } from "@react-leaflet/core";
-import "leaflet.markercluster";
-import { cloneDeep, throttle } from "lodash";
-import { styled } from "@mui/material/styles";
-import "leaflet/dist/leaflet.css";
-import { createStore, useStore } from "zustand";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { devtools } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
-import { b as bearingRawToCSS } from "../../index-Ci-7-FHg.js";
-import "leaflet-polylinedecorator";
-const COMPONENT_CLASS_NAME = "M4LMap";
-const MAP_ZINDEX_DEFAULT = 0;
-const MAP_ZINDEX_OVER_MAP = 1100;
-const TIME_DOUBLE_CLICK = 250;
-const MARKER_COLOR_DEFAULT = "#1E96DC";
-const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
-const LABEL_COLOR_DEFAULT = "#FFFFFF";
-const GPS_TOOLS_POPUP_ID = "gpsTools";
-const GPS_TOOLS_POPUP_DEFAULT_POSITION = {
-  vertical: { top: 50, bottom: 50 },
-  horizontal: { right: 50, width: 380 }
-};
-const MESURE_POPUP_DEFAULT_POSITION = {
-  vertical: { top: 50, height: 250 },
-  horizontal: { right: 50, width: 300 }
-};
-const SVG_ICON_DEFAULT = `<svg viewBox="0 0 640 640" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
-<g>
-    <circle
-        cx="320"
-        cy="320"
-        r="280"
-        fill="#1E96DC"
-    />
-    <text
-        x="320"
-        y="320"
-        font-size="320"
-        font-family="sans-serif"
-        fill="#FFFFFF"
-        text-anchor="middle"
-        alignment-baseline="central"
-        dominant-baseline="central"
-    >P</text>
-</g>
-</svg>`;
-const mapClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  /* elements */
-  "root",
-  //Control tools
-  "topLeftToolsRoot",
-  "topRigthToolsRoot",
-  "zoomButtons",
-  //Tipos de capas de los features
-  "markerLayerRoot",
-  "markerLayerIcon",
-  "markerLayerLabel",
-  "markerLayerLabelInner",
-  //Etiqueta de los features
-  "featureLabel",
-  //Measure tool
-  "meaureToolRoot",
-  "measureToolFormValue",
-  "measureToolFormValueDistance",
-  "measureToolFormValueSymbol",
-  "measureToolLabel",
-  "meausureToolLabelDistance",
-  "meausureToolLabelSymbol",
-  //Meauser Marcas
-  "measureMarkerRoot",
-  "measureMarkerContainer",
-  "measureMarkerContainerRhomb",
-  "measureMarkerContainerSlot",
-  "measureMarkerContainerSlotNumber",
-  "measureLabelMarkerRoot",
-  "measureLabelMarkerContainer",
-  "measureLabelMarkerDistance",
-  "measureLabelMarkerRemove",
-  /**
-   * Map sources
-   */
-  "mapSourcesPopoverRoot",
-  "mapSourcesRoot",
-  "mapSourcesOption",
-  "mapSourcesOptionIconLabel",
-  "mapSourcesOptionRoadOptions",
-  "mapSourcesOptionRoadOptionsCheck",
-  /**
-   * Layers
-   */
-  "layersPopoverRoot",
-  /* states or variants of elements */
-  "active",
-  "disabled"
-]);
-const useMapUtilityClasses = (_ownerState) => {
-  const slots = {
-    root: ["root"],
-    //Control tools
-    topLeftToolsRoot: ["topLeftToolsRoot"],
-    topRigthToolsRoot: ["topRigthToolsRoot"],
-    zoomButtons: ["zoomButtons"],
-    markerLayerRoot: ["markerLayerRoot"],
-    markerLayerIcon: ["markerLayerIcon"],
-    markerLayerLabel: ["markerLayerLabel"],
-    markerLayerLabelInner: ["markerLayerLabelInner"],
-    //Etiqueta de los features
-    featureLabel: ["featureLabel"],
-    /**
-     * Measure Tool
-     */
-    //Measure form
-    meaureToolRoot: ["meaureToolRoot"],
-    measureToolFormValue: ["measureToolFormValue"],
-    measureToolFormValueDistance: ["measureToolFormValueDistance"],
-    measureToolFormValueSymbol: ["measureToolFormValueSymbol"],
-    measureToolLabel: ["measureToolLabel"],
-    meausureToolLabelDistance: ["meausureToolLabelDistance"],
-    meausureToolLabelSymbol: ["meausureToolLabelSymbol"],
-    //Meauser Marcas
-    measureMarkerRoot: ["measureMarkerRoot"],
-    measureMarkerContainer: ["measureMarkerContainer"],
-    measureMarkerContainerRhomb: ["measureMarkerContainerRhomb"],
-    measureMarkerContainerSlot: ["measureMarkerContainerSlot"],
-    measureMarkerContainerSlotNumber: ["measureMarkerContainerSlotNumber"],
-    measureLabelMarkerRoot: ["measureLabelMarkerRoot"],
-    measureLabelMarkerContainer: ["measureLabelMarkerContainer"],
-    measureLabelMarkerDistance: ["measureLabelMarkerDistance"],
-    measureLabelMarkerRemove: ["measureLabelMarkerRemove"],
-    /**
-     * Map sources
-     */
-    mapSourcesPopoverRoot: ["mapSourcesPopoverRoot"],
-    mapSourcesRoot: ["mapSourcesToolRoot"],
-    mapSourcesOption: ["mapSourcesToolOption"],
-    mapSourcesOptionIconLabel: ["mapSourcesToolOptionIconLabel"],
-    mapSourcesOptionRoadOptions: ["mapSourcesToolOptionRoadOptions"],
-    mapSourcesOptionRoadOptionsCheck: ["mapSourcesToolOptionRoadOptionsCheck"],
-    /**
-     * Layers
-     */
-    layersPopoverRoot: ["layersPopoverRoot"],
-    /* states or variants of elements */
-    active: ["active"],
-    disabled: ["disabled"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
-};
-const MAP_DICCTIONARY = {
-  /**
-   * Generales
-   */
-  /**
-   * GPSTools
-   */
-  LABEL_GPSTOOLS_NAME: "label_gpstools_name",
-  LABEL_TAB_GEO: "label_tab_geo",
-  TAB_GENERAL_CONFIG_TOOLTIP: "tab_general_config_tooltip",
-  PAPER_GENERAL: "paper_general",
-  LABEL_ID: "label_id",
-  LABEL_NAME: "label_name",
-  LABEL_GEOMETRY_TYPE: "label_geometry_type",
-  LABEL_GEOMETRY_CIRCLE: "label_geometry_circle",
-  LABEL_GEOMETRY_RECTANGLE: "label_geometry_rectangle",
-  LABEL_GEOMETRY_POLYGON: "label_geometry_polygon",
-  LABEL_DRAW: "label_draw",
-  LABEL_FINISH: "label_finish",
-  PAPER_CONFIG: "paper_config",
-  LABEL_ALIAS: "label_alias",
-  LABEL_CUSTOMER_ID: "label_customer_id",
-  LABEL_TIME_MIN_IN_SECONDS: "label_time_min_in_seconds",
-  LABEL_TIME_MIN_OUT_SECONDS: "label_time_min_out_seconds",
-  TAB_STYLE_CONFIG_TOOLTIP: "tab_style_tooltip",
-  PAPER_STROKE: "paper_stroke",
-  LABEL_COLOR: "label_color",
-  LABEL_OPACITY: "label_opacity",
-  LABEL_WEIGHT: "label_weight",
-  LABEL_DASH_ARRAY: "label_dash_array",
-  LABEL_DASH_OFFSET: "label_dash_offset",
-  LABEL_RADIUS: "label_radius",
-  LABEL_LAT: "label_lat",
-  LABEL_LON: "label_lon",
-  LABEL_PLACE_MARKER: "label_place_marker",
-  LABEL_FIRST_VERTEX: "label_first_vertex",
-  LABEL_CONTINUE_LINE: "label_continue_line",
-  LABEL_FINISH_LINE: "label_finish_line",
-  LABEL_FINISH_POLY: "label_finish_poly",
-  LABEL_FINISH_RECT: "label_finish_rect",
-  LABEL_START_CIRCLE: "label_start_circle",
-  LABEL_FINISH_CIRCLE: "label_finish_circle",
-  LABEL_PLACE_CIRCLE_MARKER: "label_place_circle_marker",
-  VALIDATION_GEOMETRY_REQUIRED: "validation_geometry_required",
-  VALIDATION_FIELD_REQUIRED: "validation_field_required",
-  VALIDATION_FIELD_TYPE_NUMBER_ERROR: "validation_field_type_number_error",
-  LABEL_VIEW_TRANSIT_FEATURES: "label_view_crossing_features",
-  LABEL_VIEW_INTERNAL_FEATURES: "label_view_internal_features",
-  LABEL_CREATED_AT: "label_created_at",
-  LABEL_UPDATED_AT: "label_updated_at",
-  MODAL_DELETE_GEO_TITLE: "modal_delete_geo_title",
-  MODAL_DELETE_GEO_MESSAGE: "modal_delete_geo_message",
-  MODAL_DISABLE_GEO_TITLE: "modal_disable_geo_title",
-  MODAL_DISABLE_MESSAGE: "modal_disable_geo_message",
-  // Row Actions
-  ROW_ACTION_GEO_EDIT: "row_action_geo_edit",
-  ROW_ACTION_GEO_ENABLE: "row_action_geo_enable",
-  ROW_ACTION_GEO_DISABLE: "row_action_geo_disable",
-  ROW_ACTION_GEO_DELETE: "row_action_geo_delete",
-  LABEL_TAB_MEASURE: "label_tab_measure",
-  PAPER_MEASURE: "paper_measure",
-  LABEL_MEASURE_START: "label_measure_start",
-  LABEL_MEASURE_CANCEL: "label_measure_cancel",
-  LABEL_MEASURE_DISTANCE: "label_measure_distance",
-  LABEL_MEASURE_AREA: "label_measure_area",
-  LABEL_MEASURE_UNIT: "label_measure_unit",
-  LABEL_MEASURE_UNIT_BASE_KILOMETERS: "label_measure_unit_base_kilometers",
-  LABEL_MEASURE_REMOVE_POINT: "label_measure_remove_point",
-  /** Layers **/
-  LABEL_LAYERS: "label_layes",
-  LABEL_LAYER_NAME: "label_layer_name",
-  LABEL_LAYER_VISIBLE: "label_layer_visible",
-  LABEL_LAYER_AUTOFOCUS: "label_layer_autofocus",
-  LABEL_LAYER_CLUSTER: "label_layer_cluster",
-  LABEL_LAYER_DELETE: "label_layer_delete",
-  ROW_ACTION_LAYER_DELETE: "row_action_layer_delete",
-  /** Map Sources **/
-  LABEL_MAP_SOURCES: "label_map_sources",
-  LABEL_TILE_OSM: "label_tile_osm",
-  LABEL_TILE_GOOGLE: "label_tile_google",
-  LABEL_TILE_GOOGLE_SATELLITE: "label_tile_google_satellite",
-  LABEL_TILE_GOOGLE_HYBRID: "label_tile_google_hybrid",
-  LABEL_TILE_BING: "label_tile_bing"
-};
-const MAP_ICONS = {
-  /**
-   * Map en general
-   */
-  MAP_ZOOM_IN: "cmp_map_zoom_in.svg",
-  MAP_ZOOM_OUT: "cmp_map_zoom_out.svg",
-  /**
-   * Map sources
-   */
-  MAP_SOURCES_TOOL: "cmp_map_mapsources_tool.svg",
-  MAP_SOURCE_OSM: "cmp_map_mapsources_osm.svg",
-  MAP_SOURCE_GOOGLE_ROADS: "cmp_map_mapsources_google.svg",
-  MAP_SOURCE_GOOGLE_HYBRID: "cmp_map_mapsources_googlehybrid.svg",
-  MAP_SOURCE_GOOGLE_SATELLITE: "cmp_map_mapsources_googlesatelite.svg",
-  MAP_SOURCE_BING: "cmp_map_mapsources_bing.svg",
-  /**
-   * Map sources road options+
-   */
-  MAP_SOURCE_ROAD_TRAFFIC: "cmp_map_mapsources_layer-traffic.svg",
-  MAP_SOURCE_ROAD_TRANSIT: "cmp_map_mapsources_layer-transit.svg",
-  MAP_SOURCE_ROAD_BICYCLING: "cmp_map_mapsources_layer-bicycle.svg",
-  /**
-   * Layers
-   */
-  MAP_LAYERS_TOOL: "cmp_map_layers_tool.svg",
-  MAP_LAYER_VISIBLE: "cmp_map_layers_view.svg",
-  MAP_LAYER_AUTOFOCUS: "cmp_map_layers_zoom_fit.svg",
-  MAP_LAYER_CLUSTER: "cmp_map_layers_cluster.svg",
-  MAP_LAYER_DELETE: "cmp_map_layers_delete.svg",
-  ADD: "add.svg",
-  /** Measure Tool *
-   *
-   */
-  MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
-  MAP_MEASURE_TOOL: "cmp_map_measure_tool.svg",
-  GENERAL: "general.svg",
-  CONFIG: "config.svg",
-  STROKE: "stroke.svg",
-  FILL: "fill.svg",
-  // REFRESH: 'refresh.svg',
-  // ENABLED: 'enabled.svg',
-  // DISABLED: 'disabled.svg',
-  EDIT: "edit.svg",
-  DELETE: "delete.svg",
-  ACTIVE: "active.svg",
-  NAME: "name.svg"
-  // EMAIL: 'email.svg',
-  // USER: 'users.svg',
-  // FIRSTNAME: 'first_name.svg',
-  // LASTNAME: 'last_name.svg',
-  // MAIN_PHONE: 'fixed_phone.svg',
-  // SECONDARY_PHONE: 'fixed_phone.svg',
-  // CREATED_AT: 'created_at.svg',
-  // UPDATED_AT: 'updated_at.svg',
-  // VIEW_DETAIL: 'view_detail.svg',
-  // USERS: 'users.svg',
-};
-const TILE_LAYER_OSM = {
-  id: "osm_roadmap",
-  sourceType: "OSM",
-  iconUrl: MAP_ICONS.MAP_SOURCE_OSM,
-  mapTypeTile: "roadmap",
-  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_OSM,
-  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-  options: {
-    minZoom: 0,
-    maxZoom: 19,
-    subdomains: ["a", "b", "c"],
-    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
-    tms: false
-  },
-  roadSelectedOptions: {
-    trafficLayer: false,
-    transitLayer: false,
-    bicyclingLayer: false
-  }
-};
-const TILE_LAYER_GOOGLE = {
-  id: "google_rodmap",
-  sourceType: "Google",
-  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_ROADS,
-  mapTypeTile: "roadmap",
-  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE,
-  urlTemplate: "http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
-  hasBicyclingLayer: true,
-  hasTrafficLayer: true,
-  hasTransitLayer: true,
-  options: {
-    minZoom: 0,
-    maxZoom: 22,
-    subdomains: ["mt0", "mt1", "mt2", "mt3"],
-    attribution: "Map data © Google",
-    tms: false
-  },
-  roadSelectedOptions: {
-    trafficLayer: false,
-    transitLayer: false,
-    bicyclingLayer: false
-  }
-};
-const TILE_LAYER_GOOGLE_SATELLITE = {
-  id: "google_satellite",
-  sourceType: "Google",
-  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_SATELLITE,
-  mapTypeTile: "satellite",
-  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_SATELLITE,
-  urlTemplate: "http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
-  options: {
-    minZoom: 0,
-    maxZoom: 22,
-    subdomains: ["mt0", "mt1", "mt2", "mt3"],
-    attribution: "Map data © Google",
-    tms: false
-  },
-  roadSelectedOptions: {
-    trafficLayer: false,
-    transitLayer: false,
-    bicyclingLayer: false
-  }
-};
-const TILE_LAYER_GOOGLE_HYBRID = {
-  id: "google_hybrid",
-  sourceType: "Google",
-  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_HYBRID,
-  mapTypeTile: "hybrid",
-  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_HYBRID,
-  urlTemplate: "http://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
-  hasBicyclingLayer: true,
-  hasTrafficLayer: true,
-  hasTransitLayer: true,
-  options: {
-    minZoom: 0,
-    maxZoom: 22,
-    subdomains: ["mt0", "mt1", "mt2", "mt3"],
-    attribution: "Map data © Google",
-    tms: false
-  },
-  roadSelectedOptions: {
-    trafficLayer: false,
-    transitLayer: false,
-    bicyclingLayer: false
-  }
-};
-function toQuadKey(x, y, z) {
-  let quadKey = "";
-  for (let i = z; i > 0; i--) {
-    let digit = 0;
-    const mask = 1 << i - 1;
-    if ((x & mask) !== 0) {
-      digit++;
-    }
-    if ((y & mask) !== 0) {
-      digit++;
-      digit++;
-    }
-    quadKey += digit.toString();
-  }
-  return quadKey;
-}
-const BING_URL_TEMPLATE = "https://{s}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/|QK|?mkt=en-us&it=G,VE,BX,L,LA&shading=hill&og=22&n=z";
-const BING_SUB_DOMAINS = ["t2", "t3"];
-const TILE_LAYER_BING = {
-  id: "bing_rodmap",
-  sourceType: "Bing",
-  mapTypeTile: "roadmap",
-  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_BING,
-  iconUrl: MAP_ICONS.MAP_SOURCE_BING,
-  urlTemplate: BING_URL_TEMPLATE,
-  options: {
-    minZoom: 0,
-    maxZoom: 21,
-    subdomains: BING_SUB_DOMAINS,
-    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
-    tms: true
-  },
-  roadSelectedOptions: {
-    trafficLayer: false,
-    transitLayer: false,
-    bicyclingLayer: false
-  },
-  getTileUrl: (tileCoord) => {
-    const i = Math.abs(tileCoord.x + tileCoord.y) % BING_SUB_DOMAINS.length;
-    const z = tileCoord.z;
-    const x = tileCoord.x;
-    const y = tileCoord.y;
-    const gk = toQuadKey(x, y, z);
-    return BING_URL_TEMPLATE.replace("|QK|", gk).replace("{s}", BING_SUB_DOMAINS[i]);
-  }
-};
-const createMapStore = (initProps) => {
-  const startProps = {
-    classes: useMapUtilityClasses(initProps.ownerState),
-    visibleCheckedLayers: /* @__PURE__ */ new Set(),
-    autoFocusCheckedLayers: /* @__PURE__ */ new Set(),
-    clusterCheckedLayers: /* @__PURE__ */ new Set(),
-    currentMapSourceId: "",
-    hashMapSources: {},
-    mapSourcesIds: [],
-    layersIds: [],
-    hashLayers: {},
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, get) => ({
-        ...startProps,
-        mapActions: {
-          init: (layersStore) => {
-            set((state) => {
-              state.hashMapSources = {
-                osm_roadmap: TILE_LAYER_OSM,
-                google_rodmap: TILE_LAYER_GOOGLE,
-                google_satellite: TILE_LAYER_GOOGLE_SATELLITE,
-                google_hybrid: TILE_LAYER_GOOGLE_HYBRID,
-                bing_rodmap: TILE_LAYER_BING
-              };
-              state.mapSourcesIds = [
-                "osm_roadmap",
-                "google_rodmap",
-                "google_satellite",
-                "google_hybrid",
-                "bing_rodmap"
-              ];
-              state.currentMapSourceId = "osm_roadmap";
-              for (let index = 0; index < layersStore.length; index++) {
-                state.hashLayers[layersStore[index].layerId] = cloneDeep(layersStore[index]);
-                state.layersIds.push(layersStore[index].layerId);
-                if (layersStore[index].visible !== false) {
-                  state.visibleCheckedLayers.add(layersStore[index].layerId);
-                }
-                if (state.hashLayers[layersStore[index].layerId].autoFocus !== false) {
-                  state.autoFocusCheckedLayers.add(layersStore[index].layerId);
-                }
-                if (state.hashLayers[layersStore[index].layerId].cluster !== false) {
-                  state.clusterCheckedLayers.add(layersStore[index].layerId);
-                }
-              }
-            });
-          },
-          setMapState: (status) => {
-            set((state) => {
-              state.ownerState.status = status;
-            });
-          },
-          // isEqualsMapProperties: (_newMapProperties: MapProperties) => {
-          //     // if (get().mapProperties === undefined) {
-          //     //     return false;
-          //     // }
-          //     // return (
-          //     //     JSON.stringify(get().mapProperties) === JSON.stringify(newMapProperties)
-          //     // );
-          //     return false;
-          // },
-          // setMapProperties: (newMapProperties: MapProperties) => {
-          //     if (!get().mapActions.isEqualsMapProperties(newMapProperties)) {
-          //         set(state => {
-          //             state.mapProperties = newMapProperties;
-          //             if (state.ownerState.status === 'init') {
-          //                 state.ownerState.status = 'ready';
-          //                 updateOwnerStateClasses(state);
-          //             }
-          //         });
-          //     }
-          // },
-          // setAllFeaturesDataLayer: (layerId: string, value: AllFeaturesDatalLayer) => {
-          //     set(state => {
-          //         // if (
-          //         //     value.geometry === 'multipoints' &&
-          //         //     state.hashLayers[layerId].geometry === value.geometry
-          //         // ) {
-          //         //     (
-          //         //         state.hashLayers[layerId] as WritableDraft<LayerMultiPointProps>
-          //         //     ).hashFeatures = cloneDeep(value.hashFeatures); // Valor puro
-          //         // }
-          //         // if (
-          //         //     value.geometry === 'multilines' &&
-          //         //     state.hashLayers[layerId].geometry === value.geometry
-          //         // ) {
-          //         //     (
-          //         //         state.hashLayers[layerId] as WritableDraft<LayerMultiLineProps>
-          //         //     ).hashFeatures = cloneDeep(value.hashFeatures);
-          //         // }
-          //     });
-          // },
-          setDataLayer: (layerId, geoJson) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            set((state) => {
-              const layer = state.hashLayers[layerId];
-              layer.geoJsonObject = geoJson;
-            });
-          },
-          getFeatureIds: (layerId) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            const geoJsonObject = get().hashLayers[layerId]?.geoJsonObject;
-            if (geoJsonObject && geoJsonObject.object.type === "Feature") {
-              return [geoJsonObject.object.id];
-            } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
-              return geoJsonObject.object.features.map((feature) => feature.id);
-            }
-            return [];
-          },
-          setFeatureData: (layerId, featureId, geometry, properties, featureLabel) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            set((state) => {
-              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-                const layer = state.hashLayers[layerId].geoJsonObject?.object;
-                let feature = layer.features.find((f) => f.id === featureId);
-                if (feature) {
-                  feature.geometry = cloneDeep(geometry);
-                  feature.properties = { ...feature.properties, ...properties };
-                  feature.featureLabel = featureLabel;
-                } else {
-                  feature = {
-                    type: "Feature",
-                    geometry,
-                    id: featureId,
-                    properties,
-                    featureLabel
-                  };
-                  layer.features.push(feature);
-                }
-              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
-                const feature = state.hashLayers[layerId].geoJsonObject?.object;
-                feature.id = featureId;
-                feature.geometry = cloneDeep(geometry);
-                feature.properties = cloneDeep(properties);
-              }
-            });
-          },
-          removeFeature: (layerId, featureId) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            set((state) => {
-              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-                const layer = state.hashLayers[layerId].geoJsonObject?.object;
-                const index = layer.features.findIndex((f) => f.id === featureId);
-                if (index !== -1) {
-                  layer.features.splice(index, 1);
-                }
-              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
-                const feature = state.hashLayers[layerId].geoJsonObject?.object;
-                feature.geometry = { type: "Point", coordinates: [0, 0] };
-                feature.properties = { subType: "Marker" };
-              }
-            });
-          },
-          setLayerRenderProp: (layerId, renderProp) => {
-            set((state) => {
-              state.hashLayers[layerId].renderFeature = renderProp;
-            });
-          },
-          addLayer: (layer) => {
-            if (get().hashLayers[layer.layerId]) {
-              throw new Error(`Layer with id ${layer.layerId} already exists`);
-            }
-            set((state) => {
-              state.hashLayers[layer.layerId] = layer;
-              state.layersIds.push(layer.layerId);
-              if (layer.visible !== false) {
-                state.hashLayers[layer.layerId].visible = true;
-                state.visibleCheckedLayers.add(layer.layerId);
-              }
-              if (layer.autoFocus !== false) {
-                state.hashLayers[layer.layerId].autoFocus = true;
-                state.autoFocusCheckedLayers.add(layer.layerId);
-              }
-              if (layer.clusterAble && layer.cluster !== false) {
-                state.hashLayers[layer.layerId].cluster = true;
-                state.clusterCheckedLayers.add(layer.layerId);
-              }
-            });
-          },
-          addLayerDataToFeature: (layerId, featureId, layerData) => {
-            set((state) => {
-              if (state.hashLayers[layerId]) {
-                if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-                  const layer = state.hashLayers[layerId].geoJsonObject?.object;
-                  const feature = layer.features.find(
-                    (currentFeature) => currentFeature.id === featureId
-                  );
-                  if (feature) {
-                    feature.layerData = layerData;
-                  }
-                } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
-                  const feature = state.hashLayers[layerId].geoJsonObject?.object;
-                  if (feature.layerData) {
-                    feature.layerData = layerData;
-                  }
-                }
-              }
-            });
-          },
-          removeLayer: (layerId) => {
-            if (!get().hashLayers[layerId]) {
-              return;
-            }
-            set((state) => {
-              if (!state.hashLayers[layerId].visible) {
-                state.visibleCheckedLayers.delete(layerId);
-                state.autoFocusCheckedLayers.delete(layerId);
-              }
-              state.layersIds.splice(state.layersIds.indexOf(layerId), 1);
-              delete state.hashLayers[layerId];
-            });
-          },
-          // removeLefletLayerToFeature: (layerId, featureId ) => {
-          //     set(state => {
-          //         //se pon si existe, porque cuando se borran las capas, ya no hay forma
-          //         if (state.hashLayers[layerId]){
-          //             if (
-          //                 state.hashLayers[layerId].geoJsonObject?.object.type ===
-          //                 'FeatureCollection'
-          //             ) {
-          //                 //Remove feature from featureCollection
-          //                 const layer = state.hashLayers[layerId].geoJsonObject
-          //                     ?.object as FeatureCollection;
-          //                 const index = layer.features.findIndex(f => f.id === featureId);
-          //                 if (index !== -1) {
-          //                     layer.features[index].layerData = undefined;
-          //                 }
-          //             } else if (
-          //                 state.hashLayers[layerId].geoJsonObject?.object.type === 'Feature'
-          //             ) {
-          //                 const feature = state.hashLayers[layerId].geoJsonObject
-          //                     ?.object as Feature;
-          //                 feature.layerData = undefined;
-          //             }
-          //         }
-          //     });
-          // },
-          setCheckedLayers: (checkedNameSet, newCheckedSet) => {
-            set((state) => {
-              state[`${checkedNameSet}CheckedLayers`] = new Set(newCheckedSet);
-              for (const layerId in state.hashLayers) {
-                state.hashLayers[layerId][checkedNameSet] = newCheckedSet.has(layerId);
-              }
-            });
-          },
-          setCurrentMapSource: (newId) => {
-            set((state) => {
-              if (newId in state.hashMapSources) {
-                state.currentMapSourceId = newId;
-              }
-            });
-          },
-          setMapSourceRoadOptions: (partialRoadOptions) => {
-            set((state) => {
-              if (!state.hashMapSources[state.currentMapSourceId]) {
-                return;
-              }
-              state.hashMapSources[state.currentMapSourceId].roadSelectedOptions = {
-                bicyclingLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.bicyclingLayer || false,
-                trafficLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.trafficLayer || false,
-                transitLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.transitLayer || false,
-                ...partialRoadOptions
-              };
-            });
-          },
-          setHandlerGetLabel: (newHandler) => {
-            set((state) => {
-              state.getLabel = newHandler;
-            });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-            });
-          }
-        }
-      })),
-      { name: `Map store` }
-    )
-  );
-};
-const MapContext = createContext(null);
-function MapProvider(props) {
-  const { children, initialLayers, googleApiKey: apiKey, googleMapVersion = "weekly" } = props;
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([getLabel]);
-  const mapStoreRef = useRef();
-  if (!mapStoreRef.current) {
-    mapStoreRef.current = createMapStore({
-      getLabel,
-      ownerState: {
-        status: "init",
-        isMobile: !isDesktop,
-        isSkeleton,
-        focus: false
-      },
-      googleApiKey: apiKey,
-      googleMapVersion
-    });
-    mapStoreRef.current?.getState().mapActions.init(initialLayers || []);
-  }
-  const { setHandlerGetLabel, setExternalState } = useStore(
-    mapStoreRef.current,
-    (state) => state.mapActions,
-    shallow
-  );
-  useEffect(() => {
-    if (!isFirstRender) {
-      setHandlerGetLabel(getLabel);
-    }
-  }, [getLabel]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    setExternalState({ isMobile: !isDesktop, isSkeleton });
-  }, [isDesktop, isSkeleton]);
-  return /* @__PURE__ */ jsx(MapContext.Provider, { value: mapStoreRef.current, children });
-}
-function useMapStore(selector, equalityFn) {
-  const context = useContext(MapContext);
-  if (!context) throw new Error("useMapStore context must be use inside MapContext");
-  return useStore(context, selector, equalityFn);
-}
-const TileLayerOthers = () => {
-  const map = useMap();
-  const { urlTemplate, dictionaryId, options, getTileUrl, sourceType } = useMapStore(
-    (state) => state.hashMapSources[state.currentMapSourceId],
-    shallow
-  );
-  useEffect(() => {
-    let layer;
-    if (sourceType === "Google") {
-      return;
-    }
-    layer = L__default.tileLayer(urlTemplate, options);
-    if (getTileUrl) {
-      layer.getTileUrl = getTileUrl;
-    }
-    map.addLayer(layer);
-    if (options && options.maxZoom) {
-      map.setMaxZoom(options.maxZoom);
-    }
-    return () => {
-      if (layer) {
-        map.removeLayer(layer);
-      }
-    };
-  }, [dictionaryId, urlTemplate, options, getTileUrl, sourceType]);
-  return null;
-};
-function TileLayerGoogle() {
-  const map = useMap();
-  const mutantRefLayer = React__default.useRef(null);
-  const { options, sourceType, mapTypeTile } = useMapStore(
-    (state) => state.hashMapSources[state.currentMapSourceId],
-    shallow
-  );
-  const roadOptions = useMapStore(
-    (state) => state.hashMapSources[state.currentMapSourceId].roadSelectedOptions,
-    shallow
-  );
-  const [googleApiKey, googleMapVersion] = useMapStore(
-    (state) => [state.googleApiKey, state.googleMapVersion],
-    shallow
-  );
-  React__default.useEffect(() => {
-    if (sourceType !== "Google") {
-      return;
-    }
-    let googleMutantLayer;
-    const loader = new Loader({
-      apiKey: googleApiKey,
-      version: googleMapVersion
-    });
-    loader.importLibrary("maps").then(() => {
-      googleMutantLayer = L__default.gridLayer.googleMutant({
-        type: mapTypeTile,
-        // map type, can be 'roadmap', 'satellite', etc.
-        maxZoom: 20,
-        // styles: [
-        //   // Google Maps styles array, can be generated here: https://mapstyle.withgoogle.coxm/
-        // ],
-        ...options
-      });
-      mutantRefLayer.current = googleMutantLayer;
-      if (roadOptions.trafficLayer) {
-        googleMutantLayer.addGoogleLayer("TrafficLayer");
-      }
-      if (roadOptions.transitLayer) {
-        googleMutantLayer.addGoogleLayer("TransitLayer");
-      }
-      if (roadOptions.bicyclingLayer) {
-        googleMutantLayer.addGoogleLayer("BicyclingLayer");
-      }
-      map.addLayer(googleMutantLayer);
-    });
-    return () => {
-      if (googleMutantLayer) {
-        map.removeLayer(googleMutantLayer);
-        mutantRefLayer.current = null;
-      }
-    };
-  }, [map, sourceType, mapTypeTile]);
-  React__default.useEffect(() => {
-    if (sourceType !== "Google") {
-      return;
-    }
-    if (mutantRefLayer.current && roadOptions) {
-      if (roadOptions.trafficLayer) {
-        mutantRefLayer.current.addGoogleLayer("TrafficLayer");
-      } else if (roadOptions.trafficLayer === false) {
-        mutantRefLayer.current.removeGoogleLayer("TrafficLayer");
-      }
-    }
-  }, [roadOptions.trafficLayer]);
-  React__default.useEffect(() => {
-    if (sourceType !== "Google") {
-      return;
-    }
-    if (mutantRefLayer.current && roadOptions) {
-      if (roadOptions.transitLayer) {
-        mutantRefLayer.current.addGoogleLayer("TransitLayer");
-      } else if (roadOptions.transitLayer === false) {
-        mutantRefLayer.current.removeGoogleLayer("TransitLayer");
-      }
-    }
-  }, [roadOptions.transitLayer]);
-  React__default.useEffect(() => {
-    if (sourceType !== "Google") {
-      return;
-    }
-    if (mutantRefLayer.current && roadOptions) {
-      if (roadOptions.bicyclingLayer) {
-        mutantRefLayer.current.addGoogleLayer("BicyclingLayer");
-      } else if (roadOptions.bicyclingLayer === false) {
-        mutantRefLayer.current.removeGoogleLayer("BicyclingLayer");
-      }
-    }
-  }, [roadOptions.bicyclingLayer]);
-  return null;
-}
-function TileLayers() {
-  return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-    /* @__PURE__ */ jsx(TileLayerOthers, {}),
-    /* @__PURE__ */ jsx(TileLayerGoogle, {})
-  ] });
-}
-const POSITION_CLASSES = {
-  bottomleft: "leaflet-bottom leaflet-left",
-  bottomright: "leaflet-bottom leaflet-right",
-  topleft: "leaflet-top leaflet-left",
-  topright: "leaflet-top leaflet-right"
-};
-const Control = (props) => {
-  const [portalRoot, setPortalRoot] = React__default.useState(document.createElement("div"));
-  const positionClass = props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright;
-  const controlContainerRef = React__default.createRef();
-  const map = useMap();
-  React__default.useEffect(() => {
-    if (controlContainerRef.current !== null) {
-      L__default.DomEvent.disableClickPropagation(controlContainerRef.current);
-      L__default.DomEvent.disableScrollPropagation(controlContainerRef.current);
-    }
-  }, [controlContainerRef]);
-  React__default.useEffect(() => {
-    const mapContainer = map.getContainer();
-    const targetDiv = mapContainer.getElementsByClassName(positionClass);
-    setPortalRoot(targetDiv[0]);
-  }, [positionClass]);
-  React__default.useEffect(() => {
-    if (portalRoot !== null) {
-      if (props.prepend !== void 0 && props.prepend === true) {
-        portalRoot.prepend(controlContainerRef.current);
-      } else {
-        portalRoot.append(controlContainerRef.current);
-      }
-    }
-  }, [portalRoot, props.prepend, controlContainerRef]);
-  const className = clsx(props.container?.className, "leaflet-control", props.className);
-  return /* @__PURE__ */ jsx("div", { ...props.container, ref: controlContainerRef, className, children: props.children });
-};
-function MyActions() {
-  const { control, setValue } = useFormContext();
-  const { getLabel } = useModuleDictionary();
-  const fieldsWatch = useWatch({
-    control,
-    name: ["statusEdition", "reInits"]
-  });
-  const statusEdition = fieldsWatch[0];
-  const initCancelDraw = () => {
-    if (statusEdition === "initial") {
-      setValue("statusEdition", "draw");
-    } else if (statusEdition === "draw") {
-      setValue("statusEdition", "initial");
-    }
-  };
-  return /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Button, { onClick: initCancelDraw, children: statusEdition === "initial" ? getLabel(MAP_DICCTIONARY.LABEL_MEASURE_START) : getLabel(MAP_DICCTIONARY.LABEL_MEASURE_CANCEL) }) });
-}
-function MeasureDataValidation(_getLabel) {
-  return {};
-}
-function useValidation() {
-  const { getLabel } = useModuleDictionary();
-  const validationSchema = useMemo(
-    () => Yup.object().shape({
-      ...MeasureDataValidation()
-    }),
-    [getLabel]
-  );
-  return { validationSchema };
-}
-const INITIAL_FORM_VALUES = {
-  /** General Data */
-  statusLoad: "ready",
-  reInits: 0,
-  value: "0",
-  measureTypeId: "distance",
-  magnitudFactor: {
-    id: "m_kilometers",
-    name: "Kilometers",
-    symbol: "k",
-    factor_x0: 0,
-    factor_x1: 1,
-    factor_x2: 0
-  },
-  unitArea: null,
-  /** Config Data */
-  /** de Apoyo */
-  statusEdition: "initial"
-  // geometry: null ,
-};
-const STYLE_MEASURE_OPTIONS = {
-  strokeLineColor: "#1E96DC",
-  strokeLineWeight: 5,
-  markerHeight: 37,
-  markerWidth: 26,
-  labelMarkerHeight: 0,
-  labelMarkerWidth: 0,
-  labelMarkerAnchorY: 0,
-  labelMarkerAnchorX: 0
-};
-const getMarkerPointIcon = (position) => {
-  return L__default.divIcon({
-    className: mapClasses.measureMarkerRoot,
-    html: `<div  class="${mapClasses.measureMarkerContainer}">
-            <div  class="${mapClasses.measureMarkerContainerRhomb}">
-            </div>
-            <div  class="${mapClasses.measureMarkerContainerSlot}">
-                <div  class="${mapClasses.measureMarkerContainerSlotNumber}">
-                    ${position}
-                </div>
-            </div>
-        </div>
-        `,
-    iconSize: [STYLE_MEASURE_OPTIONS.markerWidth, STYLE_MEASURE_OPTIONS.markerHeight],
-    // tamaño del icono
-    iconAnchor: [STYLE_MEASURE_OPTIONS.markerWidth / 2, STYLE_MEASURE_OPTIONS.markerHeight]
-    // punto de anclaje, el mismo que el de la imagen
-  });
-};
-const getMarkerPointLabel = (distance, getLabel) => {
-  return L__default.divIcon({
-    className: mapClasses.measureLabelMarkerRoot,
-    html: `<div  class="${mapClasses.measureLabelMarkerContainer}">
-        ${distance ? `<span class="${mapClasses.measureLabelMarkerDistance}">${distance}</span>` : ""}
-        <div class="${mapClasses.measureLabelMarkerRemove}">${getLabel(
-      MAP_DICCTIONARY.LABEL_MEASURE_REMOVE_POINT
-    )}</div>
-        </div>`,
-    iconSize: [STYLE_MEASURE_OPTIONS.labelMarkerWidth, STYLE_MEASURE_OPTIONS.labelMarkerHeight],
-    // tamaño del label
-    iconAnchor: [
-      STYLE_MEASURE_OPTIONS.labelMarkerAnchorX,
-      STYLE_MEASURE_OPTIONS.labelMarkerAnchorY
-    ]
-    //
-  });
-};
-function useMeasure() {
-  const { getLabel } = useModuleDictionary();
-  const map = useMap();
-  const readyToUpdate = useFormReadyForUpdate();
-  const { control, setValue } = useFormContext();
-  const fieldsWatch = useWatch({
-    control,
-    name: ["statusEdition", "value", "magnitudFactor"]
-  });
-  const statusEdition = fieldsWatch[0];
-  const value = fieldsWatch[1];
-  const magnitudFactor = fieldsWatch[2];
-  const [magnitudFactorCached, setMagnitudFactorCached] = useState(magnitudFactor);
-  const currentMeasure = useRef({
-    measurePoints: [],
-    addMarker: false,
-    magnitudFactor,
-    dragging: false
-  });
-  const clearMeasure = useCallback(() => {
-    currentMeasure.current.measurePoints.forEach((measurePoint) => {
-      measurePoint.marker.remove();
-      measurePoint.labelMarker.remove();
-    });
-    currentMeasure.current.measurePoints = [];
-    setValue("value", measureDistante());
-  }, []);
-  const getFormatFactorDistance = useCallback(
-    (distance, withSymbol = false) => {
-      if (distance === void 0) {
-        return void 0;
-      }
-      const cMagnitudeFactor = currentMeasure.current.magnitudFactor;
-      return (cMagnitudeFactor.factor_x0 + distance * cMagnitudeFactor.factor_x1 + (distance ^ 2 * cMagnitudeFactor.factor_x2)).toFixed(2) + (withSymbol ? ` ${cMagnitudeFactor.symbol}` : "");
-    },
-    []
-  );
-  const measureDistante = useCallback(() => {
-    let totalDistance = 0;
-    const measurePoints = currentMeasure.current.measurePoints;
-    if (currentMeasure.current.layerLine) {
-      if (measurePoints.length < 2) {
-        currentMeasure.current.layerLine.remove();
-        currentMeasure.current.layerLine = void 0;
-      } else {
-        currentMeasure.current.layerLine.setLatLngs(
-          measurePoints.map((measurePoint) => measurePoint.marker.getLatLng())
-        );
-      }
-    } else {
-      if (measurePoints.length > 1) {
-        currentMeasure.current.layerLine = L.polyline(
-          measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()),
-          {
-            color: STYLE_MEASURE_OPTIONS.strokeLineColor,
-            weight: STYLE_MEASURE_OPTIONS.strokeLineWeight,
-            interactive: false
-            //No se puede editar
-          }
-        ).addTo(map);
-      }
-    }
-    for (let i = 0; i < measurePoints.length - 1; i++) {
-      totalDistance += measurePoints[i].marker.getLatLng().distanceTo(measurePoints[i + 1].marker.getLatLng());
-    }
-    if (measurePoints.length > 0 && measurePoints[0].formatDistanceFromPrevious !== void 0) {
-      measurePoints[0].formatDistanceFromPrevious = void 0;
-      measurePoints[0].labelMarker.setIcon(getMarkerPointLabelMemo(void 0, getLabel));
-      addClickListenerForRemove(measurePoints[0].labelMarker);
-    }
-    for (let i = 1; i < measurePoints.length; i++) {
-      const formatDistanceFromPrevious = getFormatFactorDistance(
-        measurePoints[i - 1].marker.getLatLng().distanceTo(measurePoints[i].marker.getLatLng()),
-        true
-      );
-      if (measurePoints[i].formatDistanceFromPrevious !== formatDistanceFromPrevious) {
-        measurePoints[i].formatDistanceFromPrevious = formatDistanceFromPrevious;
-        measurePoints[i].labelMarker.setIcon(
-          getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel)
-        );
-        addClickListenerForRemove(measurePoints[i].labelMarker);
-      }
-    }
-    return getFormatFactorDistance(totalDistance);
-  }, [map, getLabel]);
-  const getMarkerPointIconMemo = useCallback(getMarkerPointIcon, []);
-  const getMarkerPointLabelMemo = useCallback(getMarkerPointLabel, [getLabel]);
-  const onClickRemovePoint = useCallback((labelMarker) => {
-    return (e) => {
-      e.stopPropagation();
-      if (!currentMeasure.current.dragging) {
-        const markIndex = currentMeasure.current.measurePoints.findIndex(
-          (searchElement) => {
-            return searchElement.labelMarker === labelMarker;
-          }
-        );
-        if (markIndex !== -1) {
-          const measurePoint = currentMeasure.current.measurePoints[markIndex];
-          measurePoint.marker.remove();
-          measurePoint.labelMarker.remove();
-          currentMeasure.current.measurePoints.splice(markIndex, 1);
-          setValue("value", measureDistante());
-          currentMeasure.current.addMarker = true;
-        }
-        currentMeasure.current.measurePoints.forEach((measurePoint, index) => {
-          measurePoint.marker.setIcon(getMarkerPointIconMemo(index + 1));
-        });
-      }
-    };
-  }, []);
-  const addClickListenerForRemove = useCallback((labelMarker) => {
-    let element = labelMarker.getElement();
-    if (element) {
-      const elements = element.getElementsByClassName(
-        mapClasses.measureLabelMarkerRemove
-      );
-      element = elements[0];
-      if (element) {
-        element.addEventListener("click", onClickRemovePoint(labelMarker));
-      }
-    }
-  }, []);
-  const onClickMap = useCallback(
-    (e) => {
-      const lat = e.latlng.lat;
-      const lng = e.latlng.lng;
-      let formatDistanceFromPrevious = void 0;
-      if (currentMeasure.current.addMarker === false) {
-        return;
-      }
-      if (currentMeasure.current.measurePoints.length > 0) {
-        formatDistanceFromPrevious = getFormatFactorDistance(
-          currentMeasure.current.measurePoints[currentMeasure.current.measurePoints.length - 1].marker.getLatLng().distanceTo(e.latlng)
-        );
-      }
-      const marker = L.marker([lat, lng], {
-        draggable: true,
-        riseOnHover: true,
-        //Se pone la marca encima de las otras cuando se hace over
-        autoPan: true,
-        //Se corre el mapa si llega al extremo, solo para las marcas
-        icon: getMarkerPointIconMemo(currentMeasure.current.measurePoints.length + 1),
-        zIndexOffset: MAP_ZINDEX_DEFAULT
-      }).addTo(map);
-      marker.on("moveend", function(_e) {
-        const latlng = marker.getLatLng();
-        labelMarker.setLatLng(latlng);
-        setValue("value", measureDistante());
-      });
-      marker.on("mouseover", function() {
-        currentMeasure.current.addMarker = false;
-      });
-      marker.on("mouseout", function() {
-        currentMeasure.current.addMarker = true;
-      });
-      var labelMarker = L.marker([lat, lng], {
-        draggable: true,
-        riseOnHover: true,
-        //Se pone la marca encima de las otras cuando se hace over
-        icon: getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel),
-        zIndexOffset: MAP_ZINDEX_DEFAULT
-      }).addTo(map);
-      labelMarker.on("moveend", function(_e) {
-        const latlng = labelMarker.getLatLng();
-        marker.setLatLng(latlng);
-        setValue("value", measureDistante());
-      });
-      labelMarker.on("mouseover", function(_e) {
-        currentMeasure.current.addMarker = false;
-      });
-      labelMarker.on("mouseout", function(_e) {
-        currentMeasure.current.addMarker = true;
-      });
-      labelMarker.on("dragstart", function(_e) {
-        currentMeasure.current.dragging = true;
-      });
-      labelMarker.on("dragend", function(_e) {
-        setTimeout(function() {
-          currentMeasure.current.dragging = false;
-        }, 10);
-      });
-      addClickListenerForRemove(labelMarker);
-      currentMeasure.current.measurePoints.push({
-        marker,
-        labelMarker,
-        formatDistanceFromPrevious
-      });
-      setValue("value", measureDistante());
-    },
-    [map, measureDistante, setValue, getLabel]
-  );
-  const onMouseMoveMap = useCallback(() => {
-    map.getContainer().style.cursor = "crosshair";
-  }, [map]);
-  const onMouseOutMap = useCallback(() => {
-    map.getContainer().style.cursor = "default";
-  }, [map]);
-  useEffect(() => {
-    if (map) {
-      if (statusEdition === "initial") {
-        map.off("click", onClickMap);
-        clearMeasure();
-        map.getContainer().style.cursor = "default";
-        return;
-      } else {
-        currentMeasure.current.addMarker = true;
-        map.getContainer().style.cursor = "crosshair";
-        map.on("click", onClickMap);
-      }
-    }
-  }, [map, statusEdition]);
-  useEffect(() => {
-    if (!readyToUpdate) return;
-    if (magnitudFactor.id !== magnitudFactorCached.id) {
-      setMagnitudFactorCached({ ...magnitudFactor });
-      currentMeasure.current.magnitudFactor = magnitudFactor;
-      setValue("value", measureDistante());
-    }
-  }, [magnitudFactor]);
-  useEffect(() => {
-    return () => {
-      map.off("mousemove", onMouseMoveMap);
-      map.off("mouseout", onMouseOutMap);
-      map.off("click", onClickMap);
-      map.getContainer().style.cursor = "default";
-      clearMeasure();
-    };
-  }, []);
-  return { statusEdition, magnitudFactor, value };
-}
-function MeasureData() {
-  const { getLabel } = useModuleDictionary();
-  const { value, magnitudFactor } = useMeasure();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      RHFAutocompleteAsync,
-      {
-        type: "text",
-        endPoint: "magnitudes/factors?origin_unit_reference_id=m_kilometers",
-        name: "magnitudFactor",
-        autoComplete: "off",
-        getOptionLabel: (option) => option.name,
-        isOptionEqualToValue: (option, measureItemValue) => option.id === measureItemValue.id,
-        label: getLabel(MAP_DICCTIONARY.LABEL_MEASURE_UNIT),
-        isRemote: false
-      }
-    ),
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, className: mapClasses.measureToolFormValue, children: [
-      /* @__PURE__ */ jsx("span", { className: mapClasses.measureToolFormValueDistance, children: value }),
-      /* @__PURE__ */ jsx("span", { className: mapClasses.measureToolFormValueSymbol, children: magnitudFactor.symbol })
-    ] })
-  ] });
-}
-function MeasureTool() {
-  const { getLabel } = useModuleDictionary();
-  const finalInitalValues = {
-    ...INITIAL_FORM_VALUES
-  };
-  if (finalInitalValues?.magnitudFactor?.name) {
-    finalInitalValues.magnitudFactor.name = getLabel(
-      MAP_DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS
-    );
-  }
-  const { validationSchema } = useValidation();
-  const onSubmit = () => {
-  };
-  return /* @__PURE__ */ jsxs(
-    RHFormProvider,
-    {
-      className: mapClasses.meaureToolRoot,
-      statusLoad: INITIAL_FORM_VALUES.statusLoad,
-      onSubmit,
-      values: finalInitalValues,
-      validationSchema,
-      children: [
-        /* @__PURE__ */ jsx(Stack, { direction: "column", children: /* @__PURE__ */ jsx(MeasureData, {}) }),
-        /* @__PURE__ */ jsx(MyActions, {})
-      ]
-    }
-  );
-}
-function ZoomButtons() {
-  const map = useMap();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const [, setZoomInDisabled] = useState(false);
-  const [, setZoomOutDisabled] = useState(false);
-  useEffect(() => {
-    const updateButtonState = () => {
-      const currentZoom = map.getZoom();
-      const maxZoom = map.getMaxZoom();
-      const minZoom = map.getMinZoom();
-      setZoomInDisabled(currentZoom === maxZoom);
-      setZoomOutDisabled(currentZoom === minZoom);
-    };
-    map.on("zoomend", updateButtonState);
-    updateButtonState();
-    return () => {
-      map.off("zoomend", updateButtonState);
-    };
-  }, [map]);
-  const handleZoomIn = () => {
-    map.zoomIn();
-  };
-  const handleZoomOut = () => {
-    map.zoomOut();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: mapClasses.zoomButtons, children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: handleZoomIn,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_IN}`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: handleZoomOut,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_OUT}`
-      }
-    )
-  ] });
-}
-function TopRightTools(props) {
-  const { gpsTools } = props;
-  const { addPopup, closePopup } = usePopupsStore((state) => state.popupsActions);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const openPopupsIds = usePopupsStore(
-    (state) => state.popupsIds.filter((pId) => {
-      return state.hashPopups[pId].status === "init";
-    }),
-    shallow
-  );
-  const popupsIds = usePopupsStore((state) => state.popupsIds, shallow);
-  const map = useMap();
-  const isToggledGpsTools = openPopupsIds.indexOf("gpsTools") > -1;
-  const isDisabledGpsTools = popupsIds.indexOf("gpsTools") > -1 && openPopupsIds.indexOf("gpsTools") === -1;
-  const isToggledMeasureTool = openPopupsIds.indexOf("measureTool") > -1;
-  const isDisabledMeasureTool = popupsIds.indexOf("measureTool") > -1 && openPopupsIds.indexOf("measureTool") === -1;
-  const onMouseDown = (e) => {
-    map.dragging.disable();
-    e.stopPropagation();
-    document.addEventListener("mouseup", onMouseUp);
-  };
-  const onMouseUp = (e) => {
-    map.dragging.enable();
-    e.stopPropagation();
-    document.removeEventListener("mouseup", onMouseUp);
-  };
-  const onGpsToolsClick = (e) => {
-    if (!isToggledGpsTools) {
-      addPopup(
-        {
-          popupId: GPS_TOOLS_POPUP_ID,
-          title: getLabel(MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME),
-          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`,
-          functionComponent: gpsTools,
-          onMouseDown,
-          defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
-        },
-        { closeOthers: true }
-      );
-    } else {
-      closePopup(GPS_TOOLS_POPUP_ID);
-    }
-    e.stopPropagation();
-  };
-  const onMeasureToolClick = (e) => {
-    if (!isToggledMeasureTool) {
-      addPopup(
-        {
-          popupId: "measureTool",
-          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`,
-          title: "Measure Tool",
-          functionComponent: MeasureTool,
-          onMouseDown,
-          defaultPosition: MESURE_POPUP_DEFAULT_POSITION
-        },
-        { closeOthers: true }
-      );
-    } else {
-      closePopup("measureTool");
-    }
-    e.stopPropagation();
-  };
-  return /* @__PURE__ */ jsxs(Control, { position: "topright", prepend: true, className: mapClasses.topRigthToolsRoot, children: [
-    /* @__PURE__ */ jsx(
-      ToggleIconButton,
-      {
-        isToggled: isToggledGpsTools,
-        disabled: isDisabledGpsTools,
-        onToggle: onGpsToolsClick,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ToggleIconButton,
-      {
-        isToggled: isToggledMeasureTool,
-        disabled: isDisabledMeasureTool,
-        onToggle: onMeasureToolClick,
-        src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`
-      }
-    ),
-    /* @__PURE__ */ jsx(ZoomButtons, {})
-  ] });
-}
-function useColumns(props) {
-  const {
-    rowKeyGetter,
-    visibleLayers,
-    setVisibleLayers,
-    autoFocusLayers,
-    setAutoFocusLayers,
-    clusterLayers,
-    setClusterLayers
-  } = props;
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const useHook = useCallback(
-    (field) => {
-      if (field === "visible") {
-        return [visibleLayers, setVisibleLayers];
-      } else if (field === "autoFocus") {
-        return [autoFocusLayers, setAutoFocusLayers];
-      } else {
-        return [clusterLayers, setClusterLayers];
-      }
-    },
-    [visibleLayers, autoFocusLayers, clusterLayers]
-  );
-  const columns = useMemo(
-    () => [
-      {
-        key: "name",
-        name: getLabel(MAP_DICCTIONARY.LABEL_NAME),
-        type: "string",
-        width: 150,
-        frozen: true
-      },
-      {
-        key: "visible",
-        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE),
-        width: 50,
-        minWidth: 20,
-        type: "boolean",
-        // isDraggable: false,
-        formatter: ColumnSetCheckFormatter({
-          field: "visible",
-          rowKeyGetter,
-          useHook
-        }),
-        cellClass: "rdg-cell-align-center",
-        headerRenderer: () => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE), children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: "medium",
-            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_VISIBLE}`
-          }
-        ) })
-      },
-      {
-        key: "autoFocus",
-        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS),
-        minWidth: 20,
-        width: 50,
-        type: "boolean",
-        // frozen: true,
-        // isDraggable: false,
-        formatter: ColumnSetCheckFormatter({
-          field: "autoFocus",
-          rowKeyGetter,
-          useHook
-        }),
-        cellClass: "rdg-cell-align-center",
-        headerRenderer: () => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS), children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: "medium",
-            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_AUTOFOCUS}`
-          }
-        ) })
-      },
-      {
-        key: "cluster",
-        name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER),
-        minWidth: 20,
-        width: 50,
-        type: "boolean",
-        // frozen: true,
-        // isDraggable: false,
-        formatter: ColumnSetCheckFormatter({
-          field: "cluster",
-          disabledGetter: (row) => !row.clusterAble,
-          rowKeyGetter,
-          useHook
-        }),
-        cellClass: "rdg-cell-align-center",
-        headerRenderer: () => /* @__PURE__ */ jsx(Tooltip, { title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER), children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: "medium",
-            src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_CLUSTER}`
-          }
-        ) })
-      }
-      // {
-      //     key: 'checkedInternalFeatures',
-      //     name: getLabel(DICCTIONARY.LABEL_VIEW_INTERNAL_FEATURES),
-      //     width: 80,
-      //     type: 'boolean',
-      //     // isDraggable: false,
-      //     // frozen: true,
-      //     formatter: ColumnSetCheckFormatter({
-      //         field: 'InternalFeatures',
-      //         rowKeyGetter,
-      //         useHook,
-      //     }),
-      //     cellClass: 'rdg-cell-align-center',
-      // },
-    ],
-    [getLabel, useHook]
-  );
-  return { columns };
-}
-function useCheckedLayers(checkedNameSet) {
-  const [checkedLayers, setCheckedLayers] = useMapStore(
-    (state) => [
-      state[`${checkedNameSet}CheckedLayers`],
-      (newSet) => {
-        state.mapActions.setCheckedLayers(checkedNameSet, newSet);
-      }
-    ],
-    shallow
-  );
-  return [checkedLayers, setCheckedLayers];
-}
-function useRowActionsGetter() {
-  const { getLabel } = useModuleDictionary();
-  const { hasPrivilege } = useModulePrivileges();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { removeLayer } = useMapStore((state) => state.mapActions, shallow);
-  const [urlIconDelete] = useState(
-    `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_DELETE}`
-  );
-  const onDelete = useCallback(
-    (row) => {
-      removeLayer(row.id);
-    },
-    [getLabel]
-  );
-  const rowActionsGetter = useCallback(
-    (row) => {
-      const conditionalItems = [];
-      conditionalItems.push({
-        urlIcon: urlIconDelete,
-        dictionaryId: MAP_DICCTIONARY.ROW_ACTION_LAYER_DELETE,
-        onClick: () => {
-          onDelete(row);
-        },
-        disabled: !row.deleteAble
-      });
-      return conditionalItems;
-    },
-    [hasPrivilege, onDelete, urlIconDelete]
-  );
-  return { rowActionsGetter };
-}
-function useMaster() {
-  const [hashLayers, layersIds] = useMapStore(
-    (state) => [state.hashLayers, state.layersIds],
-    shallow
-  );
-  const rowKeyGetter = useCallback((row) => row.id, []);
-  const [visibleLayers, setVisibleLayers] = useCheckedLayers("visible");
-  const [autoFocusLayers, setAutoFocusLayers] = useCheckedLayers("autoFocus");
-  const [clusterLayers, setClusterLayers] = useCheckedLayers("cluster");
-  const rows = useMemo(() => {
-    const rows2 = [];
-    layersIds.forEach((layerId) => {
-      if (hashLayers[layerId]) {
-        rows2.push({
-          id: layerId,
-          name: hashLayers[layerId].name || `*${layerId}`,
-          active: hashLayers[layerId].visible,
-          clusterAble: hashLayers[layerId].clusterAble || false,
-          deleteAble: hashLayers[layerId].deleteAble || false
-        });
-      }
-    });
-    return rows2;
-  }, [hashLayers, layersIds]);
-  const { rowActionsGetter } = useRowActionsGetter();
-  const { columns } = useColumns({
-    rowKeyGetter,
-    visibleLayers,
-    setVisibleLayers,
-    autoFocusLayers,
-    setAutoFocusLayers,
-    clusterLayers,
-    setClusterLayers
-  });
-  return {
-    rowKeyGetter,
-    columns,
-    rows,
-    checkedRows: visibleLayers,
-    onCheckedRowsChange: setVisibleLayers,
-    rowActionsGetter
-  };
-}
-function useDisableZoomEvents(node) {
-  const map = useMap();
-  useEffect(() => {
-    if (!map || !node) return;
-    node.addEventListener("mouseover", function() {
-      map.doubleClickZoom.disable();
-      map.scrollWheelZoom.disable();
-    });
-    node.addEventListener("mouseleave", function() {
-      map.scrollWheelZoom.enable();
-      map.doubleClickZoom.enable();
-    });
-  }, [map, node]);
-}
-function LayersTool() {
-  const { columns, rows, rowKeyGetter, rowActionsGetter } = useMaster();
-  const [divRef, setDivRef] = useStateRef(null);
-  useDisableZoomEvents(divRef);
-  return /* @__PURE__ */ jsx("div", { ref: setDivRef, style: { position: "relative", height: "100%" }, children: /* @__PURE__ */ jsx(
-    DataGrid,
-    {
-      id: "layers",
-      columns,
-      rows,
-      rowActionsGetter,
-      rowKeyGetter,
-      withActions: true,
-      actionsProps: {
-        withRowsCount: false,
-        withSettings: false,
-        withPager: false,
-        withLocalFilters: false
-      }
-    }
-  ) });
-}
-function MapSourcesTool() {
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const currentMapSourceId = useMapStore((state) => state.currentMapSourceId, shallow);
-  const mapSources = useMapStore((state) => {
-    return state.mapSourcesIds.map((id) => ({
-      id,
-      dictionaryId: state.hashMapSources[id].dictionaryId,
-      iconUrl: state.hashMapSources[id].iconUrl,
-      hasBicyclingLayer: state.hashMapSources[id].hasBicyclingLayer,
-      hasTrafficLayer: state.hashMapSources[id].hasTrafficLayer,
-      hasTransitLayer: state.hashMapSources[id].hasTransitLayer,
-      roadSeletedOptions: state.hashMapSources[id].roadSelectedOptions
-    }));
-  }, shallow);
-  const { setCurrentMapSource, setMapSourceRoadOptions: setMapSourceRoadMapOptions } = useMapStore(
-    (state) => state.mapActions,
-    shallow
-  );
-  const [divRef, setDivRef] = useStateRef(null);
-  useDisableZoomEvents(divRef);
-  const handleChange = (event) => {
-    setCurrentMapSource(event.target.value);
-  };
-  return /* @__PURE__ */ jsx("div", { className: mapClasses.mapSourcesRoot, ref: setDivRef, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-    RadioGroup,
-    {
-      "aria-labelledby": "demo-controlled-radio-buttons-group",
-      name: "controlled-radio-buttons-group",
-      value: currentMapSourceId,
-      onChange: handleChange,
-      children: mapSources.map((mapSourceOption) => /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOption, children: [
-        /* @__PURE__ */ jsx(
-          FormControlLabel,
-          {
-            className: "",
-            value: mapSourceOption.id,
-            control: /* @__PURE__ */ jsx(Radio, {}),
-            label: /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionIconLabel, children: [
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${mapSourceOption.iconUrl}`
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: getLabel(mapSourceOption.dictionaryId) })
-            ] })
-          }
-        ),
-        (mapSourceOption.hasBicyclingLayer || mapSourceOption.hasTrafficLayer || mapSourceOption.hasTransitLayer) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              mapClasses.mapSourcesOptionRoadOptions,
-              currentMapSourceId !== mapSourceOption.id ? mapClasses.disabled : mapClasses.active
-            ),
-            children: [
-              mapSourceOption.hasTrafficLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
-                /* @__PURE__ */ jsx(
-                  CheckBox,
-                  {
-                    disabled: currentMapSourceId !== mapSourceOption.id,
-                    checked: mapSourceOption.roadSeletedOptions?.trafficLayer || false,
-                    onChange: (_e, checked) => {
-                      setMapSourceRoadMapOptions({ trafficLayer: checked });
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRAFFIC}`
-                  }
-                )
-              ] }),
-              mapSourceOption.hasTransitLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
-                /* @__PURE__ */ jsx(
-                  CheckBox,
-                  {
-                    disabled: currentMapSourceId !== mapSourceOption.id,
-                    checked: mapSourceOption.roadSeletedOptions?.transitLayer || false,
-                    onChange: (_e, checked) => {
-                      setMapSourceRoadMapOptions({ transitLayer: checked });
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRANSIT}`
-                  }
-                )
-              ] }),
-              mapSourceOption.hasBicyclingLayer && /* @__PURE__ */ jsxs("div", { className: mapClasses.mapSourcesOptionRoadOptionsCheck, children: [
-                /* @__PURE__ */ jsx(
-                  CheckBox,
-                  {
-                    disabled: currentMapSourceId !== mapSourceOption.id,
-                    checked: mapSourceOption.roadSeletedOptions?.bicyclingLayer || false,
-                    label: "Bycicle",
-                    onChange: (_e, checked) => {
-                      setMapSourceRoadMapOptions({ bicyclingLayer: checked });
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_BICYCLING}`
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ] }, mapSourceOption.dictionaryId))
-    }
-  ) }) });
-}
-function LayersButton(props) {
-  const { type } = props;
-  const [open, setOpen] = useState(null);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const theme = useTheme();
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const handleClose = () => {
-    setOpen(null);
-  };
-  return (
-    /* LanguagePopoverRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
-        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros componentes
-        de la plataforna web. */
-    /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: handleOpen,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${type === "MapSources" ? MAP_ICONS.MAP_SOURCES_TOOL : MAP_ICONS.MAP_LAYERS_TOOL}`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Popover,
-        {
-          className: type === "MapSources" ? mapClasses.mapSourcesPopoverRoot : mapClasses.layersPopoverRoot,
-          arrowType: "no-arrow",
-          open: Boolean(open),
-          anchorEl: open,
-          anchorOrigin: { vertical: "bottom", horizontal: "left" },
-          onClose: handleClose,
-          sx: {
-            ...type === "MapSources" ? theme.components?.M4LMapMapSources?.styleOverrides : theme.components?.M4LMapLayers?.styleOverrides
-            // width: 180,
-            // '& .MuiMenuItem-root': { px: 1, typography: 'body2', borderRadius: 0.75 },
-          },
-          disableAutoFocus: true,
-          disableRestoreFocus: true,
-          disableEnforceFocus: true,
-          children: type === "MapSources" ? /* @__PURE__ */ jsx(MapSourcesTool, {}) : /* @__PURE__ */ jsx(LayersTool, {})
-        }
-      )
-    ] })
-  );
-}
-function TopLeftTools() {
-  return /* @__PURE__ */ jsxs(Control, { position: "topleft", prepend: true, className: mapClasses.topLeftToolsRoot, children: [
-    /* @__PURE__ */ jsx(LayersButton, { type: "MapSources" }),
-    /* @__PURE__ */ jsx(LayersButton, { type: "Layers" })
-  ] });
-}
-function Controls(props) {
-  const { gpsTools } = props;
-  const map = useMap();
-  const [controlContainer, setControlContainer] = useState(null);
-  useEffect(() => {
-    const cContainer = map.getContainer().getElementsByClassName("leaflet-control-container")[0];
-    if (cContainer !== null) {
-      setControlContainer(cContainer);
-      L__default.DomEvent.disableClickPropagation(cContainer);
-      L__default.DomEvent.disableScrollPropagation(cContainer);
-    }
-  }, [map]);
-  return /* @__PURE__ */ jsxs(
-    PopupsProvider,
-    {
-      baseZindex: MAP_ZINDEX_OVER_MAP,
-      containerElement: map.getContainer(),
-      initialPopups: [
-        {
-          popupId: "popup1",
-          status: "init",
-          iconUrl: "`https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/dynamic_filter/assets/icons/edit.svg`,",
-          title: "Popup 1",
-          subTitle: "Subtitulo",
-          zIndex: 1,
-          componentProps: {},
-          functionComponent: () => /* @__PURE__ */ jsx("div", { children: "MyComponent" })
-        }
-      ],
-      children: [
-        /* @__PURE__ */ jsx(TopLeftTools, {}),
-        /* @__PURE__ */ jsx(TopRightTools, { gpsTools }),
-        controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewer, {}), controlContainer)
-      ]
-    }
-  );
-}
-const MarkerClusterGroup = createPathComponent(({ children: _c, ...props }, ctx) => {
-  const clusterProps = {};
-  const clusterEvents = {};
-  Object.entries(props).forEach(([propName, prop]) => {
-    if (propName !== void 0 && prop !== "") {
-      propName.startsWith("on") ? clusterEvents[propName] = prop : clusterProps[propName] = prop;
-    }
-  });
-  const markerClusterGroup = new L__default.MarkerClusterGroup(clusterProps);
-  Object.entries(clusterEvents).forEach(([eventAsProp, callback]) => {
-    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
-    markerClusterGroup.on(clusterEvent, callback);
-  });
-  return {
-    instance: markerClusterGroup,
-    context: { ...ctx, layerContainer: markerClusterGroup }
-  };
-});
-const RenderByEachFeatureComponent = ({
-  renderFeature,
-  ...props
-}) => {
-  const feature = renderFeature(props);
-  return feature ? /* @__PURE__ */ jsx(Fragment, { children: feature }) : null;
-};
-const MemonizedRenderByEachFeatureComponent = React__default.memo(RenderByEachFeatureComponent);
-const MyLayer = (props) => {
-  const { layerId } = props;
-  const map = useMap();
-  const popupRef = useRef(null);
-  const lefaletLayerRef = useRef({
-    clickTimeout: null,
-    clickCount: 0,
-    handleClickSetted: false
-  });
-  const featureIdOrCollection = useMapStore((state) => {
-    const geoJsonObject = state.hashLayers[layerId]?.geoJsonObject;
-    if (geoJsonObject && geoJsonObject.object.type === "Feature") {
-      return geoJsonObject.object.id;
-    } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
-      return geoJsonObject && geoJsonObject.object.features.map((feature) => feature.id);
-    }
-  }, shallow);
-  const renderFeature = useMapStore((state) => state.hashLayers[layerId]?.renderFeature, shallow);
-  const [visible, cluster = false] = useMapStore(
-    (state) => [state.hashLayers[layerId]?.visible, state.hashLayers[layerId]?.cluster],
-    shallow
-  );
-  const markerClusterGroupRef = useRef(null);
-  const handleClick = (a) => {
-    lefaletLayerRef.current.clickCount++;
-    if (lefaletLayerRef.current.clickCount === 1) {
-      lefaletLayerRef.current.clickTimeout = setTimeout(() => {
-        const cluster2 = a.propagatedFrom;
-        if (cluster2 && cluster2 instanceof L__default.MarkerCluster) ;
-        if (!popupRef.current) {
-          popupRef.current = L__default.popup().setLatLng(a.sourceTarget._cLatLng).setContent("Hello, World!");
-          map.addLayer(popupRef.current);
-        } else {
-          popupRef.current.openOn(map);
-        }
-        lefaletLayerRef.current.clickCount = 0;
-      }, TIME_DOUBLE_CLICK);
-    } else if (lefaletLayerRef.current.clickCount === 2) {
-      if (lefaletLayerRef.current?.clickTimeout) {
-        clearTimeout(lefaletLayerRef.current.clickTimeout);
-      }
-      lefaletLayerRef.current.clickCount = 0;
-    }
-  };
-  useEffect(() => {
-    if (markerClusterGroupRef.current) {
-      markerClusterGroupRef.current.on("clusterclick", handleClick);
-    }
-  }, [markerClusterGroupRef.current]);
-  if (!featureIdOrCollection || !renderFeature) {
-    return null;
-  }
-  if (visible === false) {
-    return null;
-  }
-  const isFeaturCollection = Array.isArray(featureIdOrCollection);
-  if (!isFeaturCollection) {
-    return /* @__PURE__ */ jsx(
-      RenderByEachFeatureComponent,
-      {
-        renderFeature,
-        id: featureIdOrCollection,
-        layerId
-      }
-    );
-  } else {
-    const createClusterCustomIcon = (cluster2) => {
-      const childCount = cluster2.getChildCount();
-      let c = " marker-cluster-";
-      if (childCount < 10) {
-        c += "small";
-      } else if (childCount < 100) {
-        c += "medium";
-      } else {
-        c += "large";
-      }
-      const DivIcon2 = new L__default.DivIcon({
-        html: "<div><span>" + childCount + "</span></div>",
-        className: "marker-cluster" + c,
-        iconSize: new L__default.Point(40, 40)
-      });
-      return DivIcon2;
-    };
-    if (!cluster) {
-      return /* @__PURE__ */ jsx(LayerGroup, { children: featureIdOrCollection.map((featureId) => {
-        return /* @__PURE__ */ jsx(
-          MemonizedRenderByEachFeatureComponent,
-          {
-            renderFeature,
-            id: featureId,
-            layerId
-          },
-          `k_${featureId}`
-        );
-      }) });
-    } else {
-      return /* @__PURE__ */ jsx(
-        MarkerClusterGroup,
-        {
-          disableClusteringAtZoom: 18,
-          showCoverageOnHover: false,
-          zoomToBoundsOnClick: false,
-          spiderfyOnMaxZoom: false,
-          iconCreateFunction: createClusterCustomIcon,
-          children: featureIdOrCollection.map((featureId) => {
-            return /* @__PURE__ */ jsx(
-              MemonizedRenderByEachFeatureComponent,
-              {
-                renderFeature,
-                id: featureId,
-                layerId
-              },
-              `k_${featureId}`
-            );
-          })
-        }
-      );
-    }
-  }
-};
-function useAutoFocus() {
-  const map = useMap();
-  const layerWithAutoFocus = useMapStore((state) => {
-    return state.layersIds.filter((lId) => {
-      if (state.hashLayers[lId].autoFocus && state.hashLayers[lId].visible) {
-        return true;
-      }
-      return false;
-    }).map((layerId) => ({
-      layerId,
-      features: function() {
-        if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-          const layer = state.hashLayers[layerId].geoJsonObject?.object;
-          return layer.features.filter((feature) => feature.layerData !== void 0).map((feature) => ({ featureId: feature.id, layerData: feature.layerData }));
-        } else {
-          const feature = state.hashLayers[layerId].geoJsonObject?.object;
-          if (feature.layerData !== void 0) {
-            return [{ featureId: feature.id, layerData: feature.layerData }];
-          }
-        }
-        return [];
-      }()
-    }));
-  }, shallow);
-  useEffect(() => {
-    const proccesLayerWithAutoFocus = (layersFoucus) => {
-      const layersToFitBounds = [];
-      for (const layerWhitFeatures of layersFoucus) {
-        const features = layerWhitFeatures?.features;
-        for (let i = 0; i < features.length; i++) {
-          const feature = features[i];
-          if (feature.layerData !== void 0) {
-            const featureForBounds = {
-              layerId: layerWhitFeatures.layerId,
-              featureId: feature.featureId,
-              layerData: feature.layerData
-            };
-            layersToFitBounds.push(featureForBounds);
-          } else {
-            console.error(`La capa ${layerWhitFeatures.layerId} no tiene un método getBounds`);
-          }
-        }
-      }
-      if (layersToFitBounds.length > 0) {
-        let featureForBounds = layersToFitBounds[0];
-        let bounds = L__default.latLngBounds(
-          featureForBounds.layerData.boundsNW,
-          featureForBounds.layerData.boundsSE
-        );
-        for (let i = 1; i < layersToFitBounds.length; i++) {
-          featureForBounds = layersToFitBounds[i];
-          const newBounds = L__default.latLngBounds(
-            featureForBounds.layerData.boundsNW,
-            featureForBounds.layerData.boundsSE
-          );
-          bounds = bounds.extend(newBounds);
-        }
-        map.fitBounds(bounds, { animate: false, maxZoom: 22, padding: [50, 50] });
-      }
-    };
-    const throttleBounds = throttle(proccesLayerWithAutoFocus, 300, {
-      leading: false,
-      // No enviar el primer evento de fitBounds
-      trailing: true
-      // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad del fitBounds
-    });
-    throttleBounds(layerWithAutoFocus);
-  }, [layerWithAutoFocus]);
-}
-const LayersContainer = () => {
-  const layersId = useMapStore((state) => state.layersIds, shallow);
-  const isSkeleton = useMapStore((state) => state.ownerState.isSkeleton, shallow);
-  const map = useMap();
-  useAutoFocus();
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    L__default.control.scale().addTo(map);
-    return () => {
-      L__default.control.scale().remove();
-    };
-  }, [map]);
-  if (isSkeleton) {
-    return null;
-  }
-  if (!map) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(React__default.Fragment, { children: layersId.map((l) => /* @__PURE__ */ jsx(MyLayer, { layerId: l }, l)) });
-};
-const MapRootContainer = styled(MapContainer)`
-  ${(props) => props.theme.components?.M4LMap?.styleOverrides}
-`;
-function Map$1(props) {
-  const {
-    gpsTools,
-    center = [6.215749485905093, -75.58622905191254],
-    initalZoom = 16,
-    maxZoom = 22
-  } = props;
-  return /* @__PURE__ */ jsxs(
-    MapRootContainer,
-    {
-      className: mapClasses.root,
-      center,
-      zoom: initalZoom,
-      maxZoom,
-      boxZoom: true,
-      preferCanvas: true,
-      zoomControl: false,
-      children: [
-        /* @__PURE__ */ jsx(TileLayers, {}),
-        /* @__PURE__ */ jsx(LayersContainer, {}),
-        /* @__PURE__ */ jsx(Controls, { gpsTools })
-      ]
-    }
-  );
-}
-function CustomMarker(props) {
-  const { position, width, height, iconForm, bearing, ...other } = props;
-  const html = useMemo(() => {
-  }, [bearing]);
-  const customIcon = useMemo(() => {
-    return L__default.divIcon({
-      className: "custom-icon",
-      iconSize: [width, height],
-      html: `<div>Hola</div>`
-    });
-  }, [html]);
-  return /* @__PURE__ */ jsx(
-    Marker,
-    {
-      position,
-      icon: customIcon,
-      ...other
-    }
-  );
-}
-const MarkerFeatureRender = (props) => {
-  const { id, layerId } = props;
-  const feature = useMapStore((state) => {
-    const gObject = state.hashLayers[layerId].geoJsonObject;
-    if (!gObject) {
-      return null;
-    }
-    if (gObject.object.type === "Feature") {
-      return {
-        id: gObject.object.id,
-        geometry: gObject.object.geometry,
-        properties: gObject.object.properties
-      };
-    } else {
-      const feat = gObject.object.features.find((f) => f.id === id);
-      if (feat) {
-        return {
-          id: feat.id,
-          geometry: feat.geometry,
-          properties: feat.properties
-        };
-      }
-      return null;
-    }
-  }, shallow);
-  if (!feature) {
-    return null;
-  }
-  if (feature.geometry.type === "Point") {
-    const [lat, lng] = feature.geometry.coordinates;
-    const bearing = feature.properties?.iconBearing ?? 0;
-    return (
-      // <Marker position={{ lat, lng }}>
-      // ddd
-      // </Marker>
-      /* @__PURE__ */ jsx(
-        CustomMarker,
-        {
-          position: { lat, lng },
-          width: 32,
-          height: 32,
-          bearing,
-          iconForm: "grua",
-          id: feature.id
-        }
-      )
-    );
-  }
-  return null;
-};
-const PolylineWithArrows = ({
-  positions,
-  enableEdit,
-  ...other
-}) => {
-  const map = useMap();
-  const polylineRef = useRef(null);
-  const decoratorRef = useRef(null);
-  useEffect(() => {
-    if (polylineRef.current) {
-      const decorator = L__default.polylineDecorator(polylineRef.current, {
-        patterns: [
-          {
-            // offset: '20%',
-            repeat: 50,
-            symbol: L__default.Symbol.arrowHead({
-              pixelSize: 4,
-              polygon: false,
-              pathOptions: {
-                stroke: true,
-                color: "#ffffff",
-                weight: 2
-              }
-            })
-          }
-        ]
-      }).addTo(map);
-      decoratorRef.current = decorator;
-      if (enableEdit) {
-        polylineRef.current.pm.enable();
-      } else {
-        polylineRef.current.pm.disable();
-      }
-      polylineRef.current.on("pm:change", () => {
-        if (decoratorRef.current) {
-          map.removeLayer(decoratorRef.current);
-        }
-        if (polylineRef.current) {
-          decoratorRef.current = L__default.polylineDecorator(polylineRef.current, {
-            patterns: [
-              {
-                // offset: '20%',
-                repeat: 40,
-                symbol: L__default.Symbol.arrowHead({
-                  pixelSize: 4,
-                  polygon: false,
-                  pathOptions: {
-                    stroke: true,
-                    color: "#cc0000",
-                    weight: 2
-                  }
-                })
-              }
-            ]
-          }).addTo(map);
-        }
-      });
-      return () => {
-        if (decoratorRef.current) {
-          map.removeLayer(decoratorRef.current);
-        }
-      };
-    }
-  }, [map, enableEdit]);
-  return /* @__PURE__ */ jsx(Polyline, { positions, ref: polylineRef, ...other });
-};
-const CommonFeatureRender = (props) => {
-  const { id, layerId } = props;
-  const feature = useMapStore((state) => {
-    const gObject = state.hashLayers[layerId].geoJsonObject;
-    if (!gObject) {
-      return null;
-    }
-    if (gObject.object.type === "Feature") {
-      return {
-        id: gObject.object.id,
-        geometry: gObject.object.geometry,
-        properties: gObject.object.properties,
-        featureLabel: gObject.object.featureLabel
-      };
-    } else {
-      const feat = gObject.object.features.find((f) => f.id === id);
-      if (feat) {
-        return {
-          id: feat.id,
-          geometry: feat.geometry,
-          properties: feat.properties,
-          featureLabel: feat.featureLabel
-        };
-      }
-      return null;
-    }
-  }, shallow);
-  const { addLayerDataToFeature } = useMapStore((state) => state.mapActions, shallow);
-  const [svg, setSvg] = useState(null);
-  useEffect(() => {
-    if (!feature) {
-      return;
-    }
-    if (feature.geometry?.type === "Point" && (feature.properties?.subType === "Marker" || feature.properties?.subType === void 0)) {
-      const { iconUrl, markerColor = MARKER_COLOR_DEFAULT } = feature?.properties;
-      const fetchData = async () => {
-        if (svg && svg.path === iconUrl && svg.color === markerColor) {
-          return;
-        }
-        let data;
-        if (iconUrl) {
-          data = await fetch(iconUrl).then((i) => i.text());
-        }
-        if (!data) {
-          data = SVG_ICON_DEFAULT;
-        }
-        data = "data:image/svg+xml;base64," + btoa((data || "").replace(/#1E96DC/g, markerColor));
-        setSvg({
-          color: markerColor,
-          path: iconUrl,
-          data
-        });
-      };
-      fetchData();
-    }
-  }, [feature]);
-  if (!feature) {
-    return null;
-  }
-  const propFeature = {
-    featureId: feature.id
-  };
-  const onAddPointLayer = useCallback((e) => {
-    const layerData = {
-      // visible: true,
-      boundsNW: e.target?._latlng,
-      boundsSE: e.target?._latlng
-    };
-    addLayerDataToFeature(layerId, feature.id, layerData);
-  }, []);
-  const onAddMultipointLayer = useCallback((e) => {
-    const layerData = {
-      // visible: true,
-      boundsNW: e.target.getBounds().getNorthWest(),
-      boundsSE: e.target.getBounds().getSouthEast()
-    };
-    addLayerDataToFeature(layerId, feature.id, layerData);
-  }, []);
-  if (feature.geometry?.type === "Point") {
-    const [lng, lat] = feature.geometry.coordinates;
-    if (feature.properties?.subType === "Marker" || feature.properties?.subType === void 0) {
-      const {
-        iconUrl: urlIcon,
-        iconBearing = 0,
-        iconOffsetRotate = 0,
-        scaleIcon = 1,
-        iconHeight,
-        iconWidth,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        className,
-        label,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        markerColor = MARKER_COLOR_DEFAULT,
-        labelBkColor = LABEL_BK_COLOR_DEFAULT,
-        labelColor = LABEL_COLOR_DEFAULT,
-        offsetLeftTop = [42, 0],
-        ...styleProperties
-      } = feature.properties;
-      if (urlIcon && !svg) {
-        return null;
-      }
-      return /* @__PURE__ */ jsx(
-        MarkerIconLabel,
-        {
-          position: { lat, lng },
-          ...{
-            label,
-            iconSrc: svg?.data,
-            iconScale: scaleIcon,
-            iconRotate: bearingRawToCSS(iconBearing, iconOffsetRotate),
-            iconWidth,
-            iconHeight,
-            labelBkColor,
-            labelColor,
-            offsetLeftTop
-          },
-          draggable: false,
-          eventHandlers: {
-            add: onAddPointLayer
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            // click: _e => {
-            // },
-          },
-          ...styleProperties,
-          ...propFeature
-        },
-        Math.random()
-      );
-    } else if (feature.properties?.subType === "Circle" && feature.properties?.radius) {
-      const { subType, radius, ...styleProperties } = feature.properties;
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Circle,
-          {
-            center: { lat, lng },
-            radius: feature.properties?.radius,
-            eventHandlers: {
-              add: onAddMultipointLayer
-              // remove: () => {
-              //     removeLefletLayerToFeature(layerId, feature.id)
-              // },
-            },
-            ...styleProperties,
-            ...propFeature
-          },
-          Math.random()
-        ),
-        feature?.featureLabel && /* @__PURE__ */ jsx(
-          MarkerIconLabel,
-          {
-            position: [lat + feature.properties.radius / 111319, lng],
-            ...feature?.featureLabel
-          }
-        )
-      ] });
-    }
-  } else if (feature.geometry?.type === "LineString") {
-    const polylinePositions = feature.geometry.coordinates.map(
-      (coord) => [coord[1], coord[0]]
-    );
-    if (feature.properties?.subType === "PolylineWithArrows") {
-      return /* @__PURE__ */ jsx(
-        PolylineWithArrows,
-        {
-          positions: polylinePositions,
-          stroke: true,
-          weight: 10,
-          eventHandlers: {
-            add: onAddMultipointLayer
-            // remove: () => {;
-            //     removeLefletLayerToFeature(layerId, feature.id)
-            // },
-          },
-          dashArray: "20 30",
-          ...feature.properties,
-          ...propFeature
-        },
-        Math.random()
-      );
-    } else {
-      return /* @__PURE__ */ jsx(
-        Polyline,
-        {
-          positions: polylinePositions,
-          stroke: true,
-          weight: 10,
-          eventHandlers: {
-            add: onAddMultipointLayer
-            // remove: () => {
-            //     removeLefletLayerToFeature(layerId, feature.id)
-            // },
-          },
-          dashArray: "20 30",
-          ...feature.properties,
-          ...propFeature
-        },
-        Math.random()
-      );
-    }
-  } else if (feature.geometry?.type === "Polygon") {
-    const polygonPositions = feature.geometry.coordinates.map(
-      (ring) => ring.map(([lng, lat]) => [lat, lng])
-    );
-    let topRightPoint = null;
-    polygonPositions[0].forEach((coord) => {
-      const [lat, lng] = coord;
-      if (!topRightPoint || lat >= topRightPoint[0] && lng >= topRightPoint[1]) {
-        topRightPoint = coord;
-      }
-    });
-    topRightPoint = topRightPoint || polygonPositions[0][0];
-    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Polygon,
-        {
-          positions: polygonPositions,
-          opacity: 1,
-          eventHandlers: {
-            add: onAddMultipointLayer
-            // remove: () => {
-            //     removeLefletLayerToFeature(layerId, feature.id)
-            // },
-          },
-          ...feature.properties,
-          ...propFeature
-        }
-      ),
-      feature?.featureLabel && /* @__PURE__ */ jsx(MarkerIconLabel, { position: topRightPoint, ...feature?.featureLabel })
-    ] });
-  }
-  return null;
-};
-export {
-  CommonFeatureRender as C,
-  GPS_TOOLS_POPUP_ID as G,
-  LABEL_BK_COLOR_DEFAULT as L,
-  Map$1 as M,
-  LABEL_COLOR_DEFAULT as a,
-  MapProvider as b,
-  MapContext as c,
-  MarkerFeatureRender as d,
-  mapClasses as m,
-  useMapStore as u
-};