{"id":1078,"date":"2022-08-08T20:53:06","date_gmt":"2022-08-08T19:53:06","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1078"},"modified":"2023-11-19T15:32:26","modified_gmt":"2023-11-19T14:32:26","slug":"obten-la-temperatura-media-del-mar-o-de-cualquier-mapa-raster","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/1078\/obten-la-temperatura-media-del-mar-o-de-cualquier-mapa-raster\/","title":{"rendered":"Obt\u00e9n la temperatura media del mar (o de cualquier mapa r\u00e1ster)"},"content":{"rendered":"\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>ACTUALIZACI\u00d3N 2023! <\/b>Se elimina el servicio WMS horario y se actualiza la versi\u00f3n diaria a V2. Version WMS actualizada a 1.3.0<\/i><\/p>\n\n\n\n<p>Estas semanas est\u00e1 de moda comentar el calentamiento que est\u00e1 sufriendo el Mar Mediterr\u00e1neo y he encontrado muy pocos mapas que me permita pinchar f\u00e1cilmente sobre \u00e9l para saber la temperatura que pretende indicar.<\/p>\n\n\n\n<p>As\u00ed que he hecho el m\u00edo propio:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Vamos a buscar un WMS con la informaci\u00f3n en formato r\u00e1ster,<\/li>\n\n\n\n<li>A replicar su leyenda mediante el uso de lienzos &lt;canvas&gt; html,<\/li>\n\n\n\n<li>Y obtener el valor del pixel seleccionado que corresponda con la leyenda.<\/li>\n<\/ol>\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 = 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\nwindow.setTimeout(fillmenu,15000);\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"los-datos\">Los datos<\/h2>\n\n\n\n<p>Existen muchas y muy liosas fuentes de informaci\u00f3n. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Puertos del Estado:<\/strong><br>Mi primer intento fue acudir a <a href=\"https:\/\/www.puertos.es\/es-es\/oceanografia\/Paginas\/portus.aspx\" target=\"_blank\" rel=\"noreferrer noopener\">Puertos del Estado<\/a>, pero lo \u00fanico bueno que encontr\u00e9 es que usan Leaflet.. Tienen un visor en tiempo real, pero es muy complicado acceder a los datos para hacer algo con ellos (aunque ya veremos c\u00f3mo ). <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos-1024x565.png\" alt=\"\" class=\"wp-image-1079\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos-1024x565.png 1024w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos-300x165.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos-768x424.png 768w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos-1536x847.png 1536w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos-676x373.png 676w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/puertos.png 1637w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Copernicus:<\/strong><br>\"Copernicus es el Programa de Observaci\u00f3n de la Tierra de la Uni\u00f3n Europea\", como bien dicen en su p\u00e1gina web, y aglutinan la mayor\u00eda de informaci\u00f3n geogr\u00e1fica y medioambiental producida por los paises miembros de la UE.<br>En su secci\u00f3n <a rel=\"noreferrer noopener\" href=\"https:\/\/marine.copernicus.eu\/about\/producers\/sst-tac\" target=\"_blank\">mar\u00edtima<\/a>, encontramos datos de Temperatura Superficial del Mar (<strong>SST<\/strong>: Sea Surface Temperature) obtenidas por sat\u00e9lite y otros sensores de diferentes organismos europeos.<\/li>\n<\/ul>\n\n\n\n<p><strong>Global Ocean OSTIA Diurnal Skin Sea Surface Temperature<\/strong><\/p>\n\n\n\n<p>Despu\u00e9s de probar todos, el m\u00e1s completo es el <a rel=\"noreferrer noopener\" href=\"https:\/\/resources.marine.copernicus.eu\/product-detail\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_014\/INFORMATION\" target=\"_blank\">mapa global<\/a> generado por la MetOffice (la AEMET inglesa).<\/p>\n\n\n\n<p>Seg\u00fan indican, se muestra la media horaria en un mapa sin huecos, usando datos de campo, satelitales y de medidores infra-rojo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"el-mapa-base\">El mapa base<\/h2>\n\n\n\n<p>Voy a crear un mapa base como ya hemos visto en <a href=\"https:\/\/theroamingworkshop.cloud\/b\/?p=862\" target=\"_blank\" rel=\"noreferrer noopener\">otros post<\/a>.<\/p>\n\n\n\n<p>Como voy a a\u00f1adir una capa r\u00e1ster WMS, que consiste en p\u00edxeles de poca resoluci\u00f3n, a\u00f1ado una <a href=\"https:\/\/ec.europa.eu\/eurostat\/web\/gisco\/geodata\/reference-data\/administrative-units-statistical-units\/countries\" target=\"_blank\" rel=\"noreferrer noopener\">capa de pa\u00edses del mundo de Eurostat<\/a>.<\/p>\n\n\n\n<p>La descargo en formato geoJSON y, para que sea f\u00e1cil insertarla, la convierto en una variable llamada \"<strong>countries<\/strong>\" en un nuevo fichero <strong>CNTR_RG_01M_2020_4326.js<\/strong> insert\u00e1ndole este encabezado (ten en cuenta que hay que cerrar el  objeto JSON con \"<strong><code>]}<\/code><\/strong>\"para que se lea correctamente).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var countries = {\n\"type\": \"FeatureCollection\",\n\"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\" } },\n\"features\": &#91;\n{\"type\": \"FeatureCollection\", \"features\": &#91;{\"type\": \"Feature\", \"geometry\": {\"type\": \"MultiPolygon\", \"coordinates\": &#91;&#91;&#91;&#91;51.590556, 24.242975],   ......   ]}<\/code><\/pre>\n\n\n\n<p>Creado el fichero, estar\u00e1 disponible para nuestro mapa enlaz\u00e1ndolo as\u00ed en el &lt;head&gt; de nuestro .html:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\".\/CNTR_RG_01M_2020_4326.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Si tienes problemas creando el archivo de pa\u00edses, desc\u00e1rgalo de <a href=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\/CNTR_RG_01M_2020_4326.js\">este servidor<\/a> o a\u00f1ade el link completo en el head script <\/i><\/p>\n\n\n\n<p>Este mapa base va quedando as\u00ed:<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>SST raster data<\/title>\n<link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83c\udf21<\/text><\/svg>\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.css\"\n   integrity=\"sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe\/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr\/Fs0W40kiNHxM9vyTtQ==\"\n   crossorigin=\"\"\/>\n   \n<script src=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.js\"\n   integrity=\"sha512-BB3hKbKWOc9Ez\/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8\/KABdlkX68nAhlwcDFLGPCQ==\"\n   crossorigin=\"\"><\/script>\n<script src=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\/CNTR_RG_01M_2020_4326.js\"><\/script>\n<\/head>\n<style>\nbody{\n\tmargin:0;\n}\n#base{\n\twidth:100%;\n\theight:350px;\n}\n<\/style>\n<body>\n\t<div id=\"base\"><\/div>\n<\/body>\n<script>\n\t\/\/Crear mapa de Leaflet\n\tvar map = L.map('base').setView([48, 10], 4);\n\t\n\t\/\/A\u00f1adimos capa de paises\n\tL.geoJSON(countries, {\t\/\/usa la variable \"countries\" que est\u00e1 definida en el archivo 'CNTR_RG_01M_2020_4326.js'\n\t\tstyle: function(){\t\/\/sobreescribimos el estilo por defecto de Leaflet con algo m\u00e1s est\u00e9tico\n\t\t\treturn {\n\t\t\tfillColor: \"BurlyWood\",\n\t\t\tcolor: \"bisque\",\n\t\t\tfillOpacity: 1,\n\t\t\t};\n\t\t}\n\t}).addTo(map);\n<\/script>\n<\/html>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\n&lt;title&gt;SST raster data&lt;\/title&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\udf21&lt;\/text&gt;&lt;\/svg&gt;\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.css\"\n   integrity=\"sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe\/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr\/Fs0W40kiNHxM9vyTtQ==\"\n   crossorigin=\"\"\/&gt;\n   \n&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.js\"\n   integrity=\"sha512-BB3hKbKWOc9Ez\/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8\/KABdlkX68nAhlwcDFLGPCQ==\"\n   crossorigin=\"\"&gt;&lt;\/script&gt;\n\n&lt;script src=\".\/CNTR_RG_01M_2020_4326.js\"&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n\n&lt;style&gt;\nbody{\n\tmargin:0;\n}\n#base1{\n\twidth:100vw;\n\theight:100vh;\n}\n&lt;\/style&gt;\n\n&lt;body&gt;\n\t&lt;div id=\"base1\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;script&gt;\n\n\t\/\/Crear mapa de Leaflet\n\tvar map = L.map('base1').setView(&#91;48, 10], 5);\n\t\n\t\/\/A\u00f1adimos capa de paises\n\tL.geoJSON(countries, {\t\/\/usa la variable \"countries\" que est\u00e1 definida en el archivo 'CNTR_RG_01M_2020_4326.js'\n\t\tstyle: function(){\t\/\/sobreescribimos el estilo por defecto de Leaflet con algo m\u00e1s est\u00e9tico\n\t\t\treturn {\n\t\t\tfillColor: \"BurlyWood\",\n\t\t\tcolor: \"bisque\",\n\t\t\tfillOpacity: 1,\n\t\t\t};\n\t\t}\n\t}).addTo(map);\n\n&lt;\/script&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"servicio-wms\">Consultar y a\u00f1adir un servicio WMS<\/h2>\n\n\n\n<p>Voy a a\u00f1adir el <a rel=\"noreferrer noopener\" href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\">mapa <\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\">d<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\">i<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\">a<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\">r<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\">i<\/a><a href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\" rel=\"noreferrer noopener\">o<\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/data.marine.copernicus.eu\/product\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/description\" target=\"_blank\"> global del MetOffice<\/a> que nos facilita el programa Copernicus.<\/p>\n\n\n\n<p>Para consultar los detalles del WMS, debemos buscar el <a href=\"https:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?request=GetCapabilities&amp;service=WMS\" target=\"_blank\" rel=\"noreferrer noopener\">fichero de metadatos<\/a>, que en este caso est\u00e1 en la pesta\u00f1a \"DATA-ACCESS\".<\/p>\n\n\n\n<p>En este fichero hacemos una b\u00fasqueda por \"WMS\" para encontrar el enlace que nos ofrece este servicio.<\/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\/wms-metadata.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"293\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/wms-metadata.png\" alt=\"\" class=\"wp-image-1081\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/wms-metadata.png 1022w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/wms-metadata-300x86.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/wms-metadata-768x220.png 768w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/wms-metadata-676x194.png 676w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Donde vemos que el enlace es el siguiente:<\/p>\n\n\n\n<p><a href=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2<\/a><\/p>\n\n\n\n<p>A este enlace le a\u00f1adimos las siguientes funciones de GeoServer \"<code>?service=WMS&amp;request=GetCapabilities<\/code>\" lo cual nos dar\u00e1 la informaci\u00f3n disponible en dicho servicio WMS, como capas, leyendas, estilos, unidades, etc.<\/p>\n\n\n\n<p><a href=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?service=WMS&amp;request=GetCapabilities\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?service=WMS&amp;request=GetCapabilities<\/a><\/p>\n\n\n\n<p>A\u00f1adimos la capa WMS como nos indica la documentaci\u00f3n de Leaflet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\tvar base = L.tileLayer.wms(URL, {\n\t\tlayers: 'analysed_sst', \/\/cambiar la capa. Comprobar con ?service=WMS&amp;request=GetCapabilities\n\t\tformat: 'image\/png',\n\t\ttransparent: true,\n        styles: 'boxfill\/rainbow',\n        \/\/time: '2022-08-02T16:30:00.000Z',\n\t\tattribution: \"\u00a9 &lt;a target='_blank' href='https:\/\/resources.marine.copernicus.eu\/product-detail\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/INFORMATION'&gt;Copernicus Marine Service &amp; MetOffice \u25f3&lt;\/a&gt;\"\n\t}).addTo(map);<\/code><\/pre>\n\n\n\n<p>Para saber que opciones debemos introducir, consultamos el fichero de metadatos, en concreto las etiquetas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&lt;Layer queryable=\"1\"&gt;&lt;Name&gt;<\/strong> nos dar\u00e1 el nombre de las capas que introduciremos en la propiedad \"<strong>layers:<\/strong>\" <\/li>\n\n\n\n<li><strong>&lt;Style&gt;&lt;Name&gt;<\/strong> nos dar\u00e1 los nombres de los distintos estilos disponibles para la representaci\u00f3n del r\u00e1ster, que podemos especificar en la propiedad \"<strong>styles:<\/strong>\".<\/li>\n\n\n\n<li><strong>&lt;LegenURL&gt;<\/strong> nos dar\u00e1 el enlace a la leyenda que emplea ese estilo.<\/li>\n\n\n\n<li><strong>&lt;Dimension&gt;<\/strong> nos dar\u00e1 unidades que podemos consultar en el servicio WMS. En nuestro caso la unidad es temporal, ya que podemos variar la fecha de los datos representados. Lo voy a dejar comentado, por lo que tomar\u00e1 la \u00faltima fecha disponible, pero luego lo utilizaremos para personalizar la consulta.<\/li>\n<\/ul>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>SST raster data<\/title>\n<link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83c\udf21<\/text><\/svg>\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.css\"\n   integrity=\"sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe\/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr\/Fs0W40kiNHxM9vyTtQ==\"\n   crossorigin=\"\"\/>\n   \n<script src=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.js\"\n   integrity=\"sha512-BB3hKbKWOc9Ez\/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8\/KABdlkX68nAhlwcDFLGPCQ==\"\n   crossorigin=\"\"><\/script>\n<script src=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\/CNTR_RG_01M_2020_4326.js\"><\/script>\n<\/head>\n<style>\nbody{\n\tmargin:0;\n}\n#base2{\n\twidth:100%;\n\theight:350px;\n}\n<\/style>\n<body>\n\t<div id=\"base2\"><\/div>\n<\/body>\n<script>\n\t\/\/Crear mapa de Leaflet\n\tvar map2 = L.map('base2').setView([48, 10], 4);\n\t\n\t\/\/A\u00f1adimos capa de paises\n\tL.geoJSON(countries, {\t\/\/usa la variable \"countries\" que est\u00e1 definida en el archivo 'CNTR_RG_01M_2020_4326.js'\n\t\tstyle: function(){\t\/\/sobreescribimos el estilo por defecto de Leaflet con algo m\u00e1s est\u00e9tico\n\t\t\treturn {\n\t\t\tfillColor: \"BurlyWood\",\n\t\t\tcolor: \"bisque\",\n\t\t\tfillOpacity: 1,\n\t\t\t};\n\t\t}\n\t}).addTo(map2);\n    \/\/OSTIA Global hourly mean diurnal skin SST\n\tvar URL=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2\"\n\tvar WMS = '?service=WMS&request=GetMap&version=1.1.1&layers=analysed_sst&styles=&format=image%2Fpng&transparent=true&width=200&height=200&srs=EPSG:3857&bbox=';\n\t\n\tvar base = L.tileLayer.wms(URL, {\n\t\tlayers: 'analysed_sst', \/\/cambiar la capa. Comprobar con ?service=WMS&request=GetCapabilities\n\t\tformat: 'image\/png',\n\t\ttransparent: true,\n        styles: 'boxfill\/rainbow',\n        \/\/time: '2022-08-02T16:30:00.000Z',\n\t\tattribution: \"\u00a9 <a target='_blank' href='https:\/\/resources.marine.copernicus.eu\/product-detail\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/INFORMATION'>Copernicus Marine Service & MetOffice \u25f3<\/a>\"\n\t}).addTo(map2);\n<\/script>\n<\/html>\n\n\n\n<p>Por \u00faltimo, vamos a a\u00f1adirle la leyenda al mapa para tener una referencia visual.<\/p>\n\n\n\n<p>La insertamos como imagen en el &lt;body&gt; y a\u00f1adimos el CSS al &lt;style&gt;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\nbody{\n\tmargin:0;\n}\n#base{\n\twidth:100%;\n\theight:350px;\n}\n.leyenda{\n\tposition:absolute;\n\twidth:110px;\n\theight:264px;\n\ttop:5px;\n\tright:5px;\n\tz-Index:1001;\n\tdisplay:flex;\n\tjustify-content:flex-end;\n}\n&lt;\/style&gt;\n\n&lt;body&gt;\n    &lt;div class=\"leyenda\"&gt;\n\t\t&lt;img src=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?REQUEST=GetLegendGraphic&amp;LAYER=analysed_sst&amp;PALETTE=rainbow&amp;transparent=true\"&gt;&lt;\/img&gt;\n\t&lt;\/div&gt;\n\n\t&lt;div id=\"base\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>SST raster data<\/title>\n<link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83c\udf21<\/text><\/svg>\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.css\"\n   integrity=\"sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe\/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr\/Fs0W40kiNHxM9vyTtQ==\"\n   crossorigin=\"\"\/>\n   \n<script src=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.js\"\n   integrity=\"sha512-BB3hKbKWOc9Ez\/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8\/KABdlkX68nAhlwcDFLGPCQ==\"\n   crossorigin=\"\"><\/script>\n<script src=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\/CNTR_RG_01M_2020_4326.js\"><\/script>\n<\/head>\n<style>\nbody{\n\tmargin:0;\n}\n#base3{\n\twidth:100%;\n\theight:350px;\n}\n.leyenda1{\n\tposition:absolute;\n\twidth:110px;\n\theight:264px;\n\ttop:5px;\n\tright:5px;\n\tz-Index:1001;\n\tdisplay:flex;\n\tjustify-content:flex-end;\n}\n<\/style>\n<body>\n<div id=\"base3\">\n    <div class=\"leyenda1\">\n\t\t<img decoding=\"async\" src=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?REQUEST=GetLegendGraphic&#038;LAYER=analysed_sst&#038;PALETTE=rainbow&#038;transparent=true\"><\/img>\n\t<\/div>\n<\/div>\n<\/body>\n<script>\n\t\/\/Crear mapa de Leaflet\n\tvar map3 = L.map('base3').setView([48, 10], 4);\n\t\n\t\/\/A\u00f1adimos capa de paises\n\tL.geoJSON(countries, {\t\/\/usa la variable \"countries\" que est\u00e1 definida en el archivo 'CNTR_RG_01M_2020_4326.js'\n\t\tstyle: function(){\t\/\/sobreescribimos el estilo por defecto de Leaflet con algo m\u00e1s est\u00e9tico\n\t\t\treturn {\n\t\t\tfillColor: \"BurlyWood\",\n\t\t\tcolor: \"bisque\",\n\t\t\tfillOpacity: 1,\n\t\t\t};\n\t\t}\n\t}).addTo(map3);\n    \/\/OSTIA Global hourly mean diurnal skin SST\n\tvar URL=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2\"\n\tvar WMS = '?service=WMS&request=GetMap&version=1.1.1&layers=analysed_sst&styles=&format=image%2Fpng&transparent=true&width=200&height=200&srs=EPSG:3857&bbox=';\n\t\n\tvar base = L.tileLayer.wms(URL, {\n\t\tlayers: 'analysed_sst', \/\/cambiar la capa. Comprobar con ?service=WMS&request=GetCapabilities\n\t\tformat: 'image\/png',\n\t\ttransparent: true,\n        styles: 'boxfill\/rainbow',\n        \/\/time: '2022-08-02T16:30:00.000Z',\n\t\tattribution: \"\u00a9 <a target='_blank' href='https:\/\/resources.marine.copernicus.eu\/product-detail\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/INFORMATION'>Copernicus Marine Service & MetOffice \u25f3<\/a>\"\n\t}).addTo(map3);\n<\/script>\n<\/html>\n\n\n\n<p>Como ver\u00e1s, as\u00ed es muy complicado intentar averiguar la temperatura de un punto concreto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"replicar-leyenda\">Replicar la leyenda para consultar los datos<\/h2>\n\n\n\n<p>Para poder conocer la temperatura correspondiente a un color concreto, deber\u00edamos conocer la posici\u00f3n de dicho color en la leyenda y calcular su valor proporcional a los valores extremos (310kPa= 36.85\u00baC y 210kPa=-3.15\u00baC).<\/p>\n\n\n\n<p>El problema es que por <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTTP\/CORS\" target=\"_blank\">pol\u00edtica CORS<\/a>, no podemos hacer una consulta sobre la imagen, que est\u00e1 fuera del dominio de nuestra aplicaci\u00f3n. Por otro lado, si a\u00f1adimos la imagen a nuestro dominio, esta tendr\u00e1 resoluci\u00f3n determinada y puede restringir la precisi\u00f3n de los colores consultados. <\/p>\n\n\n\n<p>Por ello, para replicar la leyenda a\u00f1ado un elemento de lienzo o &lt;canvas&gt; junto a la leyenda.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;div class=\"leyenda\"&gt;\n\t\t&lt;canvas id=\"gradientC\"&gt;&lt;\/canvas&gt;\n\t\t&lt;img src=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?REQUEST=GetLegendGraphic&amp;LAYER=analysed_sst&amp;PALETTE=rainbow&amp;transparent=true\"&gt;&lt;\/img&gt;\n\t&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Y mediante javascript, ayud\u00e1ndonos del <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\" target=\"_blank\">HTML Color Picker<\/a>, vamos definiendo las distintas paradas de un relleno tipo \"gradiente\" que reemplazar\u00e1 a nuestra leyenda (la a\u00f1ado como funci\u00f3n para poder usarla de forma din\u00e1mica).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\tfunction grad(){\n\t\t\/\/Generamos la leyenda en el canvas 'gradientC'\n\t\tvar ctx=document.getElementById(\"gradientC\").getContext('2d');\n\t\t\/\/Definimos un gradiente lineal\n\t\tvar grd=ctx.createLinearGradient(0,150,0,0);\n\t\t\/\/Calibrar las paradas del gradiente tomando muestras de la imagen\n\t\t\/\/Descomentar la imagen que va junto al canvas en el html\n\t\t\/\/Usar HTML color picker: https:\/\/www.w3schools.com\/colors\/colors_picker.asp\n\t\tgrd.addColorStop(0, \"rgb(0, 0, 146)\");\t\t\t\/\/0 -&gt; -3.15\n\t\tgrd.addColorStop(0.09, \"rgb(0, 0, 247)\");\t\t\/\/1\n\t\tgrd.addColorStop(0.185, \"rgb(1, 61, 255)\");\t\t\/\/2\n\t\tgrd.addColorStop(0.26, \"rgb(0, 146, 254)\");\t\t\/\/3\n\t\tgrd.addColorStop(0.3075, \"rgb(0, 183, 255)\");\t\t\/\/4\n\t\tgrd.addColorStop(0.375, \"rgb(3, 251, 252)\");\t\/\/5\n\t\tgrd.addColorStop(0.5, \"rgb(111, 255, 144)\");\t\/\/6 -&gt; 20.0\n\t\tgrd.addColorStop(0.575, \"rgb(191, 255, 62)\");\t\/\/7\n\t\tgrd.addColorStop(0.64, \"rgb(255, 255, 30)\");\t\/\/8\n\t\tgrd.addColorStop(0.74, \"rgb(255, 162, 1)\");\t\t\/\/9\n\t\tgrd.addColorStop(0.805, \"rgb(255, 83, 0)\");\t\t\/\/10\n\t\tgrd.addColorStop(0.90, \"rgb(252, 4, 1)\");\t\t\/\/11\n\t\tgrd.addColorStop(1, \"rgb(144, 0, 0)\");\t\t\t\/\/12 -&gt; 36.85\n\t\t\n\t\t\/\/a\u00f1adir el gradiente al canvas\n\t\tctx.fillStyle = grd;\n\t\tctx.fillRect(0,0,255,255);\n\t}\n\t\n\t\/\/ejecutamos la funcion del gradiente al inicio\n\tgrad();<\/code><\/pre>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>SST raster data<\/title>\n<link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83c\udf21<\/text><\/svg>\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.css\"\n   integrity=\"sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe\/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr\/Fs0W40kiNHxM9vyTtQ==\"\n   crossorigin=\"\"\/>\n   \n<script src=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.js\"\n   integrity=\"sha512-BB3hKbKWOc9Ez\/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8\/KABdlkX68nAhlwcDFLGPCQ==\"\n   crossorigin=\"\"><\/script>\n<script src=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\/CNTR_RG_01M_2020_4326.js\"><\/script>\n<\/head>\n<style>\nbody{\n\tmargin:0;\n}\n#base4{\n\twidth:100%;\n\theight:350px;\n}\n.leyenda2{\n\tposition:absolute;\n\ttop: 5px;\n\tright:5px;\n\twidth:110px;\n\theight:255px;\n\tz-Index:1001;\n\tdisplay:flex;\n\tjustify-content:flex-end;\n\talign-items: center;\n}\n#gradientC1{\n\tz-Index=1002;\n\twidth:25px;\n\theight:255px;\n\tmargin:0;\n}\n<\/style>\n<body>\n<div id=\"base4\">\n    <div class=\"leyenda2\">\n\t\t<canvas id=\"gradientC1\"><\/canvas>\n\t\t<img decoding=\"async\" height=\"255px\" src=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?REQUEST=GetLegendGraphic&#038;LAYER=analysed_sst&#038;PALETTE=rainbow&#038;transparent=true\"><\/img>\n\t<\/div>\n<\/div>\n<\/body>\n<script>\n\t\/\/Crear mapa de Leaflet\n\tvar map4 = L.map('base4').setView([48, 10], 4);\n\t\n\t\/\/A\u00f1adimos capa de paises\n\tL.geoJSON(countries, {\t\/\/usa la variable \"countries\" que est\u00e1 definida en el archivo 'CNTR_RG_01M_2020_4326.js'\n\t\tstyle: function(){\t\/\/sobreescribimos el estilo por defecto de Leaflet con algo m\u00e1s est\u00e9tico\n\t\t\treturn {\n\t\t\tfillColor: \"BurlyWood\",\n\t\t\tcolor: \"bisque\",\n\t\t\tfillOpacity: 1,\n\t\t\t};\n\t\t}\n\t}).addTo(map4);\n    \/\/OSTIA Global hourly mean diurnal skin SST\n\tvar URL=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2\"\n\tvar WMS = '?service=WMS&request=GetMap&version=1.1.1&layers=analysed_sst&styles=&format=image%2Fpng&transparent=true&width=200&height=200&srs=EPSG:3857&bbox=';\n\t\n\tvar base = L.tileLayer.wms(URL, {\n\t\tlayers: 'analysed_sst', \/\/cambiar la capa. Comprobar con ?service=WMS&request=GetCapabilities\n\t\tformat: 'image\/png',\n\t\ttransparent: true,\n        styles: 'boxfill\/rainbow',\n        \/\/time: '2022-08-02T16:30:00.000Z',\n\t\tattribution: \"\u00a9 <a target='_blank' href='https:\/\/resources.marine.copernicus.eu\/product-detail\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/INFORMATION'>Copernicus Marine Service & MetOffice \u25f3<\/a>\"\n\t}).addTo(map4);\n\tfunction grad(){\n\t\t\/\/Generamos la leyenda en el canvas 'gradientC'\n\t\tvar ctx=document.getElementById(\"gradientC1\").getContext('2d');\n\t\t\/\/Definimos un gradiente lineal\n\t\tvar grd=ctx.createLinearGradient(0,150,0,0);\n\t\t\/\/Calibrar las paradas del gradiente tomando muestras de la imagen\n\t\t\/\/Descomentar la imagen que va junto al canvas en el html\n\t\t\/\/Usar HTML color picker: https:\/\/www.w3schools.com\/colors\/colors_picker.asp\n\t\tgrd.addColorStop(0, \"rgb(0, 0, 146)\");\t\t\t\/\/0 -> -3.15\n\t\tgrd.addColorStop(0.09, \"rgb(0, 0, 247)\");\t\t\/\/1\n\t\tgrd.addColorStop(0.185, \"rgb(1, 61, 255)\");\t\t\/\/2\n\t\tgrd.addColorStop(0.26, \"rgb(0, 146, 254)\");\t\t\/\/3\n\t\tgrd.addColorStop(0.3075, \"rgb(0, 183, 255)\");\t\t\/\/4\n\t\tgrd.addColorStop(0.375, \"rgb(3, 251, 252)\");\t\/\/5\n\t\tgrd.addColorStop(0.5, \"rgb(111, 255, 144)\");\t\/\/6 -> 20.0\n\t\tgrd.addColorStop(0.575, \"rgb(191, 255, 62)\");\t\/\/7\n\t\tgrd.addColorStop(0.64, \"rgb(255, 255, 30)\");\t\/\/8\n\t\tgrd.addColorStop(0.74, \"rgb(255, 162, 1)\");\t\t\/\/9\n\t\tgrd.addColorStop(0.805, \"rgb(255, 83, 0)\");\t\t\/\/10\n\t\tgrd.addColorStop(0.90, \"rgb(252, 4, 1)\");\t\t\/\/11\n\t\tgrd.addColorStop(1, \"rgb(144, 0, 0)\");\t\t\t\/\/12 -> 36.85\n\t\t\n\t\t\/\/a\u00f1adir el gradiente al canvas\n\t\tctx.fillStyle = grd;\n\t\tctx.fillRect(0,0,255,255);\n\t}\n\t\n\t\/\/ejecutamos la funcion del gradiente al inicio\n\tgrad();\n<\/script>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"calcular-temperatura\">Crear selector de pixel y calculador de temperatura<\/h2>\n\n\n\n<p>Una vez tenemos una leyenda propia, vamos a crear un elemento que muestre el color del pixel seleccionado, as\u00ed como la temperatura obtenida.<\/p>\n\n\n\n<p>Para poder obtener el color del pixel seleccionado, \u00e9ste tambi\u00e9n lo insertamos en un lienzo en el body:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\t&lt;canvas id=\"temp\"&gt;\n\t\t&lt;img id=\"pixel\" src=\"\" ALT=\"CLICK PARA OBTENER TEMPERATURA\"&gt;&lt;\/img&gt;\n\t&lt;\/canvas&gt;\n\t\n\t&lt;div id=\"tempTxt\"&gt;PINCHA SOBRE EL MAR PARA CONOCER SU TEMPERATURA&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Y damos un formato adecuado a los nuevos elementos en el &lt;style&gt;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#temp{\n\tposition:absolute;\n\tbottom:10px;\n\tleft:10px;\n\twidth:150px;\n\theight:150px;\n\tbackground-color: lightgrey;\n\tborder: 2px solid white;\n\tborder-radius: 5px;\n\tz-Index: 1001;\n}\n#tempTxt{\n\tdisplay:flex;\n\tposition:absolute;\n\tbottom:10px;\n\tleft:10px;\n\twidth:150px;\n\theight:150px;\n\tpadding: 2px 2px 2px 2px;\n\tz-Index:1001;\n\tfont-family:verdana;\n\tfont-size:16px;\n\tfont-weight:bold;\n\ttext-align:center;\n\talign-items:center;\n    word-wrap:break-word;\n    word-break:break-word;\n}<\/code><\/pre>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>SST raster data<\/title>\n<link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83c\udf21<\/text><\/svg>\">\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.css\"\n   integrity=\"sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe\/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr\/Fs0W40kiNHxM9vyTtQ==\"\n   crossorigin=\"\"\/>\n   \n<script src=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.js\"\n   integrity=\"sha512-BB3hKbKWOc9Ez\/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8\/KABdlkX68nAhlwcDFLGPCQ==\"\n   crossorigin=\"\"><\/script>\n<script src=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\/CNTR_RG_01M_2020_4326.js\"><\/script>\n<\/head>\n<style>\nbody{\n\tmargin:0;\n}\n#base5{\n\twidth:100%;\n\theight:350px;\n}\n.leyenda5{\n\tposition:absolute;\n\twidth:110px;\n\theight:255px;\n\ttop:5px;\n\tright:5px;\n\tz-Index:1001;\n\tdisplay:flex;\n\tjustify-content:flex-end;\n}\n#gradientC5{\n\tz-Index=1002;\n\twidth:25px;\n\theight:255px;\n\tmargin:0;\n}\n#temp5{\n\tposition:absolute;\n\tbottom:10px;\n\tleft:10px;\n\twidth:150px;\n\theight:150px;\n\tbackground-color: lightgrey;\n\tborder: 2px solid white;\n\tborder-radius: 5px;\n\tz-Index: 1001;\n}\n#tempTxt5{\n\tdisplay:flex;\n\tposition:absolute;\n\tbottom:10px;\n\tleft:10px;\n\twidth:150px;\n\theight:150px;\n\tpadding: 2px 2px 2px 2px;\n\tz-Index:1001;\n\tfont-family:verdana;\n\tfont-size:16px;\n\tfont-weight:bold;\n\ttext-align:center;\n\talign-items:center;\n    word-wrap:break-word;\n    word-break:break-word;\n}\n<\/style>\n<body>\n<div id=\"base5\">\n    <div class=\"leyenda5\">\n\t\t<canvas id=\"gradientC5\"><\/canvas>\n\t\t<img decoding=\"async\" src=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2?REQUEST=GetLegendGraphic&#038;LAYER=analysed_sst&#038;PALETTE=rainbow&#038;transparent=true\"><\/img>\n\t<\/div>\n\t<canvas id=\"temp5\">\n\t\t<img decoding=\"async\" id=\"pixel5\" src=\"\" ALT=\"CLICK PARA OBTENER TEMPERATURA\"><\/img>\n\t<\/canvas>\n\t\n\t<div id=\"tempTxt5\">PINCHA SOBRE EL MAR PARA CONOCER SU TEMPERATURA<\/div>\n<\/div>\n<\/body>\n<script>\n\t\/\/Crear mapa de Leaflet\n\tvar map5 = L.map('base5').setView([48, 10], 4);\n\t\n\t\/\/A\u00f1adimos capa de paises\n\tL.geoJSON(countries, {\t\/\/usa la variable \"countries\" que est\u00e1 definida en el archivo 'CNTR_RG_01M_2020_4326.js'\n\t\tstyle: function(){\t\/\/sobreescribimos el estilo por defecto de Leaflet con algo m\u00e1s est\u00e9tico\n\t\t\treturn {\n\t\t\tfillColor: \"BurlyWood\",\n\t\t\tcolor: \"bisque\",\n\t\t\tfillOpacity: 1,\n\t\t\t};\n\t\t}\n\t}).addTo(map5);\n    \/\/OSTIA Global hourly mean diurnal skin SST\n\tvar URL=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2\"\n\tvar WMS = '?service=WMS&request=GetMap&version=1.1.1&layers=analysed_sst&styles=&format=image%2Fpng&transparent=true&width=200&height=200&srs=EPSG:3857&bbox=';\n\t\n\tvar base = L.tileLayer.wms(URL, {\n\t\tlayers: 'analysed_sst', \/\/cambiar la capa. Comprobar con ?service=WMS&request=GetCapabilities\n\t\tformat: 'image\/png',\n\t\ttransparent: true,\n        styles: 'boxfill\/rainbow',\n        \/\/time: '2022-08-02T16:30:00.000Z',\n\t\tattribution: \"\u00a9 <a target='_blank' href='https:\/\/resources.marine.copernicus.eu\/product-detail\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/INFORMATION'>Copernicus Marine Service & MetOffice \u25f3<\/a>\"\n\t}).addTo(map5);\n\tfunction grad(){\n\t\t\/\/Generamos la leyenda en el canvas 'gradientC'\n\t\tvar ctx=document.getElementById(\"gradientC5\").getContext('2d');\n\t\t\/\/Definimos un gradiente lineal\n\t\tvar grd=ctx.createLinearGradient(0,150,0,0);\n\t\t\/\/Calibrar las paradas del gradiente tomando muestras de la imagen\n\t\t\/\/Descomentar la imagen que va junto al canvas en el html\n\t\t\/\/Usar HTML color picker: https:\/\/www.w3schools.com\/colors\/colors_picker.asp\n\t\tgrd.addColorStop(0, \"rgb(0, 0, 146)\");\t\t\t\/\/0 -> -3.15\n\t\tgrd.addColorStop(0.09, \"rgb(0, 0, 247)\");\t\t\/\/1\n\t\tgrd.addColorStop(0.185, \"rgb(1, 61, 255)\");\t\t\/\/2\n\t\tgrd.addColorStop(0.26, \"rgb(0, 146, 254)\");\t\t\/\/3\n\t\tgrd.addColorStop(0.3075, \"rgb(0, 183, 255)\");\t\t\/\/4\n\t\tgrd.addColorStop(0.375, \"rgb(3, 251, 252)\");\t\/\/5\n\t\tgrd.addColorStop(0.5, \"rgb(111, 255, 144)\");\t\/\/6 -> 20.0\n\t\tgrd.addColorStop(0.575, \"rgb(191, 255, 62)\");\t\/\/7\n\t\tgrd.addColorStop(0.64, \"rgb(255, 255, 30)\");\t\/\/8\n\t\tgrd.addColorStop(0.74, \"rgb(255, 162, 1)\");\t\t\/\/9\n\t\tgrd.addColorStop(0.805, \"rgb(255, 83, 0)\");\t\t\/\/10\n\t\tgrd.addColorStop(0.90, \"rgb(252, 4, 1)\");\t\t\/\/11\n\t\tgrd.addColorStop(1, \"rgb(144, 0, 0)\");\t\t\t\/\/12 -> 36.85\n\t\t\n\t\t\/\/a\u00f1adir el gradiente al canvas\n\t\tctx.fillStyle = grd;\n\t\tctx.fillRect(0,0,255,255);\n\t}\n\t\n\t\/\/ejecutamos la funcion del gradiente al inicio\n\tgrad();\n<\/script>\n<\/html>\n\n\n\n<p>Ahora a\u00f1adimos dos funciones:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>onMapClick()<\/strong> para obtener el pixel seleccionado y trasladarlo al recuadro inferior. Esto lo hacemos con una petici\u00f3n GET al servicio WMS con las coordenadas correspondientes al pixel donde hacemos click. Es importante tener en cuenta el sistema de referencia que use el mapa del servicio WMS, que en nuestro caso no es el habitual, sino que es EPSG:3857, para la conversi\u00f3n de unidades.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\t\/\/A\u00f1adimos funci\u00f3n al hacer click en el mapa\n\tmap.addEventListener('click', onMapClick);\n\t\n\tfunction onMapClick(e) {\n\t\t\/\/ejecutamos la funci\u00f3n grad con cada click\n\t\tgrad();\n\t\t\/\/Obtenemos las coordenadas del pinto seleccionado\n        var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';\n\t\t\/\/console.log(latlngStr);\n\n\t\t\/\/Definir el CRS para enviar la consulta al WMS\n\t\tconst proj = L.CRS.EPSG3857;\n        \/\/const proj = L.CRS.EPSG4326;\n\t\t\n\t\t\/\/Definimos los l\u00edmites del mapa que pediremos al WMS para que sea aproximadamente de 1 pixel\n\t\tvar BBOX=((proj.project(e.latlng).x)-10)+\",\"+((proj.project(e.latlng).y)-10)+\",\"+((proj.project(e.latlng).x)+10)+\",\"+((proj.project(e.latlng).y)+10);\n\t\t\n\t\t\/\/console.log(BBOX);\n\t\t\n\t\t\/\/Restablecemos la imagen en cada click\n\t\tvar tTxt=document.getElementById(\"tempTxt\");\n\t\tvar pix= document.getElementById(\"pixel\");\n\t\tvar ctx=document.getElementById(\"temp\").getContext(\"2d\");\n\t\t\/\/pix.src=\"\";\n\t\tctx.fillStyle=\"lightgrey\";\n\t\tctx.fillRect(0,0,300,300);\n\t\t\n\t\t\/\/Realizamos la petici\u00f3n del pixel seleccionado\n\t\tvar xPix= new XMLHttpRequest();\n\t\txPix.onreadystatechange = function(){\n\t\t\tif (this.readyState == 4 &amp;&amp; this.status == 200) {\n\t\t\t\tpix.src=URL+WMS+BBOX;\n\t\t\t\tpix.onload=function(){\n\t\t\t\t\tctx.drawImage(pix,0,0,300,300);\n\t\t\t\t\ttTxt.innerHTML=\"INTERPRETANDO LEYENDA...\";\n\t\t\t\t\t\/\/Interpretamos el pixel seg\u00fan la leyenda\n\t\t\t\t\tleyenda();\n\t\t\t\t}\n\t\t\t\tpix.crossOrigin=\"anonymous\";\n\t\t\t}\n\t\t};\n\t\t\n\t\txPix.open(\"GET\", URL+WMS+BBOX);\n\t\txPix.send();\n\t\t\n\t\ttTxt.innerHTML=\"CARGANDO TEMPERATURA...\";\n\t\t\n\n\n\n    }<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>leyenda()<\/strong> calcula la temperatura que corresponde a dicho pixel seleccionado seg\u00fan la leyenda que hemos creado anteriormente. Muestra el valor de la temperatura en el recuadro inferior y tambi\u00e9n se indica en la leyenda con una franja blanca.<br>El algoritmo de c\u00e1lculo consiste en recorrer la leyenda pixel a pixel (verticalmente) y comparar la diferencia de los valores rgb(x,y,z) de la leyenda con los valores rgb del pixel seleccionado. Iremos guardando el valor que vaya obteniendo una menor diferencia hasta llegar al final, por lo que habr\u00e1 casos en que la soluci\u00f3n no sea 100% exacta. No es la mejor manera pero es r\u00e1pida (de entender y de ejecutar) y bastante efectiva.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\tfunction leyenda(){\n\t\tvar ctx=document.getElementById(\"temp\").getContext(\"2d\");\n\t\tvar tTxt=document.getElementById(\"tempTxt\");\n\t\t\/\/obtenemos el valor RGB del pixel seleccionado\n\t\tvar RGB=ctx.getImageData(5,5,1,-1).data;\n\t\t\/\/console.log(ctx.getImageData(10,10,1,-1).data);\n\t\t\n\t\tvar key=document.getElementById(\"gradientC\").getContext(\"2d\");\n\t\tvar max=150;\n\t\t\n\t\tvar min=1000;\/\/la m\u00e1xima diferencia s\u00f3lo puede ser de 255x3=765\n\t\tvar dif=\"\";\n\t\tvar val=\"\";\n\t\t\n\t\t\/\/recorremos el gradiente de la leyenda pixel a pixel para obtener el valor de temperatura\n\t\tfor(var p=1;p&lt;=max;p++){\n\t\t\t\/\/obtenemos el valor actual\n\t\t\tvar temp=key.getImageData(1,p,1,-1).data;\n\t\t\t\/\/console.log(temp);\n\t\t\t\/\/comparamos con el seleccionado y obtenemos la diferencia total\n\t\t\tdif=Math.abs(parseInt(temp&#91;0])-parseInt(RGB&#91;0]))+Math.abs(parseInt(temp&#91;1])-parseInt(RGB&#91;1]))+Math.abs(parseInt(temp&#91;2])-parseInt(RGB&#91;2]));\n\t\t\tif(dif&lt;min){\n\t\t\t\tmin=dif;\n\t\t\t\tval=p;\n\t\t\t\t\/\/console.log(\"Obj:\"+RGB&#91;0]+\",\"+RGB&#91;1]+\",\"+RGB&#91;2]+\"\\nTemp:\"+temp&#91;0]+\",\"+temp&#91;1]+\",\"+temp&#91;2]+\"\\nDif:\"+dif);\n\t\t\t}\n\t\t}\n\t\tvar T=36.85-(val*40\/max);\n\t\tT=T.toFixed(2);\n\t\t\/\/pintamos una l\u00ednea de referencia en la leyenda\n\t\tkey.fillStyle=\"white\";\n\t\tkey.fillRect(0,val,255,1);\n\t\t\n\t\t\/\/definimos la temperatura en el texto\n\t\t\/\/si el color da gris, hemos pinchado en la tierra\n\t\t\/\/console.log(\"T= \"+T);\n\t\tif(RGB&#91;0]==211&amp;RGB&#91;1]==211&amp;RGB&#91;2]==211){\n\t\t\ttTxt.innerHTML=\"PINCHA SOBRE EL MAR PARA CONOCER SU TEMPERATURA\";\n\t\t}else if(typeof T == \"undefined\"){\n\t\t\ttTxt.innerHTML=\"\u00a1ERROR!&lt;BR&gt;PRUEBA OTRO PUNTO DEL MAR.\";\n\t\t}else{\n\t\t\ttTxt.innerHTML=\"TEMPERATURA APROXIMADA: &lt;br&gt;&lt;br&gt;\"+T+\" \u00baC\";\n\t\t}\n\t\t\/\/console.log(key.getImageData(1,150,1,-1).data);\n\t}<\/code><\/pre>\n\n\n\n<p>Adem\u00e1s, omitimos la imagen original de la leyenda y a\u00f1adimos nuestros propios r\u00f3tulos.<\/p>\n\n\n\n<p>Por \u00faltimo, a\u00f1adimos un controlador de fecha en el body:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;div id=\"timeBlock\"&gt;\n        &lt;button id=\"reini\" onclick=\"reiniT()\"&gt;\u21ba&lt;\/button&gt;\n\t    &lt;input type=\"datetime-local\" id=\"timeInp\" name=\"maptime\"&gt;\n    &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Y su CSS correspondiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#tempTxt{\n\tdisplay:flex;\n\tposition:absolute;\n\tbottom:10px;\n\tleft:10px;\n\twidth:150px;\n\theight:150px;\n\tpadding: 2px 2px 2px 2px;\n\tz-Index:1001;\n\tfont-family:verdana;\n\tfont-size:16px;\n\tfont-weight:bold;\n\ttext-align:center;\n\talign-items:center;\n    word-wrap:break-word;\n    word-break:break-word;\n}\n#timeBlock{\n    display:flex;\n    flex-direction:row;\n\tposition:absolute;\n    width:250px;\n    top:10px;\n    left:50%;\n    margin-left:-125px;\n    justify-content:center;\n\tz-Index:1002;\n    font-family:verdana;\n    font-size:14px;\n}\n#timeInp{\n\twidth:200px;\n    height:30px;\n\ttext-align:center;\n}\n#reini{\n    width:35px;\n    height:35px;\n    margin-right:5px;\n    font-weight:bold;\n    font-size:18px;\n    padding:0;\n}<\/code><\/pre>\n\n\n\n<p>As\u00ed como algunas l\u00edneas de javascript para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>obtener la \u00faltima fecha disponible y mostrarla,<\/li>\n\n\n\n<li>actualizar el mapa cuando modifiquemos la fecha<\/li>\n\n\n\n<li>y definir los valores m\u00e1ximos y m\u00ednimos permitidos<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\t\/\/Obtener \u00faltima hora de actualizacion del mapa\n\tvar timeInp=document.getElementById(\"timeInp\");\n\tvar t;\n    var maxT;\n    var minT;\n\tvar xTime = new XMLHttpRequest();\n\t\txTime.onreadystatechange = function(){\n\t\t\tif (this.readyState == 4 &amp;&amp; this.status == 200) {\n\t\t\t\t\/\/convertimos el XML seg\u00fan https:\/\/www.w3schools.com\/xml\/xml_parser.asp\n                var xmlDoc=this.responseXML;\n                t=xmlDoc.children&#91;0].children&#91;1].children&#91;2].children&#91;12].children&#91;1].children&#91;5].attributes&#91;4].value;\n                \/\/Lo convertimos en un objeto fecha quitando los segundos\n        \t\tt=new Date(t);\n                t=t.toISOString().substring(0,t.toISOString().length-8);\n                \/\/Lo pasamos al selector y lo establecemos como m\u00e1ximo\n                timeInp.max=t;\n                timeInp.value=t;\n                maxT=new Date(t);\n\n                \/\/tambi\u00e9n establecemos el minimo\n                t=xmlDoc.children&#91;0].children&#91;1].children&#91;2].children&#91;12].children&#91;1].children&#91;5].innerHTML.trim();\n                t=t.substring(0,16);\n                timeInp.min=t;\n                minT=new Date(t);\n\t\t\t}\n\t\t};\n\t\t\n\t\txTime.open(\"GET\", URL+\"?service=WMS&amp;request=GetCapabilities\");\n\t\txTime.send();\n\t\n\t\/\/Selector de fecha para WMS\n\t\t\n\ttimeInp.addEventListener(\"change\", function(){\n\t\tt=new Date(timeInp.value.toString());\n\t\tt.setHours(12-t.getTimezoneOffset()\/60);\n\n        t=t.toISOString().substring(0,t.toISOString().length-8);\n\t    timeInp.value=t;\n\t    t=new Date(timeInp.value);\n            t.setHours(12-t.getTimezoneOffset()\/60);\n\n        \/\/si estamos en el rango de datos..\n        if(t&gt;=minT &amp;&amp; t&lt;=maxT){\n\t\t    t=t.toISOString();\n            \/\/actualziamos el mapa\n\t\t    base.setParams({\n\t\t\t    time: t,\n\t\t\t    styles: \"boxfill\/rainbow\",\n\t\t    },0);\n        }else{\/\/mostramos error\n            alert(\"La fecha introducida est\u00e1 fuera de rango.\");\n        }\n\t});\n\n    \/\/funcion de reinicio de fecha\n    function reiniT(){\n        timeInp.value=maxT.toISOString().substring(0,maxT.toISOString().length-13)+\"23:30\";\n    }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"resultado\">Resultado<\/h2>\n\n\n\n<p>Con todo esto, nos quedar\u00e1 algo as\u00ed, que puedes ver a pantalla completa <a href=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>:<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<\/head>\n<style>\n<\/style>\n<body>\n<iframe loading=\"lazy\" width=\"100%\" height=\"350px\" src=\"https:\/\/theroamingworkshop.cloud\/demos\/sst\"><\/iframe>\n<\/body>\n<\/html>\n\n\n\n<p>Si te ha gustado, tienes dudas, o alguna idea para mejorar este mapa, deja tus inquietudes en Twitter \ud83d\udc26<\/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\n\n\n<p>Aqu\u00ed te dejo el c\u00f3digo completo de la aplicaci\u00f3n, uniendo todo lo de arriba. \u00a1Hasta la pr\u00f3xima!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset='UTF-8'\\&gt;\n&lt;title&gt;SST raster data&lt;\/title&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\udf21&lt;\/text&gt;&lt;\/svg&gt;\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.css\"\n   integrity=\"sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe\/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr\/Fs0W40kiNHxM9vyTtQ==\"\n   crossorigin=\"\"\/&gt;\n   \n&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.8.0\/dist\/leaflet.js\"\n   integrity=\"sha512-BB3hKbKWOc9Ez\/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8\/KABdlkX68nAhlwcDFLGPCQ==\"\n   crossorigin=\"\"&gt;&lt;\/script&gt;\n\n&lt;script src=\".\/CNTR_RG_01M_2020_4326.js\"&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n\n&lt;style&gt;\nbody{\n\tmargin:0;\n}\n#temp{\n\tposition:absolute;\n\tbottom:10px;\n\tleft:10px;\n\twidth:150px;\n\theight:150px;\n\tbackground-color: lightgrey;\n\tborder: 2px solid white;\n\tborder-radius: 5px;\n\tz-Index: 1001;\n}\n#map{\n\twidth:100vw;\n\theight:100vh;\n}\n.leyenda{\n\tposition:absolute;\n\ttop:10px;\n\tz-Index:1001;\n\tdisplay:flex;\n\tflex-direction:row;\n\twidth:50px;\n\theight:255px;\n\tright: 50px;\n\tfont-family:verdana;\n\tfont-size:11px;\n}\n.leyenda-txt{\n\tdisplay:flex;\n\tflex-direction:column;\n\talign-items: stretch;\n\tjustify-content:center;\n\ttext-align:right;\n\tfont-weight:bold;\n\ttext-shadow: 0 0 6px white;\n\tmargin: 0px 3px 0px 3px;\n}\n.leyenda-val{\n\theight:255px;\n\tmargin-top:-5px;\n}\n#gradientC{\n\tz-Index=1002;\n\twidth:25px;\n\theight:255px;\n\tmargin:0;\n}\n#tempTxt{\n\tdisplay:flex;\n\tposition:absolute;\n\tbottom:10px;\n\tleft:10px;\n\twidth:150px;\n\theight:150px;\n\tpadding: 2px 2px 2px 2px;\n\tz-Index:1001;\n\tfont-family:verdana;\n\tfont-size:16px;\n\tfont-weight:bold;\n\ttext-align:center;\n\talign-items:center;\n    word-wrap:break-word;\n    word-break:break-word;\n}\n#timeBlock{\n    display:flex;\n    flex-direction:row;\n\tposition:absolute;\n    width:250px;\n    top:10px;\n    left:50%;\n    margin-left:-125px;\n    justify-content:center;\n\tz-Index:1002;\n    font-family:verdana;\n    font-size:14px;\n}\n#timeInp{\n\twidth:200px;\n    height:30px;\n\ttext-align:center;\n}\n#reini{\n    width:35px;\n    height:35px;\n    margin-right:5px;\n    font-weight:bold;\n    font-size:18px;\n    padding:0;\n}\n&lt;\/style&gt;\n\n&lt;body&gt;\n\n    &lt;div id=\"timeBlock\"&gt;\n        &lt;button id=\"reini\" onclick=\"reiniT()\"&gt;\u21ba&lt;\/button&gt;\n\t    &lt;input type=\"datetime-local\" id=\"timeInp\" name=\"maptime\"&gt;\n    &lt;\/div&gt;\n\n\t&lt;div class=\"leyenda\"&gt;\n\t\t&lt;div class=\"leyenda-txt\"&gt;\n\t\t\t&lt;div class=\"leyenda-val\"&gt;36.85&lt;\/div&gt;\n\t\t\t&lt;div class=\"leyenda-val\"&gt;20.0&lt;\/div&gt;\n\t\t\t&lt;div&gt;-3.15&lt;\/div&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;!--Descomentar para mostrar la imagen descargada de la leyenda y calibrar el gradiente--&gt;\n\t\t&lt;!--&lt;img src=\"leyenda.jpg\"&gt;&lt;\/img&gt;--&gt;\n\t\t\n\t\t&lt;canvas id=\"gradientC\"&gt;&lt;\/canvas&gt;\n\t\t\t\n\t\t&lt;div class=\"leyenda-txt\" style=\"margin-top:-10px;\"&gt;&lt;div &gt;(\u00baC)&lt;\/div&gt;&lt;\/div&gt;\n\t&lt;\/div&gt;\n\t\n\t&lt;canvas id=\"temp\"&gt;\n\t\t&lt;img id=\"pixel\" src=\"\" ALT=\"CLICK PARA OBTENER TEMPERATURA\"&gt;&lt;\/img&gt;\n\t&lt;\/canvas&gt;\n\t\n\t&lt;div id=\"tempTxt\"&gt;PINCHA SOBRE EL MAR PARA CONOCER SU TEMPERATURA&lt;\/div&gt;\n\t\n\t&lt;div id=\"map\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;script&gt;\n\n\t\/\/Crear mapa de Leaflet\n\tvar map = L.map('map').setView(&#91;48, 10], 5);\n\t\n\t\/\/A\u00f1adimos capa de paises\n\tL.geoJSON(countries, {\t\/\/usa la variable \"countries\" que est\u00e1 definida en el archivo 'CNTR_RG_01M_2020_4326.js'\n\t\tstyle: function(){\t\/\/sobreescribimos el estilo por defecto de Leaflet con algo m\u00e1s est\u00e9tico\n\t\t\treturn {\n\t\t\tfillColor: \"BurlyWood\",\n\t\t\tcolor: \"bisque\",\n\t\t\tfillOpacity: 1,\n\t\t\t};\n\t\t}\n\t}).addTo(map);\n\t\n\t\/\/A\u00f1adimos servicio WMS siguiendo https:\/\/leafletjs.com\/examples\/wms\/wms.html\n\t\n\t\/\/OSTIA Global daily mean SST\n\tvar URL=\"https:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SST-V2\"\n\tvar WMS = '?service=WMS&amp;request=GetMap&amp;version=1.3.0&amp;layers=analysed_sst&amp;styles=&amp;format=image%2Fpng&amp;transparent=true&amp;width=200&amp;height=200&amp;CRS=EPSG:3857&amp;bbox=';\n\t\n\t\/\/OSTIA Global hourly mean diurnal skin SST\n\t\/\/var URL=\"https:\/\/nrt.cmems-du.eu\/thredds\/wms\/METOFFICE-GLO-SST-L4-NRT-OBS-SKIN-DIU-FV01.1\"\n\t\/\/var WMS = '?service=WMS&amp;request=GetMap&amp;version=1.1.1&amp;layers=analysed_sst&amp;styles=&amp;format=image%2Fpng&amp;transparent=true&amp;width=200&amp;height=200&amp;srs=EPSG:3857&amp;bbox=';\n\n    \/\/Global Ocean - SST Multi-sensor L3 Observations\n    \/\/var URL=\"http:\/\/nrt.cmems-du.eu\/thredds\/wms\/IFREMER-GLOB-SST-L3-NRT-OBS_FULL_TIME_SERIE\";\n    \/\/var WMS=\"?service=WMS&amp;request=GetMap&amp;version=1.1.1&amp;layers=adjusted_sea_surface_temperature&amp;styles=&amp;format=image%2Fpng&amp;transparent=true&amp;width=200&amp;height=200&amp;srs=EPSG:4326&amp;bbox=\";\n\t\n\tvar base = L.tileLayer.wms(URL, {\n\t\tlayers: 'analysed_sst', \/\/cambiar la capa. Comprobar con ?service=WMS&amp;request=GetCapabilities\n\t\tformat: 'image\/png',\n\t\ttransparent: true,\n        styles: 'boxfill\/rainbow',\n    \tversion: \"1.3.0\",\n        \/\/time: '2022-08-02T16:00:00.000Z',\n\t\tattribution: \"\u00a9 &lt;a target='_blank' href='https:\/\/resources.marine.copernicus.eu\/product-detail\/SST_GLO_SST_L4_NRT_OBSERVATIONS_010_001\/INFORMATION'&gt;Copernicus Marine Service &amp; MetOffice \u25f3&lt;\/a&gt;\"\n\t}).addTo(map);\n\t\n\t\/\/Obtener \u00faltima hora de actualizacion del mapa\n\tvar timeInp=document.getElementById(\"timeInp\");\n\tvar t;\n    var maxT;\n    var minT;\n\tvar xTime = new XMLHttpRequest();\n\t\txTime.onreadystatechange = function(){\n\t\t\tif (this.readyState == 4 &amp;&amp; this.status == 200) {\n\t\t\t\t\/\/convertimos el XML seg\u00fan https:\/\/www.w3schools.com\/xml\/xml_parser.asp\n                var xmlDoc=this.responseXML;\n                t=xmlDoc.children&#91;0].children&#91;1].children&#91;2].children&#91;12].children&#91;1].children&#91;5].attributes&#91;4].value;\n                \/\/Lo convertimos en un objeto fecha quitando los segundos\n        \t\tt=new Date(t);\n                t=t.toISOString().substring(0,t.toISOString().length-8);\n            \tconsole.log(t);\n                \/\/Lo pasamos al selector y lo establecemos como m\u00e1ximo\n                timeInp.max=t;\n                timeInp.value=t;\n                maxT=new Date(t);\n\n                \/\/tambi\u00e9n establecemos el minimo\n                t=xmlDoc.children&#91;0].children&#91;1].children&#91;2].children&#91;12].children&#91;1].children&#91;5].innerHTML.trim();\n                t=t.substring(0,16);\n                timeInp.min=t;\n                minT=new Date(t);\n\t\t\t}\n\t\t};\n\t\t\n\t\txTime.open(\"GET\", URL+\"?service=WMS&amp;request=GetCapabilities\");\n\t\txTime.send();\n\t\n\t\/\/Selector de fecha para WMS\n\t\t\n\ttimeInp.addEventListener(\"change\", function(){\n\t\tt=new Date(timeInp.value.toString());\n        t.setHours(12-t.getTimezoneOffset()\/60);\n        t=t.toISOString().substring(0,t.toISOString().length-8);\n\t    timeInp.value=t;\n\t    t=new Date(timeInp.value);\n    \tt.setHours(12-t.getTimezoneOffset()\/60);\n        \/\/t=t.toISOString().substring(0,t.toISOString().length-13)+\"14:00\";\n\n        \/\/si estamos en el rango de datos..\n        if(t&gt;=minT &amp;&amp; t&lt;=maxT){\n\t\t    t=t.toISOString();\n            \/\/actualziamos el mapa\n\t\t    base.setParams({\n\t\t\t    time: t,\n\t\t\t    styles: \"boxfill\/rainbow\",\n\t\t    },0);\n        }else{\/\/mostramos error\n            alert(\"La fecha introducida est\u00e1 fuera de rango.\");\n        }\n\t});\n\n    \/\/funcion de reinicio de fecha\n    function reiniT(){\n        timeInp.value=maxT.toISOString().substring(0,maxT.toISOString().length-13)+\"12:00\";\n    }\n\n    \/\/Generar la leyenda\n\t\n\tfunction grad(){\n\t\t\/\/Generamos la leyenda en el canvas 'gradientC'\n\t\tvar ctx=document.getElementById(\"gradientC\").getContext('2d');\n\t\t\/\/Definimos un gradiente lineal\n\t\tvar grd=ctx.createLinearGradient(0,150,0,0);\n\t\t\/\/Calibrar las paradas del gradiente tomando muestras de la imagen\n\t\t\/\/Descomentar la imagen que va junto al canvas en el html\n\t\t\/\/Usar HTML color picker: https:\/\/www.w3schools.com\/colors\/colors_picker.asp\n\t\tgrd.addColorStop(0, \"rgb(0, 0, 146)\");\t\t\t\/\/0 -&gt; -3.15\n\t\tgrd.addColorStop(0.09, \"rgb(0, 0, 247)\");\t\t\/\/1\n\t\tgrd.addColorStop(0.185, \"rgb(1, 61, 255)\");\t\t\/\/2\n\t\tgrd.addColorStop(0.26, \"rgb(0, 146, 254)\");\t\t\/\/3\n\t\tgrd.addColorStop(0.3075, \"rgb(0, 183, 255)\");\t\t\/\/4\n\t\tgrd.addColorStop(0.375, \"rgb(3, 251, 252)\");\t\/\/5\n\t\tgrd.addColorStop(0.5, \"rgb(111, 255, 144)\");\t\/\/6 -&gt; 20.0\n\t\tgrd.addColorStop(0.575, \"rgb(191, 255, 62)\");\t\/\/7\n\t\tgrd.addColorStop(0.64, \"rgb(255, 255, 30)\");\t\/\/8\n\t\tgrd.addColorStop(0.74, \"rgb(255, 162, 1)\");\t\t\/\/9\n\t\tgrd.addColorStop(0.805, \"rgb(255, 83, 0)\");\t\t\/\/10\n\t\tgrd.addColorStop(0.90, \"rgb(252, 4, 1)\");\t\t\/\/11\n\t\tgrd.addColorStop(1, \"rgb(144, 0, 0)\");\t\t\t\/\/12 -&gt; 36.85\n\t\t\n\t\t\/\/a\u00f1adir el gradiente al canvas\n\t\tctx.fillStyle = grd;\n\t\tctx.fillRect(0,0,255,255);\n\t}\n\t\n\t\/\/ejecutamos la funcion del gradiente al inicio\n\tgrad();\n\t\n\t\/\/A\u00f1adimos funci\u00f3n al hacer click en el mapa\n\tmap.addEventListener('click', onMapClick);\n\t\n\tfunction onMapClick(e) {\n\t\t\/\/ejecutamos la funci\u00f3n grad con cada click\n\t\tgrad();\n\t\t\/\/Obtenemos las coordenadas del pinto seleccionado\n        var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';\n\t\t\/\/console.log(latlngStr);\n\n\t\t\/\/Definir el CRS para enviar la consulta al WMS\n\t\tconst proj = L.CRS.EPSG3857;\n        \/\/const proj = L.CRS.EPSG4326;\n\t\t\n\t\t\/\/Definimos los l\u00edmites del mapa que pediremos al WMS para que sea aproximadamente de 1 pixel\n\t\tvar BBOX=((proj.project(e.latlng).x)-10)+\",\"+((proj.project(e.latlng).y)-10)+\",\"+((proj.project(e.latlng).x)+10)+\",\"+((proj.project(e.latlng).y)+10);\n\t\t\n\t\t\/\/Restablecemos la imagen en cada click\n\t\tvar tTxt=document.getElementById(\"tempTxt\");\n\t\tvar pix= document.getElementById(\"pixel\");\n\t\tvar ctx=document.getElementById(\"temp\").getContext(\"2d\");\n\t\tctx.fillStyle=\"lightgrey\";\n\t\tctx.fillRect(0,0,300,300);\n\t\t\n\t\t\/\/Realizamos la petici\u00f3n del pixel seleccionado\n\t\tvar xPix= new XMLHttpRequest();\n\t\txPix.onreadystatechange = function(){\n\t\t\tif (this.readyState == 4 &amp;&amp; this.status == 200) {\n\t\t\t\tpix.src=URL+WMS+BBOX;\n\t\t\t\tpix.onload=function(){\n\t\t\t\t\tctx.drawImage(pix,0,0,300,300);\n\t\t\t\t\ttTxt.innerHTML=\"INTERPRETANDO LEYENDA...\";\n\t\t\t\t\t\/\/Interpretamos el pixel seg\u00fan la leyenda\n\t\t\t\t\tleyenda();\n\t\t\t\t}\n\t\t\t\tpix.crossOrigin=\"anonymous\";\n\t\t\t}\n\t\t};\n\t\t\n\t\txPix.open(\"GET\", URL+WMS+BBOX);\n\t\txPix.send();\n\t\t\n\t\ttTxt.innerHTML=\"CARGANDO TEMPERATURA...\";\n\t\t\n\n\n\n    }\n\tfunction leyenda(){\n\t\tvar ctx=document.getElementById(\"temp\").getContext(\"2d\");\n\t\tvar tTxt=document.getElementById(\"tempTxt\");\n\t\t\/\/obtenemos el valor RGB del pixel seleccionado\n\t\tvar RGB=ctx.getImageData(5,5,1,-1).data;\n\t\t\n\t\tvar key=document.getElementById(\"gradientC\").getContext(\"2d\");\n\t\tvar max=150;\n\t\t\n\t\tvar min=1000;\/\/la m\u00e1xima diferencia s\u00f3lo puede ser de 255x3=765\n\t\tvar dif=\"\";\n\t\tvar val=\"\";\n\t\t\n\t\t\/\/recorremos el gradiente de la leyenda pixel a pixel para obtener el valor de temperatura\n\t\tfor(var p=1;p&lt;=max;p++){\n\t\t\t\/\/obtenemos el valor actual\n\t\t\tvar temp=key.getImageData(1,p,1,-1).data;\n\t\t\t\/\/comparamos con el seleccionado y obtenemos la diferencia total\n\t\t\tdif=Math.abs(parseInt(temp&#91;0])-parseInt(RGB&#91;0]))+Math.abs(parseInt(temp&#91;1])-parseInt(RGB&#91;1]))+Math.abs(parseInt(temp&#91;2])-parseInt(RGB&#91;2]));\n\t\t\tif(dif&lt;min){\n\t\t\t\tmin=dif;\n\t\t\t\tval=p;\n\t\t\t}\n\t\t}\n\t\tvar T=36.85-(val*40\/max);\n\t\tT=T.toFixed(2);\n\t\t\/\/pintamos una l\u00ednea de referencia en la leyenda\n\t\tkey.fillStyle=\"#ffffff\";\n\t\tkey.fillRect(0,val,255,1);\n\t\t\n\t\t\/\/definimos la temperatura en el texto\n\t\t\/\/si el color da gris, hemos pinchado en la tierra\n\t\tif(RGB&#91;0]==211&amp;RGB&#91;1]==211&amp;RGB&#91;2]==211){\n\t\t\ttTxt.innerHTML=\"PINCHA SOBRE EL MAR PARA CONOCER SU TEMPERATURA\";\n\t\t}else if(typeof T == \"undefined\"){\n\t\t\ttTxt.innerHTML=\"\u00a1ERROR!&lt;BR&gt;PRUEBA OTRO PUNTO DEL MAR.\";\n\t\t}else{\n\t\t\ttTxt.innerHTML=\"TEMPERATURA APROXIMADA: &lt;br&gt;&lt;br&gt;\"+T+\" \u00baC\";\n\t\t}\n\t\n\t}\n\n&lt;\/script&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>ACTUALIZACI\u00d3N 2023! Se elimina el servicio WMS horario y se actualiza la versi\u00f3n diaria a V2. Version WMS actualizada a 1.3.0 Estas semanas est\u00e1 de moda comentar el calentamiento que est\u00e1 sufriendo el Mar Mediterr\u00e1neo y he encontrado muy pocos mapas que me permita pinchar f\u00e1cilmente sobre \u00e9l para saber la temperatura que pretende indicar. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1131,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[607,26],"tags":[],"class_list":["post-1078","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\/1078","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=1078"}],"version-history":[{"count":60,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1078\/revisions"}],"predecessor-version":[{"id":2266,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1078\/revisions\/2266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1131"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}