En esta entrada vamos a mostrar un ejemplo de visualización en nuestro visor de los terremotos que han tenido lugar en España y su magnitud en los últimos 10, 30 y 365 días.
Para ello, vamos a usar el servicio WMS (Web Map Service) que el Instituto Geográfico Nacional pone a disposición en su web. Un servicio WMS permite al usuario acceder de una manera sencilla a datos georreferenciados, que suelen presentarse tanto en imágenes como en forma de “tiles” o teselas.
Lo primero es desarrollar nuestro visor en HTML. En este caso vamos a utilizar una capa base básica de OpenStreetMap, aunque podemos utilizar cualquier otra capa base, como por ejemplo alguna de Stamen (ver entrada de blog de capas base de Stamen).
<DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fopenlayers.org%2Fen%2Fv4.6.5%2Fbuild%2Fol.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<title>Últimos terremotos en España</title>
</head>
<body>
<div id="mapa"></div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20var%20vista%20%3D%20new%20ol.View(%7B%0A%20%20%20%20%20%20%20%20center%3A%20%5B-470000%2C%204500000%5D%2C%0A%20%20%20%20%20%20%20%20zoom%3A%205%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20fuenteOSM%20%3D%20new%20ol.source.OSM()%3B%0A%0A%20%20%20%20var%20capaOSM%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20source%3A%20fuenteOSM%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20mapa%20%3D%20new%20ol.Map(%7B%0A%20%20%20%20%20%20%20%20target%3A%20%22mapa%22%2C%0A%20%20%20%20%20%20%20%20layers%3A%20%5BcapaOSM%5D%2C%0A%20%20%20%20%20%20%20%20view%3A%20vista%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20escala%20%3D%20new%20ol.control.ScaleLine()%3B%0A%20%20%20%20mapa.addControl(escala)%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
Una vez tenemos el mapa base, accedemos a los servicios WMS del IGN y buscamos “Información sísmica y volcánica”. El enlace WMS es https://www.ign.es/wms-inspire/geofisica. Si accedemos al enlace nos aparece un documento XML que contiene la etiqueta <Name>. Vemos que dentro de esas etiquetas nos aparecen los nombres de las capas de los terremotos de los últimos 10, 30 y 365 días. Para acceder a estas capas definimos tres variables que utilicen la clase ol.Source.TileWMS de OpenLayers, la cual nos pide la URL y el nombre de la capa, precedido con el parámetro obligatorio “LAYERS”.
var fuenteWMS10 = new ol.source.TileWMS({
url: "https://www.ign.es/wms-inspire/geofisica",
params: { "LAYERS": "Ultimos10dias" }
});
var fuenteWMS30 = new ol.source.TileWMS({
url: "https://www.ign.es/wms-inspire/geofisica",
params: { "LAYERS": "Ultimos30dias" }
});
var fuenteWMS365 = new ol.source.TileWMS({
url: "https://www.ign.es/wms-inspire/geofisica",
params: { "LAYERS": "Ultimos365dias" }
});
Estas capas las representamos en el mapa creando tres variables con la clase ol.layer.Tile. Para evitar el solape al entrar al visor de las capas con mayor cantidad de puntos sobre las capas con menor cantidad de puntos definimos que por defecto las capas con los terremotos en los últimos 30 y 365 días no sean visibles. En el visor desplegaremos una opción para visualizarlas individualmente.
var capaWMS10 = new ol.layer.Tile({
source: fuenteWMS10
});
var capaWMS30 = new ol.layer.Tile({
visible: false,
source: fuenteWMS30
});
var capaWMS365 = new ol.layer.Tile({
visible: false,
source: fuenteWMS365
});
Para poder elegir la visualización de los últimos 10, 30 o 365 días vamos a colocar un recuadro en nuestro mapa con las tres opciones. Lo primero es darle estilo a este recuadro creando una “id” llamada “control-capas”.
#control-capas {
position: absolute;
bottom: 50px;
left: 175px;
background-color: rgba(255, 255, 255);
border: 1px solid;
padding: 10px
}
Creamos el contenedor <div> para las tres opciones de visualización de capas. Dejamos por defecto marcada la visualización de los últimos 10 días añadiendo el atributo checked.
<div id="control-capas">
<input type="radio" id="capa-10dias" name="input-capas" checked>
<span>Últimos 10 días</span>
<br>
<input type="radio" id="capa-30dias" name="input-capas" >
<span>Últimos 30 días</span>
<br>
<input type="radio" id="capa-365dias" name="input-capas">
<span>Últimos 365 días</span>
</div>
Para que estas opciones tengan funcionalidad vamos a añadir listeners. Definimos que cuando hagamos click sobre una de las opciones las otras dos no sean visibles.
var input10dias = document.getElementById("capa-10dias");
input10dias.addEventListener("click", function () {
capaWMS10.setVisible(true)
capaWMS30.setVisible(false)
capaWMS365.setVisible(false)
});
var input30dias = document.getElementById("capa-30dias");
input30dias.addEventListener("click", function () {
capaWMS10.setVisible(false)
capaWMS30.setVisible(true)
capaWMS365.setVisible(false)
});
var input365dias = document.getElementById("capa-365dias");
input365dias.addEventListener("click", function () {
capaWMS10.setVisible(false)
capaWMS30.setVisible(false)
capaWMS365.setVisible(true)
});
Para interpretar el mapa es necesario cargar la leyenda. Si accedemos a los metadatos del servicio WMS (documento XML) aparece un enlace con la imagen de la leyenda (https://www.ign.es/wms-inspire/geofisica/leyendas/Terremotos.png). Ubicamos la leyenda dentro de nuestro visor, en este caso en la esquina inferior izquierda, al lado del recuadro de opciones y encima de la escala. Para ello definimos la “id” #leyenda dentro de la etiqueta <style>.
#leyenda {
position: absolute;
bottom: 40px;
left: 5px;
padding: 10px
}
Creamos un contenedor <div> para introducir la leyenda en el visor, accediendo a ella mediante la etiqueta <img> y el enlace que nos aparecía en los metadatos.
<div id="leyenda">
<img src="https://www.ign.es/wms-inspire/geofisica/leyendas/Terremotos.png"/>
</div>
El resultado final de nuestro visor web es el siguiente.
Para finalizar, os comparto el código completo del ejemplo.
<DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fopenlayers.org%2Fen%2Fv4.6.5%2Fbuild%2Fol.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23control-capas%20%7B%0A%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20bottom%3A%2050px%3B%0A%20%20%20%20%20%20%20%20left%3A%20175px%3B%0A%20%20%20%20%20%20%20%20background-color%3A%20rgba(255%2C%20255%2C%20255)%3B%0A%20%20%20%20%20%20%20%20border%3A%201px%20solid%3B%0A%20%20%20%20%20%20%20%20padding%3A%2010px%0A%20%20%20%20%7D%0A%20%20%20%20%23leyenda%20%7B%0A%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20bottom%3A%2040px%3B%0A%20%20%20%20%20%20%20%20left%3A%205px%3B%0A%20%20%20%20%20%20%20%20padding%3A%2010px%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<title>Últimos terremotos en España</title>
</head>
<body>
<div id="mapa"></div>
<div id="control-capas">
<input type="radio" id="capa-10dias" name="input-capas" checked>
<span>Últimos 10 días</span>
<br>
<input type="radio" id="capa-30dias" name="input-capas" >
<span>Últimos 30 días</span>
<br>
<input type="radio" id="capa-365dias" name="input-capas">
<span>Últimos 365 días</span>
</div>
<div id="leyenda">
<img src="https://www.ign.es/wms-inspire/geofisica/leyendas/Terremotos.png"/>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20var%20vista%20%3D%20new%20ol.View(%7B%0A%20%20%20%20%20%20%20%20center%3A%20%5B-470000%2C%204500000%5D%2C%0A%20%20%20%20%20%20%20%20zoom%3A%205%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20fuenteOSM%20%3D%20new%20ol.source.OSM()%3B%0A%20%20%20%20var%20fuenteWMS10%20%3D%20new%20ol.source.TileWMS(%7B%0A%20%20%20%20%20%20%20%20url%3A%20%22https%3A%2F%2Fwww.ign.es%2Fwms-inspire%2Fgeofisica%22%2C%0A%20%20%20%20%20%20%20%20params%3A%20%7B%20%22LAYERS%22%3A%20%22Ultimos10dias%22%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20fuenteWMS30%20%3D%20new%20ol.source.TileWMS(%7B%0A%20%20%20%20%20%20%20%20url%3A%20%22https%3A%2F%2Fwww.ign.es%2Fwms-inspire%2Fgeofisica%22%2C%0A%20%20%20%20%20%20%20%20params%3A%20%7B%20%22LAYERS%22%3A%20%22Ultimos30dias%22%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20fuenteWMS365%20%3D%20new%20ol.source.TileWMS(%7B%0A%20%20%20%20%20%20%20%20url%3A%20%22https%3A%2F%2Fwww.ign.es%2Fwms-inspire%2Fgeofisica%22%2C%0A%20%20%20%20%20%20%20%20params%3A%20%7B%20%22LAYERS%22%3A%20%22Ultimos365dias%22%20%7D%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20capaOSM%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20source%3A%20fuenteOSM%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20capaWMS10%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20source%3AfuenteWMS10%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20capaWMS30%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20visible%3A%20false%2C%0A%20%20%20%20%20%20%20%20source%3AfuenteWMS30%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20capaWMS365%20%3D%20new%20ol.layer.Tile(%7B%0A%20%20%20%20%20%20%20%20visible%3A%20false%2C%0A%20%20%20%20%20%20%20%20source%3AfuenteWMS365%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20mapa%20%3D%20new%20ol.Map(%7B%0A%20%20%20%20%20%20%20%20target%3A%20%22mapa%22%2C%0A%20%20%20%20%20%20%20%20layers%3A%20%5BcapaOSM%2C%20capaWMS10%2C%20capaWMS30%2C%20capaWMS365%5D%2C%0A%20%20%20%20%20%20%20%20view%3A%20vista%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20input10dias%20%3D%20document.getElementById(%22capa-10dias%22)%3B%0A%20%20%20%20input10dias.addEventListener(%22click%22%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20capaWMS10.setVisible(true)%0A%20%20%20%20%20%20%20%20capaWMS30.setVisible(false)%0A%20%20%20%20%20%20%20%20capaWMS365.setVisible(false)%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20input30dias%20%3D%20document.getElementById(%22capa-30dias%22)%3B%0A%20%20%20%20input30dias.addEventListener(%22click%22%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20capaWMS10.setVisible(false)%0A%20%20%20%20%20%20%20%20capaWMS30.setVisible(true)%0A%20%20%20%20%20%20%20%20capaWMS365.setVisible(false)%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20input365dias%20%3D%20document.getElementById(%22capa-365dias%22)%3B%0A%20%20%20%20input365dias.addEventListener(%22click%22%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20capaWMS10.setVisible(false)%0A%20%20%20%20%20%20%20%20capaWMS30.setVisible(false)%0A%20%20%20%20%20%20%20%20capaWMS365.setVisible(true)%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20escala%20%3D%20new%20ol.control.ScaleLine()%3B%0A%20%20%20%20mapa.addControl(escala)%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
(3 votos, promedio: 5,00 de 5)
Cargando...
Formación de calidad impartida por profesionales
Deja tu comentario