@m4l/components 0.2.13 → 0.2.15

package/components/maps/components/Map/index.f38df83e.js

@@ -0,0 +1,1338 @@
+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 { e as ColumnSetCheckFormatter, c as DataGrid } from "../../../DataGrid/index.e127cac8.js";
+import { u as useStateRef } from "../../../../hooks/useStateRef/index.538edb89.js";
+import { u as usePopupsStore, P as PopupsProvider } from "../../../PopupsProvider/index.ae1bd010.js";
+import { T as ToggleButton } from "../../../mui_extended/ToggleButton/index.b053aa70.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
+};