@m4l/components 0.2.35 → 1.0.0

package/components/maps/{components/Map/index.accb1f77.js → index.8ec46ce4.js}

@@ -1,32 +1,26 @@
+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 { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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.fa7ab18c.js";
-import { B as Button } from "../../../mui_extended/Button/index.c3084916.js";
+import { M as MAP_DICCTIONARY } from "../areas/dictionary.7e74022a.js";
+import { d as Actions, B as Button, c as RHFAutocompleteAsync, S as Stack, r as ColumnSetCheckFormatter, g as DataGrid, s as CheckBox, P as Popover } from "../../vendor.a1ce6777.js";
 import * as Yup from "yup";
-import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
-import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index.bc278965.js";
-import { S as Stack } from "../../../mui_extended/Stack/index.0e53197c.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7b2a8723.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.f8a3021b.js";
-import { u as usePopupsStore, P as PopupsProvider } from "../../../popups/PopupsProvider/index.d7409f48.js";
-import { T as ToggleIconButton } from "../../../mui_extended/ToggleIconButton/index.d9dbf650.js";
-import { c as DataGrid } from "../../../DataGrid/index.abe0f9b9.js";
+import { ao as COMPONENT_CLASS_NAME, ap as STYLE_MEASURE_OPTIONS, aq as MAP_ZINDEX_DEFAULT, ar as INITIAL_FORM_VALUES, as as GPS_TOOLS_POPUP_DEFAULT_POSITION, at as MESURE_POPUP_DEFAULT_POSITION, au as TIME_DOUBLE_CLICK, av as MARKER_COLOR_DEFAULT, L as LABEL_BK_COLOR_DEFAULT, u as LABEL_COLOR_DEFAULT, aw as SVG_ICON_DEFAULT } from "../areas/constants.5387d83e.js";
+import { u as useFormReadyForUpdate } from "../../hooks/useFormReadyForUpdate/index.f60f500e.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.dc955a09.js";
+import { M as MAP_ICONS } from "../areas/icons.504ec098.js";
+import { a as IconButton, T as ToggleIconButton, I as Icon, M as MarkerIconLabel } from "../Icon/index.d5fed418.js";
+import { u as usePopupsStore, P as PopupsProvider } from "../popups/PopupsProvider/index.18669fb4.js";
 import { generateUtilityClasses, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
-import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index.0b23ba88.js";
-import { I as Icon, M as MarkerIconLabel } from "../../../Icon/index.ad330e78.js";
-import { u as useStateRef } from "../../../../hooks/useStateRef/index.538edb89.js";
-import { C as CheckBox } from "../../../mui_extended/CheckBox.2a3b86c5.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.d85de73b.js";
-import { P as PopupsViewer } from "../../../popups/PopupsViewer/index.1500ce72.js";
+import { u as useStateRef } from "../../hooks/useStateRef/index.538edb89.js";
+import { P as PopupsViewer } from "../popups/PopupsViewer/index.ba354267.js";
 import { createPathComponent } from "@react-leaflet/core";
 import "leaflet.markercluster";
 import { cloneDeep, throttle } from "lodash";
@@ -37,45 +31,9 @@ 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.6469f148.js";
-import { b as bearingRawToCSS } from "../../index.34ab6a68.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.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_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 updateOwnerStateClasses = (state) => {
+const updateOwnerStateClasses = (_state) => {
 };
 const mapClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",
@@ -152,113 +110,6 @@ const useMapUtilityClasses = (_ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
 };
-const MAP_DICCTIONARY = {
-  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_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",
-  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",
-  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_ZOOM_IN: "cmp_map_zoom_in.svg",
-  MAP_ZOOM_OUT: "cmp_map_zoom_out.svg",
-  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_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",
-  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",
-  MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
-  GEOMETRY_CIRCLE: "geometry_circle.svg",
-  GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
-  GEOMETRY_POLYGON: "geometry_polygon.svg",
-  ADD: "add.svg",
-  MAP_MEASURE_TOOL: "cmp_map_measure_tool.svg",
-  GENERAL: "general.svg",
-  CONFIG: "config.svg",
-  STROKE: "stroke.svg",
-  FILL: "fill.svg",
-  EDIT: "edit.svg",
-  DELETE: "delete.svg",
-  ACTIVE: "active.svg",
-  NAME: "name.svg"
-};
 const TILE_LAYER_OSM = {
   id: "osm_roadmap",
   sourceType: "OSM",
@@ -349,7 +200,7 @@ function toQuadKey(x, y, z) {
   let quadKey = "";
   for (let i = z; i > 0; i--) {
     let digit = 0;
-    let mask = 1 << i - 1;
+    const mask = 1 << i - 1;
     if ((x & mask) !== 0) {
       digit++;
     }
@@ -418,12 +269,16 @@ const createMapStore = (initProps) => {
                 google_hybrid: TILE_LAYER_GOOGLE_HYBRID,
                 bing_rodmap: TILE_LAYER_BING
               };
-              state.mapSourcesIds = ["osm_roadmap", "google_rodmap", "google_satellite", "google_hybrid", "bing_rodmap"];
+              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.hashLayers[layersStore[index].layerId] = cloneDeep(layersStore[index]);
                 state.layersIds.push(layersStore[index].layerId);
                 if (layersStore[index].visible !== false) {
                   state.visibleCheckedLayers.add(layersStore[index].layerId);
@@ -542,7 +397,9 @@ const createMapStore = (initProps) => {
               if (state.hashLayers[layerId]) {
                 if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
                   const layer = state.hashLayers[layerId].geoJsonObject?.object;
-                  const feature = layer.features.find((feature2) => feature2.id === featureId);
+                  const feature = layer.features.find(
+                    (currentFeature) => currentFeature.id === featureId
+                  );
                   if (feature) {
                     feature.layerData = layerData;
                   }
@@ -615,15 +472,8 @@ const createMapStore = (initProps) => {
 };
 const MapContext = createContext(null);
 function MapProvider(props) {
-  const {
-    children,
-    initialLayers,
-    googleApiKey: apiKey,
-    googleMapVersion = "weekly"
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { children, initialLayers, googleApiKey: apiKey, googleMapVersion = "weekly" } = props;
+  const { getLabel } = useModuleDictionary();
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([getLabel]);
@@ -642,10 +492,11 @@ function MapProvider(props) {
     });
     mapStoreRef.current?.getState().mapActions.init(initialLayers || []);
   }
-  const {
-    setHandlerGetLabel,
-    setExternalState
-  } = useStore(mapStoreRef.current, (state) => state.mapActions, shallow);
+  const { setHandlerGetLabel, setExternalState } = useStore(
+    mapStoreRef.current,
+    (state) => state.mapActions,
+    shallow
+  );
   useEffect(() => {
     if (!isFirstRender) {
       setHandlerGetLabel(getLabel);
@@ -655,15 +506,9 @@ function MapProvider(props) {
     if (isFirstRender) {
       return;
     }
-    setExternalState({
-      isMobile: !isDesktop,
-      isSkeleton
-    });
+    setExternalState({ isMobile: !isDesktop, isSkeleton });
   }, [isDesktop, isSkeleton]);
-  return /* @__PURE__ */ jsx(MapContext.Provider, {
-    value: mapStoreRef.current,
-    children
-  });
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: mapStoreRef.current, children });
 }
 function useMapStore(selector, equalityFn) {
   const context = useContext(MapContext);
@@ -673,13 +518,10 @@ function useMapStore(selector, equalityFn) {
 }
 const TileLayerOthers = () => {
   const map = useMap();
-  const {
-    urlTemplate,
-    dictionaryId,
-    options,
-    getTileUrl,
-    sourceType
-  } = useMapStore((state) => state.hashMapSources[state.currentMapSourceId], shallow);
+  const { urlTemplate, dictionaryId, options, getTileUrl, sourceType } = useMapStore(
+    (state) => state.hashMapSources[state.currentMapSourceId],
+    shallow
+  );
   useEffect(() => {
     let layer;
     if (sourceType === "Google") {
@@ -704,13 +546,18 @@ const TileLayerOthers = () => {
 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);
+  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;
@@ -750,7 +597,6 @@ function TileLayerGoogle() {
       return;
     }
     if (mutantRefLayer.current && roadOptions) {
-      console.log("roadOptions.trafficLayer", roadOptions.trafficLayer);
       if (roadOptions.trafficLayer) {
         mutantRefLayer.current.addGoogleLayer("TrafficLayer");
       } else if (roadOptions.trafficLayer === false) {
@@ -785,9 +631,10 @@ function TileLayerGoogle() {
   return null;
 }
 function TileLayers() {
-  return /* @__PURE__ */ jsxs(React__default.Fragment, {
-    children: [/* @__PURE__ */ jsx(TileLayerOthers, {}), /* @__PURE__ */ jsx(TileLayerGoogle, {})]
-  });
+  return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    /* @__PURE__ */ jsx(TileLayerOthers, {}),
+    /* @__PURE__ */ jsx(TileLayerGoogle, {})
+  ] });
 }
 const POSITION_CLASSES = {
   bottomleft: "leaflet-bottom leaflet-left",
@@ -801,7 +648,6 @@ const Control = (props) => {
   const controlContainerRef = React__default.createRef();
   const map = useMap();
   React__default.useEffect(() => {
-    console.log("useEffect, controlContainerRef", controlContainerRef);
     if (controlContainerRef.current !== null) {
       L__default.DomEvent.disableClickPropagation(controlContainerRef.current);
       L__default.DomEvent.disableScrollPropagation(controlContainerRef.current);
@@ -822,22 +668,11 @@ const Control = (props) => {
     }
   }, [portalRoot, props.prepend, controlContainerRef]);
   const className = clsx(props.container?.className, "leaflet-control", props.className);
-  console.log("Control Render", controlContainerRef);
-  return /* @__PURE__ */ jsx("div", {
-    ...props.container,
-    ref: controlContainerRef,
-    className,
-    children: props.children
-  });
+  return /* @__PURE__ */ jsx("div", { ...props.container, ref: controlContainerRef, className, children: props.children });
 };
 function MyActions() {
-  const {
-    control,
-    setValue
-  } = useFormContext();
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { control, setValue } = useFormContext();
+  const { getLabel } = useModuleDictionary();
   const fieldsWatch = useWatch({
     control,
     name: ["statusEdition", "reInits"]
@@ -850,12 +685,7 @@ function MyActions() {
       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)
-    })
-  });
+  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 {};
@@ -870,25 +700,6 @@ function useValidation() {
   );
   return { validationSchema };
 }
-const INITIAL_FORM_VALUES = {
-  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,
-  statusEdition: "initial"
-};
-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,
@@ -911,10 +722,15 @@ const getMarkerPointLabel = (distance, getLabel) => {
     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 class="${mapClasses.measureLabelMarkerRemove}">${getLabel(
+      MAP_DICCTIONARY.LABEL_MEASURE_REMOVE_POINT
+    )}</div>
         </div>`,
     iconSize: [STYLE_MEASURE_OPTIONS.labelMarkerWidth, STYLE_MEASURE_OPTIONS.labelMarkerHeight],
-    iconAnchor: [STYLE_MEASURE_OPTIONS.labelMarkerAnchorX, STYLE_MEASURE_OPTIONS.labelMarkerAnchorY]
+    iconAnchor: [
+      STYLE_MEASURE_OPTIONS.labelMarkerAnchorX,
+      STYLE_MEASURE_OPTIONS.labelMarkerAnchorY
+    ]
   });
 };
 function useMeasure() {
@@ -924,17 +740,18 @@ function useMeasure() {
   const { control, setValue } = useFormContext();
   const fieldsWatch = useWatch({
     control,
-    name: [
-      "statusEdition",
-      "value",
-      "magnitudFactor"
-    ]
+    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 currentMeasure = useRef({
+    measurePoints: [],
+    addMarker: false,
+    magnitudFactor,
+    dragging: false
+  });
   const clearMeasure = useCallback(() => {
     currentMeasure.current.measurePoints.forEach((measurePoint) => {
       measurePoint.marker.remove();
@@ -943,22 +760,27 @@ function useMeasure() {
     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 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(() => {
-    var totalDistance = 0;
+    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()));
+        currentMeasure.current.layerLine.setLatLngs(
+          measurePoints.map((measurePoint) => measurePoint.marker.getLatLng())
+        );
       }
     } else {
       if (measurePoints.length > 1) {
@@ -981,10 +803,15 @@ function useMeasure() {
       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);
+      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));
+        measurePoints[i].labelMarker.setIcon(
+          getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel)
+        );
         addClickListenerForRemove(measurePoints[i].labelMarker);
       }
     }
@@ -996,96 +823,103 @@ function useMeasure() {
     return (e) => {
       e.stopPropagation();
       if (!currentMeasure.current.dragging) {
-        var markIndex = currentMeasure.current.measurePoints.findIndex((searchElement) => {
-          return searchElement.labelMarker === labelMarker;
-        });
+        const markIndex = currentMeasure.current.measurePoints.findIndex(
+          (searchElement) => {
+            return searchElement.labelMarker === labelMarker;
+          }
+        );
         if (markIndex !== -1) {
-          var measurePoint = currentMeasure.current.measurePoints[markIndex];
+          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((measurePoint2, index) => {
-          measurePoint2.marker.setIcon(getMarkerPointIconMemo(index + 1));
+        currentMeasure.current.measurePoints.forEach((measurePoint, index) => {
+          measurePoint.marker.setIcon(getMarkerPointIconMemo(index + 1));
         });
       }
     };
   }, []);
   const addClickListenerForRemove = useCallback((labelMarker) => {
-    var element = labelMarker.getElement();
+    let element = labelMarker.getElement();
     if (element) {
-      var elements = element.getElementsByClassName(mapClasses.measureLabelMarkerRemove);
+      const elements = element.getElementsByClassName(
+        mapClasses.measureLabelMarkerRemove
+      );
       element = elements[0];
-      console.log("addClickListenerForRemove event", element);
       if (element) {
         element.addEventListener("click", onClickRemovePoint(labelMarker));
       }
     }
   }, []);
-  const onClickMap = useCallback((e) => {
-    console.log("onClickMap event");
-    var lat = e.latlng.lat;
-    var lng = e.latlng.lng;
-    var 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));
-    }
-    var marker = L.marker([lat, lng], {
-      draggable: true,
-      riseOnHover: true,
-      autoPan: true,
-      icon: getMarkerPointIconMemo(currentMeasure.current.measurePoints.length + 1),
-      zIndexOffset: MAP_ZINDEX_DEFAULT
-    }).addTo(map);
-    marker.on("moveend", function(_e) {
-      var 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,
-      icon: getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel),
-      zIndexOffset: MAP_ZINDEX_DEFAULT
-    }).addTo(map);
-    labelMarker.on("moveend", function(_e) {
-      var latlng = labelMarker.getLatLng();
-      marker.setLatLng(latlng);
+  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,
+        autoPan: true,
+        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,
+        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());
-    });
-    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]);
+    },
+    [map, measureDistante, setValue, getLabel]
+  );
   const onMouseMoveMap = useCallback(() => {
     map.getContainer().style.cursor = "crosshair";
   }, [map]);
@@ -1107,11 +941,9 @@ function useMeasure() {
     }
   }, [map, statusEdition]);
   useEffect(() => {
-    console.log("useEffect magnitudFactor", readyToUpdate, magnitudFactor);
     if (!readyToUpdate)
       return;
     if (magnitudFactor.id !== magnitudFactorCached.id) {
-      console.log("useEffect magnitudFactor CAMBIO");
       setMagnitudFactorCached({ ...magnitudFactor });
       currentMeasure.current.magnitudFactor = magnitudFactor;
       setValue("value", measureDistante());
@@ -1129,69 +961,58 @@ function useMeasure() {
   return { statusEdition, magnitudFactor, value };
 }
 function MeasureData() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    value,
-    magnitudFactor
-  } = useMeasure();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(RHFAutocompleteAsync, {
-      endPoint: "magnitudes/factors?origin_unit_reference_id=m_kilometers",
-      name: "magnitudFactor",
-      autoComplete: "off",
-      getOptionLabel: (option) => option.name,
-      isOptionEqualToValue: (option, value2) => option.id === value2.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
-      })]
-    })]
-  });
+  const { getLabel } = useModuleDictionary();
+  const { value, magnitudFactor } = useMeasure();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RHFAutocompleteAsync,
+      {
+        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 { getLabel } = useModuleDictionary();
   const finalInitalValues = {
     ...INITIAL_FORM_VALUES
   };
   if (finalInitalValues?.magnitudFactor?.name) {
-    finalInitalValues.magnitudFactor.name = getLabel(MAP_DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS);
+    finalInitalValues.magnitudFactor.name = getLabel(
+      MAP_DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS
+    );
   }
-  const {
-    validationSchema
-  } = useValidation();
+  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, {})]
-  });
+  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 { host_static_assets, environment_assets } = useEnvironment();
   const [, setZoomInDisabled] = useState(false);
   const [, setZoomOutDisabled] = useState(false);
   useEffect(() => {
@@ -1214,35 +1035,34 @@ function ZoomButtons() {
   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}`
-    })]
-  });
+  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 { 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;
@@ -1261,16 +1081,17 @@ function TopRightTools(props) {
   };
   const onGpsToolsClick = (e) => {
     if (!isToggledGpsTools) {
-      addPopup({
-        popupId: "gpsTools",
-        title: getLabel(MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME),
-        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`,
-        functionComponent: gpsTools,
-        onMouseDown,
-        defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
-      }, {
-        closeOthers: true
-      });
+      addPopup(
+        {
+          popupId: "gpsTools",
+          title: getLabel(MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME),
+          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`,
+          functionComponent: gpsTools,
+          onMouseDown,
+          defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
+        },
+        { closeOthers: true }
+      );
     } else {
       closePopup("gpsTools");
     }
@@ -1278,37 +1099,43 @@ function TopRightTools(props) {
   };
   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
-      });
+      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/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, {})]
-  });
+  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/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 {
@@ -1320,138 +1147,143 @@ function useColumns(props) {
     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",
-      formatter: ColumnSetCheckFormatter({
-        field: "visible",
-        rowKeyGetter,
-        useHook
-      }),
-      cellClass: "rdg-cell-align-center",
-      headerRenderer: (p) => /* @__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",
-      formatter: ColumnSetCheckFormatter({
-        field: "autoFocus",
-        rowKeyGetter,
-        useHook
-      }),
-      cellClass: "rdg-cell-align-center",
-      headerRenderer: (p) => /* @__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}`
-        })
-      })
+  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];
+      }
     },
-    {
-      key: "cluster",
-      name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER),
-      minWidth: 20,
-      width: 50,
-      type: "boolean",
-      formatter: ColumnSetCheckFormatter({
-        field: "cluster",
-        disabledGetter: (row) => !row.clusterAble,
-        rowKeyGetter,
-        useHook
-      }),
-      cellClass: "rdg-cell-align-center",
-      headerRenderer: (p) => /* @__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}`
-        })
-      })
-    }
-  ], [getLabel, useHook]);
-  return {
-    columns
-  };
+    [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",
+        formatter: ColumnSetCheckFormatter({
+          field: "visible",
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: (_p) => /* @__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",
+        formatter: ColumnSetCheckFormatter({
+          field: "autoFocus",
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: (_p) => /* @__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",
+        formatter: ColumnSetCheckFormatter({
+          field: "cluster",
+          disabledGetter: (row) => !row.clusterAble,
+          rowKeyGetter,
+          useHook
+        }),
+        cellClass: "rdg-cell-align-center",
+        headerRenderer: (_p) => /* @__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}`
+          }
+        ) })
+      }
+    ],
+    [getLabel, useHook]
+  );
+  return { columns };
 }
 function useCheckedLayers(checkedNameSet) {
-  const [checkedLayers, setCheckedLayers] = useMapStore((state) => [state[`${checkedNameSet}CheckedLayers`], (newSet) => {
-    state.mapActions.setCheckedLayers(checkedNameSet, newSet);
-  }], shallow);
+  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
-  };
+  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 [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");
@@ -1471,12 +1303,8 @@ function useMaster() {
     });
     return rows2;
   }, [hashLayers, layersIds]);
-  const {
-    rowActionsGetter
-  } = useRowActionsGetter();
-  const {
-    columns
-  } = useColumns({
+  const { rowActionsGetter } = useRowActionsGetter();
+  const { columns } = useColumns({
     rowKeyGetter,
     visibleLayers,
     setVisibleLayers,
@@ -1500,33 +1328,22 @@ function useDisableZoomEvents(node) {
     if (!map || !node)
       return;
     node.addEventListener("mouseover", function() {
-      console.log("Desactivar zoom");
       map.doubleClickZoom.disable();
       map.scrollWheelZoom.disable();
     });
     node.addEventListener("mouseleave", function() {
-      console.log("Activar zoom");
       map.scrollWheelZoom.enable();
       map.doubleClickZoom.enable();
     });
   }, [map, node]);
 }
 function LayersTool() {
-  const {
-    columns,
-    rows,
-    rowKeyGetter,
-    rowActionsGetter
-  } = useMaster();
+  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, {
+  return /* @__PURE__ */ jsx("div", { ref: setDivRef, style: { position: "relative", height: "100%" }, children: /* @__PURE__ */ jsx(
+    DataGrid,
+    {
       id: "layers",
       columns,
       rows,
@@ -1539,17 +1356,12 @@ function LayersTool() {
         withPager: false,
         withLocalFilters: false
       }
-    })
-  });
+    }
+  ) });
 }
 function MapSourcesTool() {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
+  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) => ({
@@ -1562,144 +1374,157 @@ function MapSourcesTool() {
       roadSeletedOptions: state.hashMapSources[id].roadSelectedOptions
     }));
   }, shallow);
-  const {
-    setCurrentMapSource,
-    setMapSourceRoadOptions: setMapSourceRoadMapOptions
-  } = useMapStore((state) => state.mapActions, 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, {
+  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
-                  });
+            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(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))
-      })
-    })
-  });
+              ),
+              /* @__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 { type } = props;
   const [open, setOpen] = useState(null);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const theme = useTheme();
   const handleOpen = (event) => {
     setOpen(event.currentTarget);
-    console.log("open", event.currentTarget);
   };
   const handleClose = () => {
     setOpen(null);
   };
-  return /* @__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
-      },
-      disableAutoFocus: true,
-      disableRestoreFocus: true,
-      disableEnforceFocus: true,
-      children: type === "MapSources" ? /* @__PURE__ */ jsx(MapSourcesTool, {}) : /* @__PURE__ */ jsx(LayersTool, {})
-    })]
-  });
+  return /* @__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
+        },
+        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"
-    })]
-  });
+  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 { gpsTools } = props;
   const map = useMap();
   const [controlContainer, setControlContainer] = useState(null);
   useEffect(() => {
@@ -1710,18 +1535,13 @@ function Controls(props) {
       L__default.DomEvent.disableScrollPropagation(cContainer);
     }
   }, [map]);
-  return /* @__PURE__ */ jsxs(PopupsProvider, {
-    children: [/* @__PURE__ */ jsx(TopLeftTools, {}), /* @__PURE__ */ jsx(TopRightTools, {
-      gpsTools
-    }), controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewer, {
-      containerElement: map.getContainer()
-    }), controlContainer)]
-  });
+  return /* @__PURE__ */ jsxs(PopupsProvider, { children: [
+    /* @__PURE__ */ jsx(TopLeftTools, {}),
+    /* @__PURE__ */ jsx(TopRightTools, { gpsTools }),
+    controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewer, { containerElement: map.getContainer() }), controlContainer)
+  ] });
 }
-const MarkerClusterGroup = createPathComponent(({
-  children: _c,
-  ...props
-}, ctx) => {
+const MarkerClusterGroup = createPathComponent(({ children: _c, ...props }, ctx) => {
   const clusterProps = {};
   const clusterEvents = {};
   Object.entries(props).forEach(([propName, prop]) => {
@@ -1736,10 +1556,7 @@ const MarkerClusterGroup = createPathComponent(({
   });
   return {
     instance: markerClusterGroup,
-    context: {
-      ...ctx,
-      layerContainer: markerClusterGroup
-    }
+    context: { ...ctx, layerContainer: markerClusterGroup }
   };
 });
 const RenderByEachFeatureComponent = ({
@@ -1747,15 +1564,11 @@ const RenderByEachFeatureComponent = ({
   ...props
 }) => {
   const feature = renderFeature(props);
-  return feature ? /* @__PURE__ */ jsx(Fragment, {
-    children: feature
-  }) : null;
+  return feature ? /* @__PURE__ */ jsx(Fragment, { children: feature }) : null;
 };
 const MemonizedRenderByEachFeatureComponent = React__default.memo(RenderByEachFeatureComponent);
 const MyLayer = (props) => {
-  const {
-    layerId
-  } = props;
+  const { layerId } = props;
   const map = useMap();
   const popupRef = useRef(null);
   const lefaletLayerRef = useRef({
@@ -1772,13 +1585,15 @@ const MyLayer = (props) => {
     }
   }, 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 [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(() => {
-        console.log("cluster clicked", a, popupRef.current);
         const cluster2 = a.propagatedFrom;
         if (cluster2 && cluster2 instanceof L__default.MarkerCluster) {
           const childMarkers = cluster2.getAllChildMarkers();
@@ -1793,8 +1608,9 @@ const MyLayer = (props) => {
         lefaletLayerRef.current.clickCount = 0;
       }, TIME_DOUBLE_CLICK);
     } else if (lefaletLayerRef.current.clickCount === 2) {
-      clearTimeout(lefaletLayerRef.current.clickTimeout);
-      console.log("Double click");
+      if (lefaletLayerRef.current?.clickTimeout) {
+        clearTimeout(lefaletLayerRef.current.clickTimeout);
+      }
       lefaletLayerRef.current.clickCount = 0;
     }
   };
@@ -1803,7 +1619,6 @@ const MyLayer = (props) => {
       markerClusterGroupRef.current.on("clusterclick", handleClick);
     }
   }, [markerClusterGroupRef.current]);
-  console.log("Render MyLayer", layerId, featureIdOrCollection, visible, cluster);
   if (!featureIdOrCollection || !renderFeature) {
     return null;
   }
@@ -1812,15 +1627,18 @@ const MyLayer = (props) => {
   }
   const isFeaturCollection = Array.isArray(featureIdOrCollection);
   if (!isFeaturCollection) {
-    return /* @__PURE__ */ jsx(RenderByEachFeatureComponent, {
-      renderFeature,
-      id: featureIdOrCollection,
-      layerId
-    });
+    return /* @__PURE__ */ jsx(
+      RenderByEachFeatureComponent,
+      {
+        renderFeature,
+        id: featureIdOrCollection,
+        layerId
+      }
+    );
   } else {
     const createClusterCustomIcon = (cluster2) => {
-      var childCount = cluster2.getChildCount();
-      var c = " marker-cluster-";
+      const childCount = cluster2.getChildCount();
+      let c = " marker-cluster-";
       if (childCount < 10) {
         c += "small";
       } else if (childCount < 100) {
@@ -1836,15 +1654,17 @@ const MyLayer = (props) => {
       return DivIcon2;
     };
     if (!cluster) {
-      return /* @__PURE__ */ jsx(LayerGroup, {
-        children: featureIdOrCollection.map((featureId) => {
-          return /* @__PURE__ */ jsx(MemonizedRenderByEachFeatureComponent, {
+      return /* @__PURE__ */ jsx(LayerGroup, { children: featureIdOrCollection.map((featureId) => {
+        return /* @__PURE__ */ jsx(
+          MemonizedRenderByEachFeatureComponent,
+          {
             renderFeature,
             id: featureId,
             layerId
-          }, `k_${featureId}`);
-        })
-      });
+          },
+          `k_${featureId}`
+        );
+      }) });
     } else {
       return /* @__PURE__ */ jsx(
         MarkerClusterGroup,
@@ -1855,11 +1675,15 @@ const MyLayer = (props) => {
           spiderfyOnMaxZoom: false,
           iconCreateFunction: createClusterCustomIcon,
           children: featureIdOrCollection.map((featureId) => {
-            return /* @__PURE__ */ jsx(MemonizedRenderByEachFeatureComponent, {
-              renderFeature,
-              id: featureId,
-              layerId
-            }, `k_${featureId}`);
+            return /* @__PURE__ */ jsx(
+              MemonizedRenderByEachFeatureComponent,
+              {
+                renderFeature,
+                id: featureId,
+                layerId
+              },
+              `k_${featureId}`
+            );
           })
         }
       );
@@ -1879,17 +1703,11 @@ function useAutoFocus() {
       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
-          }));
+          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 [{ featureId: feature.id, layerData: feature.layerData }];
           }
         }
         return [];
@@ -1917,17 +1735,19 @@ function useAutoFocus() {
       }
       if (layersToFitBounds.length > 0) {
         let featureForBounds = layersToFitBounds[0];
-        let bounds = L__default.latLngBounds(featureForBounds.layerData.boundsNW, featureForBounds.layerData.boundsSE);
+        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);
+          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]
-        });
+        map.fitBounds(bounds, { animate: false, maxZoom: 22, padding: [50, 50] });
       }
     };
     const throttleBounds = throttle(proccesLayerWithAutoFocus, 300, {
@@ -1957,35 +1777,12 @@ const LayersContainer = () => {
   if (!map) {
     return null;
   }
-  return /* @__PURE__ */ jsx(React__default.Fragment, {
-    children: layersId.map((l) => /* @__PURE__ */ jsx(MyLayer, {
-      layerId: l
-    }, l))
-  });
+  return /* @__PURE__ */ jsx(React__default.Fragment, { children: layersId.map((l) => /* @__PURE__ */ jsx(MyLayer, { layerId: l }, l)) });
 };
 const MapRootContainer = styled(MapContainer)`
+  ${leaflet_css}
 
-
-
-
-    
-
-
-
-
-
-
-
- 
-
-
-    
-  
-
-    ${leaflet_css}
-
-    ${(props) => props.theme.components?.M4LMap?.styleOverrides}
-    
+  ${(props) => props.theme.components?.M4LMap?.styleOverrides}
 `;
 function Map$1(props) {
   const {
@@ -1994,28 +1791,26 @@ function Map$1(props) {
     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
-    })]
-  });
+  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 { position, width, height, iconForm, bearing, ...other } = props;
   const html = useMemo(() => {
   }, [bearing]);
   const customIcon = useMemo(() => {
@@ -2025,17 +1820,17 @@ function CustomMarker(props) {
       html: `<div>Hola</div>`
     });
   }, [html]);
-  return /* @__PURE__ */ jsx(Marker, {
-    position,
-    icon: customIcon,
-    ...other
-  });
+  return /* @__PURE__ */ jsx(
+    Marker,
+    {
+      position,
+      icon: customIcon,
+      ...other
+    }
+  );
 }
 const MarkerFeatureRender = (props) => {
-  const {
-    id,
-    layerId
-  } = props;
+  const { id, layerId } = props;
   const feature = useMapStore((state) => {
     const gObject = state.hashLayers[layerId].geoJsonObject;
     if (!gObject) {
@@ -2065,17 +1860,17 @@ const MarkerFeatureRender = (props) => {
   if (feature.geometry.type === "Point") {
     const [lat, lng] = feature.geometry.coordinates;
     const bearing = feature.properties?.iconBearing ?? 0;
-    return /* @__PURE__ */ jsx(CustomMarker, {
-      position: {
-        lat,
-        lng
-      },
-      width: 32,
-      height: 32,
-      bearing,
-      iconForm: "grua",
-      id: feature.id
-    });
+    return /* @__PURE__ */ jsx(
+      CustomMarker,
+      {
+        position: { lat, lng },
+        width: 32,
+        height: 32,
+        bearing,
+        iconForm: "grua",
+        id: feature.id
+      }
+    );
   }
   return null;
 };
@@ -2090,18 +1885,20 @@ const PolylineWithArrows = ({
   useEffect(() => {
     if (polylineRef.current) {
       const decorator = L__default.polylineDecorator(polylineRef.current, {
-        patterns: [{
-          repeat: 50,
-          symbol: L__default.Symbol.arrowHead({
-            pixelSize: 4,
-            polygon: false,
-            pathOptions: {
-              stroke: true,
-              color: "#ffffff",
-              weight: 2
-            }
-          })
-        }]
+        patterns: [
+          {
+            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) {
@@ -2115,18 +1912,20 @@ const PolylineWithArrows = ({
         }
         if (polylineRef.current) {
           decoratorRef.current = L__default.polylineDecorator(polylineRef.current, {
-            patterns: [{
-              repeat: 40,
-              symbol: L__default.Symbol.arrowHead({
-                pixelSize: 4,
-                polygon: false,
-                pathOptions: {
-                  stroke: true,
-                  color: "#cc0000",
-                  weight: 2
-                }
-              })
-            }]
+            patterns: [
+              {
+                repeat: 40,
+                symbol: L__default.Symbol.arrowHead({
+                  pixelSize: 4,
+                  polygon: false,
+                  pathOptions: {
+                    stroke: true,
+                    color: "#cc0000",
+                    weight: 2
+                  }
+                })
+              }
+            ]
           }).addTo(map);
         }
       });
@@ -2137,17 +1936,14 @@ const PolylineWithArrows = ({
       };
     }
   }, [map, enableEdit]);
-  return /* @__PURE__ */ jsx(Polyline, {
-    positions,
-    ref: polylineRef,
-    ...other
-  });
+  return /* @__PURE__ */ jsx(Polyline, { positions, ref: polylineRef, ...other });
 };
+function bearingRawToCSS(gpsBearing, offsetRotate) {
+  const rotation = -((360 + offsetRotate - gpsBearing) % 360);
+  return rotation;
+}
 const CommonFeatureRender = (props) => {
-  const {
-    id,
-    layerId
-  } = props;
+  const { id, layerId } = props;
   const feature = useMapStore((state) => {
     const gObject = state.hashLayers[layerId].geoJsonObject;
     if (!gObject) {
@@ -2173,19 +1969,14 @@ const CommonFeatureRender = (props) => {
       return null;
     }
   }, shallow);
-  const {
-    addLayerDataToFeature
-  } = useMapStore((state) => state.mapActions, 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 { iconUrl, markerColor = MARKER_COLOR_DEFAULT } = feature?.properties;
       const fetchData = async () => {
         if (svg && svg.path === iconUrl && svg.color === markerColor) {
           return;
@@ -2255,23 +2046,22 @@ const CommonFeatureRender = (props) => {
       return /* @__PURE__ */ jsx(
         MarkerIconLabel,
         {
-          position: {
-            lat,
-            lng
+          position: { lat, lng },
+          ...{
+            label,
+            iconSrc: svg?.data,
+            iconScale: scaleIcon,
+            iconRotate: bearingRawToCSS(iconBearing, iconOffsetRotate),
+            iconWidth,
+            iconHeight,
+            labelBkColor,
+            labelColor,
+            offsetLeftTop
           },
-          label,
-          iconSrc: svg?.data,
-          iconScale: scaleIcon,
-          iconRotate: bearingRawToCSS(iconBearing, iconOffsetRotate),
-          iconWidth,
-          iconHeight,
-          labelBkColor,
-          labelColor,
-          offsetLeftTop,
           draggable: false,
           eventHandlers: {
             add: onAddPointLayer,
-            click: (e) => {
+            click: (_e) => {
             }
           },
           ...styleProperties,
@@ -2280,31 +2070,34 @@ const CommonFeatureRender = (props) => {
         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
+      const { subType, radius, ...styleProperties } = feature.properties;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Circle,
+          {
+            center: { lat, lng },
+            radius: feature.properties?.radius,
+            eventHandlers: {
+              add: onAddMultipointLayer
+            },
+            ...styleProperties,
+            ...propFeature
           },
-          ...styleProperties,
-          ...propFeature
-        }, Math.random()), feature?.featureLabel && /* @__PURE__ */ jsx(MarkerIconLabel, {
-          position: [lat + feature.properties.radius / 111319, lng],
-          ...feature?.featureLabel
-        })]
-      });
+          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]]);
+    const polylinePositions = feature.geometry.coordinates.map(
+      (coord) => [coord[1], coord[0]]
+    );
     if (feature.properties?.subType === "PolylineWithArrows") {
       return /* @__PURE__ */ jsx(
         PolylineWithArrows,
@@ -2339,20 +2132,19 @@ const CommonFeatureRender = (props) => {
       );
     }
   } else if (feature.geometry?.type === "Polygon") {
-    const polygonPositions = feature.geometry.coordinates.map((ring) => ring.map(([lng, lat]) => [lat, lng]));
+    const polygonPositions = feature.geometry.coordinates.map(
+      (ring) => ring.map(([lng, lat]) => [lat, lng])
+    );
     let topRightPoint = null;
     polygonPositions[0].forEach((coord) => {
-      console.log("coord", coord);
       const [lat, lng] = coord;
       if (!topRightPoint || lat >= topRightPoint[0] && lng >= topRightPoint[1]) {
-        console.log("coord elegida", coord);
         topRightPoint = coord;
       }
     });
     topRightPoint = topRightPoint || polygonPositions[0][0];
-    console.log("Polygon Render", feature.featureLabel?.label, polygonPositions);
-    return /* @__PURE__ */ jsxs(React__default.Fragment, {
-      children: [/* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      /* @__PURE__ */ jsx(
         Polygon,
         {
           positions: polygonPositions,
@@ -2363,24 +2155,18 @@ const CommonFeatureRender = (props) => {
           ...feature.properties,
           ...propFeature
         }
-      ), feature?.featureLabel && /* @__PURE__ */ jsx(MarkerIconLabel, {
-        position: topRightPoint,
-        ...feature?.featureLabel
-      })]
-    });
+      ),
+      feature?.featureLabel && /* @__PURE__ */ jsx(MarkerIconLabel, { position: topRightPoint, ...feature?.featureLabel })
+    ] });
   }
   return null;
 };
 export {
   CommonFeatureRender as C,
-  LABEL_BK_COLOR_DEFAULT as L,
-  MAP_ZINDEX_OVER_MAP as M,
-  LABEL_COLOR_DEFAULT as a,
-  MAP_DICCTIONARY as b,
-  Map$1 as c,
-  MapProvider as d,
-  MapContext as e,
-  MarkerFeatureRender as f,
+  Map$1 as M,
+  MapProvider as a,
+  MapContext as b,
+  MarkerFeatureRender as c,
   mapClasses as m,
   useMapStore as u
 };