@m4l/components 1.0.11 → 1.0.13

package/components/maps/{index.a1bf63f2.js → components/Map/index.c37f3304.js}

@@ -1,28 +1,32 @@
-import React__default, { createContext, useRef, useEffect, useContext, useMemo, useState, useCallback } from "react";
-import { useMap, LayerGroup, MapContainer, Marker, Polyline, Circle, Polygon } from "react-leaflet";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMap, LayerGroup, MapContainer, Marker, Polyline, Circle, Polygon } from "react-leaflet";
 import { shallow } from "zustand/shallow";
+import React__default, { createContext, useRef, useEffect, useContext, useMemo, useState, useCallback } from "react";
 import * as L from "leaflet";
 import L__default from "leaflet";
 import { Loader } from "@googlemaps/js-api-loader";
 import { createPortal } from "react-dom";
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment, useModulePrivileges } from "@m4l/core";
 import clsx from "clsx";
 import { useFormContext, useWatch } from "react-hook-form";
-import { M as MAP_DICCTIONARY } from "../areas/dictionary.6168209a.js";
-import { A as Actions } from "../CommonActions/index.19f39dca.js";
-import { B as Button, Z as ZoomButtons } from "../mui_extended/Button/index.52852c42.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.258bf919.js";
+import { B as Button } from "../../../mui_extended/Button/index.d742e9ee.js";
 import * as Yup from "yup";
-import { $ as COMPONENT_CLASS_NAME, a0 as STYLE_MEASURE_OPTIONS, a1 as MAP_ZINDEX_DEFAULT, a2 as INITIAL_FORM_VALUES, a3 as GPS_TOOLS_POPUP_DEFAULT_POSITION, a4 as MESURE_POPUP_DEFAULT_POSITION, a5 as TIME_DOUBLE_CLICK, a6 as MARKER_COLOR_DEFAULT, L as LABEL_BK_COLOR_DEFAULT, t as LABEL_COLOR_DEFAULT, a7 as SVG_ICON_DEFAULT } from "../areas/constants.0d3ba950.js";
-import { u as useFormReadyForUpdate } from "../../hooks/useFormReadyForUpdate/index.f60f500e.js";
-import { R as RHFAutocompleteAsync } from "../hook-form/RHFAutocompleteAsync/index.69f5661d.js";
-import { S as Stack } from "../mui_extended/Stack/index.fe363ca5.js";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.95ebabc9.js";
-import { M as MAP_ICONS } from "../areas/icons.504ec098.js";
-import { u as usePopupsStore, P as PopupsProvider } from "../popups/PopupsProvider/index.d4caacc3.js";
-import { T as ToggleIconButton } from "../mui_extended/ToggleIconButton/index.8a84f25e.js";
-import { T as TILE_LAYER_OSM, c as TILE_LAYER_GOOGLE, d as TILE_LAYER_GOOGLE_SATELLITE, e as TILE_LAYER_GOOGLE_HYBRID, f as TILE_LAYER_BING, L as LayersButton } from "../mui_extended/Popover/index.146ded9e.js";
-import { P as PopupsViewer } from "../popups/PopupsViewer/index.42312806.js";
+import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
+import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index.d97c727b.js";
+import { S as Stack } from "../../../mui_extended/Stack/index.fe363ca5.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.bf3a2812.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.b4532b85.js";
+import { u as usePopupsStore, P as PopupsProvider } from "../../../popups/PopupsProvider/index.d7c9efce.js";
+import { T as ToggleIconButton } from "../../../mui_extended/ToggleIconButton/index.fcd5205c.js";
+import { c as DataGrid } from "../../../DataGrid/index.68e19254.js";
+import { generateUtilityClasses, Tooltip, FormControl, RadioGroup, FormControlLabel, Radio, useTheme } from "@mui/material";
+import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index.4045b2f2.js";
+import { I as Icon, M as MarkerIconLabel } from "../../../Icon/index.83867398.js";
+import { u as useStateRef } from "../../../../hooks/useStateRef/index.538edb89.js";
+import { C as CheckBox } from "../../../mui_extended/CheckBox.21c25705.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.2348fc4f.js";
+import { P as PopupsViewer } from "../../../popups/PopupsViewer/index.f3677ab1.js";
 import { createPathComponent } from "@react-leaflet/core";
 import "leaflet.markercluster";
 import { cloneDeep, throttle } from "lodash";
@@ -32,11 +36,45 @@ 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.c64c2dd1.js";
-import { M as MarkerIconLabel } from "../Icon/index.8ecfb193.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index.14912462.js";
+import { b as bearingRawToCSS } from "../../index.13bb982c.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, [
@@ -114,6 +152,245 @@ const useMapUtilityClasses = (_ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
 };
+const MAP_DICCTIONARY = {
+  LABEL_GPSTOOLS_NAME: "label_gpstools_name",
+  LABEL_TAB_GEO: "label_tab_geo",
+  TAB_GENERAL_CONFIG_TOOLTIP: "tab_general_config_tooltip",
+  PAPER_GENERAL: "paper_general",
+  LABEL_ID: "label_id",
+  LABEL_NAME: "label_name",
+  LABEL_GEOMETRY_TYPE: "label_geometry_type",
+  LABEL_GEOMETRY_CIRCLE: "label_geometry_circle",
+  LABEL_GEOMETRY_RECTANGLE: "label_geometry_rectangle",
+  LABEL_GEOMETRY_POLYGON: "label_geometry_polygon",
+  LABEL_DRAW: "label_draw",
+  LABEL_FINISH: "label_finish",
+  PAPER_CONFIG: "paper_config",
+  LABEL_ALIAS: "label_alias",
+  LABEL_CUSTOMER_ID: "label_customer_id",
+  LABEL_TIME_MIN_IN_SECONDS: "label_time_min_in_seconds",
+  LABEL_TIME_MIN_OUT_SECONDS: "label_time_min_out_seconds",
+  TAB_STYLE_CONFIG_TOOLTIP: "tab_style_tooltip",
+  PAPER_STROKE: "paper_stroke",
+  LABEL_COLOR: "label_color",
+  LABEL_OPACITY: "label_opacity",
+  LABEL_WEIGHT: "label_weight",
+  LABEL_DASH_ARRAY: "label_dash_array",
+  LABEL_DASH_OFFSET: "label_dash_offset",
+  LABEL_RADIUS: "label_radius",
+  LABEL_LAT: "label_lat",
+  LABEL_LON: "label_lon",
+  LABEL_PLACE_MARKER: "label_place_marker",
+  LABEL_FIRST_VERTEX: "label_first_vertex",
+  LABEL_CONTINUE_LINE: "label_continue_line",
+  LABEL_FINISH_LINE: "label_finish_line",
+  LABEL_FINISH_POLY: "label_finish_poly",
+  LABEL_FINISH_RECT: "label_finish_rect",
+  LABEL_START_CIRCLE: "label_start_circle",
+  LABEL_FINISH_CIRCLE: "label_finish_circle",
+  LABEL_PLACE_CIRCLE_MARKER: "label_place_circle_marker",
+  VALIDATION_GEOMETRY_REQUIRED: "validation_geometry_required",
+  VALIDATION_FIELD_REQUIRED: "validation_field_required",
+  VALIDATION_FIELD_TYPE_NUMBER_ERROR: "validation_field_type_number_error",
+  LABEL_VIEW_TRANSIT_FEATURES: "label_view_crossing_features",
+  LABEL_VIEW_INTERNAL_FEATURES: "label_view_internal_features",
+  LABEL_CREATED_AT: "label_created_at",
+  LABEL_UPDATED_AT: "label_updated_at",
+  MODAL_DELETE_GEO_TITLE: "modal_delete_geo_title",
+  MODAL_DELETE_GEO_MESSAGE: "modal_delete_geo_message",
+  MODAL_DISABLE_GEO_TITLE: "modal_disable_geo_title",
+  MODAL_DISABLE_MESSAGE: "modal_disable_geo_message",
+  ROW_ACTION_GEO_EDIT: "row_action_geo_edit",
+  ROW_ACTION_GEO_ENABLE: "row_action_geo_enable",
+  ROW_ACTION_GEO_DISABLE: "row_action_geo_disable",
+  ROW_ACTION_GEO_DELETE: "row_action_geo_delete",
+  LABEL_TAB_MEASURE: "label_tab_measure",
+  PAPER_MEASURE: "paper_measure",
+  LABEL_MEASURE_START: "label_measure_start",
+  LABEL_MEASURE_CANCEL: "label_measure_cancel",
+  LABEL_MEASURE_DISTANCE: "label_measure_distance",
+  LABEL_MEASURE_AREA: "label_measure_area",
+  LABEL_MEASURE_UNIT: "label_measure_unit",
+  LABEL_MEASURE_UNIT_BASE_KILOMETERS: "label_measure_unit_base_kilometers",
+  LABEL_MEASURE_REMOVE_POINT: "label_measure_remove_point",
+  LABEL_LAYERS: "label_layes",
+  LABEL_LAYER_NAME: "label_layer_name",
+  LABEL_LAYER_VISIBLE: "label_layer_visible",
+  LABEL_LAYER_AUTOFOCUS: "label_layer_autofocus",
+  LABEL_LAYER_CLUSTER: "label_layer_cluster",
+  LABEL_LAYER_DELETE: "label_layer_delete",
+  ROW_ACTION_LAYER_DELETE: "row_action_layer_delete",
+  LABEL_MAP_SOURCES: "label_map_sources",
+  LABEL_TILE_OSM: "label_tile_osm",
+  LABEL_TILE_GOOGLE: "label_tile_google",
+  LABEL_TILE_GOOGLE_SATELLITE: "label_tile_google_satellite",
+  LABEL_TILE_GOOGLE_HYBRID: "label_tile_google_hybrid",
+  LABEL_TILE_BING: "label_tile_bing"
+};
+const MAP_ICONS = {
+  MAP_ZOOM_IN: "cmp_map_zoom_in.svg",
+  MAP_ZOOM_OUT: "cmp_map_zoom_out.svg",
+  MAP_SOURCES_TOOL: "cmp_map_mapsources_tool.svg",
+  MAP_SOURCE_OSM: "cmp_map_mapsources_osm.svg",
+  MAP_SOURCE_GOOGLE_ROADS: "cmp_map_mapsources_google.svg",
+  MAP_SOURCE_GOOGLE_HYBRID: "cmp_map_mapsources_googlehybrid.svg",
+  MAP_SOURCE_GOOGLE_SATELLITE: "cmp_map_mapsources_googlesatelite.svg",
+  MAP_SOURCE_BING: "cmp_map_mapsources_ bing.svg",
+  MAP_SOURCE_ROAD_TRAFFIC: "cmp_map_mapsources_layer-traffic.svg",
+  MAP_SOURCE_ROAD_TRANSIT: "cmp_map_mapsources_layer-transit.svg",
+  MAP_SOURCE_ROAD_BICYCLING: "cmp_map_mapsources_layer-bicycle.svg",
+  MAP_LAYERS_TOOL: "cmp_map_layers_tool.svg",
+  MAP_LAYER_VISIBLE: "cmp_map_layers_view.svg",
+  MAP_LAYER_AUTOFOCUS: "cmp_map_layers_zoom_fit.svg",
+  MAP_LAYER_CLUSTER: "cmp_map_layers_cluster.svg",
+  MAP_LAYER_DELETE: "cmp_map_layers_delete.svg",
+  MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
+  GEOMETRY_CIRCLE: "geometry_circle.svg",
+  GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
+  GEOMETRY_POLYGON: "geometry_polygon.svg",
+  ADD: "add.svg",
+  MAP_MEASURE_TOOL: "cmp_map_measure_tool.svg",
+  GENERAL: "general.svg",
+  CONFIG: "config.svg",
+  STROKE: "stroke.svg",
+  FILL: "fill.svg",
+  EDIT: "edit.svg",
+  DELETE: "delete.svg",
+  ACTIVE: "active.svg",
+  NAME: "name.svg"
+};
+const TILE_LAYER_OSM = {
+  id: "osm_roadmap",
+  sourceType: "OSM",
+  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;
+    const 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),
@@ -572,6 +849,32 @@ function useValidation() {
   );
   return { validationSchema };
 }
+const INITIAL_FORM_VALUES = {
+  statusLoad: "ready",
+  reInits: 0,
+  value: "0",
+  measureTypeId: "distance",
+  magnitudFactor: {
+    id: "m_kilometers",
+    name: "Kilometers",
+    symbol: "k",
+    factor_x0: 0,
+    factor_x1: 1,
+    factor_x2: 0
+  },
+  unitArea: null,
+  statusEdition: "initial"
+};
+const STYLE_MEASURE_OPTIONS = {
+  strokeLineColor: "#1E96DC",
+  strokeLineWeight: 5,
+  markerHeight: 37,
+  markerWidth: 26,
+  labelMarkerHeight: 0,
+  labelMarkerWidth: 0,
+  labelMarkerAnchorY: 0,
+  labelMarkerAnchorX: 0
+};
 const getMarkerPointIcon = (position) => {
   return L__default.divIcon({
     className: mapClasses.measureMarkerRoot,
@@ -882,6 +1185,48 @@ function MeasureTool() {
     }
   );
 }
+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);
@@ -967,6 +1312,191 @@ function TopRightTools(props) {
     /* @__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(() => {
@@ -982,6 +1512,186 @@ function useDisableZoomEvents(node) {
     });
   }, [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);
+  };
+  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" }),
@@ -1403,10 +2113,6 @@ const PolylineWithArrows = ({
   }, [map, enableEdit]);
   return /* @__PURE__ */ jsx(Polyline, { positions, ref: polylineRef, ...other });
 };
-function bearingRawToCSS(gpsBearing, offsetRotate) {
-  const rotation = -((360 + offsetRotate - gpsBearing) % 360);
-  return rotation;
-}
 const CommonFeatureRender = (props) => {
   const { id, layerId } = props;
   const feature = useMapStore((state) => {
@@ -1628,11 +2334,14 @@ const CommonFeatureRender = (props) => {
 };
 export {
   CommonFeatureRender as C,
-  Map$1 as M,
-  useDisableZoomEvents as a,
-  MapProvider as b,
-  MapContext as c,
-  MarkerFeatureRender as d,
+  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
 };