Refactor

api-idee-js/src/facade/assets/css/controls/rotate.css

@@ -10,16 +10,10 @@
   background-color: var(--idee-color-links) !important;
 }
 
-.m-areas > div.m-area > div.m-panel.opened.m-rotate {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
 .m-rotate-compass {
   position: relative;
-  width: 150px;
-  height: 150px;
+  width: 90px;
+  height: 90px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,73 +45,73 @@ div.m-control.m-rotate-container {
   opacity: 1;
 }
 
-.m-rotate-compass {
-  position: relative;
-  width: 150px;
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .m-rotate-background-exterior {
   fill: var(--idee-color-primary);
 }
 
 .m-rotate-background-exterior,
 .m-rotate-svgPath-svg {
   position: absolute;
-  width: 99px;
-  height: 99px;
+  /* width: 99px;
+  height: 99px; */
+  width: 80px;
+  height: 84px;
 }
 
 .m-rotate-svgPath-svg {
-  width: 100px;
+  width: 85px;
 }
 
 .m-rotate-exterior-svg {
   position: absolute;
-  width: 120px;
-  height: 120px;
+  width: 85px;
   overflow: hidden;
 }
 
+.m-rotate-exterior-svg.g-cartografia-exterior:before {
+  margin-bottom: 4px;
+}
+
+.m-rotate-exterior-svg.g-cartografia-exterior:before,
 .m-rotate-exterior-svg.g-cartografia-exterior-1:before {
   color: #fff;
-  font-size: 100px;
+  width: inherit;
 }
 
 .m-rotate-giroscopio-svg {
   position: absolute;
-  width: 40px;
-  height: 40px;
+  width: 26px;
+  height: 26px;
   box-sizing: content-box;
+  background-color: var(--idee-color-white);
+  border-radius: 26px;
 }
 
 .m-rotate-giroscopio-svg.g-cartografia-giroscopio:before {
-  font-size: 40px;
-  background-color: white;
-  border-radius: 40px;
+  margin: 0;
+  width: 16px;
+  margin: calc((26px - 16px) / 2);
+  border-radius: inherit;
   color: var(--idee-color-primary);
 }
 
 .m-rotate-help-button {
   position: absolute;
-  top: 50%;
+  top: 12px;
   right: 0;
   transform: translateY(-50%);
   background-color: var(--idee-color-primary);
   color: white;
   font-weight: bold;
   border: 2px solid white;
   cursor: pointer;
-  width: 30px;
-  height: 30px;
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
+  height: 19px;
+  width: 19px;
+  border-radius: 50%;
   text-align: center;
   font-family: 'Muli', 'sans-serif';
-  font-size: 18px;
+  font-size: 10px;
+  z-index: 1;
 }
 
 #m-rotate-slider-container {
@@ -148,15 +142,16 @@ div.m-control.m-rotate-container {
 }
 
 .m-rotate-help-button:hover {
-  background-color: var(--idee-color-primary);
+  background-color: var(--idee-color-links);
 }
 
 .m-rotate-rotation-maker {
   position: absolute;
-  width: 99px;
-  height: 99px;
-  fill: var(--idee-color-primary);
+  width: 88px;
+  height: 80px;
+  fill: var(--idee-color-links);
   display: none;
+  overflow: hidden;
 }
 
 .m-rotate-help-container {
@@ -209,11 +204,6 @@ button.m-rotate-help-close.g-cartografia-cancelar:before {
   color: #000;
 }
 
-.m-rotate-exterior-svg.g-cartografia-exterior:before {
-  color: #fff;
-  font-size: 120px;
-}
-
 .m-rotate-help-option {
   display: flex;
   gap: 8px;

api-idee-js/src/facade/assets/css/fonts.css

@@ -337,5 +337,14 @@
         -webkit-mask-image: url('https://componentes.idee.es/estaticos/Simbologia/svg/icons_cota/pinterest.svg');
         mask-image: url('https://componentes.idee.es/estaticos/Simbologia/svg/icons_cota/pinterest.svg');
     }
-
+
+    .g-cartografia-exterior::before {
+        -webkit-mask-image: url('https://componentes.idee.es/estaticos/Simbologia/svg/icons_cota/rotate-exterior.svg');
+        mask-image: url('https://componentes.idee.es/estaticos/Simbologia/svg/icons_cota/rotate-exterior.svg');
+    }
+
+    .g-cartografia-giroscopio::before {
+        -webkit-mask-image: url('https://componentes.idee.es/estaticos/Simbologia/svg/icons_cota/rotate-giroscopio.svg');
+        mask-image: url('https://componentes.idee.es/estaticos/Simbologia/svg/icons_cota/rotate-giroscopio.svg');
+    }
 }

api-idee-js/src/facade/js/Map.js

@@ -5421,6 +5421,40 @@ class Map extends Base {
     return this;
   }
 
+  /**
+   * Este método añade una interacción de OpenLayers al mapa.
+   *
+   * @function
+   * @param {ol.interaction.Interaction} interaction Interacción a añadir.
+   * @returns {IDEE.Map} Mapa.
+   * @public
+   * @api
+  */
+  addInteraction(interaction) {
+    if (isUndefined(MapImpl.prototype.addInteraction)) {
+      Exception(getValue('exception').addinteraction_method);
+    }
+    this.getImpl().addInteraction(interaction);
+    return this;
+  }
+
+  /**
+   * Este método elimina una interacción de OpenLayers del mapa.
+   *
+   * @function
+   * @param {ol.interaction.Interaction} interaction Interacción a eliminar.
+   * @returns {IDEE.Map} Mapa.
+   * @public
+   * @api
+  */
+  removeInteraction(interaction) {
+    if (isUndefined(MapImpl.prototype.removeInteraction)) {
+      Exception(getValue('exception').removeinteraction_method);
+    }
+    this.getImpl().removeInteraction(interaction);
+    return this;
+  }
+
   /**
    * Este método permite activar o desactivar la interacción de panneo.
    * El valor por defecto es true.

api-idee-js/src/facade/js/control/Location.js

@@ -5,6 +5,7 @@ import LocationImpl from 'impl/control/Location';
 import locationTemplate from 'templates/location';
 import myhelp from 'templates/locationhelp';
 import 'assets/css/controls/location';
+import * as EventType from 'IDEE/event/eventtype';
 import { getValue } from '../i18n/language';
 import ControlBase from './Control';
 import {
@@ -68,7 +69,11 @@ class Location extends ControlBase {
     }
 
     // implementation of this control
-    const impl = new LocationImpl(tracking, highAccuracy, 60000, vendorOptions);
+    const impl = new LocationImpl({
+      tracking,
+      highAccuracy,
+      vendorOptions,
+    });
 
     // calls the super constructor
     super(Location.NAME, impl, options);
@@ -101,9 +106,10 @@ class Location extends ControlBase {
    * @api
    */
   createView(map) {
+    const lang = this.translation || {};
     const element = compileTemplate(locationTemplate, {
       vars: {
-        title: this.tooltip ?? getValue('location').title,
+        title: this.tooltip ?? lang.title,
       },
     });
 
@@ -131,6 +137,60 @@ class Location extends ControlBase {
     return element.querySelector('button#m-location-button');
   }
 
+  /**
+   * Genera un objeto clave-valor traducido con los datos actualizados.
+   * Perfecto para el InfoBox nativo de Cesium.
+   * @param {number} lon
+   * @param {number} lat
+   * @returns {Object} Diccionario mapeado con traducciones vigentes
+   */
+  getPopupProperties(lon, lat) {
+    const lang = this.translation || {};
+    const labels = lang.popup;
+
+    return {
+      [labels.title]: labels.titleValue || 'Mi ubicación',
+      [labels.longitude]: typeof lon === 'number' ? lon.toFixed(6) : lon,
+      [labels.latitude]: typeof lat === 'number' ? lat.toFixed(6) : lat,
+    };
+  }
+
+  /**
+   * Crea un contenedor DOM con una tabla estructurada y traducida.
+   * Perfecto para inyectar en Overlays de OpenLayers.
+   * @param {number} lon
+   * @param {number} lat
+   * @returns {HTMLElement} Elemento contenedor de la tabla
+   */
+  createPopupContent(lon, lat) {
+    const lang = this.translation || {};
+    const labels = lang.popup;
+
+    const container = document.createElement('div');
+    container.className = 'm-location-popup-container';
+
+    container.innerHTML = `
+      <table class="m-location-popup-table">
+        <thead>
+          <tr>
+            <th colspan="2" class="popup-title">${labels.titleValue || 'Mi ubicación'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="popup-label"><strong>${labels.longitude}</strong></td>
+            <td class="popup-value lon-value">${typeof lon === 'number' ? lon.toFixed(6) : lon}</td>
+          </tr>
+          <tr>
+            <td class="popup-label"><strong>${labels.latitude}</strong></td>
+            <td class="popup-value lat-value">${typeof lat === 'number' ? lat.toFixed(6) : lat}</td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+    return container;
+  }
+
   /**
    * Obtiene la ayuda del control
    *
@@ -139,17 +199,18 @@ class Location extends ControlBase {
    * @api
   */
   getHelp() {
-    const textHelp = getValue('location').textHelp;
+    const lang = this.translation || {};
+    const textHelp = lang.textHelp;
     return {
       title: Location.NAME,
       content: new Promise((success) => {
         const html = compileTemplate(myhelp, {
           vars: {
             urlImages: `${IDEE.config.STATIC_RESOURCES_URL}/imagenes/controles`,
             translations: {
-              help1: textHelp.text1,
-              help2: textHelp.text2,
-              help3: textHelp.text2,
+              help1: textHelp.text1 ?? '',
+              help2: textHelp.text2 ?? '',
+              help3: textHelp.text2 ?? '',
             },
           },
         });
@@ -183,6 +244,15 @@ class Location extends ControlBase {
   setTracking(tracking) {
     this.getImpl().tracking = tracking;
   }
+
+  /**
+   * @override
+   * Destroys facade implementacion of this control
+   */
+  destroy() {
+    super.destroy();
+    this.un(EventType.CHANGE);
+  }
 }
 
 /**

api-idee-js/src/facade/js/i18n/en.json

@@ -20,6 +20,12 @@
   },
   "location": {
     "title": "Get current location",
+    "popup": {
+      "title": "Location",
+      "titleValue": "Current Position",
+      "longitude": "Longitude",
+      "latitude": "Latitude"
+    },
     "textHelp": {
       "text1": "The location tool allows you to obtain the position of a device and position it on the map. Its operation is restricted to WEB pages that are published securely over the HTTPS protocol and in local environments.",
       "text2": "If used on a mobile device equipped with a GNSS system, the position will be obtained according to the device's location permissions.",
@@ -262,6 +268,8 @@
     "invalidBase64Encoding": "Invalid base64 encoding",
     "invalidJsonFormat": "Invalid JSON format",
     "removecontrol_method": "The used implementation does not have the removeControls method.",
+    "addinteraction_method": "La implementación usada no posee el método addInteraction.",
+    "removeinteraction_method": "La implementación usada no posee el método removeInteraction.",
     "setmaxextent_method": "The used implementation does not have the setMaxExtent method.",
     "flyTo_method": "The used implementation does not have the flyTo method.",
     "getbbox_method": "The used implementation does not have the getBbox method.",

api-idee-js/src/facade/js/i18n/es.json

@@ -21,6 +21,12 @@
   "location": {
     "error": "El control ubicación no acepta http. Debe usar https.",
     "title": "Obtener ubicación actual",
+    "popup": {
+      "title": "Ubicación",
+      "titleValue": "Posición actual",
+      "longitude": "Longitud",
+      "latitude": "Latitud"
+    },
     "textHelp": {
       "text1": "La herramienta de localización permite obtener la posición de un dispositivo y posicionarla en el mapa. Su funcionamiento queda restringido a páginas WEB que se publiquen de forma segura sobre el protocolo HTTPS y en entornos locales.",
       "text2": "En el caso de su utilización en un dispositivo móvil provisto de un sistema GNSS, se obtendrá la posición según los permisos de localización del dispositivo.",
@@ -263,6 +269,8 @@
     "invalidBase64Encoding": "Codificación base64 inválida",
     "invalidJsonFormat": "Formato JSON inválido",
     "removecontrol_method": "La implementación usada no posee el método removeControls.",
+    "addinteraction_method": "The used implementation does not have the addInteraction method.",
+    "removeinteraction_method": "The used implementation does not have the removeInteraction method.",
     "setmaxextent_method": "La implementación usada no posee el método setMaxExtent.",
     "flyTo_method": "La implementación usada no posee el método flyTo.",
     "getbbox_method": "La implementación usada no posee el método getBbox.",