@rural-environmental-registry/map_component 1.0.0 → 1.2.0

package/dist/types/index.d.ts

@@ -50,6 +50,12 @@ export type BaseMapLayer = {
     key: string;
     default: boolean;
     url: string;
+    tms?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    maxNativeZoom?: number;
+    errorTileUrl?: string;
+    minZoomWarning?: number | null;
 };
 export type BaseMapLayers = BaseMapLayer[];
 export type MapLayers = {
@@ -60,6 +66,8 @@ export type MapConfigConfig = MapOptions & {
     id: string;
     removeControlLayers?: boolean;
     zoomControlPosition?: ControlPosition;
+    /** Reposiciona marcadores após zoom (evita drift de divIcon). Padrão: true. */
+    stabilizeMarkersOnZoom?: boolean;
 };
 export type MapConfig = {
     config?: MapConfigConfig;
@@ -67,16 +75,71 @@ export type MapConfig = {
 export type LayersMenuConfig = {
     size: 'small' | 'medium' | 'large';
     removeMenu?: boolean;
+    persist: boolean;
 };
 export type MemorialConfig = {
     show: boolean;
     config?: any;
     controlTexts?: any;
 };
+export type MapToolsConfig = {
+    show?: boolean;
+    position?: ControlPosition;
+    zoom?: {
+        show?: boolean;
+        titleIn?: string;
+        titleOut?: string;
+    };
+    fullscreen?: {
+        show?: boolean;
+        title?: string;
+    };
+    center?: {
+        show?: boolean;
+        title?: string;
+        target?: 'drawn' | 'initial';
+        padding?: [number, number];
+    };
+    measureArea?: {
+        show?: boolean;
+        title?: string;
+        shapeOptions?: PathOptions;
+    };
+    measureLine?: {
+        show?: boolean;
+        title?: string;
+    };
+    measurePolygon?: {
+        show?: boolean;
+        title?: string;
+    };
+    texts?: {
+        measureResult?: string;
+        measureLength?: string;
+        measureArea?: string;
+        measureCancel?: string;
+        measureFinish?: string;
+        measurePanelTitle?: string;
+        measureLineTitle?: string;
+        measurePolygonTitle?: string;
+        measureLineHelp?: string;
+        measurePolygonHelp?: string;
+        noGeometry?: string;
+    };
+};
+export type MeasureCompleteEvent = {
+    m2?: number;
+    km2?: number;
+    ha?: number;
+    lengthM?: number;
+    lengthKm?: number;
+    geojson: GeoJsonObject;
+};
 export type MapOptionsConfig = {
     layersMenu?: LayersMenuConfig;
     map: MapConfig;
     drawing?: DrawingConfig;
+    tools?: MapToolsConfig;
 };
 export type DrawingConfig = DrawingControlOptions & DisplayDrawingControl;
 export type TranslationConfig = {
@@ -143,6 +206,12 @@ export type CoordinatePanelTexts = {
     dragCsvFile?: string;
     csvColumnsInfo?: string;
     applyCsvCoordinates?: string;
+    shapefileUpload?: string;
+    shapefileFileUpload?: string;
+    dragShapefileZip?: string;
+    shapefileZipInfo?: string;
+    shapefileAppliedSuccess?: string;
+    geometryImportUnsupportedFormat?: string;
     placeholderLongitude?: string;
     placeholderLatitude?: string;
     placeholderAzimuth?: string;

package/dist/utils/areaCalculator.d.ts

@@ -0,0 +1,3 @@
+import { calculateLayerArea, formatAreaHa } from './geometryCalculator';
+export { calculateLayerArea, formatAreaHa };
+export declare function formatAreaValue(value: number, unit: 'ha' | 'm2' | 'km2'): string;

package/dist/utils/drawingPathOptions.d.ts

@@ -0,0 +1,8 @@
+import type { Map, PathOptions } from 'leaflet';
+import type { DrawingConfig } from '../types';
+export type MemorialDrawShape = 'polygon' | 'polyline';
+/**
+ * Resolve estilos de desenho para geometrias do memorial.
+ * Prioridade: opções ativas do Geoman (camada selecionada) → config estática → padrão.
+ */
+export declare function resolveDrawingPathOptions(map: Map | undefined, drawingConfig: DrawingConfig | undefined, shape: MemorialDrawShape): PathOptions;

package/dist/utils/geometryCalculator.d.ts

@@ -0,0 +1,13 @@
+import { Layer } from 'leaflet';
+import { DrawnArea } from '../types';
+export declare function isClosedPolygonLayer(layer: Layer): boolean;
+export declare function calculateLayerArea(layer: Layer): DrawnArea;
+export declare function calculateLayerLength(layer: Layer): {
+    m: number;
+    km: number;
+};
+export declare function formatLengthKm(km: number): string;
+export declare function formatAreaKm2(km2: number): string;
+export declare function formatAreaHa(value: number): string;
+export declare function formatLengthValue(value: number, unit: 'm' | 'km'): string;
+export { formatAreaHa as formatAreaValue };

package/dist/utils/geometryFileParseResult.d.ts

@@ -0,0 +1,8 @@
+import type { Feature } from 'geojson';
+export type GeometryFileParseResult = {
+    ok: true;
+    features: Feature[];
+} | {
+    ok: false;
+    error: string;
+};

package/dist/utils/memorialLayer.d.ts

@@ -0,0 +1,3 @@
+import type L from 'leaflet';
+export declare const MEMORIAL_KEY = "memorial";
+export declare function isMemorialLayer(layer: L.Layer): boolean;

package/dist/utils/menuHistory.d.ts

@@ -0,0 +1,8 @@
+import { LayerData } from '../types';
+export declare const setHistory: (layer: LayerData) => void;
+/** Retorna o estado salvo da camada ou `undefined` se não houver histórico. */
+export declare const getHistory: (layerKey: string) => boolean | undefined;
+/** Resolve `active`/`activeDefault` sem mutar o objeto original (mesma regra do fluxo legado). */
+export declare const resolveLayerActiveState: (layer: LayerData, persist: boolean) => LayerData;
+/** Indica se a camada deve ser aplicada ao mapa na inicialização. */
+export declare const shouldInitLayerOnMap: (layer: LayerData, persist: boolean) => boolean;

package/dist/utils/normalizeGeoJsonToFeatures.d.ts

@@ -0,0 +1,2 @@
+import type { Feature } from 'geojson';
+export declare function normalizeGeoJsonToFeatures(geojson: unknown): Feature[];

package/dist/utils/parseGeoJsonFile.d.ts

@@ -0,0 +1,2 @@
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export declare function parseGeoJsonFile(file: File): Promise<GeometryFileParseResult>;

package/dist/utils/parseKmlFile.d.ts

@@ -0,0 +1,2 @@
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export declare function parseKmlFile(file: File): Promise<GeometryFileParseResult>;

package/dist/utils/parseShapefileZip.d.ts

@@ -0,0 +1,3 @@
+import type { GeometryFileParseResult } from './geometryFileParseResult';
+export type ShapefileParseResult = GeometryFileParseResult;
+export declare function parseShapefileZip(file: File): Promise<ShapefileParseResult>;

package/dist/utils/stableMarker.d.ts

@@ -0,0 +1,15 @@
+import type { FeatureGroup, LatLngExpression, Map, Marker, MarkerOptions } from 'leaflet';
+import type { default as LeafletType } from 'leaflet';
+export type StableMarkerOptions = MarkerOptions & Record<string, unknown>;
+/** Opções padrão para evitar drift de divIcon durante zoom no Leaflet. */
+export declare const STABLE_MARKER_DEFAULTS: StableMarkerOptions;
+/**
+ * Cria marcador com opções estáveis para ícones customizados (divIcon).
+ * Consumidores podem passar `icon` e metadados de domínio (ex.: layerCode, rules).
+ */
+export declare function createStableMarker(leaflet: typeof LeafletType, latlng: LatLngExpression, options?: StableMarkerOptions): Marker;
+/**
+ * Reposiciona marcadores após zoom (workaround para desalinhamento de divIcon).
+ * Retorna função de cleanup para remover o listener.
+ */
+export declare function bindMarkerZoomStability(map: Map, layerGroup: FeatureGroup): () => void;

package/dist/utils/validateImportedPolygonGeometry.d.ts

@@ -0,0 +1,9 @@
+import type { Feature, MultiPolygon, Polygon } from 'geojson';
+export type ImportedPolygonValidationResult = {
+    ok: true;
+    feature: Feature<Polygon | MultiPolygon>;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function validateImportedPolygonGeometry(features: Feature[]): ImportedPolygonValidationResult;

package/package.json

@@ -1,20 +1,32 @@
 {
   "name": "@rural-environmental-registry/map_component",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Map component for Vue.js applications",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "artifactId": "dpg-mapa",
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build && tsc",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "format": "prettier --write ./src"
   },
   "files": [
     "dist",
+    "src",
+    "index.html",
+    "package.json",
+    "vite.config.js",
     "README.md"
   ],
-  "keywords": ["vue", "map", "leaflet", "component", "dataprev"],
+  "keywords": [
+    "vue",
+    "map",
+    "leaflet",
+    "component",
+    "dataprev"
+  ],
   "author": "Dataprev",
   "license": "GPL-3.0",
   "repository": {
@@ -34,13 +46,19 @@
     "element-plus": "2.9.3",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
-    "papaparse": "5.5.3"
+    "papaparse": "5.5.3",
+    "shpjs": "6.1.0",
+    "@tmcw/togeojson": "7.1.2"
   },
   "devDependencies": {
     "@types/geojson": "7946.0.16",
     "@types/leaflet": "1.9.16",
     "@types/papaparse": "5.3.16",
     "@vitejs/plugin-vue": "5.2.1",
+    "element-plus": "2.9.3",
+    "leaflet": "1.9.4",
+    "leaflet-draw": "1.0.4",
+    "papaparse": "5.5.3",
     "typescript": "5.7.3",
     "unplugin-element-plus": "0.9.1",
     "vite": "6.3.5",

package/src/assets/icons/file-import-regular-full-gray.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 512 512"><path fill="#595959" d="M192 112L304 112L304 200C304 239.8 336.2 272 376 272L464 272L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 128C176 119.2 183.2 112 192 112zM352 131.9L444.1 224L376 224C362.7 224 352 213.3 352 200L352 131.9zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM389 320L325 384L325 288L251 288C237.7 288 227 298.7 227 312C227 325.3 237.7 336 251 336L325 336L325 240L389 304C398.4 313.4 413.6 313.4 423 304C432.4 294.6 432.4 279.4 423 270L359 206C349.6 196.6 334.4 196.6 325 206C315.6 215.4 315.6 230.6 325 240L389 304L389 320z"/></svg>

package/src/assets/icons/file-lines-regular-full-gray.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 512 512"><path fill="#595959" d="M192 112L304 112L304 200C304 239.8 336.2 272 376 272L464 272L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 128C176 119.2 183.2 112 192 112zM352 131.9L444.1 224L376 224C362.7 224 352 213.3 352 200L352 131.9zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z"/></svg>

package/src/assets/icons/layer-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+    <path fill="#5b5b5b" d="M264.5 5.2c14.9-6.9 32.1-6.9 47 0l218.6 101c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 149.8C37.4 145.8 32 137.3 32 128s5.4-17.9 13.9-21.8L264.5 5.2zM476.9 209.6l53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 277.8C37.4 273.8 32 265.3 32 256s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0l152-70.2zm-152 198.2l152-70.2 53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 405.8C37.4 401.8 32 393.3 32 384s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0z"/>
+</svg>

package/src/assets/icons/marker-icon.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#3acb5e" stroke="#3acb5e"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M512 85.333333c-164.949333 0-298.666667 133.738667-298.666667 298.666667 0 164.949333 298.666667 554.666667 298.666667 554.666667s298.666667-389.717333 298.666667-554.666667c0-164.928-133.717333-298.666667-298.666667-298.666667z m0 448a149.333333 149.333333 0 1 1 0-298.666666 149.333333 149.333333 0 0 1 0 298.666666z" fill="#45b625"></path></g></svg>

package/src/assets/icons/measure-icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5b5b5b" stroke-width="2" stroke-linecap="round">
+  <path d="M3 21l18-18"/>
+  <circle cx="7" cy="7" r="1.5" fill="#5b5b5b" stroke="none"/>
+  <circle cx="17" cy="17" r="1.5" fill="#5b5b5b" stroke="none"/>
+</svg>

package/src/assets/layers/mapLayers.json

@@ -0,0 +1,16 @@
+{
+  "mapLayers": [
+    {
+      "name": "Esri Imagery",
+      "default": true,
+      "key": "esri",
+      "url": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
+    },
+    {
+      "name": "OpenStreetMap",
+      "default": false,
+      "key": "osm",
+      "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    }
+  ]
+}

package/src/assets/main.css

@@ -0,0 +1,187 @@
+@import './styles/leaflet.css';
+@import './styles/element-plus.css';
+@import './styles/layers-menu.css';
+
+:root {
+  --mapa-base-green: #42916e;
+  --mapa-base-white: #ffffff;
+  --mapa-base-black: #333333;
+  --mapa-base-gray: #5b5b5b;
+  --mapa-base-shadow: rgba(0, 0, 0, 0.05);
+  --mapa-base-backdrop: rgba(108, 117, 125, 0.5);
+
+  --mapa-base-radius-5: 5px;
+  --mapa-base-radius-10: 10px;
+
+  --mapa-fs-12: 0.75rem;
+  --mapa-fs-15: 0.938rem;
+  --mapa-fs-22: 1.375rem;
+
+  --mapa-size-base-1: 1px;
+  --mapa-size-base-2: 2px;
+  --mapa-size-base-5: 5px;
+  --mapa-size-base-8: 8px;
+  --mapa-size-base-10: 10px;
+  --mapa-size-base-15: 15px;
+  --mapa-size-base-18: 18px;
+  --mapa-size-base-20: 20px;
+  --mapa-size-base-30: 32px;
+  --mapa-size-base-35: 35px;
+  --mapa-size-base-40: 40px;
+
+  --mapa-base-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  --mapa-base-transition: all 0.3s ease-in-out;
+
+  /* Menu sizes */
+
+  --mapa-menu-small-width: 300px;
+  --mapa-menu-medium-width: 400px;
+  --mapa-menu-large-width: 600px;
+
+  --mapa-parent-menu-small-width: 155px;
+  --mapa-parent-menu-medium-width: 205px;
+  --mapa-parent-menu-large-width: 305px;
+
+  --mapa-child-menu-small-width: 185px;
+  --mapa-child-menu-medium-width: 235px;
+  --mapa-child-menu-large-width: 335px;
+}
+
+.leaflet-control-memorial {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--mapa-base-white);
+  border-radius: var(--mapa-base-radius-10);
+  box-shadow: var(--mapa-base-box-shadow);
+  border: none !important;
+  width: var(--mapa-size-base-30);
+  min-width: var(--mapa-size-base-30);
+  height: auto;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.leaflet-control-memorial.leaflet-bar {
+  border: none;
+}
+
+.memorial-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  width: var(--mapa-size-base-30);
+  height: var(--mapa-size-base-30);
+  min-width: var(--mapa-size-base-30);
+  min-height: var(--mapa-size-base-30);
+  border-radius: var(--mapa-base-radius-10);
+  cursor: pointer;
+  line-height: 0;
+  box-sizing: border-box;
+}
+
+.memorial-btn:hover {
+  background-color: #f4f4f4;
+}
+
+.memorial-btn img {
+  width: var(--map-control-icon-size, var(--mapa-size-base-20));
+  height: var(--map-control-icon-size, var(--mapa-size-base-20));
+  max-width: var(--map-control-icon-size, var(--mapa-size-base-20));
+  max-height: var(--map-control-icon-size, var(--mapa-size-base-20));
+  display: block;
+  object-fit: contain;
+  margin: 0;
+  pointer-events: none;
+  flex-shrink: 0;
+  transform: translateX(1px);
+}
+
+.leaflet-control-map-tools {
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+  border: none;
+  border-radius: var(--mapa-base-radius-10);
+  overflow: hidden;
+  box-shadow: var(--mapa-base-box-shadow);
+  width: var(--mapa-size-base-30);
+  box-sizing: border-box;
+}
+
+.leaflet-control-map-tools .map-tools-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mapa-size-base-30);
+  height: var(--mapa-size-base-30);
+  padding: 0;
+  border: none;
+  background-color: var(--mapa-base-white);
+  color: var(--mapa-base-gray);
+  cursor: pointer;
+  transition: var(--mapa-base-transition);
+  line-height: 1;
+}
+
+.leaflet-control-map-tools .map-tools-btn:first-child {
+  border-top-left-radius: var(--mapa-base-radius-10);
+  border-top-right-radius: var(--mapa-base-radius-10);
+}
+
+.leaflet-control-map-tools .map-tools-btn:last-child {
+  border-bottom-left-radius: var(--mapa-base-radius-10);
+  border-bottom-right-radius: var(--mapa-base-radius-10);
+}
+
+.leaflet-control-map-tools .map-tools-btn:not(:last-child) {
+  border-bottom: var(--mapa-size-base-1) solid rgba(0, 0, 0, 0.08);
+}
+
+.leaflet-control-map-tools .map-tools-btn:hover {
+  background-color: #f4f4f4;
+  color: var(--mapa-base-black);
+}
+
+.leaflet-control-map-tools .map-tools-btn--active {
+  background-color: var(--mapa-base-green);
+  color: var(--mapa-base-white);
+}
+
+.leaflet-control-map-tools .map-tools-btn svg {
+  display: block;
+  flex-shrink: 0;
+  width: var(--map-control-icon-size, var(--mapa-size-base-20));
+  height: var(--map-control-icon-size, var(--mapa-size-base-20));
+}
+
+.leaflet-control-map-tools .map-tools-btn--zoom-in,
+.leaflet-control-map-tools .map-tools-btn--zoom-out {
+  font-size: var(--mapa-fs-22);
+  font-weight: 400;
+  line-height: 1;
+}
+
+/* Marcadores divIcon (ex.: Property Headquarter) — anchor alinhado ao iconSize 32×32 */
+.leaflet-marker-icon.rer-map-marker-icon {
+  background: transparent !important;
+  border: none !important;
+  width: 32px !important;
+  height: 32px !important;
+  margin-left: -16px !important;
+  margin-top: -16px !important;
+}
+
+.rer-map-marker-icon__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  line-height: 1;
+  pointer-events: none;
+}

package/src/assets/styles/element-plus.css

@@ -0,0 +1,25 @@
+@import 'element-plus/dist/index.css';
+
+.map-container {
+  .el-switch.is-checked .el-switch__core {
+    background: var(--mapa-base-green) !important;
+    border-color: var(--mapa-base-green) !important;
+  }
+
+  .el-switch.is-checked .el-switch__core .el-switch__action {
+    color: var(--mapa-base-green) !important;
+  }
+
+  .el-sub-menu__title:hover,
+  .el-menu-item:hover {
+    background-color: var(--mapa-base-shadow) !important;
+  }
+
+  .el-menu-item.is-active {
+    color: var(--mapa-base-black) !important;
+  }
+
+  .el-switch__input:focus-visible ~ .el-switch__core {
+    outline-color: var(--mapa-base-green) !important;
+  }
+}

package/src/assets/styles/layers-menu.css

@@ -0,0 +1,95 @@
+.layer-menu.layer-menu-small {
+  .map-custom-menu {
+    width: var(--mapa-menu-small-width);
+
+    &.map-custom-menu-open {
+      left: 0;
+    }
+
+    &.map-custom-menu-close {
+      left: calc(var(--mapa-menu-small-width) * -1);
+    }
+  }
+
+  .map-menu-button {
+    &.map-menu-button-open {
+      left: var(--mapa-menu-small-width);
+    }
+
+    &.map-menu-button-close {
+      left: 0;
+    }
+  }
+
+  .parent-menu .parent-layer-title {
+    width: var(--mapa-parent-menu-small-width);
+  }
+
+  .child-menu .child-layer-title {
+    width: var(--mapa-child-menu-small-width);
+  }
+}
+
+.layer-menu.layer-menu-medium {
+  .map-custom-menu {
+    width: var(--mapa-menu-medium-width);
+
+    &.map-custom-menu-open {
+      left: 0;
+    }
+
+    &.map-custom-menu-close {
+      left: calc(var(--mapa-menu-medium-width) * -1);
+    }
+  }
+
+  .map-menu-button {
+    &.map-menu-button-open {
+      left: var(--mapa-menu-medium-width);
+    }
+
+    &.map-menu-button-close {
+      left: 0;
+    }
+  }
+
+  .parent-menu .parent-layer-title {
+    width: var(--mapa-parent-menu-medium-width);
+  }
+
+  .child-menu .child-layer-title {
+    width: var(--mapa-child-menu-medium-width);
+  }
+}
+
+.layer-menu.layer-menu-large {
+  .map-custom-menu {
+    width: var(--mapa-menu-large-width);
+
+    &.map-custom-menu-open {
+      left: 0;
+    }
+
+    &.map-custom-menu-close {
+      left: calc(var(--mapa-menu-large-width) * -1);
+    }
+  }
+
+  .map-menu-button {
+    &.map-menu-button-open {
+      left: var(--mapa-menu-large-width);
+    }
+
+    &.map-menu-button-close {
+      left: 0;
+    }
+  }
+
+  .parent-menu .parent-layer-title {
+    width: var(--mapa-parent-menu-large-width);
+  }
+
+  .child-menu .child-layer-title {
+    width: var(--mapa-child-menu-large-width);
+  }
+}