2.2. Controles básicos y opciones

Controles básicos

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 = M.map({
     container:"map",
     controls:['scale','location','backgroundlayers']
});

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

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

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

Controles Básicos

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

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

          const map = M.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 = M.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 = M.map({
              container: 'mapjs',
              controls: ['scale*true'],
          });
  

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

          const map = M.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 = M.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 = M.map({
              container: 'mapjs',
              controls: ['rotate'],
          });
  

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

          const map = M.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 = M.map({
              container: 'mapjs',
              controls: ['getfeatureinfo'],
          });
  

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

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

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

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

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

  const map = M.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',
  }],
});

Dependencias

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.cnig.es/api-core/assets/css/apiign.ol.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script>

Activación/desactivación por código

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

Opciones de personalización

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

Parámetro	Descripción
zoom	Nivel de zoom del mapa.
maxZoom	Zoom máximo aplicable.
minZoom	Zoom mínimo aplicable.
bbox	Encuadre de visualización del mapa.
maxExtent	Máxima extensión permitida; a diferencia del bbox, no se dibujará el mapa fuera de los límites establecidos.
projection	Proyección de visualización del mapa.
center	Punto central del mapa.
label	Popup con el texto indicado en una coordenada especificada o, en su defecto, en el centro (center) establecido del mapa.
resolutions	Array con las resoluciones asociadas a cada nivel de zoom del mapa.
viewExtent	Array con las coordenadas para restringir hasta donde nos podemos desplazar en el mapa.
zoomConstrains	Booleano para permitir o no niveles de zooms intermedios.

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

En la construcción del objeto Mapa

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

label

// 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();

resolutions

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 = M.map({
     container: 'map',
     resolutions: [490.4640841686878, 296.4735539465016, 179.21101876124024],
     projection : 'EPSG:25830*m'
});

projection

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

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

M.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"]

Getters y Setters

Parámetro	Getters y Setters
zoom	mapajs.setZoom(9); const zoom = mapajs.getZoom();
maxZoom	mapajs.setZoom(9); const zoom = mapajs.getZoom();
minZoom	mapajs.setZoom(9); const zoom = mapajs.getZoom();
bbox	mapajs.setBbox([323020,4126873,374759,4152013]); const bbox = mapajs.getBbox();
maxExtent	mapajs.setMaxExtent ([323020,4126873,374759,4152013]); const maxExtent = mapajs.getMaxExtent();
projection	⚠️ Hay que tener en cuenta que si se cambia el sistema de referencia del mapa, las coordenadas que usemos a partir de ese momento deben ser las del nuevo sistema. mapajs.setProjection ("EPSG:4326*d"); const projection = mapajs.getProjection();
center	💡 El parámetro draw indica si queremos añadir una chincheta en el punto central establecido mapajs.setCenter({x:211000, y:4040000, draw: true}); const center mapajs.getCenter();
zoomConstrains	mapajs.setZoomConstrains(true); const zoom = mapajs.getZoomConstrains();