Interactive An interactive map showing surface verification scores for different centrescenters.
- results for 2 m temperature, 10 m wind speed, and total cloud cover (yellow)
- results for 2 m temperature and 10 m wind speed only (grey)
For more details about the scores, please refer to the page "Exchange of WMO surface verification scores"
The map follows the Observation alarm interactive map setup.
__________________________________________________________
| Note |
|---|
The statistics presented here are valid for JJA 2023 only. |
| HTML |
|---|
<link rel="stylesheet" href |
| HTML |
<link rel="stylesheet" href="https://softwareunpkg.ecmwf.int/wiki/download/attachments/78295143/leaflet-search.css" /> <link rel="shortcut icon" type="image/x-icon" href="https://software.ecmwf.int/wiki/download/attachments/78295143/favicon.ico" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/> <style> #map { width: 1250px; height: 600px; } .legend { font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } .legend h3 { margin-top: 0; } .legend img { vertical-align: middlecom/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/> <style> #map { width: 1250px; height: 600px; } .legend { font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } .legend h3 { margin-top: 0; } .legend img { vertical-align: middle; } </style> <input id="get00summer2023" type="button" value="JJA 2023 [00UTC]" /> <input id="get12summer2023" type="button" value="JJA 2023 [12UTC]" /> <div id="legend"></div> <div id='map'></div> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script> <script src="https://confluence.ecmwf.int/download/attachments/127309583/list_stations_geo.js" type="text/javascript"></script> <script> var metarLayer; function getUrlVars() { var vars = []; var hash; var argsDict = []; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); }for(var i = 0; i < hashes.length; i++) </style> { <divhash id="searchBox"></div> <div align="left"> <select name="mydropdown"> <option value="Select" >SEARCH STATION</option> <option value="station" onclick="addControlWidget('obsSearchPlHldr',metarLayer);">station</option> </select> </div> <input id="get00Spring2017" type="button" value="Spring 2017 [00UTC]" /> <input id="get12Spring2017" type="button" value="Spring 2017 [12UTC]" /> <input id="get12Autumn2018" type="button" value="Autumn 2018 [12UTC]" /> <div id="legend"></div> <div id='map'></div> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script> <script src="https://software.ecmwf.int/wiki/download/attachments/78298463/list_stations_geo.js" type="text/javascript"></script> <script src="https://software.ecmwf.int/wiki/download/attachments/95454887/list_stations_geo.js" type="text/javascript"></script> <script src="https://software.ecmwf.int/wiki/download/attachments/78295143/leaflet-search.js"></script> <script> var metarLayer; function getUrlVars() { var vars = []; var hash; var argsDict = []; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); argsDict[hash[0]]=hash[1] argsDict.push([hash[0]]); argsDict[hash[0]] = hash[1]; } return argsDict; } function loadMap() { hashes[i].split('='); argsDict[hash[0]]=hash[1] argsDict.push([hash[0]]); argsDict[hash[0]] = hash[1]; } return argsDict; } function loadMap() { mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery ? <a href="http://mapbox.com">Mapbox</a>', mbUrl = 'https://api.tiles.mapbox.com/v1/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; metarLayer = L.layerGroup(); countries = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', attribution: mbAttr}),topography = L.tileLayer(mbUrl, {id: 'mapbox.outdoors', attribution: mbAttr}); // In the prototype reporTypesTable is hardcoded here. It should be read from online source (with a fall-back cache) in production. reporTypesTable={"fields": ["id"], "data": [[16001], [16004]]}; reporTypes={}; geojsonMarkerOptions = { radius: 4, fillColor: "#ff7800", mbAttr = 'Map data © <acolor: href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +"#000", '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +weight: 0, 'Imagery ? <a href="http://mapbox.com">Mapbox</a>', opacity: 1, mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; fillOpacity: 0.8 metarLayer = L.layerGroup()}; countries = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),topography = L.tileLayer(mbUrl, {id: 'mapbox.outdoors', attribution: mbAttr}); for(var i = 0; i < reporTypesTable.data.length; i++ ) { // In the prototype reporTypesTable is hardcoded here. It should be read from online source (with a fall-back cache) in production. reporTypes[reporTypesTable.data[i][0].toString()]=reporTypesTable.data[i][1]; } reporTypesTable={"fields": ["id", "description", "group", "bufrtype", "subtype", "obstype", "codetype"], "data": [[16001, "Automatic Land SYNOP", "CONV", "Land Surface", "Automatic Land SYNOP", "SYNOP", "Automatic Land SYNOP"], [16004, "METAR", "CONV", "Land Surface", "METAR", "SYNOP", "METAR"]]}; iconBase = 'https://software.ecmwf.int/wiki/download/attachments/27404036/'; map = L.map('map', { reporTypes={}; center: [30,000], geojsonMarkerOptions = { radiuszoom: 42.55, fillColor: "#ff7800", colorminZoom: "#000"2, weight: 0, opacitylayers: 1, [metarLayer] fillOpacity: 0.8 }); for(var i = 0; i < reporTypesTable.data.length; i++ ) { baseLayers = { reporTypes[reporTypesTable.data[i][0].toString()]=reporTypesTable.data[i][1]; }"Topo": topography, iconBase = 'https://software.ecmwf.int/wiki/download/attachments/27404036/'; "English": countries map = L.map('map', { }; center: [30,000], overlays = { }; zoom: 2.55, minZoom: 2, layers: [metarLayer] }); baseLayers = { "Topo": topography, "English": countries }; L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>', tileSize: 512, maxZoom: 18, zoomOffset: -1, id: 'mapbox/streets-v11', accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw' }).addTo(map); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); } overlays = { };function onEachFeature(feature, layer) { var popupContent = '<h2 id="firstHeading" L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {class="firstHeading">'+'Station id: '+feature.properties.stid+'</h2>'+'<p id="firstHeading" class="firstHeading">'+'Latitude: '+feature.geometry.coordinates[1]+'<br>'+'Longitude: '+ feature.geometry.coordinates[0]+ '<p>'+ '<a href="'+'https://charts.ecmwf.int/opencharts-api/v1/packages/lc-dnv/products/lc-dnv-station/get/?station=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'" target="_blank">Verification results</a>'+'</p>'+'</div>'; maxZoom: 17, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + layer.bindPopup(popupContent); } function onEachFeature(feature, layer) { var popupContent ='<a href="http'+'https://creativecommonscharts.ecmwf.orgint/licenses/byopencharts-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery (c) <a href="http://mapbox.com">Mapbox</a>', id: 'mapbox.light' }).addTo(map); } api/v1/packages/lc-dnv/products/lc-dnv-station/get/?station=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+''+'" target="_blank"> <img src = "https://charts.ecmwf.int/opencharts-api/v1/packages/lc-dnv/products/lc-dnv-station/get/?station=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'" height="200" > </a>' +'</div>'; layer.bindPopup(popupContent); } //function onEachFeature(feature, layer) { // var popupContent = '<h2<img idsrc ="firstHeading" class="firstHeading">'+'Station id: https://charts-dev.ecmwf.int/opencharts-api/v1/packages/lc-dnv/products/lc-dnv-station/get/?station=svs_verif_'+feature.properties.stidvar+'</h2>'+'<p id="firstHeading" class="firstHeading"_'+feature.properties.stid+'">'+'Latitude: '+feature.geometry.coordinates[0]+'<br>'+'Longitude: '+ feature.geometry.coordinates[1]+ '<p>'+ '<a href="'+'https://apps.ecmwf.int/satellite-alerts/image/?image=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'.png'+'" target="_blank">Verification results</a>'+'</p>'+'</div>'; layer.bindPopup(popupContent); } //function onEachFeature(feature, layer) { //</div>'; // layer.bindPopup(popupContent); //} function replace_search(name, value) { var popupContentstr = '<img src = "'+'file://://scratch/mo/mozb/svs/confluence/svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'.png">'+'</div>'; // layer.bindPopup(popupContent); //} function replace_search(name, value) { var str = location.search; if location.search; if (new RegExp("[&?]"+name+"([=&].+)?$").test(str)) { str = str.replace(new RegExp("(?:[&?])"+name+"([=&].+)?$").test(str)) { str = str.replace(new RegExp("(?:[&?])"+name+"[^&][^&]*", "g"), "") } str += "&";} str += "&"; str += name + "=" + value; str = "?" + str.slice(1); // there is an official order for the query and the hash if you didn't know. location.assign(location.pathname + str + location.hash) }; }; function addLayers(year) { metarLayer = L.geoJSON(stations, { pointToLayer: function (feature, latlng) { if (feature.properties.var == year) { if(feature.properties.alarm>0 ){ geojsonMarkerOptions = { radius: 4, fillColor: "gold", color: "#000", weight: 0, weight: 0, opacity: 1, fillOpacity: 0.8 }; return L.circleMarker(latlng, geojsonMarkerOptions); } else { else { geojsonMarkerOptions = { radius: radius: 4, fillColor: "grey", color: "#000", weight: 0, weight: 0, opacity: 1, fillOpacity: 0.8 opacity: 1, }; return L.circleMarker(latlng, geojsonMarkerOptions); fillOpacity: 0.8 }; }}, onEachFeature: onEachFeature return })L.addTo(metarLayercircleMarker(latlng, geojsonMarkerOptions); } loadMap(); addLayers(getUrlVars()["year"]); if(getUrlVars()["year"]!="00spring2017" && getUrlVars()["year"]!="12spring2017"&& getUrlVars()["year"]!="12autumn2018"){replace_search("year","00spring2017");} if(getUrlVars( } } }, onEachFeature: onEachFeature }).addTo(metarLayer); } loadMap(); addLayers(getUrlVars()["year"]=="00spring2017"){document.getElementById("get00Spring2017").disabled = true;}; if(getUrlVars()["year"]=!="12spring201700summer2023"&& getUrlVars(){document.getElementById("get12Spring2017").disabled = true;}["year"]!="12summer2023"){replace_search("year","00summer2023");} if(getUrlVars()["year"]=="12autumn201700summer2023"){document.getElementById("get12Autumn2018").disabled = true;} function addControlWidget(obsType,obsLayer) { var container = document.getElementById(obsType); if(container){ document.getElementById(obsType).remove();; } var div = document.createElement("div"); div.id=obsType; document.getElementById("searchBox").appendChild(div); var searchControl = new L.Control.Search({ layer: obsLayer, propertyName: 'stid', marker: false, container: obsType, collapsed: false, moveToLocation: function(latlng, title, map) { map.setView(latlng, 6); // access the zoom } }); searchControl.on('search:locationfound', function(e) { e.layer.setStyle({fillColor: '#3f0', color: '#0f0'}); if(e.layer._popup) e.layer.openPopup(); }).on('search:collapsedget00summer2023").disabled = true;} if(getUrlVars()["year"]=="12summer2023"){document.getElementById("get12summer2023").disabled = true;} function addControlWidget(obsType,obsLayer) { var container = document.getElementById(obsType); if(container){ document.getElementById(obsType).remove();; } var div = document.createElement("div"); div.id=obsType; document.getElementById("searchBox").appendChild(div); var searchControl = new L.Control.Search({ layer: obsLayer, propertyName: 'stid', marker: false, container: obsType, collapsed: false, moveToLocation: function(latlng, title, map) { map.setView(latlng, 6); // access the zoom } }); searchControl.on('search:locationfound', function(e) { featuresLayer.eachLayer(function(layer) { //restore feature color featuresLayer.resetStyle(layer); }); }); map.addControl( searchControl ); //initialize search control } document.getElementById("get00Spring2017").addEventListener("click", function () { replace_search("year","00spring2017"); });e.layer.setStyle({fillColor: '#3f0', color: '#0f0'}); if(e.layer._popup) e.layer.openPopup(); }).on('search:collapsed', function(e) { featuresLayer.eachLayer(function(layer) { //restore feature color featuresLayer.resetStyle(layer); }); }); map.addControl( searchControl ); //initialize search control } document.getElementById("get12Spring2017get12summer2023").addEventListener("click", function () { replace_search("year","12spring201712summer2023"); }); document.getElementById("get12Autumn2018get00summer2023").addEventListener("click", function () { replace_search("year","12autumn201800summer2023"); }); L.control.layers(baseLayers, overlays,{collapsed:false,disabled:true}).addTo(map); </script> </script> |