@m4l/components 0.2.32 → 0.2.34

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

@@ -0,0 +1,2386 @@
+import { useMap, LayerGroup, MapContainer, Marker, Polyline, Circle, Polygon } from "react-leaflet";
+import { shallow } from "zustand/shallow";
+import React__default, { createContext, useRef, useEffect, useContext, useMemo, useState, useCallback } from "react";
+import * as L from "leaflet";
+import L__default from "leaflet";
+import { Loader } from "@googlemaps/js-api-loader";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment, useModulePrivileges } from "@m4l/core";
+import clsx from "clsx";
+import { useFormContext, useWatch } from "react-hook-form";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.fa7ab18c.js";
+import { B as Button } from "../../../mui_extended/Button/index.c3084916.js";
+import * as Yup from "yup";
+import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
+import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index.bc278965.js";
+import { S as Stack } from "../../../mui_extended/Stack/index.0e53197c.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7b2a8723.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.f8a3021b.js";
+import { u as usePopupsStore, P as PopupsProvider } from "../../../popups/PopupsProvider/index.d7409f48.js";
+import { T as ToggleIconButton } from "../../../mui_extended/ToggleIconButton/index.d9dbf650.js";
+import { c as DataGrid } from "../../../DataGrid/index.abe0f9b9.js";
+import { generateUtilityClasses, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
+import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index.0b23ba88.js";
+import { I as Icon, M as MarkerIconLabel } from "../../../Icon/index.ad330e78.js";
+import { u as useStateRef } from "../../../../hooks/useStateRef/index.538edb89.js";
+import { C as CheckBox } from "../../../mui_extended/CheckBox.2a3b86c5.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.d85de73b.js";
+import { P as PopupsViewer } from "../../../popups/PopupsViewer/index.1500ce72.js";
+import { 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 { 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.6469f148.js";
+import { b as bearingRawToCSS } from "../../index.34ab6a68.js";
+import "leaflet-polylinedecorator";
+const COMPONENT_CLASS_NAME = "M4LMap";
+const MAP_ZINDEX_DEFAULT = 0;
+const MAP_ZINDEX_OVER_MAP = 1100;
+const TIME_DOUBLE_CLICK = 250;
+const MARKER_COLOR_DEFAULT = "#1E96DC";
+const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
+const LABEL_COLOR_DEFAULT = "#FFFFFF";
+const GPS_TOOLS_POPUP_DEFAULT_POSITION = {
+  vertical: { top: 50, bottom: 50 },
+  horizontal: { right: 50, width: 380 }
+};
+const MESURE_POPUP_DEFAULT_POSITION = {
+  vertical: { top: 50, height: 250 },
+  horizontal: { right: 50, width: 300 }
+};
+const SVG_ICON_DEFAULT = `<svg viewBox="0 0 640 640" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
+<g>
+    <circle
+        cx="320"
+        cy="320"
+        r="280"
+        fill="#1E96DC"
+    />
+    <text
+        x="320"
+        y="320"
+        font-size="320"
+        font-family="sans-serif"
+        fill="#FFFFFF"
+        text-anchor="middle"
+        alignment-baseline="central"
+        dominant-baseline="central"
+    >P</text>
+</g>
+</svg>`;
+const updateOwnerStateClasses = (state) => {
+};
+const mapClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "topLeftToolsRoot",
+  "topRigthToolsRoot",
+  "zoomButtons",
+  "markerLayerRoot",
+  "markerLayerIcon",
+  "markerLayerLabel",
+  "markerLayerLabelInner",
+  "featureLabel",
+  "meaureToolRoot",
+  "measureToolFormValue",
+  "measureToolFormValueDistance",
+  "measureToolFormValueSymbol",
+  "measureToolLabel",
+  "meausureToolLabelDistance",
+  "meausureToolLabelSymbol",
+  "measureMarkerRoot",
+  "measureMarkerContainer",
+  "measureMarkerContainerRhomb",
+  "measureMarkerContainerSlot",
+  "measureMarkerContainerSlotNumber",
+  "measureLabelMarkerRoot",
+  "measureLabelMarkerContainer",
+  "measureLabelMarkerDistance",
+  "measureLabelMarkerRemove",
+  "mapSourcesPopoverRoot",
+  "mapSourcesRoot",
+  "mapSourcesOption",
+  "mapSourcesOptionIconLabel",
+  "mapSourcesOptionRoadOptions",
+  "mapSourcesOptionRoadOptionsCheck",
+  "layersPopoverRoot",
+  "active",
+  "disabled"
+]);
+const useMapUtilityClasses = (_ownerState) => {
+  const slots = {
+    root: ["root"],
+    topLeftToolsRoot: ["topLeftToolsRoot"],
+    topRigthToolsRoot: ["topRigthToolsRoot"],
+    zoomButtons: ["zoomButtons"],
+    markerLayerRoot: ["markerLayerRoot"],
+    markerLayerIcon: ["markerLayerIcon"],
+    markerLayerLabel: ["markerLayerLabel"],
+    markerLayerLabelInner: ["markerLayerLabelInner"],
+    featureLabel: ["featureLabel"],
+    meaureToolRoot: ["meaureToolRoot"],
+    measureToolFormValue: ["measureToolFormValue"],
+    measureToolFormValueDistance: ["measureToolFormValueDistance"],
+    measureToolFormValueSymbol: ["measureToolFormValueSymbol"],
+    measureToolLabel: ["measureToolLabel"],
+    meausureToolLabelDistance: ["meausureToolLabelDistance"],
+    meausureToolLabelSymbol: ["meausureToolLabelSymbol"],
+    measureMarkerRoot: ["measureMarkerRoot"],
+    measureMarkerContainer: ["measureMarkerContainer"],
+    measureMarkerContainerRhomb: ["measureMarkerContainerRhomb"],
+    measureMarkerContainerSlot: ["measureMarkerContainerSlot"],
+    measureMarkerContainerSlotNumber: ["measureMarkerContainerSlotNumber"],
+    measureLabelMarkerRoot: ["measureLabelMarkerRoot"],
+    measureLabelMarkerContainer: ["measureLabelMarkerContainer"],
+    measureLabelMarkerDistance: ["measureLabelMarkerDistance"],
+    measureLabelMarkerRemove: ["measureLabelMarkerRemove"],
+    mapSourcesPopoverRoot: ["mapSourcesPopoverRoot"],
+    mapSourcesRoot: ["mapSourcesToolRoot"],
+    mapSourcesOption: ["mapSourcesToolOption"],
+    mapSourcesOptionIconLabel: ["mapSourcesToolOptionIconLabel"],
+    mapSourcesOptionRoadOptions: ["mapSourcesToolOptionRoadOptions"],
+    mapSourcesOptionRoadOptionsCheck: ["mapSourcesToolOptionRoadOptionsCheck"],
+    layersPopoverRoot: ["layersPopoverRoot"],
+    active: ["active"],
+    disabled: ["disabled"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
+};
+const MAP_DICCTIONARY = {
+  LABEL_GPSTOOLS_NAME: "label_gpstools_name",
+  LABEL_TAB_GEO: "label_tab_geo",
+  TAB_GENERAL_CONFIG_TOOLTIP: "tab_general_config_tooltip",
+  PAPER_GENERAL: "paper_general",
+  LABEL_ID: "label_id",
+  LABEL_NAME: "label_name",
+  LABEL_GEOMETRY_TYPE: "label_geometry_type",
+  LABEL_GEOMETRY_CIRCLE: "label_geometry_circle",
+  LABEL_GEOMETRY_RECTANGLE: "label_geometry_rectangle",
+  LABEL_GEOMETRY_POLYGON: "label_geometry_polygon",
+  LABEL_DRAW: "label_draw",
+  LABEL_FINISH: "label_finish",
+  PAPER_CONFIG: "paper_config",
+  LABEL_ALIAS: "label_alias",
+  LABEL_CUSTOMER_ID: "label_customer_id",
+  LABEL_TIME_MIN_IN_SECONDS: "label_time_min_in_seconds",
+  LABEL_TIME_MIN_OUT_SECONDS: "label_time_min_out_seconds",
+  TAB_STYLE_CONFIG_TOOLTIP: "tab_style_tooltip",
+  PAPER_STROKE: "paper_stroke",
+  LABEL_COLOR: "label_color",
+  LABEL_OPACITY: "label_opacity",
+  LABEL_WEIGHT: "label_weight",
+  LABEL_DASH_ARRAY: "label_dash_array",
+  LABEL_DASH_OFFSET: "label_dash_offset",
+  LABEL_RADIUS: "label_radius",
+  LABEL_LAT: "label_lat",
+  LABEL_LON: "label_lon",
+  LABEL_PLACE_MARKER: "label_place_marker",
+  LABEL_FIRST_VERTEX: "label_first_vertex",
+  LABEL_CONTINUE_LINE: "label_continue_line",
+  LABEL_FINISH_LINE: "label_finish_line",
+  LABEL_FINISH_POLY: "label_finish_poly",
+  LABEL_FINISH_RECT: "label_finish_rect",
+  LABEL_START_CIRCLE: "label_start_circle",
+  LABEL_FINISH_CIRCLE: "label_finish_circle",
+  LABEL_PLACE_CIRCLE_MARKER: "label_place_circle_marker",
+  VALIDATION_GEOMETRY_REQUIRED: "validation_geometry_required",
+  VALIDATION_FIELD_REQUIRED: "validation_field_required",
+  VALIDATION_FIELD_TYPE_NUMBER_ERROR: "validation_field_type_number_error",
+  LABEL_VIEW_TRANSIT_FEATURES: "label_view_crossing_features",
+  LABEL_VIEW_INTERNAL_FEATURES: "label_view_internal_features",
+  LABEL_CREATED_AT: "label_created_at",
+  LABEL_UPDATED_AT: "label_updated_at",
+  MODAL_DELETE_GEO_TITLE: "modal_delete_geo_title",
+  MODAL_DELETE_GEO_MESSAGE: "modal_delete_geo_message",
+  MODAL_DISABLE_GEO_TITLE: "modal_disable_geo_title",
+  MODAL_DISABLE_MESSAGE: "modal_disable_geo_message",
+  ROW_ACTION_GEO_EDIT: "row_action_geo_edit",
+  ROW_ACTION_GEO_ENABLE: "row_action_geo_enable",
+  ROW_ACTION_GEO_DISABLE: "row_action_geo_disable",
+  ROW_ACTION_GEO_DELETE: "row_action_geo_delete",
+  LABEL_TAB_MEASURE: "label_tab_measure",
+  PAPER_MEASURE: "paper_measure",
+  LABEL_MEASURE_START: "label_measure_start",
+  LABEL_MEASURE_CANCEL: "label_measure_cancel",
+  LABEL_MEASURE_DISTANCE: "label_measure_distance",
+  LABEL_MEASURE_AREA: "label_measure_area",
+  LABEL_MEASURE_UNIT: "label_measure_unit",
+  LABEL_MEASURE_UNIT_BASE_KILOMETERS: "label_measure_unit_base_kilometers",
+  LABEL_MEASURE_REMOVE_POINT: "label_measure_remove_point",
+  LABEL_LAYERS: "label_layes",
+  LABEL_LAYER_NAME: "label_layer_name",
+  LABEL_LAYER_VISIBLE: "label_layer_visible",
+  LABEL_LAYER_AUTOFOCUS: "label_layer_autofocus",
+  LABEL_LAYER_CLUSTER: "label_layer_cluster",
+  LABEL_LAYER_DELETE: "label_layer_delete",
+  ROW_ACTION_LAYER_DELETE: "row_action_layer_delete",
+  LABEL_MAP_SOURCES: "label_map_sources",
+  LABEL_TILE_OSM: "label_tile_osm",
+  LABEL_TILE_GOOGLE: "label_tile_google",
+  LABEL_TILE_GOOGLE_SATELLITE: "label_tile_google_satellite",
+  LABEL_TILE_GOOGLE_HYBRID: "label_tile_google_hybrid",
+  LABEL_TILE_BING: "label_tile_bing"
+};
+const MAP_ICONS = {
+  MAP_ZOOM_IN: "cmp_map_zoom_in.svg",
+  MAP_ZOOM_OUT: "cmp_map_zoom_out.svg",
+  MAP_SOURCES_TOOL: "cmp_map_mapsources_tool.svg",
+  MAP_SOURCE_OSM: "cmp_map_mapsources_osm.svg",
+  MAP_SOURCE_GOOGLE_ROADS: "cmp_map_mapsources_google.svg",
+  MAP_SOURCE_GOOGLE_HYBRID: "cmp_map_mapsources_googlehybrid.svg",
+  MAP_SOURCE_GOOGLE_SATELLITE: "cmp_map_mapsources_googlesatelite.svg",
+  MAP_SOURCE_BING: "cmp_map_mapsources_ bing.svg",
+  MAP_SOURCE_ROAD_TRAFFIC: "cmp_map_mapsources_layer-traffic.svg",
+  MAP_SOURCE_ROAD_TRANSIT: "cmp_map_mapsources_layer-transit.svg",
+  MAP_SOURCE_ROAD_BICYCLING: "cmp_map_mapsources_layer-bicycle.svg",
+  MAP_LAYERS_TOOL: "cmp_map_layers_tool.svg",
+  MAP_LAYER_VISIBLE: "cmp_map_layers_view.svg",
+  MAP_LAYER_AUTOFOCUS: "cmp_map_layers_zoom_fit.svg",
+  MAP_LAYER_CLUSTER: "cmp_map_layers_cluster.svg",
+  MAP_LAYER_DELETE: "cmp_map_layers_delete.svg",
+  MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
+  GEOMETRY_CIRCLE: "geometry_circle.svg",
+  GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
+  GEOMETRY_POLYGON: "geometry_polygon.svg",
+  ADD: "add.svg",
+  MAP_MEASURE_TOOL: "cmp_map_measure_tool.svg",
+  GENERAL: "general.svg",
+  CONFIG: "config.svg",
+  STROKE: "stroke.svg",
+  FILL: "fill.svg",
+  EDIT: "edit.svg",
+  DELETE: "delete.svg",
+  ACTIVE: "active.svg",
+  NAME: "name.svg"
+};
+const TILE_LAYER_OSM = {
+  id: "osm_roadmap",
+  sourceType: "OSM",
+  iconUrl: MAP_ICONS.MAP_SOURCE_OSM,
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_OSM,
+  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+  options: {
+    minZoom: 0,
+    maxZoom: 19,
+    subdomains: ["a", "b", "c"],
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE = {
+  id: "google_rodmap",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_ROADS,
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  hasBicyclingLayer: true,
+  hasTrafficLayer: true,
+  hasTransitLayer: true,
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data \xA9 Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE_SATELLITE = {
+  id: "google_satellite",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_SATELLITE,
+  mapTypeTile: "satellite",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_SATELLITE,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data \xA9 Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+const TILE_LAYER_GOOGLE_HYBRID = {
+  id: "google_hybrid",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_HYBRID,
+  mapTypeTile: "hybrid",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_HYBRID,
+  urlTemplate: "http://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}&key=AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw",
+  hasBicyclingLayer: true,
+  hasTrafficLayer: true,
+  hasTransitLayer: true,
+  options: {
+    minZoom: 0,
+    maxZoom: 22,
+    subdomains: ["mt0", "mt1", "mt2", "mt3"],
+    attribution: "Map data \xA9 Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+function toQuadKey(x, y, z) {
+  let quadKey = "";
+  for (let i = z; i > 0; i--) {
+    let digit = 0;
+    let mask = 1 << i - 1;
+    if ((x & mask) !== 0) {
+      digit++;
+    }
+    if ((y & mask) !== 0) {
+      digit++;
+      digit++;
+    }
+    quadKey += digit.toString();
+  }
+  return quadKey;
+}
+const BING_URL_TEMPLATE = "https://{s}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/|QK|?mkt=en-us&it=G,VE,BX,L,LA&shading=hill&og=22&n=z";
+const BING_SUB_DOMAINS = ["t2", "t3"];
+const TILE_LAYER_BING = {
+  id: "bing_rodmap",
+  sourceType: "Bing",
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_BING,
+  iconUrl: MAP_ICONS.MAP_SOURCE_BING,
+  urlTemplate: BING_URL_TEMPLATE,
+  options: {
+    minZoom: 0,
+    maxZoom: 21,
+    subdomains: BING_SUB_DOMAINS,
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
+    tms: true
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  },
+  getTileUrl: (tileCoord) => {
+    const i = Math.abs(tileCoord.x + tileCoord.y) % BING_SUB_DOMAINS.length;
+    const z = tileCoord.z;
+    const x = tileCoord.x;
+    const y = tileCoord.y;
+    const gk = toQuadKey(x, y, z);
+    return BING_URL_TEMPLATE.replace("|QK|", gk).replace("{s}", BING_SUB_DOMAINS[i]);
+  }
+};
+const createMapStore = (initProps) => {
+  const startProps = {
+    classes: useMapUtilityClasses(initProps.ownerState),
+    visibleCheckedLayers: /* @__PURE__ */ new Set(),
+    autoFocusCheckedLayers: /* @__PURE__ */ new Set(),
+    clusterCheckedLayers: /* @__PURE__ */ new Set(),
+    currentMapSourceId: "",
+    hashMapSources: {},
+    mapSourcesIds: [],
+    layersIds: [],
+    hashLayers: {},
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        mapActions: {
+          init: (layersStore) => {
+            set((state) => {
+              state.hashMapSources = {
+                osm_roadmap: TILE_LAYER_OSM,
+                google_rodmap: TILE_LAYER_GOOGLE,
+                google_satellite: TILE_LAYER_GOOGLE_SATELLITE,
+                google_hybrid: TILE_LAYER_GOOGLE_HYBRID,
+                bing_rodmap: TILE_LAYER_BING
+              };
+              state.mapSourcesIds = ["osm_roadmap", "google_rodmap", "google_satellite", "google_hybrid", "bing_rodmap"];
+              state.currentMapSourceId = "osm_roadmap";
+              for (let index = 0; index < layersStore.length; index++) {
+                state.hashLayers[layersStore[index].layerId] = cloneDeep(
+                  layersStore[index]
+                );
+                state.layersIds.push(layersStore[index].layerId);
+                if (layersStore[index].visible !== false) {
+                  state.visibleCheckedLayers.add(layersStore[index].layerId);
+                }
+                if (state.hashLayers[layersStore[index].layerId].autoFocus !== false) {
+                  state.autoFocusCheckedLayers.add(layersStore[index].layerId);
+                }
+                if (state.hashLayers[layersStore[index].layerId].cluster !== false) {
+                  state.clusterCheckedLayers.add(layersStore[index].layerId);
+                }
+              }
+            });
+          },
+          setMapState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          setDataLayer: (layerId, geoJson) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            set((state) => {
+              const layer = state.hashLayers[layerId];
+              layer.geoJsonObject = geoJson;
+            });
+          },
+          getFeatureIds: (layerId) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            const geoJsonObject = get().hashLayers[layerId]?.geoJsonObject;
+            if (geoJsonObject && geoJsonObject.object.type === "Feature") {
+              return [geoJsonObject.object.id];
+            } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
+              return geoJsonObject.object.features.map((feature) => feature.id);
+            }
+            return [];
+          },
+          setFeatureData: (layerId, featureId, geometry, properties, featureLabel) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            set((state) => {
+              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
+                const layer = state.hashLayers[layerId].geoJsonObject?.object;
+                let feature = layer.features.find((f) => f.id === featureId);
+                if (feature) {
+                  feature.geometry = cloneDeep(geometry);
+                  feature.properties = { ...feature.properties, ...properties };
+                  feature.featureLabel = featureLabel;
+                } else {
+                  feature = {
+                    type: "Feature",
+                    geometry,
+                    id: featureId,
+                    properties,
+                    featureLabel
+                  };
+                  layer.features.push(feature);
+                }
+              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
+                const feature = state.hashLayers[layerId].geoJsonObject?.object;
+                feature.id = featureId;
+                feature.geometry = cloneDeep(geometry);
+                feature.properties = cloneDeep(properties);
+              }
+            });
+          },
+          removeFeature: (layerId, featureId) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            set((state) => {
+              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
+                const layer = state.hashLayers[layerId].geoJsonObject?.object;
+                const index = layer.features.findIndex((f) => f.id === featureId);
+                if (index !== -1) {
+                  layer.features.splice(index, 1);
+                }
+              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
+                const feature = state.hashLayers[layerId].geoJsonObject?.object;
+                feature.geometry = { type: "Point", coordinates: [0, 0] };
+                feature.properties = { subType: "Marker" };
+              }
+            });
+          },
+          setLayerRenderProp: (layerId, renderProp) => {
+            set((state) => {
+              state.hashLayers[layerId].renderFeature = renderProp;
+            });
+          },
+          addLayer: (layer) => {
+            if (get().hashLayers[layer.layerId]) {
+              throw new Error(`Layer with id ${layer.layerId} already exists`);
+            }
+            set((state) => {
+              state.hashLayers[layer.layerId] = layer;
+              state.layersIds.push(layer.layerId);
+              if (layer.visible !== false) {
+                state.hashLayers[layer.layerId].visible = true;
+                state.visibleCheckedLayers.add(layer.layerId);
+              }
+              if (layer.autoFocus !== false) {
+                state.hashLayers[layer.layerId].autoFocus = true;
+                state.autoFocusCheckedLayers.add(layer.layerId);
+              }
+              if (layer.clusterAble && layer.cluster !== false) {
+                state.hashLayers[layer.layerId].cluster = true;
+                state.clusterCheckedLayers.add(layer.layerId);
+              }
+            });
+          },
+          addLayerDataToFeature: (layerId, featureId, layerData) => {
+            set((state) => {
+              if (state.hashLayers[layerId]) {
+                if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
+                  const layer = state.hashLayers[layerId].geoJsonObject?.object;
+                  const feature = layer.features.find((feature2) => feature2.id === featureId);
+                  if (feature) {
+                    feature.layerData = layerData;
+                  }
+                } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
+                  const feature = state.hashLayers[layerId].geoJsonObject?.object;
+                  if (feature.layerData) {
+                    feature.layerData = layerData;
+                  }
+                }
+              }
+            });
+          },
+          removeLayer: (layerId) => {
+            if (!get().hashLayers[layerId]) {
+              return;
+            }
+            set((state) => {
+              if (!state.hashLayers[layerId].visible) {
+                state.visibleCheckedLayers.delete(layerId);
+                state.autoFocusCheckedLayers.delete(layerId);
+              }
+              state.layersIds.splice(state.layersIds.indexOf(layerId), 1);
+              delete state.hashLayers[layerId];
+            });
+          },
+          setCheckedLayers: (checkedNameSet, newCheckedSet) => {
+            set((state) => {
+              state[`${checkedNameSet}CheckedLayers`] = new Set(newCheckedSet);
+              for (const layerId in state.hashLayers) {
+                state.hashLayers[layerId][checkedNameSet] = newCheckedSet.has(layerId);
+              }
+            });
+          },
+          setCurrentMapSource: (newId) => {
+            set((state) => {
+              if (newId in state.hashMapSources) {
+                state.currentMapSourceId = newId;
+              }
+            });
+          },
+          setMapSourceRoadOptions: (partialRoadOptions) => {
+            set((state) => {
+              if (!state.hashMapSources[state.currentMapSourceId]) {
+                return;
+              }
+              state.hashMapSources[state.currentMapSourceId].roadSelectedOptions = {
+                bicyclingLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.bicyclingLayer || false,
+                trafficLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.trafficLayer || false,
+                transitLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.transitLayer || false,
+                ...partialRoadOptions
+              };
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses();
+            });
+          }
+        }
+      })),
+      { name: `Map store` }
+    )
+  );
+};
+const MapContext = createContext(null);
+function MapProvider(props) {
+  const {
+    children,
+    initialLayers,
+    googleApiKey: apiKey,
+    googleMapVersion = "weekly"
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createMapStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton,
+        focus: false
+      },
+      googleApiKey: apiKey,
+      googleMapVersion
+    });
+    mapStoreRef.current?.getState().mapActions.init(initialLayers || []);
+  }
+  const {
+    setHandlerGetLabel,
+    setExternalState
+  } = useStore(mapStoreRef.current, (state) => state.mapActions, shallow);
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, {
+    value: mapStoreRef.current,
+    children
+  });
+}
+function useMapStore(selector, equalityFn) {
+  const context = useContext(MapContext);
+  if (!context)
+    throw new Error("useMapStore context must be use inside MapContext");
+  return useStore(context, selector, equalityFn);
+}
+const TileLayerOthers = () => {
+  const map = useMap();
+  const {
+    urlTemplate,
+    dictionaryId,
+    options,
+    getTileUrl,
+    sourceType
+  } = useMapStore((state) => state.hashMapSources[state.currentMapSourceId], shallow);
+  useEffect(() => {
+    let layer;
+    if (sourceType === "Google") {
+      return;
+    }
+    layer = L__default.tileLayer(urlTemplate, options);
+    if (getTileUrl) {
+      layer.getTileUrl = getTileUrl;
+    }
+    map.addLayer(layer);
+    if (options && options.maxZoom) {
+      map.setMaxZoom(options.maxZoom);
+    }
+    return () => {
+      if (layer) {
+        map.removeLayer(layer);
+      }
+    };
+  }, [dictionaryId, urlTemplate, options, getTileUrl, sourceType]);
+  return null;
+};
+function TileLayerGoogle() {
+  const map = useMap();
+  const mutantRefLayer = React__default.useRef(null);
+  const {
+    options,
+    sourceType,
+    mapTypeTile
+  } = useMapStore((state) => state.hashMapSources[state.currentMapSourceId], shallow);
+  const roadOptions = useMapStore((state) => state.hashMapSources[state.currentMapSourceId].roadSelectedOptions, shallow);
+  const [googleApiKey, googleMapVersion] = useMapStore((state) => [state.googleApiKey, state.googleMapVersion], shallow);
+  React__default.useEffect(() => {
+    if (sourceType !== "Google") {
+      return;
+    }
+    let googleMutantLayer;
+    const loader = new Loader({
+      apiKey: googleApiKey,
+      version: googleMapVersion
+    });
+    loader.importLibrary("maps").then(() => {
+      googleMutantLayer = L__default.gridLayer.googleMutant({
+        type: mapTypeTile,
+        maxZoom: 20,
+        ...options
+      });
+      mutantRefLayer.current = googleMutantLayer;
+      if (roadOptions.trafficLayer) {
+        googleMutantLayer.addGoogleLayer("TrafficLayer");
+      }
+      if (roadOptions.transitLayer) {
+        googleMutantLayer.addGoogleLayer("TransitLayer");
+      }
+      if (roadOptions.bicyclingLayer) {
+        googleMutantLayer.addGoogleLayer("BicyclingLayer");
+      }
+      map.addLayer(googleMutantLayer);
+    });
+    return () => {
+      if (googleMutantLayer) {
+        map.removeLayer(googleMutantLayer);
+        mutantRefLayer.current = null;
+      }
+    };
+  }, [map, sourceType, mapTypeTile]);
+  React__default.useEffect(() => {
+    if (sourceType !== "Google") {
+      return;
+    }
+    if (mutantRefLayer.current && roadOptions) {
+      console.log("roadOptions.trafficLayer", roadOptions.trafficLayer);
+      if (roadOptions.trafficLayer) {
+        mutantRefLayer.current.addGoogleLayer("TrafficLayer");
+      } else if (roadOptions.trafficLayer === false) {
+        mutantRefLayer.current.removeGoogleLayer("TrafficLayer");
+      }
+    }
+  }, [roadOptions.trafficLayer]);
+  React__default.useEffect(() => {
+    if (sourceType !== "Google") {
+      return;
+    }
+    if (mutantRefLayer.current && roadOptions) {
+      if (roadOptions.transitLayer) {
+        mutantRefLayer.current.addGoogleLayer("TransitLayer");
+      } else if (roadOptions.transitLayer === false) {
+        mutantRefLayer.current.removeGoogleLayer("TransitLayer");
+      }
+    }
+  }, [roadOptions.transitLayer]);
+  React__default.useEffect(() => {
+    if (sourceType !== "Google") {
+      return;
+    }
+    if (mutantRefLayer.current && roadOptions) {
+      if (roadOptions.bicyclingLayer) {
+        mutantRefLayer.current.addGoogleLayer("BicyclingLayer");
+      } else if (roadOptions.bicyclingLayer === false) {
+        mutantRefLayer.current.removeGoogleLayer("BicyclingLayer");
+      }
+    }
+  }, [roadOptions.bicyclingLayer]);
+  return null;
+}
+function TileLayers() {
+  return /* @__PURE__ */ jsxs(React__default.Fragment, {
+    children: [/* @__PURE__ */ jsx(TileLayerOthers, {}), /* @__PURE__ */ jsx(TileLayerGoogle, {})]
+  });
+}
+const POSITION_CLASSES = {
+  bottomleft: "leaflet-bottom leaflet-left",
+  bottomright: "leaflet-bottom leaflet-right",
+  topleft: "leaflet-top leaflet-left",
+  topright: "leaflet-top leaflet-right"
+};
+const Control = (props) => {
+  const [portalRoot, setPortalRoot] = React__default.useState(document.createElement("div"));
+  const positionClass = props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright;
+  const controlContainerRef = React__default.createRef();
+  const map = useMap();
+  React__default.useEffect(() => {
+    console.log("useEffect, controlContainerRef", controlContainerRef);
+    if (controlContainerRef.current !== null) {
+      L__default.DomEvent.disableClickPropagation(controlContainerRef.current);
+      L__default.DomEvent.disableScrollPropagation(controlContainerRef.current);
+    }
+  }, [controlContainerRef]);
+  React__default.useEffect(() => {
+    const mapContainer = map.getContainer();
+    const targetDiv = mapContainer.getElementsByClassName(positionClass);
+    setPortalRoot(targetDiv[0]);
+  }, [positionClass]);
+  React__default.useEffect(() => {
+    if (portalRoot !== null) {
+      if (props.prepend !== void 0 && props.prepend === true) {
+        portalRoot.prepend(controlContainerRef.current);
+      } else {
+        portalRoot.append(controlContainerRef.current);
+      }
+    }
+  }, [portalRoot, props.prepend, controlContainerRef]);
+  const className = clsx(props.container?.className, "leaflet-control", props.className);
+  console.log("Control Render", controlContainerRef);
+  return /* @__PURE__ */ jsx("div", {
+    ...props.container,
+    ref: controlContainerRef,
+    className,
+    children: props.children
+  });
+};
+function MyActions() {
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const fieldsWatch = useWatch({
+    control,
+    name: ["statusEdition", "reInits"]
+  });
+  const statusEdition = fieldsWatch[0];
+  const initCancelDraw = () => {
+    if (statusEdition === "initial") {
+      setValue("statusEdition", "draw");
+    } else if (statusEdition === "draw") {
+      setValue("statusEdition", "initial");
+    }
+  };
+  return /* @__PURE__ */ jsx(Actions, {
+    children: /* @__PURE__ */ jsx(Button, {
+      onClick: initCancelDraw,
+      children: statusEdition === "initial" ? getLabel(MAP_DICCTIONARY.LABEL_MEASURE_START) : getLabel(MAP_DICCTIONARY.LABEL_MEASURE_CANCEL)
+    })
+  });
+}
+function MeasureDataValidation(_getLabel) {
+  return {};
+}
+function useValidation() {
+  const { getLabel } = useModuleDictionary();
+  const validationSchema = useMemo(
+    () => Yup.object().shape({
+      ...MeasureDataValidation()
+    }),
+    [getLabel]
+  );
+  return { validationSchema };
+}
+const INITIAL_FORM_VALUES = {
+  statusLoad: "ready",
+  reInits: 0,
+  value: "0",
+  measureTypeId: "distance",
+  magnitudFactor: { id: "m_kilometers", name: "Kilometers", symbol: "k", factor_x0: 0, factor_x1: 1, factor_x2: 0 },
+  unitArea: null,
+  statusEdition: "initial"
+};
+const STYLE_MEASURE_OPTIONS = {
+  strokeLineColor: "#1E96DC",
+  strokeLineWeight: 5,
+  markerHeight: 37,
+  markerWidth: 26,
+  labelMarkerHeight: 0,
+  labelMarkerWidth: 0,
+  labelMarkerAnchorY: 0,
+  labelMarkerAnchorX: 0
+};
+const getMarkerPointIcon = (position) => {
+  return L__default.divIcon({
+    className: mapClasses.measureMarkerRoot,
+    html: `<div  class="${mapClasses.measureMarkerContainer}">
+            <div  class="${mapClasses.measureMarkerContainerRhomb}">
+            </div>
+            <div  class="${mapClasses.measureMarkerContainerSlot}">
+                <div  class="${mapClasses.measureMarkerContainerSlotNumber}">
+                    ${position}
+                </div>
+            </div>
+        </div>
+        `,
+    iconSize: [STYLE_MEASURE_OPTIONS.markerWidth, STYLE_MEASURE_OPTIONS.markerHeight],
+    iconAnchor: [STYLE_MEASURE_OPTIONS.markerWidth / 2, STYLE_MEASURE_OPTIONS.markerHeight]
+  });
+};
+const getMarkerPointLabel = (distance, getLabel) => {
+  return L__default.divIcon({
+    className: mapClasses.measureLabelMarkerRoot,
+    html: `<div  class="${mapClasses.measureLabelMarkerContainer}">
+        ${distance ? `<span class="${mapClasses.measureLabelMarkerDistance}">${distance}</span>` : ""}
+        <div class="${mapClasses.measureLabelMarkerRemove}">${getLabel(MAP_DICCTIONARY.LABEL_MEASURE_REMOVE_POINT)}</div>
+        </div>`,
+    iconSize: [STYLE_MEASURE_OPTIONS.labelMarkerWidth, STYLE_MEASURE_OPTIONS.labelMarkerHeight],
+    iconAnchor: [STYLE_MEASURE_OPTIONS.labelMarkerAnchorX, STYLE_MEASURE_OPTIONS.labelMarkerAnchorY]
+  });
+};
+function useMeasure() {
+  const { getLabel } = useModuleDictionary();
+  const map = useMap();
+  const readyToUpdate = useFormReadyForUpdate();
+  const { control, setValue } = useFormContext();
+  const fieldsWatch = useWatch({
+    control,
+    name: [
+      "statusEdition",
+      "value",
+      "magnitudFactor"
+    ]
+  });
+  const statusEdition = fieldsWatch[0];
+  const value = fieldsWatch[1];
+  const magnitudFactor = fieldsWatch[2];
+  const [magnitudFactorCached, setMagnitudFactorCached] = useState(magnitudFactor);
+  const currentMeasure = useRef({ measurePoints: [], addMarker: false, magnitudFactor, dragging: false });
+  const clearMeasure = useCallback(() => {
+    currentMeasure.current.measurePoints.forEach((measurePoint) => {
+      measurePoint.marker.remove();
+      measurePoint.labelMarker.remove();
+    });
+    currentMeasure.current.measurePoints = [];
+    setValue("value", measureDistante());
+  }, []);
+  const getFormatFactorDistance = useCallback((distance, withSymbol = false) => {
+    if (distance === void 0) {
+      return void 0;
+    }
+    const cMagnitudeFactor = currentMeasure.current.magnitudFactor;
+    return (cMagnitudeFactor.factor_x0 + distance * cMagnitudeFactor.factor_x1 + (distance ^ 2 * cMagnitudeFactor.factor_x2)).toFixed(2) + (withSymbol ? ` ${cMagnitudeFactor.symbol}` : "");
+  }, []);
+  const measureDistante = useCallback(() => {
+    var totalDistance = 0;
+    const measurePoints = currentMeasure.current.measurePoints;
+    if (currentMeasure.current.layerLine) {
+      if (measurePoints.length < 2) {
+        currentMeasure.current.layerLine.remove();
+        currentMeasure.current.layerLine = void 0;
+      } else {
+        currentMeasure.current.layerLine.setLatLngs(measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()));
+      }
+    } else {
+      if (measurePoints.length > 1) {
+        currentMeasure.current.layerLine = L.polyline(
+          measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()),
+          {
+            color: STYLE_MEASURE_OPTIONS.strokeLineColor,
+            weight: STYLE_MEASURE_OPTIONS.strokeLineWeight,
+            interactive: false
+          }
+        ).addTo(map);
+      }
+    }
+    for (let i = 0; i < measurePoints.length - 1; i++) {
+      totalDistance += measurePoints[i].marker.getLatLng().distanceTo(measurePoints[i + 1].marker.getLatLng());
+    }
+    if (measurePoints.length > 0 && measurePoints[0].formatDistanceFromPrevious !== void 0) {
+      measurePoints[0].formatDistanceFromPrevious = void 0;
+      measurePoints[0].labelMarker.setIcon(getMarkerPointLabelMemo(void 0, getLabel));
+      addClickListenerForRemove(measurePoints[0].labelMarker);
+    }
+    for (let i = 1; i < measurePoints.length; i++) {
+      const formatDistanceFromPrevious = getFormatFactorDistance(measurePoints[i - 1].marker.getLatLng().distanceTo(measurePoints[i].marker.getLatLng()), true);
+      if (measurePoints[i].formatDistanceFromPrevious !== formatDistanceFromPrevious) {
+        measurePoints[i].formatDistanceFromPrevious = formatDistanceFromPrevious;
+        measurePoints[i].labelMarker.setIcon(getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel));
+        addClickListenerForRemove(measurePoints[i].labelMarker);
+      }
+    }
+    return getFormatFactorDistance(totalDistance);
+  }, [map, getLabel]);
+  const getMarkerPointIconMemo = useCallback(getMarkerPointIcon, []);
+  const getMarkerPointLabelMemo = useCallback(getMarkerPointLabel, [getLabel]);
+  const onClickRemovePoint = useCallback((labelMarker) => {
+    return (e) => {
+      e.stopPropagation();
+      if (!currentMeasure.current.dragging) {
+        var markIndex = currentMeasure.current.measurePoints.findIndex((searchElement) => {
+          return searchElement.labelMarker === labelMarker;
+        });
+        if (markIndex !== -1) {
+          var measurePoint = currentMeasure.current.measurePoints[markIndex];
+          measurePoint.marker.remove();
+          measurePoint.labelMarker.remove();
+          currentMeasure.current.measurePoints.splice(markIndex, 1);
+          setValue("value", measureDistante());
+          currentMeasure.current.addMarker = true;
+        }
+        currentMeasure.current.measurePoints.forEach((measurePoint2, index) => {
+          measurePoint2.marker.setIcon(getMarkerPointIconMemo(index + 1));
+        });
+      }
+    };
+  }, []);
+  const addClickListenerForRemove = useCallback((labelMarker) => {
+    var element = labelMarker.getElement();
+    if (element) {
+      var elements = element.getElementsByClassName(mapClasses.measureLabelMarkerRemove);
+      element = elements[0];
+      console.log("addClickListenerForRemove event", element);
+      if (element) {
+        element.addEventListener("click", onClickRemovePoint(labelMarker));
+      }
+    }
+  }, []);
+  const onClickMap = useCallback((e) => {
+    console.log("onClickMap event");
+    var lat = e.latlng.lat;
+    var lng = e.latlng.lng;
+    var formatDistanceFromPrevious = void 0;
+    if (currentMeasure.current.addMarker === false) {
+      return;
+    }
+    if (currentMeasure.current.measurePoints.length > 0) {
+      formatDistanceFromPrevious = getFormatFactorDistance(currentMeasure.current.measurePoints[currentMeasure.current.measurePoints.length - 1].marker.getLatLng().distanceTo(e.latlng));
+    }
+    var marker = L.marker([lat, lng], {
+      draggable: true,
+      riseOnHover: true,
+      autoPan: true,
+      icon: getMarkerPointIconMemo(currentMeasure.current.measurePoints.length + 1),
+      zIndexOffset: MAP_ZINDEX_DEFAULT
+    }).addTo(map);
+    marker.on("moveend", function(_e) {
+      var latlng = marker.getLatLng();
+      labelMarker.setLatLng(latlng);
+      setValue("value", measureDistante());
+    });
+    marker.on("mouseover", function() {
+      currentMeasure.current.addMarker = false;
+    });
+    marker.on("mouseout", function() {
+      currentMeasure.current.addMarker = true;
+    });
+    var labelMarker = L.marker([lat, lng], {
+      draggable: true,
+      riseOnHover: true,
+      icon: getMarkerPointLabelMemo(formatDistanceFromPrevious, getLabel),
+      zIndexOffset: MAP_ZINDEX_DEFAULT
+    }).addTo(map);
+    labelMarker.on("moveend", function(_e) {
+      var latlng = labelMarker.getLatLng();
+      marker.setLatLng(latlng);
+      setValue("value", measureDistante());
+    });
+    labelMarker.on("mouseover", function(_e) {
+      currentMeasure.current.addMarker = false;
+    });
+    labelMarker.on("mouseout", function(_e) {
+      currentMeasure.current.addMarker = true;
+    });
+    labelMarker.on("dragstart", function(_e) {
+      currentMeasure.current.dragging = true;
+    });
+    labelMarker.on("dragend", function(_e) {
+      setTimeout(function() {
+        currentMeasure.current.dragging = false;
+      }, 10);
+    });
+    addClickListenerForRemove(labelMarker);
+    currentMeasure.current.measurePoints.push({
+      marker,
+      labelMarker,
+      formatDistanceFromPrevious
+    });
+    setValue("value", measureDistante());
+  }, [map, measureDistante, setValue, getLabel]);
+  const onMouseMoveMap = useCallback(() => {
+    map.getContainer().style.cursor = "crosshair";
+  }, [map]);
+  const onMouseOutMap = useCallback(() => {
+    map.getContainer().style.cursor = "default";
+  }, [map]);
+  useEffect(() => {
+    if (map) {
+      if (statusEdition === "initial") {
+        map.off("click", onClickMap);
+        clearMeasure();
+        map.getContainer().style.cursor = "default";
+        return;
+      } else {
+        currentMeasure.current.addMarker = true;
+        map.getContainer().style.cursor = "crosshair";
+        map.on("click", onClickMap);
+      }
+    }
+  }, [map, statusEdition]);
+  useEffect(() => {
+    console.log("useEffect magnitudFactor", readyToUpdate, magnitudFactor);
+    if (!readyToUpdate)
+      return;
+    if (magnitudFactor.id !== magnitudFactorCached.id) {
+      console.log("useEffect magnitudFactor CAMBIO");
+      setMagnitudFactorCached({ ...magnitudFactor });
+      currentMeasure.current.magnitudFactor = magnitudFactor;
+      setValue("value", measureDistante());
+    }
+  }, [magnitudFactor]);
+  useEffect(() => {
+    return () => {
+      map.off("mousemove", onMouseMoveMap);
+      map.off("mouseout", onMouseOutMap);
+      map.off("click", onClickMap);
+      map.getContainer().style.cursor = "default";
+      clearMeasure();
+    };
+  }, []);
+  return { statusEdition, magnitudFactor, value };
+}
+function MeasureData() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    value,
+    magnitudFactor
+  } = useMeasure();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(RHFAutocompleteAsync, {
+      endPoint: "magnitudes/factors?origin_unit_reference_id=m_kilometers",
+      name: "magnitudFactor",
+      autoComplete: "off",
+      getOptionLabel: (option) => option.name,
+      isOptionEqualToValue: (option, value2) => option.id === value2.id,
+      label: getLabel(MAP_DICCTIONARY.LABEL_MEASURE_UNIT),
+      isRemote: false
+    }), /* @__PURE__ */ jsxs(Stack, {
+      direction: "row",
+      spacing: 2,
+      className: mapClasses.measureToolFormValue,
+      children: [/* @__PURE__ */ jsx("span", {
+        className: mapClasses.measureToolFormValueDistance,
+        children: value
+      }), /* @__PURE__ */ jsx("span", {
+        className: mapClasses.measureToolFormValueSymbol,
+        children: magnitudFactor.symbol
+      })]
+    })]
+  });
+}
+function MeasureTool() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const finalInitalValues = {
+    ...INITIAL_FORM_VALUES
+  };
+  if (finalInitalValues?.magnitudFactor?.name) {
+    finalInitalValues.magnitudFactor.name = getLabel(MAP_DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS);
+  }
+  const {
+    validationSchema
+  } = useValidation();
+  const onSubmit = () => {
+  };
+  return /* @__PURE__ */ jsxs(RHFormProvider, {
+    className: mapClasses.meaureToolRoot,
+    statusLoad: INITIAL_FORM_VALUES.statusLoad,
+    onSubmit,
+    values: finalInitalValues,
+    validationSchema,
+    children: [/* @__PURE__ */ jsx(Stack, {
+      direction: "column",
+      children: /* @__PURE__ */ jsx(MeasureData, {})
+    }), /* @__PURE__ */ jsx(MyActions, {})]
+  });
+}
+function ZoomButtons() {
+  const map = useMap();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const [, setZoomInDisabled] = useState(false);
+  const [, setZoomOutDisabled] = useState(false);
+  useEffect(() => {
+    const updateButtonState = () => {
+      const currentZoom = map.getZoom();
+      const maxZoom = map.getMaxZoom();
+      const minZoom = map.getMinZoom();
+      setZoomInDisabled(currentZoom === maxZoom);
+      setZoomOutDisabled(currentZoom === minZoom);
+    };
+    map.on("zoomend", updateButtonState);
+    updateButtonState();
+    return () => {
+      map.off("zoomend", updateButtonState);
+    };
+  }, [map]);
+  const handleZoomIn = () => {
+    map.zoomIn();
+  };
+  const handleZoomOut = () => {
+    map.zoomOut();
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: mapClasses.zoomButtons,
+    children: [/* @__PURE__ */ jsx(IconButton, {
+      onClick: handleZoomIn,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_IN}`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      onClick: handleZoomOut,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_ZOOM_OUT}`
+    })]
+  });
+}
+function TopRightTools(props) {
+  const {
+    gpsTools
+  } = props;
+  const {
+    addPopup,
+    closePopup
+  } = usePopupsStore((state) => state.popupsActions);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const openPopupsIds = usePopupsStore((state) => state.popupsIds.filter((pId) => {
+    return state.hashPopups[pId].status === "init";
+  }), shallow);
+  const popupsIds = usePopupsStore((state) => state.popupsIds, shallow);
+  const map = useMap();
+  const isToggledGpsTools = openPopupsIds.indexOf("gpsTools") > -1;
+  const isDisabledGpsTools = popupsIds.indexOf("gpsTools") > -1 && openPopupsIds.indexOf("gpsTools") === -1;
+  const isToggledMeasureTool = openPopupsIds.indexOf("measureTool") > -1;
+  const isDisabledMeasureTool = popupsIds.indexOf("measureTool") > -1 && openPopupsIds.indexOf("measureTool") === -1;
+  const onMouseDown = (e) => {
+    map.dragging.disable();
+    e.stopPropagation();
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onMouseUp = (e) => {
+    map.dragging.enable();
+    e.stopPropagation();
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  const onGpsToolsClick = (e) => {
+    if (!isToggledGpsTools) {
+      addPopup({
+        popupId: "gpsTools",
+        title: getLabel(MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME),
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`,
+        functionComponent: gpsTools,
+        onMouseDown,
+        defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
+      }, {
+        closeOthers: true
+      });
+    } else {
+      closePopup("gpsTools");
+    }
+    e.stopPropagation();
+  };
+  const onMeasureToolClick = (e) => {
+    if (!isToggledMeasureTool) {
+      addPopup({
+        popupId: "measureTool",
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`,
+        title: "Measure Tool",
+        functionComponent: MeasureTool,
+        onMouseDown,
+        defaultPosition: MESURE_POPUP_DEFAULT_POSITION
+      }, {
+        closeOthers: true
+      });
+    } else {
+      closePopup("measureTool");
+    }
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(Control, {
+    position: "topright",
+    prepend: true,
+    className: mapClasses.topRigthToolsRoot,
+    children: [/* @__PURE__ */ jsx(ToggleIconButton, {
+      isToggled: isToggledGpsTools,
+      disabled: isDisabledGpsTools,
+      onToggle: onGpsToolsClick,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`
+    }), /* @__PURE__ */ jsx(ToggleIconButton, {
+      isToggled: isToggledMeasureTool,
+      disabled: isDisabledMeasureTool,
+      onToggle: onMeasureToolClick,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`
+    }), /* @__PURE__ */ jsx(ZoomButtons, {})]
+  });
+}
+function useColumns(props) {
+  const {
+    rowKeyGetter,
+    visibleLayers,
+    setVisibleLayers,
+    autoFocusLayers,
+    setAutoFocusLayers,
+    clusterLayers,
+    setClusterLayers
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const useHook = useCallback((field) => {
+    if (field === "visible") {
+      return [visibleLayers, setVisibleLayers];
+    } else if (field === "autoFocus") {
+      return [autoFocusLayers, setAutoFocusLayers];
+    } else {
+      return [clusterLayers, setClusterLayers];
+    }
+  }, [visibleLayers, autoFocusLayers, clusterLayers]);
+  const columns = useMemo(() => [
+    {
+      key: "name",
+      name: getLabel(MAP_DICCTIONARY.LABEL_NAME),
+      type: "string",
+      width: 150,
+      frozen: true
+    },
+    {
+      key: "visible",
+      name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE),
+      width: 50,
+      minWidth: 20,
+      type: "boolean",
+      formatter: ColumnSetCheckFormatter({
+        field: "visible",
+        rowKeyGetter,
+        useHook
+      }),
+      cellClass: "rdg-cell-align-center",
+      headerRenderer: (p) => /* @__PURE__ */ jsx(Tooltip, {
+        title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_VISIBLE),
+        children: /* @__PURE__ */ jsx(Icon, {
+          size: "medium",
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_VISIBLE}`
+        })
+      })
+    },
+    {
+      key: "autoFocus",
+      name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS),
+      minWidth: 20,
+      width: 50,
+      type: "boolean",
+      formatter: ColumnSetCheckFormatter({
+        field: "autoFocus",
+        rowKeyGetter,
+        useHook
+      }),
+      cellClass: "rdg-cell-align-center",
+      headerRenderer: (p) => /* @__PURE__ */ jsx(Tooltip, {
+        title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_AUTOFOCUS),
+        children: /* @__PURE__ */ jsx(Icon, {
+          size: "medium",
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_AUTOFOCUS}`
+        })
+      })
+    },
+    {
+      key: "cluster",
+      name: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER),
+      minWidth: 20,
+      width: 50,
+      type: "boolean",
+      formatter: ColumnSetCheckFormatter({
+        field: "cluster",
+        disabledGetter: (row) => !row.clusterAble,
+        rowKeyGetter,
+        useHook
+      }),
+      cellClass: "rdg-cell-align-center",
+      headerRenderer: (p) => /* @__PURE__ */ jsx(Tooltip, {
+        title: getLabel(MAP_DICCTIONARY.LABEL_LAYER_CLUSTER),
+        children: /* @__PURE__ */ jsx(Icon, {
+          size: "medium",
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_CLUSTER}`
+        })
+      })
+    }
+  ], [getLabel, useHook]);
+  return {
+    columns
+  };
+}
+function useCheckedLayers(checkedNameSet) {
+  const [checkedLayers, setCheckedLayers] = useMapStore((state) => [state[`${checkedNameSet}CheckedLayers`], (newSet) => {
+    state.mapActions.setCheckedLayers(checkedNameSet, newSet);
+  }], shallow);
+  return [checkedLayers, setCheckedLayers];
+}
+function useRowActionsGetter() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    hasPrivilege
+  } = useModulePrivileges();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    removeLayer
+  } = useMapStore((state) => state.mapActions, shallow);
+  const [urlIconDelete] = useState(`${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_LAYER_DELETE}`);
+  const onDelete = useCallback((row) => {
+    removeLayer(row.id);
+  }, [getLabel]);
+  const rowActionsGetter = useCallback((row) => {
+    const conditionalItems = [];
+    conditionalItems.push({
+      urlIcon: urlIconDelete,
+      dictionaryId: MAP_DICCTIONARY.ROW_ACTION_LAYER_DELETE,
+      onClick: () => {
+        onDelete(row);
+      },
+      disabled: !row.deleteAble
+    });
+    return conditionalItems;
+  }, [hasPrivilege, onDelete, urlIconDelete]);
+  return {
+    rowActionsGetter
+  };
+}
+function useMaster() {
+  const [hashLayers, layersIds] = useMapStore((state) => [state.hashLayers, state.layersIds], shallow);
+  const rowKeyGetter = useCallback((row) => row.id, []);
+  const [visibleLayers, setVisibleLayers] = useCheckedLayers("visible");
+  const [autoFocusLayers, setAutoFocusLayers] = useCheckedLayers("autoFocus");
+  const [clusterLayers, setClusterLayers] = useCheckedLayers("cluster");
+  const rows = useMemo(() => {
+    const rows2 = [];
+    layersIds.forEach((layerId) => {
+      if (hashLayers[layerId]) {
+        rows2.push({
+          id: layerId,
+          name: hashLayers[layerId].name || `*${layerId}`,
+          active: hashLayers[layerId].visible,
+          clusterAble: hashLayers[layerId].clusterAble || false,
+          deleteAble: hashLayers[layerId].deleteAble || false
+        });
+      }
+    });
+    return rows2;
+  }, [hashLayers, layersIds]);
+  const {
+    rowActionsGetter
+  } = useRowActionsGetter();
+  const {
+    columns
+  } = useColumns({
+    rowKeyGetter,
+    visibleLayers,
+    setVisibleLayers,
+    autoFocusLayers,
+    setAutoFocusLayers,
+    clusterLayers,
+    setClusterLayers
+  });
+  return {
+    rowKeyGetter,
+    columns,
+    rows,
+    checkedRows: visibleLayers,
+    onCheckedRowsChange: setVisibleLayers,
+    rowActionsGetter
+  };
+}
+function useDisableZoomEvents(node) {
+  const map = useMap();
+  useEffect(() => {
+    if (!map || !node)
+      return;
+    node.addEventListener("mouseover", function() {
+      console.log("Desactivar zoom");
+      map.doubleClickZoom.disable();
+      map.scrollWheelZoom.disable();
+    });
+    node.addEventListener("mouseleave", function() {
+      console.log("Activar zoom");
+      map.scrollWheelZoom.enable();
+      map.doubleClickZoom.enable();
+    });
+  }, [map, node]);
+}
+function LayersTool() {
+  const {
+    columns,
+    rows,
+    rowKeyGetter,
+    rowActionsGetter
+  } = useMaster();
+  const [divRef, setDivRef] = useStateRef(null);
+  useDisableZoomEvents(divRef);
+  return /* @__PURE__ */ jsx("div", {
+    ref: setDivRef,
+    style: {
+      position: "relative",
+      height: "100%"
+    },
+    children: /* @__PURE__ */ jsx(DataGrid, {
+      id: "layers",
+      columns,
+      rows,
+      rowActionsGetter,
+      rowKeyGetter,
+      withActions: true,
+      actionsProps: {
+        withRowsCount: false,
+        withSettings: false,
+        withPager: false,
+        withLocalFilters: false
+      }
+    })
+  });
+}
+function MapSourcesTool() {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const currentMapSourceId = useMapStore((state) => state.currentMapSourceId, shallow);
+  const mapSources = useMapStore((state) => {
+    return state.mapSourcesIds.map((id) => ({
+      id,
+      dictionaryId: state.hashMapSources[id].dictionaryId,
+      iconUrl: state.hashMapSources[id].iconUrl,
+      hasBicyclingLayer: state.hashMapSources[id].hasBicyclingLayer,
+      hasTrafficLayer: state.hashMapSources[id].hasTrafficLayer,
+      hasTransitLayer: state.hashMapSources[id].hasTransitLayer,
+      roadSeletedOptions: state.hashMapSources[id].roadSelectedOptions
+    }));
+  }, shallow);
+  const {
+    setCurrentMapSource,
+    setMapSourceRoadOptions: setMapSourceRoadMapOptions
+  } = useMapStore((state) => state.mapActions, shallow);
+  const [divRef, setDivRef] = useStateRef(null);
+  useDisableZoomEvents(divRef);
+  const handleChange = (event) => {
+    setCurrentMapSource(event.target.value);
+  };
+  return /* @__PURE__ */ jsx("div", {
+    className: mapClasses.mapSourcesRoot,
+    ref: setDivRef,
+    children: /* @__PURE__ */ jsx(FormControl, {
+      children: /* @__PURE__ */ jsx(RadioGroup, {
+        "aria-labelledby": "demo-controlled-radio-buttons-group",
+        name: "controlled-radio-buttons-group",
+        value: currentMapSourceId,
+        onChange: handleChange,
+        children: mapSources.map((mapSourceOption) => /* @__PURE__ */ jsxs("div", {
+          className: mapClasses.mapSourcesOption,
+          children: [/* @__PURE__ */ jsx(FormControlLabel, {
+            className: "",
+            value: mapSourceOption.id,
+            control: /* @__PURE__ */ jsx(Radio, {}),
+            label: /* @__PURE__ */ jsxs("div", {
+              className: mapClasses.mapSourcesOptionIconLabel,
+              children: [/* @__PURE__ */ jsx(Icon, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${mapSourceOption.iconUrl}`
+              }), /* @__PURE__ */ jsx("span", {
+                children: getLabel(mapSourceOption.dictionaryId)
+              })]
+            })
+          }), (mapSourceOption.hasBicyclingLayer || mapSourceOption.hasTrafficLayer || mapSourceOption.hasTransitLayer) && /* @__PURE__ */ jsxs("div", {
+            className: clsx(mapClasses.mapSourcesOptionRoadOptions, currentMapSourceId !== mapSourceOption.id ? mapClasses.disabled : mapClasses.active),
+            children: [mapSourceOption.hasTrafficLayer && /* @__PURE__ */ jsxs("div", {
+              className: mapClasses.mapSourcesOptionRoadOptionsCheck,
+              children: [/* @__PURE__ */ jsx(CheckBox, {
+                disabled: currentMapSourceId !== mapSourceOption.id,
+                checked: mapSourceOption.roadSeletedOptions?.trafficLayer || false,
+                onChange: (e, checked) => {
+                  setMapSourceRoadMapOptions({
+                    trafficLayer: checked
+                  });
+                }
+              }), /* @__PURE__ */ jsx(Icon, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRAFFIC}`
+              })]
+            }), mapSourceOption.hasTransitLayer && /* @__PURE__ */ jsxs("div", {
+              className: mapClasses.mapSourcesOptionRoadOptionsCheck,
+              children: [/* @__PURE__ */ jsx(CheckBox, {
+                disabled: currentMapSourceId !== mapSourceOption.id,
+                checked: mapSourceOption.roadSeletedOptions?.transitLayer || false,
+                onChange: (e, checked) => {
+                  setMapSourceRoadMapOptions({
+                    transitLayer: checked
+                  });
+                }
+              }), /* @__PURE__ */ jsx(Icon, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_TRANSIT}`
+              })]
+            }), mapSourceOption.hasBicyclingLayer && /* @__PURE__ */ jsxs("div", {
+              className: mapClasses.mapSourcesOptionRoadOptionsCheck,
+              children: [/* @__PURE__ */ jsx(CheckBox, {
+                disabled: currentMapSourceId !== mapSourceOption.id,
+                checked: mapSourceOption.roadSeletedOptions?.bicyclingLayer || false,
+                label: "Bycicle",
+                onChange: (e, checked) => {
+                  setMapSourceRoadMapOptions({
+                    bicyclingLayer: checked
+                  });
+                }
+              }), /* @__PURE__ */ jsx(Icon, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_ROAD_BICYCLING}`
+              })]
+            })]
+          })]
+        }, mapSourceOption.dictionaryId))
+      })
+    })
+  });
+}
+function LayersButton(props) {
+  const {
+    type
+  } = props;
+  const [open, setOpen] = useState(null);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const theme = useTheme();
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+    console.log("open", event.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  return /* @__PURE__ */ jsxs(React__default.Fragment, {
+    children: [/* @__PURE__ */ jsx(IconButton, {
+      onClick: handleOpen,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${type === "MapSources" ? MAP_ICONS.MAP_SOURCES_TOOL : MAP_ICONS.MAP_LAYERS_TOOL}`
+    }), /* @__PURE__ */ jsx(Popover, {
+      className: type === "MapSources" ? mapClasses.mapSourcesPopoverRoot : mapClasses.layersPopoverRoot,
+      arrowType: "no-arrow",
+      open: Boolean(open),
+      anchorEl: open,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      onClose: handleClose,
+      sx: {
+        ...type === "MapSources" ? theme.components?.M4LMapMapSources?.styleOverrides : theme.components?.M4LMapLayers?.styleOverrides
+      },
+      disableAutoFocus: true,
+      disableRestoreFocus: true,
+      disableEnforceFocus: true,
+      children: type === "MapSources" ? /* @__PURE__ */ jsx(MapSourcesTool, {}) : /* @__PURE__ */ jsx(LayersTool, {})
+    })]
+  });
+}
+function TopLeftTools() {
+  return /* @__PURE__ */ jsxs(Control, {
+    position: "topleft",
+    prepend: true,
+    className: mapClasses.topLeftToolsRoot,
+    children: [/* @__PURE__ */ jsx(LayersButton, {
+      type: "MapSources"
+    }), /* @__PURE__ */ jsx(LayersButton, {
+      type: "Layers"
+    })]
+  });
+}
+function Controls(props) {
+  const {
+    gpsTools
+  } = props;
+  const map = useMap();
+  const [controlContainer, setControlContainer] = useState(null);
+  useEffect(() => {
+    const cContainer = map.getContainer().getElementsByClassName("leaflet-control-container")[0];
+    if (cContainer !== null) {
+      setControlContainer(cContainer);
+      L__default.DomEvent.disableClickPropagation(cContainer);
+      L__default.DomEvent.disableScrollPropagation(cContainer);
+    }
+  }, [map]);
+  return /* @__PURE__ */ jsxs(PopupsProvider, {
+    children: [/* @__PURE__ */ jsx(TopLeftTools, {}), /* @__PURE__ */ jsx(TopRightTools, {
+      gpsTools
+    }), controlContainer && createPortal(/* @__PURE__ */ jsx(PopupsViewer, {
+      containerElement: map.getContainer()
+    }), controlContainer)]
+  });
+}
+const MarkerClusterGroup = createPathComponent(({
+  children: _c,
+  ...props
+}, ctx) => {
+  const clusterProps = {};
+  const clusterEvents = {};
+  Object.entries(props).forEach(([propName, prop]) => {
+    if (propName !== void 0 && prop !== "") {
+      propName.startsWith("on") ? clusterEvents[propName] = prop : clusterProps[propName] = prop;
+    }
+  });
+  const markerClusterGroup = new L__default.MarkerClusterGroup(clusterProps);
+  Object.entries(clusterEvents).forEach(([eventAsProp, callback]) => {
+    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
+    markerClusterGroup.on(clusterEvent, callback);
+  });
+  return {
+    instance: markerClusterGroup,
+    context: {
+      ...ctx,
+      layerContainer: markerClusterGroup
+    }
+  };
+});
+const RenderByEachFeatureComponent = ({
+  renderFeature,
+  ...props
+}) => {
+  const feature = renderFeature(props);
+  return feature ? /* @__PURE__ */ jsx(Fragment, {
+    children: feature
+  }) : null;
+};
+const MemonizedRenderByEachFeatureComponent = React__default.memo(RenderByEachFeatureComponent);
+const MyLayer = (props) => {
+  const {
+    layerId
+  } = props;
+  const map = useMap();
+  const popupRef = useRef(null);
+  const lefaletLayerRef = useRef({
+    clickTimeout: null,
+    clickCount: 0,
+    handleClickSetted: false
+  });
+  const featureIdOrCollection = useMapStore((state) => {
+    const geoJsonObject = state.hashLayers[layerId]?.geoJsonObject;
+    if (geoJsonObject && geoJsonObject.object.type === "Feature") {
+      return geoJsonObject.object.id;
+    } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
+      return geoJsonObject && geoJsonObject.object.features.map((feature) => feature.id);
+    }
+  }, shallow);
+  const renderFeature = useMapStore((state) => state.hashLayers[layerId]?.renderFeature, shallow);
+  const [visible, cluster = false] = useMapStore((state) => [state.hashLayers[layerId]?.visible, state.hashLayers[layerId]?.cluster], shallow);
+  const markerClusterGroupRef = useRef(null);
+  const handleClick = (a) => {
+    lefaletLayerRef.current.clickCount++;
+    if (lefaletLayerRef.current.clickCount === 1) {
+      lefaletLayerRef.current.clickTimeout = setTimeout(() => {
+        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);
+    }
+  }, [markerClusterGroupRef.current]);
+  console.log("Render MyLayer", layerId, featureIdOrCollection, visible, cluster);
+  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(MemonizedRenderByEachFeatureComponent, {
+            renderFeature,
+            id: featureId,
+            layerId
+          }, `k_${featureId}`);
+        })
+      });
+    } else {
+      return /* @__PURE__ */ jsx(
+        MarkerClusterGroup,
+        {
+          disableClusteringAtZoom: 18,
+          showCoverageOnHover: false,
+          zoomToBoundsOnClick: false,
+          spiderfyOnMaxZoom: false,
+          iconCreateFunction: createClusterCustomIcon,
+          children: featureIdOrCollection.map((featureId) => {
+            return /* @__PURE__ */ jsx(MemonizedRenderByEachFeatureComponent, {
+              renderFeature,
+              id: featureId,
+              layerId
+            }, `k_${featureId}`);
+          })
+        }
+      );
+    }
+  }
+};
+function useAutoFocus() {
+  const map = useMap();
+  const layerWithAutoFocus = useMapStore((state) => {
+    return state.layersIds.filter((lId) => {
+      if (state.hashLayers[lId].autoFocus && state.hashLayers[lId].visible) {
+        return true;
+      }
+      return false;
+    }).map((layerId) => ({
+      layerId,
+      features: function() {
+        if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
+          const layer = state.hashLayers[layerId].geoJsonObject?.object;
+          return layer.features.filter((feature) => feature.layerData !== void 0).map((feature) => ({
+            featureId: feature.id,
+            layerData: feature.layerData
+          }));
+        } else {
+          const feature = state.hashLayers[layerId].geoJsonObject?.object;
+          if (feature.layerData !== void 0) {
+            return [{
+              featureId: feature.id,
+              layerData: feature.layerData
+            }];
+          }
+        }
+        return [];
+      }()
+    }));
+  }, shallow);
+  useEffect(() => {
+    const proccesLayerWithAutoFocus = (layersFoucus) => {
+      const layersToFitBounds = [];
+      for (const layerWhitFeatures of layersFoucus) {
+        const features = layerWhitFeatures?.features;
+        for (let i = 0; i < features.length; i++) {
+          const feature = features[i];
+          if (feature.layerData !== void 0) {
+            const featureForBounds = {
+              layerId: layerWhitFeatures.layerId,
+              featureId: feature.featureId,
+              layerData: feature.layerData
+            };
+            layersToFitBounds.push(featureForBounds);
+          } else {
+            console.error(`La capa ${layerWhitFeatures.layerId} no tiene un m\xE9todo getBounds`);
+          }
+        }
+      }
+      if (layersToFitBounds.length > 0) {
+        let featureForBounds = layersToFitBounds[0];
+        let bounds = L__default.latLngBounds(featureForBounds.layerData.boundsNW, featureForBounds.layerData.boundsSE);
+        for (let i = 1; i < layersToFitBounds.length; i++) {
+          featureForBounds = layersToFitBounds[i];
+          const newBounds = L__default.latLngBounds(featureForBounds.layerData.boundsNW, featureForBounds.layerData.boundsSE);
+          bounds = bounds.extend(newBounds);
+        }
+        map.fitBounds(bounds, {
+          animate: false,
+          maxZoom: 22,
+          padding: [50, 50]
+        });
+      }
+    };
+    const throttleBounds = throttle(proccesLayerWithAutoFocus, 300, {
+      leading: false,
+      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 MapRootContainer = styled(MapContainer)`
+
+
+
+
+    
+
+
+
+
+
+
+
+ 
+
+
+    
+  
+
+    ${leaflet_css}
+
+    ${(props) => props.theme.components?.M4LMap?.styleOverrides}
+    
+`;
+function Map$1(props) {
+  const {
+    gpsTools,
+    center = [6.215749485905093, -75.58622905191254],
+    initalZoom = 16,
+    maxZoom = 22
+  } = props;
+  return /* @__PURE__ */ jsxs(MapRootContainer, {
+    className: mapClasses.root,
+    center,
+    zoom: initalZoom,
+    maxZoom,
+    boxZoom: true,
+    preferCanvas: true,
+    zoomControl: false,
+    children: [/* @__PURE__ */ jsx(TileLayers, {}), /* @__PURE__ */ jsx(LayersContainer, {}), /* @__PURE__ */ jsx(Controls, {
+      gpsTools
+    })]
+  });
+}
+function CustomMarker(props) {
+  const {
+    position,
+    width,
+    height,
+    iconForm,
+    bearing,
+    ...other
+  } = props;
+  const html = useMemo(() => {
+  }, [bearing]);
+  const customIcon = useMemo(() => {
+    return L__default.divIcon({
+      className: "custom-icon",
+      iconSize: [width, height],
+      html: `<div>Hola</div>`
+    });
+  }, [html]);
+  return /* @__PURE__ */ jsx(Marker, {
+    position,
+    icon: customIcon,
+    ...other
+  });
+}
+const MarkerFeatureRender = (props) => {
+  const {
+    id,
+    layerId
+  } = props;
+  const feature = useMapStore((state) => {
+    const gObject = state.hashLayers[layerId].geoJsonObject;
+    if (!gObject) {
+      return null;
+    }
+    if (gObject.object.type === "Feature") {
+      return {
+        id: gObject.object.id,
+        geometry: gObject.object.geometry,
+        properties: gObject.object.properties
+      };
+    } else {
+      const feat = gObject.object.features.find((f) => f.id === id);
+      if (feat) {
+        return {
+          id: feat.id,
+          geometry: feat.geometry,
+          properties: feat.properties
+        };
+      }
+      return null;
+    }
+  }, shallow);
+  if (!feature) {
+    return null;
+  }
+  if (feature.geometry.type === "Point") {
+    const [lat, lng] = feature.geometry.coordinates;
+    const bearing = feature.properties?.iconBearing ?? 0;
+    return /* @__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,
+        featureLabel: gObject.object.featureLabel
+      };
+    } else {
+      const feat = gObject.object.features.find((f) => f.id === id);
+      if (feat) {
+        return {
+          id: feat.id,
+          geometry: feat.geometry,
+          properties: feat.properties,
+          featureLabel: feat.featureLabel
+        };
+      }
+      return null;
+    }
+  }, shallow);
+  const {
+    addLayerDataToFeature
+  } = useMapStore((state) => state.mapActions, shallow);
+  const [svg, setSvg] = useState(null);
+  useEffect(() => {
+    if (!feature) {
+      return;
+    }
+    if (feature.geometry?.type === "Point" && (feature.properties?.subType === "Marker" || feature.properties?.subType === void 0)) {
+      const {
+        iconUrl,
+        markerColor = MARKER_COLOR_DEFAULT
+      } = feature?.properties;
+      const fetchData = async () => {
+        if (svg && svg.path === iconUrl && svg.color === markerColor) {
+          return;
+        }
+        let data;
+        if (iconUrl) {
+          data = await fetch(iconUrl).then((i) => i.text());
+        }
+        if (!data) {
+          data = SVG_ICON_DEFAULT;
+        }
+        data = "data:image/svg+xml;base64," + btoa((data || "").replace(/#1E96DC/g, markerColor));
+        setSvg({
+          color: markerColor,
+          path: iconUrl,
+          data
+        });
+      };
+      fetchData();
+    }
+  }, [feature]);
+  useEffect(() => {
+    return () => {
+    };
+  }, []);
+  if (!feature) {
+    return null;
+  }
+  const propFeature = {
+    featureId: feature.id
+  };
+  const onAddPointLayer = useCallback((e) => {
+    const layerData = {
+      boundsNW: e.target?._latlng,
+      boundsSE: e.target?._latlng
+    };
+    addLayerDataToFeature(layerId, feature.id, layerData);
+  }, []);
+  const onAddMultipointLayer = useCallback((e) => {
+    const layerData = {
+      boundsNW: e.target.getBounds().getNorthWest(),
+      boundsSE: e.target.getBounds().getSouthEast()
+    };
+    addLayerDataToFeature(layerId, feature.id, layerData);
+  }, []);
+  if (feature.geometry?.type === "Point") {
+    const [lng, lat] = feature.geometry.coordinates;
+    if (feature.properties?.subType === "Marker" || feature.properties?.subType === void 0) {
+      const {
+        iconUrl: urlIcon,
+        iconBearing = 0,
+        iconOffsetRotate = 0,
+        scaleIcon = 1,
+        iconHeight,
+        iconWidth,
+        className,
+        label,
+        markerColor = MARKER_COLOR_DEFAULT,
+        labelBkColor = LABEL_BK_COLOR_DEFAULT,
+        labelColor = LABEL_COLOR_DEFAULT,
+        offsetLeftTop = [42, 0],
+        ...styleProperties
+      } = feature.properties;
+      if (urlIcon && !svg) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        MarkerIconLabel,
+        {
+          position: {
+            lat,
+            lng
+          },
+          label,
+          iconSrc: svg?.data,
+          iconScale: scaleIcon,
+          iconRotate: bearingRawToCSS(iconBearing, iconOffsetRotate),
+          iconWidth,
+          iconHeight,
+          labelBkColor,
+          labelColor,
+          offsetLeftTop,
+          draggable: false,
+          eventHandlers: {
+            add: onAddPointLayer,
+            click: (e) => {
+            }
+          },
+          ...styleProperties,
+          ...propFeature
+        },
+        Math.random()
+      );
+    } else if (feature.properties?.subType === "Circle" && feature.properties?.radius) {
+      const {
+        subType,
+        radius,
+        ...styleProperties
+      } = feature.properties;
+      return /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Circle, {
+          center: {
+            lat,
+            lng
+          },
+          radius: feature.properties?.radius,
+          eventHandlers: {
+            add: onAddMultipointLayer
+          },
+          ...styleProperties,
+          ...propFeature
+        }, Math.random()), feature?.featureLabel && /* @__PURE__ */ jsx(MarkerIconLabel, {
+          position: [lat + feature.properties.radius / 111319, lng],
+          ...feature?.featureLabel
+        })]
+      });
+    }
+  } else if (feature.geometry?.type === "LineString") {
+    const polylinePositions = feature.geometry.coordinates.map((coord) => [coord[1], coord[0]]);
+    if (feature.properties?.subType === "PolylineWithArrows") {
+      return /* @__PURE__ */ jsx(
+        PolylineWithArrows,
+        {
+          positions: polylinePositions,
+          stroke: true,
+          weight: 10,
+          eventHandlers: {
+            add: onAddMultipointLayer
+          },
+          dashArray: "20 30",
+          ...feature.properties,
+          ...propFeature
+        },
+        Math.random()
+      );
+    } else {
+      return /* @__PURE__ */ jsx(
+        Polyline,
+        {
+          positions: polylinePositions,
+          stroke: true,
+          weight: 10,
+          eventHandlers: {
+            add: onAddMultipointLayer
+          },
+          dashArray: "20 30",
+          ...feature.properties,
+          ...propFeature
+        },
+        Math.random()
+      );
+    }
+  } else if (feature.geometry?.type === "Polygon") {
+    const polygonPositions = feature.geometry.coordinates.map((ring) => ring.map(([lng, lat]) => [lat, lng]));
+    let topRightPoint = null;
+    polygonPositions[0].forEach((coord) => {
+      console.log("coord", coord);
+      const [lat, lng] = coord;
+      if (!topRightPoint || lat >= topRightPoint[0] && lng >= topRightPoint[1]) {
+        console.log("coord elegida", coord);
+        topRightPoint = coord;
+      }
+    });
+    topRightPoint = topRightPoint || polygonPositions[0][0];
+    console.log("Polygon Render", feature.featureLabel?.label, polygonPositions);
+    return /* @__PURE__ */ jsxs(React__default.Fragment, {
+      children: [/* @__PURE__ */ jsx(
+        Polygon,
+        {
+          positions: polygonPositions,
+          opacity: 1,
+          eventHandlers: {
+            add: onAddMultipointLayer
+          },
+          ...feature.properties,
+          ...propFeature
+        }
+      ), feature?.featureLabel && /* @__PURE__ */ jsx(MarkerIconLabel, {
+        position: topRightPoint,
+        ...feature?.featureLabel
+      })]
+    });
+  }
+  return null;
+};
+export {
+  CommonFeatureRender as C,
+  LABEL_BK_COLOR_DEFAULT as L,
+  MAP_ZINDEX_OVER_MAP as M,
+  LABEL_COLOR_DEFAULT as a,
+  MAP_DICCTIONARY as b,
+  Map$1 as c,
+  MapProvider as d,
+  MapContext as e,
+  MarkerFeatureRender as f,
+  mapClasses as m,
+  useMapStore as u
+};