@m4l/gclick 0.0.2

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/index.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
+import { shallow } from "zustand/shallow";
+import { Icon, CheckBox } from "@m4l/components";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { u as useDisableZoomEvents } from "../../../../../../../../hooks/useDisableZoomEvents/index.js";
+import { m as mapClasses } from "../../../../../../../../classes/index.js";
+import clsx from "clsx";
+import { M as MAP_ICONS } from "../../../../../../../../icons.js";
+import { useRef } from "react";
+import { u as useMapStore } from "../../../../../../../../hooks/useMapStore/index.js";
+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 = useRef(null);
+  useDisableZoomEvents(divRef.current);
+  const handleChange = (event) => {
+    setCurrentMapSource(event.target.value);
+  };
+  return /* @__PURE__ */ jsx("div", { className: mapClasses.mapSourcesRoot, ref: divRef, 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,
+                    inlineText: "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))
+    }
+  ) }) });
+}
+export {
+  MapSourcesTool as M
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/bing.d.ts

@@ -0,0 +1,2 @@
+import { TileLayerSource } from '../../../../../../../../../contexts/MapContext/types';
+export declare const TILE_LAYER_BING: TileLayerSource;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/bing.js

@@ -0,0 +1,39 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary.js";
+import { t as toQuadKey } from "./utils.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons.js";
+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
+  },
+  /**
+   * TODO: Documentar
+   */
+  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]);
+  }
+};
+export {
+  TILE_LAYER_BING as T
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/google.d.ts

@@ -0,0 +1,4 @@
+import { TileLayerSource } from '../../../../../../../../../contexts/MapContext/types';
+export declare const TILE_LAYER_GOOGLE: TileLayerSource;
+export declare const TILE_LAYER_GOOGLE_SATELLITE: TileLayerSource;
+export declare const TILE_LAYER_GOOGLE_HYBRID: TileLayerSource;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/google.js

@@ -0,0 +1,73 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons.js";
+const TILE_LAYER_GOOGLE = {
+  id: "google_rodmap",
+  sourceType: "Google",
+  iconUrl: MAP_ICONS.MAP_SOURCE_GOOGLE_ROADS,
+  mapTypeTile: "roadmap",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_GOOGLE_ROADS,
+  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 © 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 © 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 © Google",
+    tms: false
+  },
+  roadSelectedOptions: {
+    trafficLayer: false,
+    transitLayer: false,
+    bicyclingLayer: false
+  }
+};
+export {
+  TILE_LAYER_GOOGLE_HYBRID as T,
+  TILE_LAYER_GOOGLE_SATELLITE as a,
+  TILE_LAYER_GOOGLE as b
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/osm.d.ts

@@ -0,0 +1,2 @@
+import { TileLayerSource } from '../../../../../../../../../contexts/MapContext/types';
+export declare const TILE_LAYER_OSM: TileLayerSource;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/osm.js

@@ -0,0 +1,25 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../../../../../../icons.js";
+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
+  }
+};
+export {
+  TILE_LAYER_OSM as T
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO: Documentar
+ */
+export declare function toQuadKey(x: number, y: number, z: number): string;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/utils.js

@@ -0,0 +1,19 @@
+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;
+}
+export {
+  toQuadKey as t
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/types.d.ts

@@ -0,0 +1,4 @@
+export type ToolType = 'Layers' | 'MapSources';
+export type PopoverToolButtonProps = {
+    type: ToolType;
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopLeftTools/types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface MainToolsProps {
+    aditionalMainTools?: ReactNode;
+    gpsTools?: ReactNode;
+}

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/index.d.ts

@@ -0,0 +1,11 @@
+import { TopRigthToolsProps } from './types';
+/**
+ * Componente que contiene los botones de herramientas de la parte superior derecha del mapa
+ *  - Boton de herramientas de GPS (Opcional)
+ *  - Boton de herramientas de medición
+ *  - Botones de zoom In
+ *  - Botones de zoom Out
+ * @param props
+ * @returns
+ */
+export declare function TopRightTools(props: TopRigthToolsProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/index.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useMap } from "react-leaflet";
+import { shallow } from "zustand/shallow";
+import { C as Control } from "../../../../external/Control/index.js";
+import { usePopupsStore, ToggleIconButton } from "@m4l/components";
+import { M as MeasureTool } from "./subcomponents/MeasureTool/index.js";
+import { Z as ZoomButtons } from "./subcomponents/ZoomButtons/index.js";
+import { M as MAP_ICONS } from "../../../../icons.js";
+import { M as MAP_DICCTIONARY } from "../../../../dictionary.js";
+import { m as mapClasses } from "../../../../classes/index.js";
+import { G as GPS_TOOLS_POPUP_DEFAULT_POSITION, c as GPS_TOOLS_POPUP_ID, d as MESURE_POPUP_DEFAULT_POSITION } from "../../../../constants.js";
+function TopRightTools(props) {
+  const { tools } = props;
+  const { addPopup } = usePopupsStore((state) => state.popupsActions);
+  const { close } = usePopupsStore((state) => state.popupActions);
+  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 (tools && !isToggledGpsTools) {
+      addPopup(
+        {
+          winType: "component",
+          popupId: GPS_TOOLS_POPUP_ID,
+          title: getLabel(MAP_DICCTIONARY.LABEL_GPSTOOLS_NAME),
+          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`,
+          component: tools,
+          onMouseDown,
+          defaultPosition: GPS_TOOLS_POPUP_DEFAULT_POSITION
+        },
+        { closeOthers: true }
+      );
+    } else {
+      close(GPS_TOOLS_POPUP_ID);
+    }
+    e.stopPropagation();
+  };
+  const onMeasureToolClick = (e) => {
+    if (!isToggledMeasureTool) {
+      addPopup(
+        {
+          winType: "component",
+          popupId: "measureTool",
+          iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`,
+          title: getLabel(MAP_DICCTIONARY.LABEL_POPUP_MEASURE),
+          component: MeasureTool,
+          onMouseDown,
+          defaultPosition: MESURE_POPUP_DEFAULT_POSITION
+        },
+        { closeOthers: true }
+      );
+    } else {
+      close("measureTool");
+    }
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(Control, { position: "topright", prepend: true, className: mapClasses.topRigthToolsRoot, children: [
+    tools && /* @__PURE__ */ jsx(
+      ToggleIconButton,
+      {
+        isToggled: isToggledGpsTools,
+        disabled: isDisabledGpsTools,
+        onToggle: onGpsToolsClick,
+        icon: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_ICONS.MAP_GPS_TOOLS_TOOL}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToggleIconButton,
+      {
+        isToggled: isToggledMeasureTool,
+        disabled: isDisabledMeasureTool,
+        onToggle: onMeasureToolClick,
+        icon: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_MEASURE_TOOL}`
+      }
+    ),
+    /* @__PURE__ */ jsx(ZoomButtons, {})
+  ] });
+}
+export {
+  TopRightTools as T
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/constants.d.ts

@@ -0,0 +1,30 @@
+import { FormMeasureValues } from './types';
+export declare const STROKE_COLOR_DEFAULT = "#aaccaa";
+export declare const STROKE_OPACITY_DEFAULT: {
+    value: number;
+    label: string;
+};
+export declare const STROKE_WHEIGTH_DEFAULT: {
+    value: number;
+    label: string;
+};
+export declare const STROKE_DASH_ARRAY_DEFAULT: {
+    value: string;
+    label: string;
+};
+export declare const FILL_COLOR_DEFAULT = "#aa3000";
+export declare const FILL_OPACITY_DEFAULT: {
+    value: number;
+    label: string;
+};
+export declare const INITIAL_FORM_VALUES: FormMeasureValues;
+export declare const STYLE_MEASURE_OPTIONS: {
+    strokeLineColor: string;
+    strokeLineWeight: number;
+    markerHeight: number;
+    markerWidth: number;
+    labelMarkerHeight: number;
+    labelMarkerWidth: number;
+    labelMarkerAnchorY: number;
+    labelMarkerAnchorX: number;
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/constants.js

@@ -0,0 +1,34 @@
+const INITIAL_FORM_VALUES = {
+  /** General Data */
+  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,
+  /** Config Data */
+  /** de Apoyo */
+  statusEdition: "initial"
+  // geometry: null ,
+};
+const STYLE_MEASURE_OPTIONS = {
+  strokeLineColor: "#1E96DC",
+  strokeLineWeight: 5,
+  markerHeight: 37,
+  markerWidth: 26,
+  labelMarkerHeight: 0,
+  labelMarkerWidth: 0,
+  labelMarkerAnchorY: 0,
+  labelMarkerAnchorX: 0
+};
+export {
+  INITIAL_FORM_VALUES as I,
+  STYLE_MEASURE_OPTIONS as S
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/helpers.d.ts

@@ -0,0 +1,11 @@
+import { default as L } from 'leaflet';
+import { GetLabelType } from '@m4l/core';
+/**
+ * getMarkerPointIcon: Función que retorna el icono/div que representa un punto de medición
+ */
+export declare const getMarkerPointIcon: (position: number) => L.DivIcon;
+/**
+ * getMarkerPointLabel: Función que retorna el icono/div que representa la etiqueta de distancia
+ * entre puntos, y el link para borrar el punto
+ */
+export declare const getMarkerPointLabel: (distance: string | undefined, getLabel: GetLabelType) => L.DivIcon;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/helpers.js

@@ -0,0 +1,45 @@
+import { S as STYLE_MEASURE_OPTIONS } from "../../constants.js";
+import { m as mapClasses } from "../../../../../../../../classes/index.js";
+import { M as MAP_DICCTIONARY } from "../../../../../../../../dictionary.js";
+import L__default from "leaflet";
+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],
+    // tamaño del icono
+    iconAnchor: [STYLE_MEASURE_OPTIONS.markerWidth / 2, STYLE_MEASURE_OPTIONS.markerHeight]
+    // punto de anclaje, el mismo que el de la imagen
+  });
+};
+const getMarkerPointLabel = (distance, getLabel) => {
+  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],
+    // tamaño del label
+    iconAnchor: [
+      STYLE_MEASURE_OPTIONS.labelMarkerAnchorX,
+      STYLE_MEASURE_OPTIONS.labelMarkerAnchorY
+    ]
+    //
+  });
+};
+export {
+  getMarkerPointLabel as a,
+  getMarkerPointIcon as g
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/hooks/useMeasure/index.d.ts

@@ -0,0 +1,13 @@
+import { MagnitudeFactorItem } from '../../../../../../../../../GpsMapTools/types';
+import { StatusEdition } from '../../types';
+/**
+ * useMeasure hook se encarga de pintar las marcas y una línea que las une, para calcular la distancia o el area (NextMVP)
+ * de ellas. En su primera versión no incluye agregar nuevas marcas entre los vertices por facilidad de implementación
+ * ya que el costo beneficio es muy alto si se coloca esa capacidad.
+ * @returns
+ */
+export declare function useMeasure(): {
+    statusEdition: StatusEdition;
+    magnitudFactor: MagnitudeFactorItem;
+    value: number;
+};