Opciones

Opciones de personalización

Mapea implementa por defecto una serie de propiedades que permiten personalizar el mapa a visualizar:

• En tiempo de construcción: zoom incial, bounding box, extensión máxima, proyección, centro, etiqueta, resoluciones.
• Por variables de configuración: Número de niveles de zoom.
• Mediante métodos: Color de fondo del mapa, permitir movimiento y zoom del ratón.

En tiempo de construcción

Las opciones que pueden especificarse durante la definición del mapa son las siguientes:

Parámetro	Descripción
zoom	nivel de zoom inicial del mapa
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

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

var mapajs = M.map({
  container: "map",
  controls: ["mouse", "layerswitcher"],
  center: {
    x: 311000,
    y: 4040000,
    draw: true
  },
  projection: "EPSG:25830*m",
  zoom: 5
});

zoom

mapajs.setZoom(5);

var zoom = mapajs.getZoom();

bbox

mapajs.setBbox([323020,4126873,374759,4152013]);

var bbox = mapajs.getBbox();

maxExtent

mapajs.setMaxExtent ([323020,4126873,374759,4152013]);

var maxExtent = mapajs.getMaxExtent();

projection

mapajs.setProjection ("EPSG:4326*d");

var projection = mapajs.getProjection();

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.

center

mapajs.setCenter({x:211000,
		          y:4040000,
                  draw: true});

💡 El parámetro draw indica si queremos añadir una chincheta en el punto central establecido

var center mapajs.getCenter();

label

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

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

Se puede ver un ejemplo funcional con algunos de estos parámetros en jsFiddle

Variables de configuración

(v6.2.0+) Instanciada antes de crear el mapa, la variable M.config.ZOOM_LEVELS permite definir el número de niveles de zoom que tendrá.

M.config.ZOOM_LEVELS=5;
let mapajs = new M.map({...});

Otros métodos

• (v6.2.0+) Por defecto, el fondo del mapa no cubierto por capas se presenta en forma de cuadrícula gris y blanca, pero puede establecerse el color del fondo del mapa especificando el nombre o el código hexadecimal del color deseado:

mapajs.setBGColorContainer('black');
mapajs.setBGColorContainer('#4287f5');

• (v6.2.0+) También es posible activar o desactivar tanto el desplazamiento del mapa (drag) como el uso de la rueda del ratón para realizar zoom mediante los siguientes métodos:

// Desactivar zoom mediante rueda de ratón  
mapajs.enableMouseWheel(false);
// Desactivar arrastrar el mapa con el ratón
mapajs.enableDrag(false); 

• (v6.3.0+) Método para establecer el nivel de zoom al más cercano a una escala determinada (ya que cada nivel de zoom tiene una escala asociada definida en la construcción del mapa):

const mapajs = new M.map({
  container: "map",
  controls: ['layerswitcher','scale']
});
// Solo cuando el mapa este definido por completo internamente 
mapajs.on(M.evt.COMPLETED, () => mapajs.setToClosestScale(200000));