@m4l/components 0.2.19 → 0.2.21

package/components/maps/components/Map/index.040c05a5.js

@@ -1,1339 +0,0 @@
-import "leaflet/dist/leaflet.css";
-import { MapContainer, useMap, LayerGroup, TileLayer, Marker, Polyline, Polygon, Circle } from "react-leaflet";
-import { styled } from "@mui/material/styles";
-import { shallow } from "zustand/shallow";
-import React__default, { useRef, useEffect, createContext, useContext, useCallback, useMemo } from "react";
-import L__default from "leaflet";
-import { createPathComponent } from "@react-leaflet/core";
-import "leaflet.markercluster";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { cloneDeep, throttle } from "lodash";
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index.eb406256.js";
-import { u as useStateRef } from "../../../../hooks/useStateRef/index.538edb89.js";
-import { c as DataGrid } from "../../../DataGrid/index.37ce6054.js";
-import { u as usePopupsStore, P as PopupsProvider } from "../../../PopupsProvider/index.81460070.js";
-import { T as ToggleButton } from "../../../mui_extended/ToggleButton/index.5aa6ea58.js";
-import { createStore, useStore } from "zustand";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { devtools } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import { generateUtilityClasses } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.9ad3909a.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 mapClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "root",
-  "mapContainer",
-  "svgLayersContainer",
-  "svgLayer",
-  "svgLayerMultiPoints",
-  "layerMarker",
-  "mainToolsRoot",
-  "measureMarkerRoot",
-  "measureMarkerContainer",
-  "measureMarkerContainerRhomb",
-  "measureMarkerContainerSlot",
-  "measureMarkerContainerSlotNumber",
-  "measureLabelMarkerRoot",
-  "measureLabelMarkerContainer",
-  "measureLabelMarkerDistance",
-  "measureLabelMarkerRemove"
-]);
-const useMapUtilityClasses = (_ownerState) => {
-  const slots = {
-    root: ["root"],
-    mapContainer: ["mapContainer"],
-    svgLayersContainer: ["svgLayersContainer"],
-    svgLayer: ["svgLayer"],
-    svgLayerMultiPoints: ["svgLayerMultiPoints"],
-    layerMarker: ["layerMarker"],
-    mainToolsRoot: ["mainToolsRoot"],
-    measureMarkerRoot: ["measureMarkerRoot"],
-    measureMarkerContainer: ["measureMarkerContainer"],
-    measureMarkerContainerRhomb: ["measureMarkerContainerRhomb"],
-    measureMarkerContainerSlot: ["measureMarkerContainerSlot"],
-    measureMarkerContainerSlotNumber: ["measureMarkerContainerSlotNumber"],
-    measureLabelMarkerRoot: ["measureLabelMarkerRoot"],
-    measureLabelMarkerContainer: ["measureLabelMarkerContainer"],
-    measureLabelMarkerDistance: ["measureLabelMarkerDistance"],
-    measureLabelMarkerRemove: ["measureLabelMarkerRemove"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
-};
-const MapRootContainer = styled(MapContainer)`
-    width: 100%;
-    height: 100%;
-    flex-grow: 1;
-    overflow: auto;
-    position: relative;
-
-    .leaflet-control-scale-line{
-        color: red; //Ejemplo de como estilar el control de scala
-    }
-    .${mapClasses.mainToolsRoot} {
-        display: flex;
-        top: 20px;
-        left: 80px;
-        position: absolute;
-        background-color: gray;
-        z-index: ${MAP_ZINDEX_OVER_MAP};
-    }
-    .${mapClasses.svgLayersContainer} {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-    }
-
-    .${mapClasses.svgLayer} {
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        user-select: none;
-        pointer-events: none;
-        position: absolute !important;
-    }
-
-    .${mapClasses.layerMarker} {
-        z-index: 2;
-    }
-
-
-    
-    .${mapClasses.measureMarkerRoot} {
-        --color: red;
-    }
-
-    .${mapClasses.measureMarkerContainer} {
-        position: relative;
-        cursor: pointer;
-    }
-
-    .${mapClasses.measureMarkerContainerRhomb} {
-        position: absolute;
-        filter: drop-shadow(0px 0px 3px rgba(0,0,0,.4));
-        width: 31px;
-        height: 31px;
-        border-radius: 50% 50% 50% 0;
-        border: 4px solid var(--color);
-        background-color: var(--color);
-        transform: rotate(-45deg);
-
-    }
-    .${mapClasses.measureMarkerContainerSlot} {
-        position: absolute;
-        background: #fff;
-        border-radius: 50%;
-        overflow: hidden;
-        top: 3px;
-        left: 3px;
-        width: 25px;
-        height: 24px;
-
-    },
-
-    .${mapClasses.measureMarkerContainerSlotNumber} {
-        font-size: 14px;
-        font-weight: 600;
-        text-align: center;
-        margin-top: 1px;
-        color: black;
-    }
-
-    .${mapClasses.measureLabelMarkerContainer} {
-        background-color:white;
-        border:1px solid gray;
-        color:#fff;
-        width:80px;
-        margin-left:15px;
-        margin-top:15px;
-    }
-    .${mapClasses.measureLabelMarkerDistance} {
-        color:gray;
-    }
-    .${mapClasses.measureLabelMarkerRemove} {
-        color:blue;
-    }
-
-    .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-        -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-        -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-        -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
-        transition: transform 0.3s ease-out, opacity 0.3s ease-in;
-    }
-    
-    .leaflet-cluster-spider-leg {
-        /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
-        -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-        -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-        -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
-        transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
-    }    
-
-    .marker-cluster-small {
-        background-color: rgba(181, 226, 140, 0.6);
-        }
-    .marker-cluster-small div {
-        background-color: rgba(110, 204, 57, 0.6);
-        }
-    
-    .marker-cluster-medium {
-        background-color: rgba(241, 211, 87, 0.6);
-        }
-    .marker-cluster-medium div {
-        background-color: rgba(240, 194, 12, 0.6);
-        }
-    
-    .marker-cluster-large {
-        background-color: rgba(253, 156, 115, 0.6);
-        }
-    .marker-cluster-large div {
-        background-color: rgba(241, 128, 23, 0.6);
-        }
-    
-        /* IE 6-8 fallback colors */
-    .leaflet-oldie .marker-cluster-small {
-        background-color: rgb(181, 226, 140);
-        }
-    .leaflet-oldie .marker-cluster-small div {
-        background-color: rgb(110, 204, 57);
-        }
-    
-    .leaflet-oldie .marker-cluster-medium {
-        background-color: rgb(241, 211, 87);
-        }
-    .leaflet-oldie .marker-cluster-medium div {
-        background-color: rgb(240, 194, 12);
-        }
-    
-    .leaflet-oldie .marker-cluster-large {
-        background-color: rgb(253, 156, 115);
-    }
-    .leaflet-oldie .marker-cluster-large div {
-        background-color: rgb(241, 128, 23);
-    }
-    
-    .marker-cluster {
-        background-clip: padding-box;
-        border-radius: 20px;
-    }
-    .marker-cluster div {
-        width: 30px;
-        height: 30px;
-        margin-left: 5px;
-        margin-top: 5px;
-    
-        text-align: center;
-        border-radius: 15px;
-        font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
-        }
-    .marker-cluster span {
-        line-height: 30px;
-    }
-`;
-const MarkerClusterGroup = createPathComponent(({
-  children: _c,
-  ...props
-}, ctx) => {
-  const clusterProps = {};
-  const clusterEvents = {};
-  console.log("MarkerClusterGroup props", props, ctx);
-  Object.entries(props).forEach(([propName, prop]) => {
-    if (propName !== void 0 && prop !== "") {
-      propName.startsWith("on") ? clusterEvents[propName] = prop : clusterProps[propName] = prop;
-    }
-  });
-  const markerClusterGroup = new L__default.MarkerClusterGroup(clusterProps);
-  Object.entries(clusterEvents).forEach(([eventAsProp, callback]) => {
-    console.log("eventAsProp", eventAsProp);
-    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
-    markerClusterGroup.on(clusterEvent, callback);
-  });
-  return {
-    instance: markerClusterGroup,
-    context: {
-      ...ctx,
-      layerContainer: markerClusterGroup
-    }
-  };
-});
-const RenderByEachFeatureComponent = ({
-  renderFeature,
-  ...props
-}) => {
-  const feature = renderFeature(props);
-  return feature ? /* @__PURE__ */ jsx(Fragment, {
-    children: feature
-  }) : null;
-};
-const MemonizedRenderByEachFeatureComponent = React__default.memo(RenderByEachFeatureComponent);
-const MyLayer = (props) => {
-  const {
-    layerId
-  } = props;
-  const map = useMap();
-  const popupRef = useRef(null);
-  const lefaletLayerRef = useRef({
-    clickTimeout: null,
-    clickCount: 0,
-    handleClickSetted: false
-  });
-  const featureIdOrCollection = useMapStore((state) => {
-    const geoJsonObject = state.hashLayers[layerId]?.geoJsonObject;
-    if (geoJsonObject && geoJsonObject.object.type === "Feature") {
-      return geoJsonObject.object.id;
-    } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
-      return geoJsonObject && geoJsonObject.object.features.map((feature) => feature.id);
-    }
-  }, shallow);
-  const renderFeature = useMapStore((state) => state.hashLayers[layerId]?.renderFeature, shallow);
-  const [visible, cluster = false] = useMapStore((state) => [state.hashLayers[layerId]?.visible, state.hashLayers[layerId]?.cluster], shallow);
-  const markerClusterGroupRef = useRef(null);
-  const handleClick = (a) => {
-    lefaletLayerRef.current.clickCount++;
-    if (lefaletLayerRef.current.clickCount === 1) {
-      lefaletLayerRef.current.clickTimeout = setTimeout(() => {
-        console.log("cluster clicked", a, popupRef.current);
-        const cluster2 = a.propagatedFrom;
-        if (cluster2 && cluster2 instanceof L__default.MarkerCluster) {
-          const childMarkers = cluster2.getAllChildMarkers();
-          console.log("Markers in this cluster: ", childMarkers);
-        }
-        if (!popupRef.current) {
-          popupRef.current = L__default.popup().setLatLng(a.sourceTarget._cLatLng).setContent("Hello, World!");
-          map.addLayer(popupRef.current);
-        } else {
-          popupRef.current.openOn(map);
-        }
-        lefaletLayerRef.current.clickCount = 0;
-      }, TIME_DOUBLE_CLICK);
-    } else if (lefaletLayerRef.current.clickCount === 2) {
-      clearTimeout(lefaletLayerRef.current.clickTimeout);
-      console.log("Double click");
-      lefaletLayerRef.current.clickCount = 0;
-    }
-  };
-  useEffect(() => {
-    if (markerClusterGroupRef.current) {
-      markerClusterGroupRef.current.on("clusterclick", handleClick);
-      console.log("markerClusterGroupRef.current", markerClusterGroupRef.current);
-    }
-  }, [markerClusterGroupRef.current]);
-  if (!featureIdOrCollection || !renderFeature) {
-    return null;
-  }
-  if (visible === false) {
-    return null;
-  }
-  const isFeaturCollection = Array.isArray(featureIdOrCollection);
-  if (!isFeaturCollection) {
-    return /* @__PURE__ */ jsx(RenderByEachFeatureComponent, {
-      renderFeature,
-      id: featureIdOrCollection,
-      layerId
-    });
-  } else {
-    const createClusterCustomIcon = (cluster2) => {
-      var childCount = cluster2.getChildCount();
-      var c = " marker-cluster-";
-      if (childCount < 10) {
-        c += "small";
-      } else if (childCount < 100) {
-        c += "medium";
-      } else {
-        c += "large";
-      }
-      const DivIcon2 = new L__default.DivIcon({
-        html: "<div><span>" + childCount + "</span></div>",
-        className: "marker-cluster" + c,
-        iconSize: new L__default.Point(40, 40)
-      });
-      return DivIcon2;
-    };
-    if (!cluster) {
-      return /* @__PURE__ */ jsx(LayerGroup, {
-        children: featureIdOrCollection.map((featureId) => {
-          return /* @__PURE__ */ jsx(RenderByEachFeatureComponent, {
-            renderFeature,
-            id: featureId,
-            layerId
-          }, `k_${featureId}`);
-        })
-      });
-    } else {
-      console.log("cluster", cluster, featureIdOrCollection);
-      return /* @__PURE__ */ jsx(
-        MarkerClusterGroup,
-        {
-          showCoverageOnHover: false,
-          zoomToBoundsOnClick: false,
-          spiderfyOnMaxZoom: false,
-          iconCreateFunction: createClusterCustomIcon,
-          eventHandlers: {
-            click: (e) => {
-              console.log("click", e);
-            }
-          },
-          children: featureIdOrCollection.map((featureId) => {
-            console.log("featureId", featureId);
-            return /* @__PURE__ */ jsx(MemonizedRenderByEachFeatureComponent, {
-              renderFeature,
-              id: featureId,
-              layerId
-            }, `k_${featureId}`);
-          })
-        }
-      );
-    }
-  }
-};
-const updateOwnerStateClasses = (state) => {
-  state.classes = useMapUtilityClasses(state.ownerState);
-};
-const createMapStore = (initProps) => {
-  const startProps = {
-    classes: useMapUtilityClasses(initProps.ownerState),
-    visibleCheckedLayers: /* @__PURE__ */ new Set(),
-    autoFocusCheckedLayers: /* @__PURE__ */ new Set(),
-    clusterCheckedLayers: /* @__PURE__ */ new Set(),
-    layersIds: [],
-    hashLayers: {},
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, get) => ({
-        ...startProps,
-        mapActions: {
-          init: (layersStore) => {
-            set((state) => {
-              for (let index = 0; index < layersStore.length; index++) {
-                state.hashLayers[layersStore[index].layerId] = cloneDeep(
-                  layersStore[index]
-                );
-                state.layersIds.push(layersStore[index].layerId);
-                if (layersStore[index].visible !== false) {
-                  state.visibleCheckedLayers.add(layersStore[index].layerId);
-                }
-                if (state.hashLayers[layersStore[index].layerId].autoFocus !== false) {
-                  state.autoFocusCheckedLayers.add(layersStore[index].layerId);
-                }
-                if (state.hashLayers[layersStore[index].layerId].cluster !== false) {
-                  state.clusterCheckedLayers.add(layersStore[index].layerId);
-                }
-              }
-            });
-          },
-          setMapState: (status) => {
-            set((state) => {
-              state.ownerState.status = status;
-            });
-          },
-          setDataLayer: (layerId, geoJson) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            set((state) => {
-              const layer = state.hashLayers[layerId];
-              layer.geoJsonObject = geoJson;
-            });
-          },
-          getFeatureIds: (layerId) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            const geoJsonObject = get().hashLayers[layerId]?.geoJsonObject;
-            if (geoJsonObject && geoJsonObject.object.type === "Feature") {
-              return [geoJsonObject.object.id];
-            } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
-              return geoJsonObject.object.features.map((feature) => feature.id);
-            }
-            return [];
-          },
-          setFeatureData: (layerId, featureId, geometry, properties) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            set((state) => {
-              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-                const layer = state.hashLayers[layerId].geoJsonObject?.object;
-                let feature = layer.features.find((f) => f.id === featureId);
-                if (feature) {
-                  feature.geometry = cloneDeep(geometry);
-                  feature.properties = cloneDeep(properties);
-                } else {
-                  feature = {
-                    type: "Feature",
-                    geometry,
-                    id: featureId,
-                    properties
-                  };
-                  layer.features.push(feature);
-                }
-              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
-                const feature = state.hashLayers[layerId].geoJsonObject?.object;
-                feature.id = featureId;
-                feature.geometry = cloneDeep(geometry);
-                feature.properties = cloneDeep(properties);
-              }
-            });
-          },
-          removeFeature: (layerId, featureId) => {
-            if (!get().hashLayers[layerId]) {
-              throw new Error(`Layer with id ${layerId} not found`);
-            }
-            set((state) => {
-              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-                const layer = state.hashLayers[layerId].geoJsonObject?.object;
-                const index = layer.features.findIndex((f) => f.id === featureId);
-                if (index !== -1) {
-                  layer.features.splice(index, 1);
-                }
-              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
-                const feature = state.hashLayers[layerId].geoJsonObject?.object;
-                feature.geometry = { type: "Point", coordinates: [0, 0] };
-                feature.properties = {};
-              }
-            });
-          },
-          setLayerRenderProp: (layerId, renderProp) => {
-            set((state) => {
-              state.hashLayers[layerId].renderFeature = renderProp;
-            });
-          },
-          addLayer: (layer) => {
-            if (get().hashLayers[layer.layerId]) {
-              throw new Error(`Layer with id ${layer.layerId} already exists`);
-            }
-            set((state) => {
-              state.hashLayers[layer.layerId] = layer;
-              state.layersIds.push(layer.layerId);
-              if (layer.visible !== false) {
-                state.hashLayers[layer.layerId].visible = true;
-                state.visibleCheckedLayers.add(layer.layerId);
-              }
-              if (layer.autoFocus !== false) {
-                state.hashLayers[layer.layerId].autoFocus = true;
-                state.autoFocusCheckedLayers.add(layer.layerId);
-              }
-              if (layer.clusterable && layer.cluster !== false) {
-                state.hashLayers[layer.layerId].cluster = true;
-                state.clusterCheckedLayers.add(layer.layerId);
-              }
-            });
-          },
-          addLayerDataToFeature: (layerId, featureId, layerData) => {
-            set((state) => {
-              if (state.hashLayers[layerId]) {
-                if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-                  const layer = state.hashLayers[layerId].geoJsonObject?.object;
-                  const feature = layer.features.find((feature2) => feature2.id === featureId);
-                  if (feature) {
-                    feature.layerData = layerData;
-                    console.log("addLefletLayerToFeature - feature", layerId, featureId, feature.layerData);
-                  }
-                } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
-                  const feature = state.hashLayers[layerId].geoJsonObject?.object;
-                  if (feature.layerData) {
-                    feature.layerData = layerData;
-                  }
-                }
-              }
-            });
-          },
-          removeLayer: (layerId) => {
-            if (!get().hashLayers[layerId]) {
-              return;
-            }
-            set((state) => {
-              if (!state.hashLayers[layerId].visible) {
-                state.visibleCheckedLayers.delete(layerId);
-                state.autoFocusCheckedLayers.delete(layerId);
-              }
-              state.layersIds.splice(state.layersIds.indexOf(layerId), 1);
-              delete state.hashLayers[layerId];
-            });
-          },
-          setCheckedLayers: (checkedNameSet, newCheckedSet) => {
-            set((state) => {
-              state[`${checkedNameSet}CheckedLayers`] = new Set(newCheckedSet);
-              for (const layerId in state.hashLayers) {
-                state.hashLayers[layerId][checkedNameSet] = newCheckedSet.has(layerId);
-              }
-            });
-          },
-          setHandlerGetLabel: (newHandler) => {
-            set((state) => {
-              state.getLabel = newHandler;
-            });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-              updateOwnerStateClasses(state);
-            });
-          }
-        }
-      })),
-      { name: `Map store` }
-    )
-  );
-};
-const MapContext = createContext(null);
-function MapProvider(props) {
-  const {
-    children,
-    initialLayers
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([getLabel]);
-  const mapStoreRef = useRef();
-  if (!mapStoreRef.current) {
-    mapStoreRef.current = createMapStore({
-      getLabel,
-      ownerState: {
-        status: "init",
-        isMobile: !isDesktop,
-        isSkeleton,
-        focus: false
-      }
-    });
-    mapStoreRef.current?.getState().mapActions.init(initialLayers || []);
-  }
-  const {
-    setHandlerGetLabel,
-    setExternalState
-  } = useStore(mapStoreRef.current, (state) => state.mapActions, shallow);
-  useEffect(() => {
-    if (!isFirstRender) {
-      setHandlerGetLabel(getLabel);
-    }
-  }, [getLabel]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    setExternalState({
-      isMobile: !isDesktop,
-      isSkeleton
-    });
-  }, [isDesktop, isSkeleton]);
-  return /* @__PURE__ */ jsx(MapContext.Provider, {
-    value: mapStoreRef.current,
-    children
-  });
-}
-function useMapStore(selector, equalityFn) {
-  const context = useContext(MapContext);
-  if (!context)
-    throw new Error("useMapStore context must be use inside MapContext");
-  return useStore(context, selector, equalityFn);
-}
-function useAutoFocus() {
-  const map = useMap();
-  const layerWithAutoFocus = useMapStore((state) => {
-    return state.layersIds.filter((lId) => {
-      if (state.hashLayers[lId].autoFocus && state.hashLayers[lId].visible) {
-        return true;
-      }
-      return false;
-    }).map((layerId) => ({
-      layerId,
-      features: function() {
-        if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
-          const layer = state.hashLayers[layerId].geoJsonObject?.object;
-          return layer.features.filter((feature) => feature.layerData !== void 0).map((feature) => ({
-            featureId: feature.id,
-            layerData: feature.layerData
-          }));
-        } else {
-          const feature = state.hashLayers[layerId].geoJsonObject?.object;
-          if (feature.layerData !== void 0) {
-            return [{
-              featureId: feature.id,
-              layerData: feature.layerData
-            }];
-          }
-        }
-        return [];
-      }()
-    }));
-  }, shallow);
-  useEffect(() => {
-    const proccesLayerWithAutoFocus = (layersFoucus) => {
-      const layersToFitBounds = [];
-      for (const layerWhitFeatures of layersFoucus) {
-        const features = layerWhitFeatures?.features;
-        for (let i = 0; i < features.length; i++) {
-          const feature = features[i];
-          if (feature.layerData !== void 0) {
-            const featureForBounds = {
-              layerId: layerWhitFeatures.layerId,
-              featureId: feature.featureId,
-              layerData: feature.layerData
-            };
-            console.log("layerForBonds - feature.featureId", feature.featureId, featureForBounds);
-            layersToFitBounds.push(featureForBounds);
-          } else {
-            console.error(`La capa ${layerWhitFeatures.layerId} no tiene un m\xE9todo getBounds`);
-          }
-        }
-      }
-      if (layersToFitBounds.length > 0) {
-        let featureForBounds = layersToFitBounds[0];
-        let bounds = L__default.latLngBounds(featureForBounds.layerData.boundsNW, featureForBounds.layerData.boundsSE);
-        console.log(`bounds i:0 - featureeId: ${layersToFitBounds[0].featureId} - bounds:`, bounds.getNorthWest().lng, bounds.getNorthWest().lat, bounds.getSouthEast().lng, bounds.getSouthEast().lat);
-        for (let i = 1; i < layersToFitBounds.length; i++) {
-          featureForBounds = layersToFitBounds[i];
-          const newBounds = L__default.latLngBounds(featureForBounds.layerData.boundsNW, featureForBounds.layerData.boundsSE);
-          console.log(`bounds i:{${i}} - featureeId ${layersToFitBounds[i].featureId} - bounds`, newBounds.getNorthWest().lng, newBounds.getNorthWest().lat, newBounds.getSouthEast().lng, newBounds.getSouthEast().lat);
-          bounds = bounds.extend(newBounds);
-        }
-        console.log("bounds total", bounds.getNorthWest().lng, bounds.getNorthWest().lat, bounds.getSouthEast().lng, bounds.getSouthEast().lat);
-        map.fitBounds(bounds, {
-          animate: false
-        });
-      }
-    };
-    const throttleBounds = throttle(proccesLayerWithAutoFocus, 300, {
-      leading: false,
-      trailing: true
-    });
-    throttleBounds(layerWithAutoFocus);
-  }, [layerWithAutoFocus]);
-}
-const LayersContainer = () => {
-  const layersId = useMapStore((state) => state.layersIds, shallow);
-  const isSkeleton = useMapStore((state) => state.ownerState.isSkeleton, shallow);
-  const map = useMap();
-  useAutoFocus();
-  useEffect(() => {
-    if (!map) {
-      return;
-    }
-    L__default.control.scale().addTo(map);
-    return () => {
-      L__default.control.scale().remove();
-    };
-  }, [map]);
-  if (isSkeleton) {
-    return null;
-  }
-  if (!map) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(React__default.Fragment, {
-    children: layersId.map((l) => /* @__PURE__ */ jsx(MyLayer, {
-      layerId: l
-    }, l))
-  });
-};
-const DICCTIONARY = {
-  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_RESTART: "label_measure_restart",
-  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"
-};
-function useColumns(props) {
-  const {
-    rowKeyGetter,
-    visibleLayers,
-    setVisibleLayers,
-    autoFocusLayers,
-    setAutoFocusLayers,
-    clusterLayers,
-    setClusterLayers
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  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(DICCTIONARY.LABEL_NAME),
-      type: "string",
-      width: 300,
-      frozen: true
-    },
-    {
-      key: "visible",
-      name: getLabel(DICCTIONARY.LABEL_LAYER_VISIBLE),
-      width: 80,
-      type: "boolean",
-      formatter: ColumnSetCheckFormatter({
-        field: "visible",
-        rowKeyGetter,
-        useHook
-      }),
-      cellClass: "rdg-cell-align-center"
-    },
-    {
-      key: "autoFocus",
-      name: getLabel(DICCTIONARY.LABEL_LAYER_AUTOFOCUS),
-      width: 80,
-      type: "boolean",
-      formatter: ColumnSetCheckFormatter({
-        field: "autoFocus",
-        rowKeyGetter,
-        useHook
-      }),
-      cellClass: "rdg-cell-align-center"
-    },
-    {
-      key: "cluster",
-      name: getLabel(DICCTIONARY.LABEL_LAYER_CLUSTER),
-      width: 80,
-      type: "boolean",
-      formatter: ColumnSetCheckFormatter({
-        field: "cluster",
-        rowKeyGetter,
-        useHook
-      }),
-      cellClass: "rdg-cell-align-center"
-    }
-  ], [getLabel, useHook]);
-  return {
-    columns
-  };
-}
-function useCheckedLayers(checkedNameSet) {
-  const [checkedLayers, setCheckedLayers] = useMapStore((state) => [state[`${checkedNameSet}CheckedLayers`], (newSet) => {
-    state.mapActions.setCheckedLayers(checkedNameSet, newSet);
-  }], shallow);
-  return [checkedLayers, setCheckedLayers];
-}
-function useMaster() {
-  const [hashLayers, layersIds] = useMapStore((state) => [state.hashLayers, state.layersIds], shallow);
-  const rowKeyGetter = useCallback((row) => row.id, []);
-  const [visibleLayers, setVisibleLayers] = useCheckedLayers("visible");
-  const [autoFocusLayers, setAutoFocusLayers] = useCheckedLayers("autoFocus");
-  const [clusterLayers, setClusterLayers] = useCheckedLayers("cluster");
-  const rows = useMemo(() => {
-    const rows2 = [];
-    layersIds.forEach((layerId) => {
-      if (hashLayers[layerId]) {
-        rows2.push({
-          id: layerId,
-          name: hashLayers[layerId].name || `*${layerId}`,
-          active: hashLayers[layerId].visible
-        });
-      }
-    });
-    return rows2;
-  }, [hashLayers, layersIds]);
-  const {
-    columns
-  } = useColumns({
-    rowKeyGetter,
-    visibleLayers,
-    setVisibleLayers,
-    autoFocusLayers,
-    setAutoFocusLayers,
-    clusterLayers,
-    setClusterLayers
-  });
-  return {
-    rowKeyGetter,
-    columns,
-    rows,
-    checkedRows: visibleLayers,
-    onCheckedRowsChange: setVisibleLayers
-  };
-}
-function useDisableZoomEvents(node) {
-  const map = useMap();
-  useEffect(() => {
-    if (!map || !node)
-      return;
-    node.addEventListener("mouseover", function() {
-      map.doubleClickZoom.disable();
-      map.scrollWheelZoom.disable();
-    });
-    node.addEventListener("mouseleave", function() {
-      map.scrollWheelZoom.enable();
-      map.doubleClickZoom.enable();
-    });
-  }, [map, node]);
-}
-function LayersTool() {
-  const {
-    columns,
-    rows,
-    rowKeyGetter
-  } = useMaster();
-  const [node, divRef] = useStateRef(null);
-  useDisableZoomEvents(node);
-  return /* @__PURE__ */ jsx("div", {
-    ref: divRef,
-    style: {
-      position: "relative",
-      height: "100%"
-    },
-    children: /* @__PURE__ */ jsx(DataGrid, {
-      id: "layers",
-      columns,
-      rows,
-      rowKeyGetter,
-      withActions: true,
-      actionsProps: {
-        withPager: false,
-        withLocalFilters: true
-      }
-    })
-  });
-}
-function MainTools(props) {
-  const {
-    gpsTools,
-    aditionalMainTools
-  } = props;
-  const {
-    addPopup,
-    removePopup
-  } = usePopupsStore((state) => state.popupsActions);
-  const map = useMap();
-  const onMouseDown = (e) => {
-    map.dragging.disable();
-    e.stopPropagation();
-    document.addEventListener("mouseup", onMouseUp);
-  };
-  const onMouseUp = (e) => {
-    map.dragging.enable();
-    e.stopPropagation();
-    document.removeEventListener("mouseup", onMouseUp);
-  };
-  const onGpsToolsClick = useCallback((e, isPressed) => {
-    if (isPressed) {
-      addPopup({
-        popupId: "gpsTools",
-        title: "Primer popup",
-        functionComponent: () => gpsTools,
-        onMouseDown,
-        defaultPosition: {
-          left: 490,
-          top: 50,
-          width: 360,
-          height: 420
-        }
-      });
-    } else {
-      removePopup("gpsTools");
-    }
-    e.stopPropagation();
-  }, []);
-  const onLayersClick = useCallback((e, isPressed) => {
-    if (isPressed) {
-      addPopup({
-        popupId: "layers",
-        title: "Primer popup",
-        functionComponent: () => /* @__PURE__ */ jsx(LayersTool, {}),
-        onMouseDown,
-        defaultPosition: {
-          left: 5,
-          top: 240,
-          width: 440,
-          height: 450
-        }
-      });
-    } else {
-      removePopup("layers");
-    }
-    e.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ jsxs("div", {
-    className: mapClasses.mainToolsRoot,
-    children: [/* @__PURE__ */ jsx(ToggleButton, {
-      defaultIsPressed: false,
-      onClick: onGpsToolsClick,
-      children: "GPS Tools"
-    }), /* @__PURE__ */ jsx(ToggleButton, {
-      defaultIsPressed: false,
-      onClick: onLayersClick,
-      children: "Layers"
-    }), aditionalMainTools]
-  });
-}
-function Map(props) {
-  const {
-    children,
-    gpsTools,
-    aditionalMainTools
-  } = props;
-  return /* @__PURE__ */ jsxs(MapRootContainer, {
-    className: mapClasses.root,
-    center: [6.215749485905093, -75.58622905191254],
-    zoom: 16,
-    maxZoom: 22,
-    preferCanvas: true,
-    placeholder: /* @__PURE__ */ jsx("div", {
-      children: "Loading..."
-    }),
-    children: [/* @__PURE__ */ jsx(TileLayer, {
-      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-      attribution: '\xA9 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-    }), /* @__PURE__ */ jsx(LayersContainer, {}), children, /* @__PURE__ */ jsx(PopupsProvider, {
-      children: /* @__PURE__ */ jsx(MainTools, {
-        aditionalMainTools,
-        gpsTools
-      })
-    })]
-  });
-}
-function CustomMarker(props) {
-  const {
-    position,
-    width,
-    height,
-    iconForm,
-    bearing,
-    ...other
-  } = props;
-  const html = useMemo(() => {
-  }, [bearing]);
-  const customIcon = useMemo(() => {
-    return L__default.divIcon({
-      className: "custom-icon",
-      iconSize: [width, height],
-      html: `<div>Hola</div>`
-    });
-  }, [html]);
-  return /* @__PURE__ */ jsx(Marker, {
-    position,
-    icon: customIcon,
-    ...other
-  });
-}
-const MarkerFeatureRender = (props) => {
-  const {
-    id,
-    layerId
-  } = props;
-  const feature = useMapStore((state) => {
-    const gObject = state.hashLayers[layerId].geoJsonObject;
-    console.log(`renderByEachFeature gObject`, gObject);
-    if (!gObject) {
-      return null;
-    }
-    if (gObject.object.type === "Feature") {
-      return {
-        id: gObject.object.id,
-        geometry: gObject.object.geometry,
-        properties: gObject.object.properties
-      };
-    } else {
-      const feat = gObject.object.features.find((f) => f.id === id);
-      if (feat) {
-        return {
-          id: feat.id,
-          geometry: feat.geometry,
-          properties: feat.properties
-        };
-      }
-      return null;
-    }
-  }, shallow);
-  console.log(`renderByEachFeature: ${id}`, feature);
-  if (!feature) {
-    return null;
-  }
-  if (feature.geometry.type === "Point") {
-    const [lat, lng] = feature.geometry.coordinates;
-    const bearing = feature.properties?.bearing ?? 0;
-    return /* @__PURE__ */ jsx(CustomMarker, {
-      position: {
-        lat,
-        lng
-      },
-      width: 32,
-      height: 32,
-      bearing,
-      iconForm: "grua",
-      id: feature.id
-    });
-  }
-  return null;
-};
-const PolylineWithArrows = ({
-  positions,
-  enableEdit,
-  ...other
-}) => {
-  const map = useMap();
-  const polylineRef = useRef(null);
-  const decoratorRef = useRef(null);
-  useEffect(() => {
-    if (polylineRef.current) {
-      const decorator = L__default.polylineDecorator(polylineRef.current, {
-        patterns: [{
-          repeat: 50,
-          symbol: L__default.Symbol.arrowHead({
-            pixelSize: 4,
-            polygon: false,
-            pathOptions: {
-              stroke: true,
-              color: "#ffffff",
-              weight: 2
-            }
-          })
-        }]
-      }).addTo(map);
-      decoratorRef.current = decorator;
-      if (enableEdit) {
-        polylineRef.current.pm.enable();
-      } else {
-        polylineRef.current.pm.disable();
-      }
-      polylineRef.current.on("pm:change", () => {
-        if (decoratorRef.current) {
-          map.removeLayer(decoratorRef.current);
-        }
-        if (polylineRef.current) {
-          decoratorRef.current = L__default.polylineDecorator(polylineRef.current, {
-            patterns: [{
-              repeat: 40,
-              symbol: L__default.Symbol.arrowHead({
-                pixelSize: 4,
-                polygon: false,
-                pathOptions: {
-                  stroke: true,
-                  color: "#cc0000",
-                  weight: 2
-                }
-              })
-            }]
-          }).addTo(map);
-        }
-      });
-      return () => {
-        if (decoratorRef.current) {
-          map.removeLayer(decoratorRef.current);
-        }
-      };
-    }
-  }, [map, enableEdit]);
-  return /* @__PURE__ */ jsx(Polyline, {
-    positions,
-    ref: polylineRef,
-    ...other
-  });
-};
-const CommonFeatureRender = (props) => {
-  const {
-    id,
-    layerId
-  } = props;
-  const feature = useMapStore((state) => {
-    const gObject = state.hashLayers[layerId].geoJsonObject;
-    if (!gObject) {
-      return null;
-    }
-    if (gObject.object.type === "Feature") {
-      return {
-        id: gObject.object.id,
-        geometry: gObject.object.geometry,
-        properties: gObject.object.properties
-      };
-    } else {
-      const feat = gObject.object.features.find((f) => f.id === id);
-      if (feat) {
-        return {
-          id: feat.id,
-          geometry: feat.geometry,
-          properties: feat.properties
-        };
-      }
-      return null;
-    }
-  }, shallow);
-  const {
-    addLayerDataToFeature
-  } = useMapStore((state) => state.mapActions, shallow);
-  if (!feature) {
-    return null;
-  }
-  const propFeature = {
-    featureId: feature.id
-  };
-  if (feature.geometry?.type === "LineString") {
-    const polylinePositions = feature.geometry.coordinates.map((coord) => [coord[1], coord[0]]);
-    return /* @__PURE__ */ jsx(
-      PolylineWithArrows,
-      {
-        positions: polylinePositions,
-        stroke: true,
-        weight: 10,
-        eventHandlers: {
-          add: (e) => {
-            const layerData = {
-              boundsNW: e.target.getBounds().getNorthWest(),
-              boundsSE: e.target.getBounds().getSouthEast()
-            };
-            addLayerDataToFeature(layerId, feature.id, layerData);
-          }
-        },
-        dashArray: "20 30",
-        ...feature.properties,
-        ...propFeature
-      },
-      Math.random()
-    );
-  }
-  if (feature.geometry?.type === "Polygon") {
-    const polygonPositions = feature.geometry.coordinates.map((ring) => ring.map(([lng, lat]) => [lat, lng]));
-    return /* @__PURE__ */ jsx(
-      Polygon,
-      {
-        positions: polygonPositions,
-        opacity: 1,
-        eventHandlers: {
-          add: (e) => {
-            const layerData = {
-              boundsNW: e.target.getBounds().getNorthWest(),
-              boundsSE: e.target.getBounds().getSouthEast()
-            };
-            addLayerDataToFeature(layerId, feature.id, layerData);
-          }
-        },
-        ...feature.properties,
-        ...propFeature
-      }
-    );
-  }
-  if (feature.geometry?.type === "Point") {
-    if (feature.properties?.subType === "Marker") {
-      const [lat, lng] = feature.geometry.coordinates;
-      return /* @__PURE__ */ jsx(Marker, {
-        position: {
-          lat,
-          lng
-        },
-        eventHandlers: {
-          click: (e) => {
-            console.log("click Custom marker", e);
-          }
-        },
-        ...propFeature
-      });
-    } else if (feature.properties?.subType === "CustomMarker")
-      ;
-    else if (feature.properties?.subType === "Circle" && feature.properties?.radius) {
-      const {
-        subType,
-        radius,
-        ...styleProperties
-      } = feature.properties;
-      const [lng, lat] = feature.geometry.coordinates;
-      return /* @__PURE__ */ jsx(Circle, {
-        center: {
-          lat,
-          lng
-        },
-        radius: feature.properties?.radius,
-        ...styleProperties,
-        eventHandlers: {
-          add: (e) => {
-            const layerData = {
-              boundsNW: e.target.getBounds().getNorthWest(),
-              boundsSE: e.target.getBounds().getSouthEast()
-            };
-            addLayerDataToFeature(layerId, feature.id, layerData);
-          }
-        },
-        ...propFeature
-      }, Math.random());
-    }
-  }
-  return null;
-};
-export {
-  CommonFeatureRender as C,
-  DICCTIONARY as D,
-  MAP_ZINDEX_OVER_MAP as M,
-  MAP_ZINDEX_DEFAULT as a,
-  useDisableZoomEvents as b,
-  Map as c,
-  MapProvider as d,
-  MapContext as e,
-  MarkerFeatureRender as f,
-  mapClasses as m,
-  useMapStore as u
-};