La API dispone de una serie de controles básicos, que se especifican mediante el parámetro 'controls' en el constructor del mapa, o llamando al método .addControls del mismo. En ambos casos pueden especificarse como cadenas o como objetos:

mapajs = IDEE.map({
     container:"map",
     controls:['scale','location','backgroundlayers']
});

// Añadir controles
mapajs.addControls(['scale','location','backgroundlayers']);

mapajs.addControls([
    new IDEE.control.Rotate(),
    new IDEE.control.Panzoombar()]);

// Obtener array de controles del mapa
const controles = mapajs.getControls();
// Filtrar controles por nombre
const controlTOC = mapajs.getControls({name:'layerswitcher'})[0];

// Eliminar controles
const scale = mapjs.getControls('scale')[0];
mapajs.removeControls(scale)

Estos son los controles básicos que incluye la API (http://componentes.idee.es/api-idee/api/actions/controls):

• panzoombar: Añade una barra de desplazamiento (zoom) para acercarse/alejarse del mapa. Este control no tiene parámetros.

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['panzoombar'],
          });
  

• panzoom: Añade botones de '+' y '-' para acercarse y alejarse del mapa. Este control no tiene parámetros.

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['panzoom'],
          });
  

• scale: Añade la escala numérica. Parámetro exactScale: Indica si se quiere obtener la escala exacta (true) o redondeada (false).

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['scale*true'],
          });
  

• scaleline: Añade la escala gráfica. Este control no tiene parámetros.

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['scaleline'],
          });
  

• location: Añade un botón de centrado del mapa en la ubicación del usuario. Parámetros: se le puede indicar si se desea posicionamiento continuo (tracking, por defecto true) y alta precisión (highAccuracy, por defecto false). El orden de los parámetros es: controls: ['location*tracking*highAccuracy']

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['location*true*false'],
          });
  

• rotate: Añade la funcionalidad girar el mapa para que el Norte quede situado arriba. Este control no tiene parámetros.

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['rotate'],
          });
  

• backgroundlayers: Añade selector de capas base. Este control no tiene parámetros.

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['backgroundlayers'],
          });
  

• getfeatureinfo: Añade la herramienta de consulta de información sobre capas WMS y WMTS a través de su operación GetFeatureInfo. Por defecto, espera HTML como formato de respuesta. Otros formatos soportados son 'gml' y 'plain'. Parámetro activated: Indica si está activado o desactivado. Por defecto, true. Importante: Este parámetro es recomendable dejarlo con valor true ya que al ser un control que no posee interfaz un usuario no tendría posibilidad de activarlo en caso de tener como valor false.

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['getfeatureinfo'],
          });
  

  Admite también un área de influencia en píxeles de modo opcional:

  mapajs.addControls(new IDEE.control.GetFeatureInfo(
   'gml', 
   {buffer: 1000}));

• attributions: Habilita la visualización de atribuciones de las capas del mapa.

          const map = IDEE.map({
              container: 'mapjs',
              controls: ['attributions'],
          });

  Se puede añadir una atribución por defecto.

  const map = IDEE.map({
              container: 'mapjs',
              controls: ['attributions*<p>Atribución por defecto</p>'],
          });

Admite la creación por medio del método mapa.createAttribution, esto permite crear multitud de atribuciones por defecto, definir la posición, entre otras opciones reflejadas en el JSDoc:

mapa.createAttribution({
  collectionsAttributions: ['<p>Prueba Attribution String 1</p>', {
    name: 'Prueba Nombre',
    description: 'Prueba Description',
    url: 'https://www.ign.es',
  }],
});

Para que los controles funcionen correctamente es necesario importar las siguientes dependencias en el documento html:

• apiign.ol.min.css
• apiign.ol.min.js
• configuration.js

<link href="https://componentes.idee.es/api-idee/assets/css/apiign.ol.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://componentes.idee.es/api-idee/js/apiign.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.idee.es/api-idee/js/configuration.js"></script>

Los controles también pueden activarse o desactivarse por código:

const ctrlLocation = mapajs.getControls({name:'location'})[0];
ctrlLocation.activate(); //para activarlo
ctrlLocation.deactivate(); //para desactivarlo

Opciones de personalización

El API implementa por defecto una serie de propiedades que permiten personalizar el mapa a visualizar. Estas opciones son:

Cada uno de estos parámetros puede especificarse directamente en el constructor o bien a través de su método setter correspondiente, al igual que puede obtenerse su valor actual con su método getter

const mapajs = IDEE.map({
  container: "map",
  center: {
    x: 311000,
    y: 4040000,
    draw: true
  },
  projection: "EPSG:25830*m",
  zoom: 9
});

// añade un label en las coordenadas indicadas
mapajs.addLabel("texto <b>con html</b>",[211000, 4040000]);

//sin especificar coordenada, se añade en el centro establecido
mapajs.addLabel("texto <b>con html</b>"); 

//para eliminarla
mapajs.removeLabel();

const label = mapajs.getLabel();

Las resoluciones del mapa establecen las escalas a las que se visualizan las capas en cada nivel de zoom. Si fijamos manualmente las resoluciones, hay que tener en cuenta dos factores:

• Estaremos indirectamente estableciendo el número de niveles de zoom.
• Si usamos capas cacheadas compatibles con resoluciones específicas, pueden no mostrarse si no casan con las que establezcamos

El siguiente ejemplo establece resoluciones explícitas para el mapa:

// Dos resoluciones = dos niveles de zoom
mapajs.setResolutions([490.4640841686878, 296.4735539465016]);  

// Podemos consultar las resoluciones del mapa
console.log(mapajs.getResolutions());

// También podemos definir las resoluciones en el constructor
const mapajs = IDEE.map({
     container: 'map',
     resolutions: [490.4640841686878, 296.4735539465016, 179.21101876124024],
     projection : 'EPSG:25830*m'
});

Para ver las proyecciones disponibles podemos hacer uso de IDEE.impl.ol.js.projections.getSupportedProjs(), estas proyecciones se definen internamiente en proj4.

Para añadir nuevas proyecciones podemos usar IDEE.impl.ol.js.projections.addProjections, por ejemplo:

IDEE.impl.ol.js.projections.addProjections([{
    "def": "+proj=utm +zone=29 +ellps=WGS84 +datum=WGS84 +units=m +no_defs",
    "extent": [
        166021.4431,
        0,
        833978.5569,
        9329005.1825
    ],
    "codes": [
        "EPSG:1234",
        "urn:ogc:def:crs:EPSG::32629",
        "http://www.opengis.net/gml/srs/epsg.xml#32629"
    ],
    "units": "m",
    "datum": "WGS 84",
    "proj": "UTM 29 N"
}])

Para ver si se ha añadido correctamente, proj4.defs["EPSG:1234"]

Parámetros para la vista del mapa de la librería base. Parámetros disponibles:

• constrainRotation: Controla si la rotación del mapa está restringida.
• enableRotation: Indica si la rotación del mapa está habilitada. Si se establece en false, el mapa no se puede rotar.
• extent: Define la extensión geográfica (coordenadas [minX, minY, maxX, maxY]) en la que el mapa puede moverse.
• smoothExtentConstraint: Determina si las restricciones de la extensión se aplican de manera suave, permitiendo un ligero movimiento más allá del límite antes de rebotar al área permitida.
• maxZoom: Especifica el nivel máximo de zoom permitido en el mapa.
• minZoom: Especifica el nivel mínimo de zoom permitido en el mapa.
• multiWorld: Permite que el mapa se repita horizontalmente en proyecciones que lo soporten, como Mercator. Si está en false, el mapa no se "repetirá".
• smoothResolutionConstraint: Controla si el cambio entre niveles de zoom se realiza suavemente (permitiendo interpolación) o bruscamente (saltando entre niveles fijos).
• showFullExtent: Indica si el mapa debe mostrar la extensión completa definida en el parámetro extent.
• rotation: Especifica el ángulo inicial de rotación del mapa (en radianes) al cargarlo.
• zoomFactor: Define el factor de cambio entre niveles de zoom.

const map = new IDEE.map({
  container: "map"
}, {}, {
  rotation: 0.5
});

• Añadir controles básicos al mapa y su activación por código
• Control personalizado
• Evento activar
• Crear panel de un único control
• Crear panel de un más de un control
• Añadir una etiqueta al mapa