@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.0

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/bing.js

@@ -0,0 +1,47 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../../../../icons.js";
+import { c as coordsToQuadKey } from "../../../../../../../../../utils/coordsToQuadKey.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",
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_BING,
+  imageId: MAP_ICONS.MAP_SOURCE_BING,
+  layers: [
+    {
+      id: "streets",
+      iconId: MAP_ICONS.MAP_SOURCE_LAYER_STREETS,
+      dictionaryId: MAP_DICCTIONARY.LABEL_TILE_STREETS,
+      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
+      },
+      hasTrafficLayer: false,
+      hasTransitLayer: false,
+      hasBicyclingLayer: false,
+      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 = coordsToQuadKey(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/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/google.d.ts

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

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/google.js

@@ -0,0 +1,107 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../../../../icons.js";
+const TILE_SORCE_GOOGLE = {
+  id: "google",
+  imageId: MAP_ICONS.MAP_SOURCE_GOOGLE,
+  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,
+  layers: [
+    {
+      id: "streets",
+      type: "roadmap",
+      iconId: MAP_ICONS.MAP_SOURCE_LAYER_STREETS,
+      dictionaryId: MAP_DICCTIONARY.LABEL_TILE_STREETS,
+      urlTemplate: "https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
+      options: {
+        minZoom: 0,
+        maxZoom: 22,
+        subdomains: ["mt0", "mt1", "mt2", "mt3"],
+        // attribution: 'Map data © Google',
+        tms: false
+      },
+      hasTrafficLayer: true,
+      hasTransitLayer: true,
+      hasBicyclingLayer: true,
+      roadSelectedOptions: {
+        trafficLayer: false,
+        transitLayer: false,
+        bicyclingLayer: false
+      }
+    },
+    {
+      id: "satellite",
+      type: "satellite",
+      iconId: MAP_ICONS.MAP_SOURCE_LAYER_SATELLITE,
+      dictionaryId: MAP_DICCTIONARY.LABEL_TILE_SATELLITE,
+      urlTemplate: "https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
+      options: {
+        minZoom: 0,
+        maxZoom: 22,
+        subdomains: ["mt0", "mt1", "mt2", "mt3"],
+        // attribution: 'Map data © Google',
+        tms: false
+      },
+      hasTrafficLayer: false,
+      hasTransitLayer: false,
+      hasBicyclingLayer: false,
+      roadSelectedOptions: {
+        trafficLayer: false,
+        transitLayer: false,
+        bicyclingLayer: false
+      }
+    },
+    {
+      id: "hybrid",
+      type: "hybrid",
+      iconId: MAP_ICONS.MAP_SOURCE_LAYER_HYBRID,
+      dictionaryId: MAP_DICCTIONARY.LABEL_TILE_HYBRID,
+      urlTemplate: "https://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
+      options: {
+        minZoom: 0,
+        maxZoom: 22,
+        subdomains: ["mt0", "mt1", "mt2", "mt3"],
+        // attribution: 'Map data © Google',
+        tms: false
+      },
+      hasTrafficLayer: true,
+      hasTransitLayer: true,
+      hasBicyclingLayer: true,
+      roadSelectedOptions: {
+        trafficLayer: false,
+        transitLayer: false,
+        bicyclingLayer: false
+      }
+    },
+    {
+      id: "terrain",
+      type: "terrain",
+      iconId: MAP_ICONS.MAP_SOURCE_LAYER_TERRAIN,
+      dictionaryId: MAP_DICCTIONARY.LABEL_TILE_TERRAIN,
+      urlTemplate: "https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}",
+      options: {
+        minZoom: 3,
+        maxZoom: 22,
+        subdomains: ["mt0", "mt1", "mt2", "mt3"],
+        // attribution: 'Map data © Google',
+        tms: false
+      },
+      hasTrafficLayer: false,
+      hasTransitLayer: false,
+      hasBicyclingLayer: false,
+      roadSelectedOptions: {
+        trafficLayer: false,
+        transitLayer: false,
+        bicyclingLayer: false
+      }
+      // subLayers: [
+      // ],
+    }
+  ]
+};
+export {
+  TILE_SORCE_GOOGLE as T
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/others.d.ts

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

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/others.js

@@ -0,0 +1,33 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../../dictionary.js";
+import { M as MAP_ICONS } from "../../../../../../../icons.js";
+const TILE_LAYER_OTHERS = {
+  id: "others",
+  imageId: MAP_ICONS.MAP_SOURCE_OTHERS,
+  dictionaryId: MAP_DICCTIONARY.LABEL_TILE_OTHERS,
+  layers: [
+    {
+      id: "other_osm",
+      iconId: MAP_ICONS.MAP_SOURCE_LAYER_STREETS,
+      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
+      },
+      hasTrafficLayer: false,
+      hasTransitLayer: false,
+      hasBicyclingLayer: false,
+      roadSelectedOptions: {
+        trafficLayer: false,
+        transitLayer: false,
+        bicyclingLayer: false
+      }
+    }
+  ]
+};
+export {
+  TILE_LAYER_OTHERS as T
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/subcomponents/MapSourceCard.d.ts

@@ -0,0 +1,6 @@
+import { MapSourceLayerCardProps } from './types';
+/**
+ * MapSourceCard componente para mostrar una fuente de mapa
+ * Si tiene opciones de carretera, se muestran los botones de las opciones de carretera
+ */
+export declare function MapSourceCard(props: MapSourceLayerCardProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/subcomponents/MapSourceCard.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Card, Typography, ToggleIconButton } from "@m4l/components";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { c as GpsMapSourceToolCardIconTitleContainerStyled, d as GpsMapSourceToolCardIconStyled, e as GpsMapSourceToolCardRoadOptionsContainerStyled } from "../slots/styled.js";
+import { M as MAP_ICONS } from "../../../../../../../icons.js";
+import { M as MAP_DICCTIONARY } from "../../../../../../../dictionary.js";
+function MapSourceCard(props) {
+  const {
+    mapSourceId,
+    id,
+    hasBicyclingLayer,
+    hasTrafficLayer,
+    hasTransitLayer,
+    selected,
+    roadSelectedOptions,
+    iconId,
+    dictionaryId,
+    label,
+    setCurrentMapSourceLayer,
+    setMapSourceLayerRoadOptions
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const hasSomeRoadOptions = hasTrafficLayer || hasBicyclingLayer || hasTransitLayer;
+  return /* @__PURE__ */ jsxs(Card, { direction: "row", selected, onClick: () => {
+    setCurrentMapSourceLayer(mapSourceId, id);
+  }, padding: "compact", children: [
+    /* @__PURE__ */ jsxs(GpsMapSourceToolCardIconTitleContainerStyled, { children: [
+      /* @__PURE__ */ jsx(
+        GpsMapSourceToolCardIconStyled,
+        {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${iconId}`,
+          color: selected ? "primary.semanticText" : "text.secondary"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "caption",
+          color: selected ? "primary.semanticText" : "text.secondary",
+          ellipsis: true,
+          children: label || getLabel(dictionaryId)
+        }
+      )
+    ] }),
+    hasSomeRoadOptions && /* @__PURE__ */ jsxs(GpsMapSourceToolCardRoadOptionsContainerStyled, { children: [
+      hasTrafficLayer && /* @__PURE__ */ jsx(
+        ToggleIconButton,
+        {
+          disabled: !selected,
+          isToggled: roadSelectedOptions?.trafficLayer,
+          onToggle: () => {
+            setMapSourceLayerRoadOptions(mapSourceId, id, { trafficLayer: !roadSelectedOptions?.trafficLayer });
+          },
+          tooltip: getLabel(MAP_DICCTIONARY.LABEL_MAP_SOURCE_ROAD_TRAFFIC),
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_LAYER_ROAD_OPTION_TRAFFIC}`
+        }
+      ),
+      hasBicyclingLayer && /* @__PURE__ */ jsx(
+        ToggleIconButton,
+        {
+          disabled: !selected,
+          isToggled: roadSelectedOptions?.bicyclingLayer,
+          onToggle: () => {
+            setMapSourceLayerRoadOptions(mapSourceId, id, { bicyclingLayer: !roadSelectedOptions?.bicyclingLayer });
+          },
+          tooltip: getLabel(MAP_DICCTIONARY.LABEL_MAP_SOURCE_ROAD_BICYCLING),
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_LAYER_ROAD_OPTION_BICYCLING}`
+        }
+      ),
+      hasTransitLayer && /* @__PURE__ */ jsx(
+        ToggleIconButton,
+        {
+          disabled: !selected,
+          isToggled: roadSelectedOptions?.transitLayer,
+          tooltip: getLabel(MAP_DICCTIONARY.LABEL_MAP_SOURCE_ROAD_TRANSIT),
+          onToggle: () => {
+            setMapSourceLayerRoadOptions(mapSourceId, id, { transitLayer: !roadSelectedOptions?.transitLayer });
+          },
+          src: `${host_static_assets}/${environment_assets}/frontend/components/map/assets/icons/${MAP_ICONS.MAP_SOURCE_LAYER_ROAD_OPTION_TRANSIT}`
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  MapSourceCard as M
+};

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/subcomponents/types.d.ts

@@ -0,0 +1,7 @@
+import { MapSourceLayerRoadOptionsType, MapTileSourceId, MapTileSourceLayer, MapTileSourceLayerId } from '../../../../../../../contexts/MapContext/types';
+export interface MapSourceLayerCardProps extends MapTileSourceLayer {
+    mapSourceId: MapTileSourceId;
+    selected: boolean;
+    setCurrentMapSourceLayer: (mapSourceId: MapTileSourceId, mapSourceLayerId: MapTileSourceLayerId) => void;
+    setMapSourceLayerRoadOptions: (mapSourceId: MapTileSourceId, mapSourceLayerId: MapTileSourceLayerId, options: Partial<MapSourceLayerRoadOptionsType>) => void;
+}

package/components/maps/components/GpsMap/subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/types.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '@mui/material/styles';
+import { MAP_COMPONET_KEY_COMPONENT } from '../../../../../../constants';
+import { M4LOverridesStyleRules } from '@m4l/components';
+import { MapSlotsSourcesTool } from './slots/slots';
+export type MapSourcesToolOwnerState = {
+    isLast?: boolean;
+};
+export type MapSourcesToolSlotsType = keyof typeof MapSlotsSourcesTool;
+export type MapSourcesToolStyles = M4LOverridesStyleRules<MapSourcesToolSlotsType, typeof MAP_COMPONET_KEY_COMPONENT, Theme>;

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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RHFormProvider } from "@m4l/components";
+import { M as MyActions } from "./subcomponents/MyActions/index.js";
+import { u as useValidation } from "./hooks/useValidation.js";
+import { I as INITIAL_FORM_VALUES } from "./constants.js";
+import { M as MeasureData } from "./subcomponents/MeasureData/index.js";
+import { G as GpsMapMeasureToolRootStyled } from "./slots/styled.js";
+function MeasureTool() {
+  const finalInitalValues = {
+    ...INITIAL_FORM_VALUES
+  };
+  const { validationSchema } = useValidation();
+  const onSubmit = () => {
+  };
+  return /* @__PURE__ */ jsx(
+    RHFormProvider,
+    {
+      statusLoad: INITIAL_FORM_VALUES.statusLoad,
+      onSubmit,
+      values: finalInitalValues,
+      validationSchema,
+      children: /* @__PURE__ */ jsxs(GpsMapMeasureToolRootStyled, { children: [
+        /* @__PURE__ */ jsx(MeasureData, {}),
+        /* @__PURE__ */ jsx(MyActions, {})
+      ] })
+    }
+  );
+}
+export {
+  MeasureTool as M
+};

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

@@ -0,0 +1,7 @@
+import { MapMeasureToolStyles } from './types';
+import { Theme } from '@mui/material/styles';
+export declare const mapMeasureToolStyles: MapMeasureToolStyles;
+/**
+ * getMapContainerMeasureToolStyles: Función que retorna los estilos del componente MeasureTool que deben ser aplicados al contenedor del mapa
+ */
+export declare const getMapContainerMeasureToolStyles: (theme: Theme) => React.CSSProperties;

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

@@ -0,0 +1,154 @@
+import { m as mapClasses } from "../../../../../../classes/index.js";
+import { S as STYLE_MEASURE_OPTIONS } from "./constants.js";
+import { getTypographyStyles } from "@m4l/components";
+import { BASE_COLORS, BASE_OPACITY_COLORS } from "@m4l/styles";
+const mapMeasureToolStyles = {
+  /**
+   * Estilos del componente MapSourcesTool
+   */
+  mapMeasureToolRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp3,
+    position: "absolute",
+    left: "-16px",
+    top: "-16px",
+    right: "-16px",
+    bottom: "-16px",
+    overflowX: "hidden",
+    overflowY: "auto",
+    margin: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Estilos del componente MapMeasureToolDataContainer
+   */
+  mapMeasureToolDataContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp4
+  }),
+  /**
+   * Estilos del componente MapMeasureToolAutocomplete
+   */
+  mapMeasureToolRHFAutocompleteAsync: () => ({
+    flexGrow: 1,
+    overflow: "hidden"
+  }),
+  /**
+   * Estilos del componente MapMeasureToolValueContainer
+   */
+  mapMeasureToolValueContainer: ({ theme }) => ({
+    alignSelf: "center",
+    display: "flex",
+    width: "100%",
+    justifyContent: "center",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    padding: theme.vars.size.baseSpacings.sp2,
+    backgroundColor: theme.vars.palette.primary.opacity,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    alignItems: "flex-end"
+  }),
+  /**
+   * Estilos del componente MapMeasureToolValue
+   */
+  mapMeasureToolValue: ({ theme }) => ({
+    color: theme.vars.palette.primary.semanticText
+  }),
+  /**
+   * Estilos del componente MapMeasureToolValueUnit
+   */
+  mapMeasureToolValueUnit: ({ theme }) => ({
+    paddingBottom: "3px",
+    color: `${theme.vars.palette.primary.semanticText} !important`
+  })
+};
+const getMapContainerMeasureToolStyles = (theme) => ({
+  [`& .${mapClasses.measureMarkerRoot}`]: {
+    "--color": "green"
+  },
+  [`& .${mapClasses.measureMarkerContainer}`]: {
+    position: "relative",
+    cursor: "pointer"
+  },
+  [`& .${mapClasses.measureMarkerSvgRoot}`]: {
+    overflow: "hidden",
+    stroke: theme.vars.palette.primary.light,
+    filter: "drop-shadow(0px 2px 3px rgba(0, 0, 0, .2))",
+    strokeWidth: "2px",
+    width: `${STYLE_MEASURE_OPTIONS.markerWidth}px`,
+    height: `${STYLE_MEASURE_OPTIONS.markerHeight}px`
+  },
+  [`& .${mapClasses.measureMarkerContainerRhomb}`]: {
+    position: "absolute",
+    filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
+    width: "31px",
+    height: "31px",
+    borderRadius: "50% 50% 50% 0",
+    border: "4px solid var(--color)",
+    backgroundColor: "var(--color)",
+    transform: "rotate(-45deg)"
+  },
+  [`& .${mapClasses.measureMarkerContainerSlot}`]: {
+    position: "absolute",
+    background: "#fff",
+    borderRadius: "50%",
+    overflow: "hidden",
+    top: "5px",
+    left: "3px",
+    width: "26px",
+    height: "24px"
+  },
+  [`& .${mapClasses.measureMarkerContainerSlotNumber}`]: {
+    fontSize: "14px",
+    fontWeight: "600",
+    textAlign: "center",
+    marginTop: "1px",
+    color: theme.vars.palette.primary.main
+  },
+  //Marker Point Label
+  [`& .${mapClasses.measureLabelMarkerRoot}`]: {
+    "--color": BASE_OPACITY_COLORS.marble[60]
+  },
+  [`& .${mapClasses.measureLabelMarkerContainer}`]: {
+    border: `2px solid ${BASE_COLORS.marbleLight[10]}`,
+    backdropFilter: "blur(4px)",
+    boxShadow: "0 0 6px 0 rgba(0, 0, 0, 0.20)",
+    backgroundColor: "var(--color)",
+    padding: ` ${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings["sp1"]} ${theme.vars.size.baseSpacings.sp1} `,
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    color: "#fff",
+    width: "fit-content",
+    overflow: "hidden",
+    // width: '80px',
+    maxWidth: "80px"
+  },
+  [`& .${mapClasses.measureLabelMarkerDistance}`]: {
+    color: theme.vars.palette.text.primary,
+    paddingRight: theme.vars.size.baseSpacings.sp1,
+    fontFamily: "Jura",
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      "medium",
+      "subtitleDens"
+    ),
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  [`& .${mapClasses.measureLabelMarkerRemove}`]: {
+    color: theme.vars.palette.text.secondary,
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      "medium",
+      "body"
+    ),
+    textDecoration: "underline",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+});
+export {
+  getMapContainerMeasureToolStyles as g,
+  mapMeasureToolStyles as m
+};

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

@@ -28,3 +28,28 @@ export declare const STYLE_MEASURE_OPTIONS: {
     labelMarkerAnchorY: number;
     labelMarkerAnchorX: number;
 };
+export declare const MAGNITUDE_FACTOR_ITEMS: ({
+    id: string;
+    dictionaryLabelId: "map.label_measure_unit_kilometers";
+    dictionarySymbolId: "map.label_measure_unit_kilometers_symbol";
+    factor_x0: number;
+    factor_x1: number;
+    factor_x2: number;
+    decimalDigits: number;
+} | {
+    id: string;
+    dictionaryLabelId: "map.label_measure_unit_meters";
+    dictionarySymbolId: "map.label_measure_unit_meters_symbol";
+    factor_x0: number;
+    factor_x1: number;
+    factor_x2: number;
+    decimalDigits: number;
+} | {
+    id: string;
+    dictionaryLabelId: "map.label_measure_unit_miles";
+    dictionarySymbolId: "map.label_measure_unit_miles_symbol";
+    factor_x0: number;
+    factor_x1: number;
+    factor_x2: number;
+    decimalDigits: number;
+})[];

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

@@ -1,17 +1,11 @@
+import { M as MAP_DICCTIONARY } from "../../../../../../dictionary.js";
 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
-  },
+  magnitude: "k",
   unitArea: null,
   /** Config Data */
   /** de Apoyo */
@@ -19,16 +13,45 @@ const INITIAL_FORM_VALUES = {
   // geometry: null ,
 };
 const STYLE_MEASURE_OPTIONS = {
-  strokeLineColor: "#1E96DC",
-  strokeLineWeight: 5,
-  markerHeight: 37,
-  markerWidth: 26,
+  strokeLineWeight: 4,
+  markerHeight: 38,
+  markerWidth: 32,
   labelMarkerHeight: 0,
   labelMarkerWidth: 0,
-  labelMarkerAnchorY: 0,
-  labelMarkerAnchorX: 0
+  labelMarkerAnchorY: 25,
+  labelMarkerAnchorX: -23
 };
+const MAGNITUDE_FACTOR_ITEMS = [
+  {
+    id: "k",
+    dictionaryLabelId: MAP_DICCTIONARY.LABEL_MEASURE_UNIT_KILOMETERS,
+    dictionarySymbolId: MAP_DICCTIONARY.LABEL_MEASURE_UNIT_KILOMETERS_SYMBOL,
+    factor_x0: 0,
+    factor_x1: 1,
+    factor_x2: 0,
+    decimalDigits: 2
+  },
+  {
+    id: "m",
+    dictionaryLabelId: MAP_DICCTIONARY.LABEL_MEASURE_UNIT_METERS,
+    dictionarySymbolId: MAP_DICCTIONARY.LABEL_MEASURE_UNIT_METERS_SYMBOL,
+    factor_x0: 0,
+    factor_x1: 1e3,
+    factor_x2: 0,
+    decimalDigits: 0
+  },
+  {
+    id: "mi",
+    dictionaryLabelId: MAP_DICCTIONARY.LABEL_MEASURE_UNIT_MILES,
+    dictionarySymbolId: MAP_DICCTIONARY.LABEL_MEASURE_UNIT_MILES_SYMBOL,
+    factor_x0: 0,
+    factor_x1: 0.621371,
+    factor_x2: 0,
+    decimalDigits: 2
+  }
+];
 export {
   INITIAL_FORM_VALUES as I,
+  MAGNITUDE_FACTOR_ITEMS as M,
   STYLE_MEASURE_OPTIONS as S
 };

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

@@ -1,5 +1,9 @@
 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 getMarkerPointIcon2: (position: number) => L.DivIcon;
 /**
  * getMarkerPointIcon: Función que retorna el icono/div que representa un punto de medición
  */
@@ -9,3 +13,28 @@ export declare const getMarkerPointIcon: (position: number) => L.DivIcon;
  * entre puntos, y el link para borrar el punto
  */
 export declare const getMarkerPointLabel: (distance: string | undefined, getLabel: GetLabelType) => L.DivIcon;
+export declare const getMagnitudeFactor: (magnitude: string) => {
+    id: string;
+    dictionaryLabelId: "map.label_measure_unit_kilometers";
+    dictionarySymbolId: "map.label_measure_unit_kilometers_symbol";
+    factor_x0: number;
+    factor_x1: number;
+    factor_x2: number;
+    decimalDigits: number;
+} | {
+    id: string;
+    dictionaryLabelId: "map.label_measure_unit_meters";
+    dictionarySymbolId: "map.label_measure_unit_meters_symbol";
+    factor_x0: number;
+    factor_x1: number;
+    factor_x2: number;
+    decimalDigits: number;
+} | {
+    id: string;
+    dictionaryLabelId: "map.label_measure_unit_miles";
+    dictionarySymbolId: "map.label_measure_unit_miles_symbol";
+    factor_x0: number;
+    factor_x1: number;
+    factor_x2: number;
+    decimalDigits: number;
+};