2.5. Eventos

Los eventos son disparadores que permiten al programador conocer cuándo ha ocurrido un suceso determinado, de manera que pueda actuar en consecuencia. Existen un conjunto de eventos disponibles para su uso, así como mecanismos para gestionarlos.

Evento	Descripción
ADDED_TO_MAP	Evento usado principalmente para saber cuando un elemento ha sido añadido al mapa.

Ejemplo

const capa = new M.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});

capa.getImpl().on(M.evt.ADDED_TO_MAP, (impl) => {
  M.dialog.info(impl.legend);
});

mapjs.addLayers([capa]);

Evento	Descripción
ADDED_TO_PANEL	Evento usado principalmente para saber cuando un control ha sido añadido al panel.

Ejemplo

const toc = new M.plugin.TOC({
  postition: 'TL',
  collapsible: true,
  collapsed: true,
});
mapjs.addPlugin(toc);
toc.control.on(M.evt.ADDED_TO_PANEL, (control) => {
    M.dialog.info(control.name)
});

Evento	Descripción
ADDED_LAYER	Evento usado principalmente para saber cuando al mapa se le añaden capas.

Ejemplo

const capa = new M.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});
mapjs.on(M.evt.ADDED_LAYER, (capas) => {
  M.dialog.info(capas[0].name);
});
mapjs.addLayers([capa]);

Evento	Descripción
ADDED_KML	Evento usado principalmente para saber cuando se le añaden capas en formato KML al mapa.
ADDED_WMS	Evento usado principalmente para saber cuando se le añaden capas en formato WMS al mapa.
ADDED_WFS	Evento usado principalmente para saber cuando se le añaden capas en formato WFS al mapa.
ADDED_VECTOR_TILE	Evento usado principalmente para saber cuando se le añaden capas en formato MVT al mapa.
ADDED_MBTILES	Evento usado principalmente para saber cuando se le añaden capas en formato MBTiles al mapa.
ADDED_MBTILES_VECTOR	Evento usado principalmente para saber cuando se le añaden capas en formato MBTilesVector al mapa.
ADDED_XYZ	Evento usado principalmente para saber cuando se le añaden capas en formato XYZ al mapa.
ADDED_TMS	Evento usado principalmente para saber cuando se le añaden capas en formato TMS al mapa.
ADDED_WMTS	Evento usado principalmente para saber cuando se le añaden capas en formato WTMS al mapa.
ADDED_OGCAPIFEATURES	Evento usado principalmente para saber cuando se le añaden capas en formato OGCAPIFeatures al mapa.
ADDED_QUICK_LAYERS	Evento usado principalmente para saber cuando se le añaden capas en formato QUICK al mapa.

Ejemplo

const capa = new M.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});
mapjs.on(M.evt.ADDED_WMS, (capas) => {
  M.dialog.info(capas[0].name);
});
mapjs.addLayers([capa]);

Evento	Descripción
M.evt.REMOVED_LAYER	Evento usado principalmente para saber cuando se eliminan capas del mapa.

Ejemplo

const capa = new M.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});
mapjs.on(M.evt.REMOVED_LAYER, (capas) => {
  M.dialog.info(capas[0].name);
});
mapjs.addLayers([capa]);
mapjs.removeLayers([capa]);

Evento	Descripción
M.evt.REMOVED_FROM_MAP	Evento usado principalmente para saber cuando elemento se ha eliminado del mapa.

Ejemplo

const mvt = new M.layer.MVT('MVT*https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf*vectortile');
mapjs.addLayers([mvt]);
mvt.on(M.evt.REMOVED_FROM_MAP, (capas) => {
  M.dialog.info(capas[0].name);
});
mapjs.removeLayers([mvt]);

Evento	Descripción
M.evt.ACTIVATED	Evento usado principalmente para saber cuando un elemento se ha activado.
M.evt.DEACTIVATED	Evento usado principalmente para saber cuando un elemento se ha desactivado.

Ejemplo

const measurebar = new M.plugin.MeasureBar({
  postition: 'TL',
  collapsible: true,
  collapsed: true,
});
mapjs.addPlugin(measurebar);
measurebar.controls_[0].on(M.evt.ACTIVATED, () => {
  M.dialog.info('Activado')  
})

Evento	Descripción
M.evt.SHOW	Evento usado principalmente para saber cuando un elemento se ha mostrado.
M.evt.HIDE	Evento usado principalmente para saber cuando un elemento se ha ocultado.

Ejemplo

const measurebar = new M.plugin.MeasureBar({
  postition: 'TL',
  collapsible: true,
  collapsed: true,
});
mapjs.addPlugin(measurebar);
measurebar.panel_.on(M.evt.SHOW, () => {
    M.dialog.info('Panel abierto');
});
measurebar.panel_.on(M.evt.HIDE, () => {
    M.dialog.info('Panel cerrado');
})

Evento	Descripción
M.evt.DESTROY	Evento usado principalmente para saber cuando un elemento es destruido.

Ejemplo

const featureTabOpts = {
  'icon': 'g-cartografia-pin',
  'title': 'Título',
  'content': 'Información'
};
popup = new M.Popup();
popup.addTab(featureTabOpts);
mapjs.addPopup(popup, [240829,4143088]);
popup.on(M.evt.DESTROY, () => {
  M.dialog.info('Popup eliminado');  
})
popup.destroy();

Evento	Descripción
M.evt.SELECT_FEATURES	Evento usado principalmente para saber cuando se ha seleccionado un objeto geográfico.
M.evt.UNSELECT_FEATURES	Evento usado principalmente para saber cuando se ha perdido la selección de un objeto geográfico.
M.evt.HOVER_FEATURES	Evento usado principalmente para saber cuando el cursor pasa por encima de un objeto geográfico.
M.evt.LEAVE_FEATURES	Evento usado principalmente para saber cuando el cursor abandona un objeto geográfico.

Ejemplo

const capaKML = new M.layer.KML("KML*Arboleda*http://mapea4-sigc.juntadeandalucia.es/files/kml/*arbda_sing_se.kml*true");
capaKML.on(M.evt.SELECT_FEATURES, (features) => { 
  console.log("Se han seleccionado los objetos geográficos: ", features); 
});

Evento	Descripción
M.evt.LOAD	Evento usado principalmente para saber cuando se ha cargado un elemento.

Ejemplo

capaWFS.on(M.evt.LOAD, (features) => {
  console.log("se ha cargado la capa WFS en el mapa con los objetos geográficos:", features);
});

Evento	Descripción
M.evt.COMPLETED	Evento usado principalmente para saber cuando se ha completado una acción.

Ejemplo

mapjs.on(M.evt.COMPLETED, () => {
    M.dialog.info('Mapa Cargado');
});

Evento	Descripción
M.evt.CHANGE	Evento usado principalmente para saber cuando un elemento ha cambiado.

Ejemplo

const estilo = new M.style.Point({
  radius: 5,
  fill: {  
    color: 'red',
  },
});
estilo.on(M.evt.CHANGE, () => {
  M.dialog.info('Las propiedades del estilo han cambiado');
});
estilo.set('fill.color', 'blue')

Evento	Descripción
M.evt.CHANGE_PROJ	Evento usado principalmente para saber cuando se ha cambiado la proyección del mapa.

Ejemplo

mapjs.on(M.evt.CHANGE_PROJ, () => {
  M.dialog.info('La proyección ha cambiado');
});
mapjs.setProjection('EPSG:4326*d');

Evento	Descripción
M.evt.CHANGE_STYLE	Evento usado principalmente para saber cuando se ha cambiado el estilo a una capa u objeto geográfico..

Ejemplo

capa.on(M.evt.CHANGE_STYLE, () => {
  M.dialog.info('Nuevo estilo aplicado');
});
capa.setStyle(nuevoEstilo);

Evento	Descripción
M.evt.CHANGE_ZOOM	Evento usado principalmente para saber cuando se ha cambiado el zoom al mapa.

Ejemplo

mapjs.on(M.evt.CHANGE_ZOOM, (m) => {
  M.dialog.info(`Zoom actual: ${m.getZoom()}`);
});
mapjs.setZoom(9);

Evento	Descripción
M.evt.CLICK	Evento usado principalmente para saber cuando se hace click en el mapa.

Ejemplo

mapjs.on(M.evt.CLICK, (m) => {
  M.dialog.info('Se ha pulsado en el mapa');
})

Evento	Descripción
M.evt.MOVE	Evento usado principalmente para saber cuando se mueve el mapa.

Ejemplo

mapjs.on(M.evt.MOVE, (m) => {
  console.log('Mapa en movimiento');
})

Evento	Descripción
M.evt.MOVE_MOUSE	Evento usado principalmente para saber cuando se mueve el ratón.

Ejemplo

mapjs.on(M.evt.MOVE_MOUSE, (m) => {
  console.log('Ratón en movimiento');
});

FeatureHandler

El objeto mapa posee un gestor de eventos llamado FeatureHandler desde el que se puede activar y desactivar la selección de objetos geográficos específicos, así como añadir o eliminar una capa vectorial de la gestión de eventos vectoriales:

// Array de objetos geográficos a seleccionar, capa que los contiene y evt opcional
mapajs.getFeatureHandler().selectFeatures([feature],layer,{});
// Array de objetos geográficos a deseleccionar, capa que los contiene y evt opcional
mapajs.getFeatureHandler().unselectFeatures([feature],layer,{});
// Eliminar una capa del gestor implica no poder usar los metodos
// anteriores sobre sus objetos geográficos
mapajs.getFeatureHandler().removeLayer(layer);

Esto simplemente marca los objetos geográficos como seleccionados/deseleccionados, por lo que cualquier comportamiento adicional asociado a la selección que se desee, tales como cambio de estilo, apertura de bocadillo, etc. deben ser gestionados adicionalmente.

Ejemplo

// Creamos capa GeoJSON
const geojson = new M.layer.GeoJSON({
  name: "Provincias GeoJSON",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json"
});

let selectedFeature;

// Añadimos evento SELECT_FEATURE a la capa 
geojson.on(M.evt.SELECT_FEATURES, function(features,evt) {
  console.log('click en el feature' + features[0].getId()); // mostrará el ID del objeto espacial
  console.log('Coordenadas: ' + evt.coord); // y las coordenadas
})

// Añadimos la capa al mapa
mapajs.addLayers([geojson]);

// creamos una función que será llamada desde un botón HTML en la que se hará uso de 
// getFeatureHandler().selectFeatures para seleccionar un objeto espacial
// como evento le mandará unas coordenadas
window.seleccionar = (evt) => {
  selectedFeature = geojson.getFeatures()[0];
  mapajs.getFeatureHandler().selectFeatures([selectedFeature], geojson, {coord: [-253056, 4461347]});
};


// Botón HTML 
<button onclick="seleccionar();" class="floatbtn">
Seleccionar
</button>