{"id":1018,"date":"2022-08-03T22:09:53","date_gmt":"2022-08-03T21:09:53","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1018"},"modified":"2023-11-19T15:32:38","modified_gmt":"2023-11-19T14:32:38","slug":"todas-las-estaciones-de-aemet-en-tu-movil-con-un-click","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/1018\/todas-las-estaciones-de-aemet-en-tu-movil-con-un-click\/","title":{"rendered":"Todas las estaciones de AEMET en tu m\u00f3vil con un click"},"content":{"rendered":"\n<p>La Agencia Estatal de Meteorolog\u00eda espa\u00f1ola (AEMET) cuenta con una <a href=\"https:\/\/opendata.aemet.es\/dist\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">API de datos abiertos<\/a> con la que podemos acceder a la mayor\u00eda de datos que publican en su web.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/aemetAPI.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"991\" height=\"616\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/aemetAPI.png\" alt=\"\" class=\"wp-image-1019\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/aemetAPI.png 991w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/aemetAPI-300x186.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/aemetAPI-768x477.png 768w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/aemetAPI-676x420.png 676w\" sizes=\"auto, (max-width: 991px) 100vw, 991px\" \/><\/a><figcaption>API de AEMET OpenData<\/figcaption><\/figure>\n<\/div>\n\n\n<p>De esta forma, cualquier usuario puede crear apps muy sencillas s\u00f3lo con la informaci\u00f3n que necesita y sin tener que acceder a su web.<\/p>\n\n\n\n<p>En mi caso, quiero mostrar de forma intuitiva los datos de las estaciones en un mapa web que pueda ver desde cualquier dispositivo con internet como mi m\u00f3vil. Aqu\u00ed un anticipo para que sigas leyendo:<\/p>\n\n\n\n<html>\n<head>\n    <meta charset=\"utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n       integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n       crossorigin=\"\"\/>\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n       integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n       crossorigin=\"\"><\/script>\n<\/head>\n<body>\n<iframe loading=\"lazy\" width=\"100%\" height=\"300px\" src=\"https:\/\/theroamingworkshop.cloud\/leafMET\" title=\"LeafMET demo\"><\/iframe> \n<\/body>\n<\/html>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Contenido<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\n}\n}\n\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"define-base-map\">Definir un mapa base<\/h2>\n\n\n\n<p>Como no pod\u00eda ser de otra forma, vamos a usar todo el potencial de <a rel=\"noreferrer noopener\" href=\"https:\/\/theroamingworkshop.cloud\/b\/?p=862\" target=\"_blank\">Leaflet JS<\/a> y los mapas abiertos del <a href=\"https:\/\/centrodedescargas.cnig.es\/CentroDescargas\/index.jsp#\" target=\"_blank\" rel=\"noreferrer noopener\">Centro de Decargas del IGN<\/a>.<\/p>\n\n\n\n<p>En este caso, s\u00f3lo necesitamos un mapa muy sencillo, por lo que:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Creamos nuestro documento .html con su estructura b\u00e1sica:<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE HTML&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n\n&lt;style&gt;\n\n&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;\/body&gt;\n\n&lt;script&gt;\n\n&lt;\/script&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>A\u00f1adimos los enlaces a las librer\u00edas de Leaflet dentro de las etiquetas &lt;head&gt;:<\/li><\/ol>\n\n\n\n<p>Tambi\u00e9n a\u00f1ado las propiedades &lt;meta&gt; charset(1) y viewport(2) para (1)interpretar correctamente los caracteres especiales como tildes y, (2) ajustar correctamente la ventana a dispositivos m\u00f3viles.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"&gt;\n\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n       integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n       crossorigin=\"\"\/&gt;\n    &lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n       integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n       crossorigin=\"\"&gt;&lt;\/script&gt;\n\n&lt;style&gt;\n\n&lt;\/style&gt;\n\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>Definimos la ubicaci\u00f3n del mapa de Leaflet dentro del &lt;body&gt;<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body style=\"border:0;margin:0;\"&gt;\n    \n    &lt;div id=\"mapa\" style=\"width:100vw; height:100vh;z-index:0\"&gt;&lt;\/div&gt;\n\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p>Como ver\u00e1s, a\u00f1ado <code>border:0<\/code> y <code>margin:0<\/code> al estilo del &lt;body&gt;. Esto ajusta el mapa perfectamente a la ventana, sin ning\u00fan tipo de espacio en blanco.<\/p>\n\n\n\n<p><code>Height:100vh<\/code> y <code>width:100vw<\/code> ajustar\u00e1n el mapa al 100% del tama\u00f1o de la ventana (<strong>v<\/strong>iew <strong>h<\/strong>eight y <strong>v<\/strong>iew <strong>w<\/strong>idth). El <code>z-index<\/code> nos servir\u00e1 para ordenar los objetos y que no se tapen entre ellos.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>Ya podemos generar el mapa mediante javascript. Pasamos al bloque &lt;script&gt;<\/li><\/ol>\n\n\n\n<p>Con <code>L.map<\/code> definimos el mapa y su vista inicial (que he centrado en Madrid).<\/p>\n\n\n\n<p>Con <code>L.tileLayer.wms<\/code> a\u00f1adimos el servicio WMS del IGN para obtener un mapa base \"online\". Puedes encontrar las URL completas de cada servicio consultando los <a href=\"https:\/\/centrodedescargas.cnig.es\/CentroDescargas\/linkUnMD\" target=\"_blank\" rel=\"noreferrer noopener\">metadatos<\/a> que acompa\u00f1an a cada producto.<\/p>\n\n\n\n<p>Adem\u00e1s, es habitual que los WMS cuenten con varias capas, por lo que debemos definir una. Podemos obtener el listado de capas usando la funci\u00f3n GetCapabilities de los wms. En nuestro caso usamos la <code>&lt;Layer&gt;<\/code> con <code>&lt;Name&gt;<\/code> \"IGNBaseTodo-gris\" que identificamos aqu\u00ed:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.ign.es\/wms-inspire\/ign-base?service=WMS&amp;request=GetCapabilities\">https:\/\/www.ign.es\/wms-inspire\/ign-base?service=WMS&amp;request=GetCapabilities<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nvar o = L.map('mapa').setView(&#91;40.5, -3.5], 8);\n\nvar IGN = window.L.tileLayer.wms(\"https:\/\/www.ign.es\/wms-inspire\/ign-base\", {\n    \t\tlayers: 'IGNBaseTodo-gris',\n    \t\tformat: 'image\/png',\n    \t\ttransparent: true,\n    \t\tattribution: \"BCN IGN \u00a9 2022\"\n\t\t});\nIGN.addTo(o);\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Uniendo todo esto ya tendremos un mapa b\u00e1sico:<\/p>\n\n\n\n<!DOCTYPE HTML>\n<html>\n<head>\n    <meta charset=\"utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n       integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n       crossorigin=\"\"\/>\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n       integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n       crossorigin=\"\"><\/script>\n<style>\n<\/style>\n<\/head>\n<body style=\"border:0;margin:0;\">\n    \n    <div id=\"mapa1\" style=\"width:100%; height:400px;z-index:0\"><\/div>\n<\/body>\n<script>\nvar m = L.map('mapa1').setView([40.5, -3.5], 8);\nvar IGNg = window.L.tileLayer.wms(\"https:\/\/www.ign.es\/wms-inspire\/ign-base\", {\n    \t\tlayers: 'IGNBaseTodo-gris',\n    \t\tformat: 'image\/png',\n    \t\ttransparent: true,\n    \t\tattribution: \"BCN IGN \u00a9 2022\"\n\t\t});\nIGNg.addTo(m);\n<\/script>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"app-leafMET-js\">Aplicaci\u00f3n leafMET.js<\/h2>\n\n\n\n<p>Ahora a\u00f1adimos el plugin de descarga y representaci\u00f3n de datos de AEMET <a href=\"https:\/\/github.com\/TheRoam\/leafMET\" target=\"_blank\" rel=\"noreferrer noopener\">leafMET<\/a> que encontrar\u00e1s en mi github.<\/p>\n\n\n\n<p>Podemos descargar el fichero leafMET.js y a\u00f1adirlo como script local, o podemos enlazarlo directamente desde esta web. Dentro de las etiquetas &lt;head&gt; a\u00f1adimos lo siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"application\/javascript\" src=\"https:\/\/theroamingworkshop.cloud\/leafMET\/leafMET.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"html-short-cut\">Acceso directo .html<\/h2>\n\n\n\n<p>Ahora, para ver la aplicaci\u00f3n con un s\u00f3lo click desde el m\u00f3vil, debemos copiar el contenido de leafMET.js dentro de las etiquetas &lt;script&gt; del documento .html<\/p>\n\n\n\n<p>As\u00ed, tendremos un \u00fanico archivo con todo lo necesario para correr nuestra webapp. He a\u00f1adido las etiquetas &lt;title&gt; y \"icon\" en &lt;head&gt; para mostrar un t\u00edtulo de p\u00e1gina y que el acceso directo herede el icono que definamos.<\/p>\n\n\n\n<p>Deber\u00eda quedar algo as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE HTML&gt;\n&lt;html lang=\"en\"&gt;\n\n&lt;head&gt;\n    &lt;title&gt;leafMET&lt;\/title&gt; \n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"&gt;\n\n    &lt;link rel=\"icon\" href=\"data:image\/svg+xml,&lt;svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22&gt;&lt;text y=%22.9em%22 font-size=%2290%22&gt;\ud83c\udf24&lt;\/text&gt;&lt;\/svg&gt;\"&gt;\n\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\"\n       integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6\/keqq\/sMZMZ19scR4PsZChSR7A==\"\n       crossorigin=\"\"\/&gt;\n    &lt;script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"\n       integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n       crossorigin=\"\"&gt;&lt;\/script&gt;\n\n    &lt;script type=\"application\/javascript\" src=\"https:\/\/theroamingworkshop.cloud\/leafMET\/leafMET.js\"&gt;&lt;\/script&gt;\n\n&lt;style&gt;\n\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body style=\"border:0;margin:0;\"&gt;\n    \n    &lt;div id=\"mapa\" style=\"width:100vw; height:100vh;z-index:0\"&gt;&lt;\/div&gt;\n\n&lt;\/body&gt;\n\n&lt;script&gt;\n\/\/Create Leaflet map and load OSM layer\nvar o = L.map('mapa').setView(&#91;40.5, -3.5], 8);\n\n        var IGN = window.L.tileLayer.wms(\"https:\/\/www.ign.es\/wms-inspire\/ign-base\", {\n    \t\tlayers: 'IGNBaseTodo-gris',\n    \t\tformat: 'image\/png',\n    \t\ttransparent: true,\n    \t\tattribution: \"BCN IGN \u00a9 2022\"\n\t\t});\nIGN.addTo(o);\n\n\nleafMET();\no.on('moveend', colocaEnLaVista);\n\nvar datosMET=null;\nvar sta=&#91;];\nvar pinta=\"cross\";\nvar ini=0;\n\nfunction leafMET(){\n\n    \/\/Create button\n    var btmet = window.document.createElement(\"BUTTON\");\n    btmet.id=\"btmet\";\n    btmet.title=\"Cargar datos meteorol\u00f3gicos\";\n    btmet.innerHTML=\"&lt;b&gt;\ud83c\udf24&lt;\/b&gt;\";\n    btmet.style.zIndex=\"1000\";\n    btmet.style.position=\"absolute\";\n    btmet.style.top=\"100px\";\n    btmet.style.left=\"10px\";\n    btmet.style.fontSize=\"16px\";\n\tbtmet.style.textAlign=\"center\";\n    btmet.style.width=\"35px\";\n    btmet.style.height=\"35px\";\n    btmet.style.background=\"Turquoise\";\n\tbtmet.style.border=\"0px solid black\";\n    btmet.style.borderRadius=\"5px\";\n    btmet.style.cursor=\"pointer\";\n    btmet.addEventListener(\"click\", pintaMET);\n    window.document.body.appendChild(btmet);\n    \/\/Create subtitle\n    var mtxt = window.document.createElement(\"P\");\n    mtxt.id=\"mtxt\";\n    mtxt.innerHTML=\"&lt;b&gt;Carga&lt;\/b&gt;\";\n    mtxt.title=\"Cargar datos meteorol\u00f3gicos\";\n    mtxt.style.zIndex=\"1000\";\n    mtxt.style.position=\"absolute\";\n    mtxt.style.top=\"130px\";\n    mtxt.style.left=\"7px\";\n    mtxt.style.fontSize=\"10px\";\n\tmtxt.style.textAlign=\"center\";\n    mtxt.style.width=\"40px\";\n    mtxt.style.height=\"15px\";\n    mtxt.style.background=\"DarkOrange\";\n\tmtxt.style.border=\"0px solid black\";\n    mtxt.style.borderRadius=\"2px\";\n    mtxt.style.cursor=\"context-menu\";\n    mtxt.style.fontFamily=\"Arial\";\n    window.document.body.appendChild(mtxt);\n    \/\/Create key\n    for (var i=1; i&lt;=6;i++){\n        var mkey = window.document.createElement(\"P\");\n        mkey.id=\"mkey\"+i;\n        mkey.innerHTML=\"&lt;b&gt;\"+i+\"&lt;\/b&gt;\";\n        mkey.style.zIndex=\"1000\";\n        mkey.style.position=\"absolute\";\n        var pos = 140+i*16;\n        pos = pos+\"px\";\n        mkey.style.top=pos;\n        mkey.style.left=\"7px\";\n        mkey.style.fontSize=\"10px\";\n\t    mkey.style.textAlign=\"center\";\n\t    mkey.style.textIndent=\"0px\";\n        mkey.style.width=\"40px\";\n        mkey.style.height=\"15px\";\n        mkey.style.background=\"DarkOrange\";\n        mkey.style.opacity=\"0.75\";\n\t    mkey.style.border=\"0px solid black\";\n        mkey.style.borderRadius=\"2px\";\n        mkey.style.cursor=\"context-menu\";\n        mkey.style.fontFamily=\"Arial\";\n        mkey.style.fontWeight=\"bold\";\n        mkey.style.color=\"black\";\n        mkey.style.display=\"none\";\n        window.document.body.appendChild(mkey);\n    }\n}\n\n\/\/Create loading message\nfunction loader(){\n    var ldmet = window.document.createElement(\"P\");\n    ldmet.id=\"ldmet\";\n    ldmet.innerHTML=\"CARGANDO DATOS METEOROL\u00d3GICOS\";\n    ldmet.style.zIndex=\"1000\";\n    ldmet.style.position=\"relative\";\n    ldmet.style.top=\"-50vh\";\n    ldmet.style.width=\"250px\";\n\tldmet.style.margin=\"auto\";\n\tldmet.style.textAlign=\"center\";\n    ldmet.style.background=\"DarkOrange\";\n    ldmet.style.fontWeight=\"bold\";\n    ldmet.style.fontSize=\"11px\";\n    ldmet.style.padding=\"4px 4px 4px 4px\";\n    ldmet.style.fontFamily=\"Arial\";\n    window.document.body.appendChild(ldmet);\n}\n\n\nfunction getAEMET(){\n    \/\/show loading message\n    loader();\n    \/\/http GET request to data\n    var data = null;\n\n    var xhr = new XMLHttpRequest();\n    var xhd = new XMLHttpRequest();\n    xhr.withCredentials = true;\n    xhd.withCredentials = true;\n\n    xhr.onload= function () {\n        var consulta= JSON.parse(this.responseText);\n        xhd.open(\"GET\", consulta.datos);\n        xhd.send();\n    }\n    xhd.onload= function () {\n        data= JSON.parse(this.responseText);\n        loadAEMET(data);\n    }\n\n    xhr.open(\"GET\", \"https:\/\/opendata.aemet.es\/opendata\/api\/observacion\/convencional\/todas?api_key=eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJyb21hbmhkZXpnb3JyaW5AZ21haWwuY29tIiwianRpIjoiZmFiMTM1N2QtNTJhMC00ZWQ1LWFkNzYtNjY5YTAzNGI4YTFlIiwiaXNzIjoiQUVNRVQiLCJpYXQiOjE1NzAxMjM2MzIsInVzZXJJZCI6ImZhYjEzNTdkLTUyYTAtNGVkNS1hZDc2LTY2OWEwMzRiOGExZSIsInJvbGUiOiIifQ.-7vQF_TJLghx3g4t3GiHzlWt52LpMChqqtfNUhW07LQ\");\n    xhr.setRequestHeader(\"cache-control\", \"no-cache\");\n    xhr.send(data);\n}\n\nfunction loadAEMET(d){\n    var obj=d.length;\n\n    \/\/loop to plot stations (s) as circles using station coordinate data\n    for (var s=0; s &lt; obj; s++){\n        sta&#91;s]=window.L.circle(&#91;d&#91;s].lat, d&#91;s].lon],{radius: 5000, weight: 0, opcaity: 0.0, fillColor: \"RoyalBlue\", fillOpacity: 0.01});\n        \/\/add name data\n        sta&#91;s].title=d&#91;s].ubi;\n        \/\/add data values (temp, wind speed and rain)\n        sta&#91;s].temp=d&#91;s].ta;\n        sta&#91;s].viento=d&#91;s].vmax;\n        sta&#91;s].lluvia=d&#91;s].prec;\n\n        var prop=\"&lt;p&gt;&lt;b&gt;\"+d&#91;s].ubi+\"&lt;\/b&gt;&lt;\/p&gt;\";\n        prop=prop+\"&lt;p&gt;\"+d&#91;s].fint+\"&lt;\/p&gt;\";\n        prop=prop+\"&lt;p&gt;&lt;b&gt;Temperatura: &lt;\/b&gt;\"+sta&#91;s].temp+\" \u00baC&lt;\/p&gt;\";\n        prop=prop+\"&lt;p&gt;&lt;b&gt;Viento: &lt;\/b&gt;\"+sta&#91;s].viento+\" km\/h&lt;\/p&gt;\";\n        prop=prop+\"&lt;p&gt;&lt;b&gt;Lluvia: &lt;\/b&gt;\"+sta&#91;s].lluvia+\" mm&lt;\/p&gt;\";\n        sta&#91;s].bindPopup(prop);\n    }\n    \/\/remove loading message\n    window.document.getElementById(\"ldmet\").style.display=\"none\";\n    \/\/update stations visible in view\n    colocaEnLaVista();\n}\n\nfunction colocaEnLaVista(){\n    \/\/Plot only stations visible in view bounds\n    var vista=o.getBounds();\n    for (var s in sta){\n    sta&#91;s].setStyle({fillOpacity: 0.01,fill: 0.01});\n        if(vista.contains(sta&#91;s].getLatLng())){\n            var cobertura=o.distance(o.getBounds().getNorthEast(),o.getBounds().getSouthEast());\n            sta&#91;s].setRadius(cobertura\/30);\n            sta&#91;s].addTo(o);\n        }else if(sta&#91;s]){\n            sta&#91;s].remove();\n        }\n    \/\/edit stations display color according to data value\n    switch(pinta){\n    case \"viento\":\n        if (sta&#91;s].viento==null || sta&#91;s].viento&lt;0){\n            sta&#91;s].setStyle({fillOpacity: 0.0,fill: 0.0, cursor: \"none\"});\n        }else if (sta&#91;s].viento&gt;=0 &amp;&amp; sta&#91;s].viento&lt;5){\n            sta&#91;s].setStyle({fillColor: \"green\"});\n        }else if (sta&#91;s].viento&gt;=5 &amp;&amp; sta&#91;s].viento&lt;10){\n            sta&#91;s].setStyle({fillColor: \"yellow\"});\n        }else if (sta&#91;s].viento&gt;=10 &amp;&amp; sta&#91;s].viento&lt;20){\n            sta&#91;s].setStyle({fillColor: \"orange\"});\n        }else if (sta&#91;s].viento&gt;=20 &amp;&amp; sta&#91;s].viento&lt;30){\n            sta&#91;s].setStyle({fillColor: \"red\"});\n        }else if (sta&#91;s].viento&gt;=30 &amp;&amp; sta&#91;s].viento&lt;500){\n            sta&#91;s].setStyle({fillColor: \"purple\"});\n        }\n    break;\n    case \"lluvia\":\n        if (sta&#91;s].lluvia==null || sta&#91;s].lluvia&lt;=0){\n            sta&#91;s].setStyle({fillOpacity: 0.0, fill: 0.0, cursor: \"none\"});\n        }else if (sta&#91;s].lluvia&gt;0 &amp;&amp; sta&#91;s].lluvia&lt;2){\n            sta&#91;s].setStyle({fillColor: \"LightCyan\"});\n        }else if (sta&#91;s].lluvia&gt;=2 &amp;&amp; sta&#91;s].lluvia&lt;5){\n            sta&#91;s].setStyle({fillColor: \"LightSkyBlue\"});\n        }else if (sta&#91;s].lluvia&gt;=5 &amp;&amp; sta&#91;s].lluvia&lt;10){\n            sta&#91;s].setStyle({fillColor: \"SkyBlue\"});\n        }else if (sta&#91;s].lluvia&gt;=10 &amp;&amp; sta&#91;s].lluvia&lt;20){\n            sta&#91;s].setStyle({fillColor: \"DodgerBlue\"});\n        }else if (sta&#91;s].lluvia&gt;=20 &amp;&amp; sta&#91;s].lluvia&lt;30){\n            sta&#91;s].setStyle({fillColor: \"Blue\"});\n        }else if (sta&#91;s].lluvia&gt;=30 &amp;&amp; sta&#91;s].lluvia&lt;500){\n            sta&#91;s].setStyle({fillColor: \"DarkBlue\"});\n        }\n    break;\n    case \"temp\":\n        if (sta&#91;s].temp==null || sta&#91;s].temp&lt;=0){            \n            sta&#91;s].setStyle({fillOpacity: 0.0, fill: 0.0, cursor: \"none\"});\n        }else if (sta&#91;s].temp&gt;0 &amp;&amp; sta&#91;s].temp&lt;5){\n            sta&#91;s].setStyle({fillColor: \"LightCyan\"});\n        }else if (sta&#91;s].temp&gt;=5 &amp;&amp; sta&#91;s].temp&lt;10){\n            sta&#91;s].setStyle({fillColor: \"DodgerBlue\"});\n        }else if (sta&#91;s].temp&gt;=10 &amp;&amp; sta&#91;s].temp&lt;20){\n            sta&#91;s].setStyle({fillColor: \"SpringGreen\"});\n        }else if (sta&#91;s].temp&gt;=20 &amp;&amp; sta&#91;s].temp&lt;30){\n            sta&#91;s].setStyle({fillColor: \"Gold\"});\n        }else if (sta&#91;s].temp&gt;=30 &amp;&amp; sta&#91;s].temp&lt;100){\n            sta&#91;s].setStyle({fillColor: \"DarkOrange\"});\n        }\n    break;\n    case \"cross\":     \n            sta&#91;s].remove();\n    break;\n    }\n    }\n}\n\nfunction pintaMET(){\n    \/\/only download data at start\n\tif(ini==0){\n    getAEMET();\n    ini=1;\n    }\n    \/\/empty legend\n    for (var i=1; i&lt;=6;i++){\n        window.document.getElementById(\"mkey\"+i).style.display= \"none\";\n        window.document.getElementById(\"mkey\"+i).style.color=\"black\";\n        }\n    \/\/generate new legend for each type of data\n    \/\/(using the current icon to define the next key)\n    if (pinta==\"cross\"){\n        pinta=\"temp\";\n        window.document.getElementById(\"btmet\").innerHTML=\"\ud83c\udf21\";\n    \twindow.document.getElementById(\"btmet\").title=\"Temperatura (\u00baC)\";\n        window.document.getElementById(\"mtxt\").innerHTML=\"&lt;b&gt;T (\u00baC)&lt;\/b&gt;\";\n        window.document.getElementById(\"mtxt\").title=\"Temperatura (\u00baC)\";\n        \/\/set key\n        mkey1.style.display=\"block\";\n        mkey1.style.background=\"LightCyan\";\n        mkey1.innerHTML=\"0 - 5\";\n        mkey2.style.display=\"block\";\n        mkey2.style.background=\"DodgerBlue\";\n        mkey2.innerHTML=\"5 - 10\";\n        mkey3.style.display=\"block\";\n        mkey3.style.background=\"SpringGreen\";\n        mkey3.innerHTML=\"10 - 20\";\n        mkey4.style.display=\"block\";\n        mkey4.style.background=\"Gold\";\n        mkey4.innerHTML=\"20 - 30\";\n        mkey5.style.display=\"block\";\n        mkey5.style.background=\"DarkOrange\";\n        mkey5.innerHTML=\"&gt; 30\";\n    }else if(pinta==\"temp\"){\n        pinta=\"viento\";\n        window.document.getElementById(\"btmet\").innerHTML=\"\ud83c\udf2a\";\n    \twindow.document.getElementById(\"btmet\").title=\"Viento (Km\/h)\";\n        window.document.getElementById(\"mtxt\").innerHTML=\"&lt;b&gt;V(km\/h)&lt;\/b&gt;\";\n        window.document.getElementById(\"mtxt\").title=\"Viento (Km\/h)\";\n        \/\/set key\n        mkey1.style.display=\"block\";\n        mkey1.style.background=\"green\";\n        mkey1.innerHTML=\"0 - 5\";\n        mkey2.style.display=\"block\";\n        mkey2.style.background=\"yellow\";\n        mkey2.innerHTML=\"5 - 10\";\n        mkey3.style.display=\"block\";\n        mkey3.style.background=\"orange\";\n        mkey3.innerHTML=\"10 - 20\";\n        mkey4.style.display=\"block\";\n        mkey4.style.background=\"red\";\n        mkey4.innerHTML=\"20 - 30\";\n        mkey4.style.color=\"white\";\n        mkey5.style.display=\"block\";\n        mkey5.style.background=\"purple\";\n        mkey5.innerHTML=\"&gt; 30\";\n        mkey5.style.color=\"white\";\n    }else if(pinta==\"lluvia\"){\n        pinta=\"cross\";\n        window.document.getElementById(\"btmet\").innerHTML=\"\u274c\";\n    \twindow.document.getElementById(\"btmet\").title=\"Sin clima\";\n        window.document.getElementById(\"mtxt\").innerHTML=\"&lt;b&gt;-&lt;\/b&gt;\";\n        window.document.getElementById(\"mtxt\").title=\"Sin clima\";\n    }else if(pinta==\"viento\"){\n        pinta=\"lluvia\";\n        window.document.getElementById(\"btmet\").innerHTML=\"\u2614\";\n    \twindow.document.getElementById(\"btmet\").title=\"Precipitaci\u00f3n (l\/m\u00b2)\";\n        window.document.getElementById(\"mtxt\").innerHTML=\"&lt;b&gt;P (mm)&lt;\/b&gt;\";\n        window.document.getElementById(\"mtxt\").title=\"Precipitaci\u00f3n (l\/m\u00b2)\";\n        \/\/set key\n        mkey1.style.display=\"block\";\n        mkey1.style.background=\"LightCyan\";\n        mkey1.innerHTML=\"0 - 2\";\n        mkey2.style.display=\"block\";\n        mkey2.style.background=\"LightSkyBlue\";\n        mkey2.innerHTML=\"2 - 5\";\n        mkey3.style.display=\"block\";\n        mkey3.style.background=\"SkyBlue\";\n        mkey3.innerHTML=\"5 - 10\";\n        mkey4.style.display=\"block\";\n        mkey4.style.background=\"DodgerBlue\";\n        mkey4.innerHTML=\"10 - 20\";\n        mkey5.style.display=\"block\";\n        mkey5.style.background=\"Blue\";\n        mkey5.innerHTML=\"20 - 30\";\n        mkey5.style.color=\"white\";\n        mkey6.style.display=\"block\";\n        mkey6.style.background=\"DarkBlue\";\n        mkey6.innerHTML=\"&gt; 30\";\n        mkey6.style.color=\"white\";\n    }\n    \/\/update stations visible in view\n    colocaEnLaVista();\n}\n\n\n&lt;\/script&gt;\n\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Tambi\u00e9n puedes descargarte el fichero <a href=\"https:\/\/github.com\/TheRoam\/leafMET\/blob\/main\/leafMET.html\" target=\"_blank\" rel=\"noreferrer noopener\">leafMET.html<\/a> de mi github directamente en tu m\u00f3vil y listo!<\/p>\n\n\n\n<p>\u00bfTe ha servido este post? \u00bfTienes dudas o comentarios? P\u00e1sate por Twitter y hazme llegar tus inquietudes! \u00a1Hasta otra!<\/p>\n\n\n\n<p>\ud83d\udc26 <code><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/roamingworkshop\" target=\"_blank\">@RoamingWorkshop<\/a><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La Agencia Estatal de Meteorolog\u00eda espa\u00f1ola (AEMET) cuenta con una API de datos abiertos con la que podemos acceder a la mayor\u00eda de datos que publican en su web. De esta forma, cualquier usuario puede crear apps muy sencillas s\u00f3lo con la informaci\u00f3n que necesita y sin tener que acceder a su web. En mi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1023,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[607,26],"tags":[],"class_list":["post-1018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-demos","category-map-es","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":39,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"predecessor-version":[{"id":1598,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1018\/revisions\/1598"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1023"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}