@m4l/components 3.0.0 → 3.0.2

package/components/maps/components/Map/{index.8c947175.js → index-BRrVIyA-.js}

@@ -9,39 +9,37 @@ 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.f674be30.js";
-import { B as Button } from "../../../mui_extended/Button/index.3d14e3e9.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index-ChW1FuFf.js";
+import { B as Button } from "../../../mui_extended/Button/index-CksGG1B8.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.f05b6fe3.js";
-import { S as Stack } from "../../../mui_extended/Stack/index.99de8138.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.f9d41b99.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.7b6c1ee3.js";
-import { u as usePopupsStore, P as PopupsProvider } from "../../../popups/PopupsProvider/index.9a23e1d0.js";
-import { T as ToggleIconButton } from "../../../mui_extended/ToggleIconButton/index.cbfe1cad.js";
-import { D as DataGrid } from "../../../DataGrid/index.b37d6cab.js";
+import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index-B3HygFCM.js";
+import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index-BV0f25eK.js";
+import { S as Stack } from "../../../mui_extended/Stack/index-C9YEChZB.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index-Ct48jRjb.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index-OMq0pPK0.js";
+import { u as usePopupsStore, P as PopupsProvider } from "../../../popups/PopupsProvider/index-DhSxmtfJ.js";
+import { T as ToggleIconButton } from "../../../mui_extended/ToggleIconButton/index-BNQrQ6-b.js";
+import { D as DataGrid } from "../../../DataGrid/index-EgaRUtbL.js";
 import { generateUtilityClasses, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
-import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index.4045b2f2.js";
-import { I as Icon, M as MarkerIconLabel } from "../../../Icon/index.c06685f4.js";
-import { u as useStateRef } from "../../../../hooks/useStateRef/index.538edb89.js";
-import { C as CheckBox } from "../../../mui_extended/CheckBox.5dc01b37.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.a7da93f1.js";
-import { P as PopupsViewer } from "../../../popups/PopupsViewer/index.52653047.js";
+import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index-BaCawLr1.js";
+import { I as Icon, M as MarkerIconLabel } from "../../../Icon/index-CueLDD9j.js";
+import { u as useStateRef } from "../../../../hooks/useStateRef/index-C3P6ZK3m.js";
+import { C as CheckBox } from "../../../mui_extended/CheckBox-CjxjIrmN.js";
+import { P as Popover } from "../../../mui_extended/Popover/index-BnKsmvtw.js";
+import { P as PopupsViewer } from "../../../popups/PopupsViewer/index-Dn0XOI6q.js";
 import { createPathComponent } from "@react-leaflet/core";
 import "leaflet.markercluster";
 import { cloneDeep, throttle } from "lodash";
 import { styled } from "@mui/material/styles";
-import leaflet_css from "leaflet/dist/leaflet.css?used";
+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.f77cc2ab.js";
-import { b as bearingRawToCSS } from "../../index.13bb982c.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
+import { b as bearingRawToCSS } from "../../index-Ci-7-FHg.js";
 import "leaflet-polylinedecorator";
-const updateOwnerStateClasses = (_state) => {
-};
 const COMPONENT_CLASS_NAME = "M4LMap";
 const MAP_ZINDEX_DEFAULT = 0;
 const MAP_ZINDEX_OVER_MAP = 1100;
@@ -79,15 +77,20 @@ const SVG_ICON_DEFAULT = `<svg viewBox="0 0 640 640" height="32" width="32" xmln
 </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",
@@ -95,6 +98,7 @@ const mapClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "measureToolLabel",
   "meausureToolLabelDistance",
   "meausureToolLabelSymbol",
+  //Meauser Marcas
   "measureMarkerRoot",
   "measureMarkerContainer",
   "measureMarkerContainerRhomb",
@@ -104,19 +108,27 @@ const mapClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "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"],
@@ -124,7 +136,12 @@ const useMapUtilityClasses = (_ownerState) => {
     markerLayerIcon: ["markerLayerIcon"],
     markerLayerLabel: ["markerLayerLabel"],
     markerLayerLabelInner: ["markerLayerLabelInner"],
+    //Etiqueta de los features
     featureLabel: ["featureLabel"],
+    /**
+     * Measure Tool
+     */
+    //Measure form
     meaureToolRoot: ["meaureToolRoot"],
     measureToolFormValue: ["measureToolFormValue"],
     measureToolFormValueDistance: ["measureToolFormValueDistance"],
@@ -132,6 +149,7 @@ const useMapUtilityClasses = (_ownerState) => {
     measureToolLabel: ["measureToolLabel"],
     meausureToolLabelDistance: ["meausureToolLabelDistance"],
     meausureToolLabelSymbol: ["meausureToolLabelSymbol"],
+    //Meauser Marcas
     measureMarkerRoot: ["measureMarkerRoot"],
     measureMarkerContainer: ["measureMarkerContainer"],
     measureMarkerContainerRhomb: ["measureMarkerContainerRhomb"],
@@ -141,19 +159,32 @@ const useMapUtilityClasses = (_ownerState) => {
     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",
@@ -201,6 +232,7 @@ const MAP_DICCTIONARY = {
   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",
@@ -214,6 +246,7 @@ const MAP_DICCTIONARY = {
   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",
@@ -221,6 +254,7 @@ const MAP_DICCTIONARY = {
   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",
@@ -229,33 +263,61 @@ const MAP_DICCTIONARY = {
   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",
@@ -291,7 +353,7 @@ const TILE_LAYER_GOOGLE = {
     minZoom: 0,
     maxZoom: 22,
     subdomains: ["mt0", "mt1", "mt2", "mt3"],
-    attribution: "Map data \xA9 Google",
+    attribution: "Map data © Google",
     tms: false
   },
   roadSelectedOptions: {
@@ -311,7 +373,7 @@ const TILE_LAYER_GOOGLE_SATELLITE = {
     minZoom: 0,
     maxZoom: 22,
     subdomains: ["mt0", "mt1", "mt2", "mt3"],
-    attribution: "Map data \xA9 Google",
+    attribution: "Map data © Google",
     tms: false
   },
   roadSelectedOptions: {
@@ -334,7 +396,7 @@ const TILE_LAYER_GOOGLE_HYBRID = {
     minZoom: 0,
     maxZoom: 22,
     subdomains: ["mt0", "mt1", "mt2", "mt3"],
-    attribution: "Map data \xA9 Google",
+    attribution: "Map data © Google",
     tms: false
   },
   roadSelectedOptions: {
@@ -444,6 +506,46 @@ const createMapStore = (initProps) => {
               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`);
@@ -572,6 +674,31 @@ const createMapStore = (initProps) => {
               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);
@@ -608,7 +735,6 @@ const createMapStore = (initProps) => {
           setExternalState: (newExternalState) => {
             set((state) => {
               state.ownerState = { ...state.ownerState, ...newExternalState };
-              updateOwnerStateClasses();
             });
           }
         }
@@ -659,8 +785,7 @@ function MapProvider(props) {
 }
 function useMapStore(selector, equalityFn) {
   const context = useContext(MapContext);
-  if (!context)
-    throw new Error("useMapStore context must be use inside MapContext");
+  if (!context) throw new Error("useMapStore context must be use inside MapContext");
   return useStore(context, selector, equalityFn);
 }
 const TileLayerOthers = () => {
@@ -717,7 +842,11 @@ function TileLayerGoogle() {
     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;
@@ -848,6 +977,7 @@ function useValidation() {
   return { validationSchema };
 }
 const INITIAL_FORM_VALUES = {
+  /** General Data */
   statusLoad: "ready",
   reInits: 0,
   value: "0",
@@ -861,7 +991,10 @@ const INITIAL_FORM_VALUES = {
     factor_x2: 0
   },
   unitArea: null,
+  /** Config Data */
+  /** de Apoyo */
   statusEdition: "initial"
+  // geometry: null ,
 };
 const STYLE_MEASURE_OPTIONS = {
   strokeLineColor: "#1E96DC",
@@ -887,7 +1020,9 @@ const getMarkerPointIcon = (position) => {
         </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) => {
@@ -900,10 +1035,12 @@ const getMarkerPointLabel = (distance, getLabel) => {
     )}</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() {
@@ -963,6 +1100,7 @@ function useMeasure() {
             color: STYLE_MEASURE_OPTIONS.strokeLineColor,
             weight: STYLE_MEASURE_OPTIONS.strokeLineWeight,
             interactive: false
+            //No se puede editar
           }
         ).addTo(map);
       }
@@ -1043,7 +1181,9 @@ function useMeasure() {
       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);
@@ -1061,6 +1201,7 @@ function useMeasure() {
       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);
@@ -1114,8 +1255,7 @@ function useMeasure() {
     }
   }, [map, statusEdition]);
   useEffect(() => {
-    if (!readyToUpdate)
-      return;
+    if (!readyToUpdate) return;
     if (magnitudFactor.id !== magnitudFactorCached.id) {
       setMagnitudFactorCached({ ...magnitudFactor });
       currentMeasure.current.magnitudFactor = magnitudFactor;
@@ -1350,6 +1490,7 @@ function useColumns(props) {
         width: 50,
         minWidth: 20,
         type: "boolean",
+        // isDraggable: false,
         formatter: ColumnSetCheckFormatter({
           field: "visible",
           rowKeyGetter,
@@ -1370,6 +1511,8 @@ function useColumns(props) {
         minWidth: 20,
         width: 50,
         type: "boolean",
+        // frozen: true,
+        // isDraggable: false,
         formatter: ColumnSetCheckFormatter({
           field: "autoFocus",
           rowKeyGetter,
@@ -1390,6 +1533,8 @@ function useColumns(props) {
         minWidth: 20,
         width: 50,
         type: "boolean",
+        // frozen: true,
+        // isDraggable: false,
         formatter: ColumnSetCheckFormatter({
           field: "cluster",
           disabledGetter: (row) => !row.clusterAble,
@@ -1405,6 +1550,20 @@ function useColumns(props) {
           }
         ) })
       }
+      // {
+      //     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]
   );
@@ -1499,8 +1658,7 @@ function useMaster() {
 function useDisableZoomEvents(node) {
   const map = useMap();
   useEffect(() => {
-    if (!map || !node)
-      return;
+    if (!map || !node) return;
     node.addEventListener("mouseover", function() {
       map.doubleClickZoom.disable();
       map.scrollWheelZoom.disable();
@@ -1663,33 +1821,40 @@ function LayersButton(props) {
   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 (
+    /* 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: [
@@ -1788,8 +1953,7 @@ const MyLayer = (props) => {
     if (lefaletLayerRef.current.clickCount === 1) {
       lefaletLayerRef.current.clickTimeout = setTimeout(() => {
         const cluster2 = a.propagatedFrom;
-        if (cluster2 && cluster2 instanceof L__default.MarkerCluster)
-          ;
+        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);
@@ -1920,7 +2084,7 @@ function useAutoFocus() {
             };
             layersToFitBounds.push(featureForBounds);
           } else {
-            console.error(`La capa ${layerWhitFeatures.layerId} no tiene un m\xE9todo getBounds`);
+            console.error(`La capa ${layerWhitFeatures.layerId} no tiene un método getBounds`);
           }
         }
       }
@@ -1943,7 +2107,9 @@ function useAutoFocus() {
     };
     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]);
@@ -1971,8 +2137,6 @@ const LayersContainer = () => {
   return /* @__PURE__ */ jsx(React__default.Fragment, { children: layersId.map((l) => /* @__PURE__ */ jsx(MyLayer, { layerId: l }, l)) });
 };
 const MapRootContainer = styled(MapContainer)`
-  ${leaflet_css}
-
   ${(props) => props.theme.components?.M4LMap?.styleOverrides}
 `;
 function Map$1(props) {
@@ -2051,16 +2215,21 @@ 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 (
+      // <Marker position={{ lat, lng }}>
+      // ddd
+      // </Marker>
+      /* @__PURE__ */ jsx(
+        CustomMarker,
+        {
+          position: { lat, lng },
+          width: 32,
+          height: 32,
+          bearing,
+          iconForm: "grua",
+          id: feature.id
+        }
+      )
     );
   }
   return null;
@@ -2078,6 +2247,7 @@ const PolylineWithArrows = ({
       const decorator = L__default.polylineDecorator(polylineRef.current, {
         patterns: [
           {
+            // offset: '20%',
             repeat: 50,
             symbol: L__default.Symbol.arrowHead({
               pixelSize: 4,
@@ -2105,6 +2275,7 @@ const PolylineWithArrows = ({
           decoratorRef.current = L__default.polylineDecorator(polylineRef.current, {
             patterns: [
               {
+                // offset: '20%',
                 repeat: 40,
                 symbol: L__default.Symbol.arrowHead({
                   pixelSize: 4,
@@ -2193,6 +2364,7 @@ const CommonFeatureRender = (props) => {
   };
   const onAddPointLayer = useCallback((e) => {
     const layerData = {
+      // visible: true,
       boundsNW: e.target?._latlng,
       boundsSE: e.target?._latlng
     };
@@ -2200,6 +2372,7 @@ const CommonFeatureRender = (props) => {
   }, []);
   const onAddMultipointLayer = useCallback((e) => {
     const layerData = {
+      // visible: true,
       boundsNW: e.target.getBounds().getNorthWest(),
       boundsSE: e.target.getBounds().getSouthEast()
     };
@@ -2215,8 +2388,10 @@ const CommonFeatureRender = (props) => {
         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,
@@ -2244,6 +2419,9 @@ const CommonFeatureRender = (props) => {
           draggable: false,
           eventHandlers: {
             add: onAddPointLayer
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            // click: _e => {
+            // },
           },
           ...styleProperties,
           ...propFeature
@@ -2260,6 +2438,9 @@ const CommonFeatureRender = (props) => {
             radius: feature.properties?.radius,
             eventHandlers: {
               add: onAddMultipointLayer
+              // remove: () => {
+              //     removeLefletLayerToFeature(layerId, feature.id)
+              // },
             },
             ...styleProperties,
             ...propFeature
@@ -2288,6 +2469,9 @@ const CommonFeatureRender = (props) => {
           weight: 10,
           eventHandlers: {
             add: onAddMultipointLayer
+            // remove: () => {;
+            //     removeLefletLayerToFeature(layerId, feature.id)
+            // },
           },
           dashArray: "20 30",
           ...feature.properties,
@@ -2304,6 +2488,9 @@ const CommonFeatureRender = (props) => {
           weight: 10,
           eventHandlers: {
             add: onAddMultipointLayer
+            // remove: () => {
+            //     removeLefletLayerToFeature(layerId, feature.id)
+            // },
           },
           dashArray: "20 30",
           ...feature.properties,
@@ -2332,6 +2519,9 @@ const CommonFeatureRender = (props) => {
           opacity: 1,
           eventHandlers: {
             add: onAddMultipointLayer
+            // remove: () => {
+            //     removeLefletLayerToFeature(layerId, feature.id)
+            // },
           },
           ...feature.properties,
           ...propFeature