Page History

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)
__________________________________________________________
Note
The statistics presented here are valid for JJA 2023 only.
HTML
   <link rel="stylesheet" href="https://software.ecmwf.int/wiki/download/attachments/78295143/leaflet-searchunpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>

<style> 
  #map { 
    <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>
        #mapwidth: 1250px; 
    height: 600px; 
  } 
  .legend {
    font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; 
  } 
  .legend h3 {
            widthmargin-top: 1250px0; 
  } 
  .legend img { 
    heightvertical-align: 600pxmiddle; 
   } 
    }
    .legend {
      font-family: Arial, sans-serif;
      background: #fff;
      padding: 10px;
      margin: 10px;
      border: 3px solid #000;
    }
      .legend h3 {</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 margin-top: 0;
      }= []; 
      .legendvar imghash; {
      var argsDict vertical-align: middle;= []; 
      }var hashes       
    </style>
    
    
<div 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="get00October2018" type="button" value="October 2018 [00UTC]"  />
<input id="get12October2018" type="button" value="October 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://confluence.ecmwf.int/download/attachments/127309583/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() {
       mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
= 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() { 
       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.
          
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +      reporTypesTable={"fields": ["id"], "data": [[16001], [16004]]}; 
          reporTypes={};  'Imagery ? <a href="http://mapbox.com">Mapbox</a>',

          geojsonMarkerOptions = { 
            radius: 4, 
          mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

fillColor: "#ff7800", 
            metarLayer = L.layerGroup();
color: "#000", 
         countries   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),topography  = L.tileLayer(mbUrl, {id: 'mapbox.outdoors',   attribution: mbAttr});
weight: 0,
            opacity: 1,
        // In the prototype reporTypesTable is hardcoded here. It should be read from online source (with a fall-back cache) in production.
 fillOpacity: 0.8 
          }; 
          
        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"]]} for(var i = 0; i < reporTypesTable.data.length; i++ ) {
             reporTypes[reporTypesTable.data[i][0].toString()]=reporTypesTable.data[i][1];
        reporTypes={};  } 
    geojsonMarkerOptions = {
    radius: 4,
    fillColor: "#ff7800",
    color: "#000",
    weight: 0, iconBase = 'https://software.ecmwf.int/wiki/download/attachments/27404036/';
    opacity: 1,
    fillOpacity: 0.8
    };


      map = for(var i = 0; i < reporTypesTable.data.length; i++ ) {    L.map('map', { 
            center: [30,000],
          reporTypes[reporTypesTable.data[i][0].toString()]=reporTypesTable.data[i][1];
  zoom: 2.55, 
            }minZoom: 2,

        iconBase = 'https://software.ecmwf.int/wiki/download/attachments/27404036/';  layers: [metarLayer] 
        

  }); 
  map = L.map('map', {
     
   center: [30,000], 
     baseLayers =  zoom: 2.55,{ 
        minZoom     "Topo": 2topography, 
             "English": countries layers: [metarLayer]
    });
     baseLayers =}; {
          overlays =   "Topo": topography,
 { };
          "English": countries
    };


     overlays = {


    };
        
        
    L.tileLayer(


L.tileLayer('https://api.tiles.mapbox.com/styles/v4v1/{id}/tiles/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw{accessToken}', {
attribution: '©       maxZoom: 17,
        attribution: 'Map data &copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery (c) <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.light'
    <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); 
   }
   
   function onEachFeature(feature, layer) 
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        var popupContent = '<h2 id="firstHeading" class="firstHeading">'+'Station id: '+feature.properties.stid+'</h2>'+'<p id="firstHeading" class="firstHeading">'+'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+'_attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);        } 
       function onEachFeature(feature, layer) { 
          var popupContent = '<h2 id="firstHeading" class="firstHeading">'+'Station id: '+feature.properties.stid+'.png</h2>'+'"<p targetid="_blankfirstHeading">Verification results</a> class="firstHeading">'+'</p>'+'</div>';
        layer.bindPopup(popupContent);
   }
   //function onEachFeature(feature, layer) {
   //     var popupContent = '<img src = "'+'file://://scratch/mo/mozb/svs/confluence/svsLatitude: '+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+'.png">" target="_blank">Verification results</a>'+'</p>'+'</div>';
          
     //     layer.bindPopup(popupContent); 
    //   }




       function replace_searchonEachFeature(namefeature, valuelayer) { 
    var str = location.search;
   var if (new RegExp("[&?]"+name+"([=&].+)?$").test(str)) {
        str = str.replace(new RegExp("(?:[&?])"+name+"[^&]*", "g"), "")
    }
    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 = {popupContent ='<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"> <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 = '<img src = "'+'https://charts-dev.ecmwf.int/opencharts-api/v1/packages/lc-dnv/products/lc-dnv-station/get/?station=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'">'+'</div>'; // layer.bindPopup(popupContent); 
       //} 
       
       function replace_search(name, value) { 
         var str = location.search; 
         if (new RegExp("[&?]"+name+"([=&].+)?$").test(str)) { 
           str radius: 4,
   = str.replace(new RegExp("(?:[&?])"+name+"[^&]*", "g"), "") 
         fillColor: "gold",} 
         str  += color: "#000&",; 
         str += name weight: 0,+ "=" + value; 
         str = "?" opacity: 1,+ str.slice(1); 
         // there is fillOpacity: 0.8
            };an official order for the query and the hash if you didn't know. 
         location.assign(location.pathname + str +   return L.circleMarker(latlng, geojsonMarkerOptions);
  location.hash) 
         };
    
     elsefunction addLayers(year) {
          geojsonMarkerOptionsmetarLayer = L.geoJSON(stations, { 
            radius pointToLayer: 4function (feature,
 latlng) { 
         fillColor: "grey",
     if (feature.properties.var == year) { 
  color: "#000",
            weight: 0,
    if(feature.properties.alarm>0 ){ 
         opacity: 1,
         geojsonMarkerOptions = { fillOpacity: 0.8
            };
               return L.circleMarker(latlng, geojsonMarkerOptions);radius: 4, 
           }    

      }},fillColor: "gold", 
      onEachFeature: onEachFeature
              }).addTo(metarLayer);


  }

loadMap();
addLayers(getUrlVars()["year"]);

if(getUrlVars()["year"]!="00spring2017" && getUrlVars()["year"]!="00october2018"&& getUrlVars()["year"]!="12october2018"){replace_search("year","00spring2017");}

if(getUrlVars()["year"]=="00spring2017"){document.getElementById("get00Spring2017").disabled = true;}
if(getUrlVars()["year"]=="12october2018"){document.getElementById("get12October2018").disabled = true;}
if(getUrlVars()["year"]=="00october2018"){document.getElementById("get00October2018").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,
 color: "#000", 
                     weight: 0, 
                     opacity: 1, 
                     fillOpacity: 0.8 
                   }; 
                   return L.circleMarker(latlng, geojsonMarkerOptions); 
                 } else { 
          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:collapsedgeojsonMarkerOptions = { 
                      radius: 4,
                      fillColor: "grey", 
                      color: "#000", 
                      weight: 0, 
                      opacity: 1, 
                      fillOpacity: 0.8 
                    };
                    return L.circleMarker(latlng, geojsonMarkerOptions); 
                  }
               }
             },
             onEachFeature: onEachFeature
          }).addTo(metarLayer);
    } 
    loadMap();
    addLayers(getUrlVars()["year"]);


if(getUrlVars()["year"]!="00summer2023"&& getUrlVars()["year"]!="12summer2023"){replace_search("year","00summer2023");} 
if(getUrlVars()["year"]=="00summer2023"){document.getElementById("get00summer2023").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("get12October2018get12summer2023").addEventListener("click", function () {
        replace_search("year","12october201812summer2023");      
    });
 document.getElementById("get00October2018get00summer2023").addEventListener("click", function () {
        replace_search("year","00october201800summer2023");      
    });
    

L.control.layers(baseLayers, overlays,{collapsed:false,disabled:true}).addTo(map); 


</script>
     
</script>
Page tree

Versions Compared

Old Version 9

New Version Current

Key
