Page History

   

<link rel="stylesheet" href="https://software.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>
      
<style> 
  #map { 
            width: 1250px; 
            height: 600px; 
       } }
    .legend {
      font-family: Arial, sans-serif;
 background:     background: #fff;
      #fff; padding: 10px;
      margin: 10px;
      border: 3px solid #000; 
   } }
      .legend h3 {
        margin-top: 0; 
  }    }
      .legend img { 
        vertical-align: middle; 
      } 
  </style>     
    </style>
    
    
<div 

<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="get00October2018get00may2019" type="button" value="OctoberMay 2018 [00UTC]"  />
<input id="get12October2018get12may2019" type="button" value="OctoberMay 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> 

  
\\ modify here**** 
<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-search78298463/list_stations_geo.js" type="text/javascript"></script>

<script>
    var    metarLayer;
   


<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() { 
       mbAttr = 'Map data &copy;© <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/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; 

          metarLayer = L.layerGroup(); 
        countries  countries = L.tileLayer(mbUrl, {id: 'mapbox.light', 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", "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"]]}; 
          reporTypes={}; 
          geojsonMarkerOptions = { 
            radius: 4, 
            fillColor: "#ff7800", 
            color: "#000", 
            weight: 0,
            opacity: 1,
            fillOpacity: 0.8 
      };


    }; 
          
          for(var i = 0; i < reporTypesTable.data.length; i++ ) { 
   
          reporTypes[reporTypesTable.data[i][0].toString()]=reporTypesTable.data[i][1];
          } 
          
          iconBase = 'https://software.ecmwf.int/wiki/download/attachments/27404036/';
        

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


 
          overlays = {


    };
        
  
      
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 17, 
         attribution:   attribution: 'Map data &copy;© <a href="http://openstreetmap.org">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' 
          }).addTo(map); 
       } 
    
   function onEachFeature(feature, layer) { 
          var popupContent = '<h2 id="firstHeading" 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://apps.ecmwf.int/satellite-alerts/image/?image=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'.png'+'" target="_blank">Verification results</a>'+'</p>'+'</div>';
'+feature.properties.stid+'.png'+'" target="_blank">Verification results</a>'+'</p>'+'</div>';
          
          layer.bindPopup(popupContent); 
       }
       function onEachFeature(feature, layer) { 
          var popupContent ='<a href="'+'https://apps.ecmwf.int/satellite-alerts/image/?image=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'.png'+'" target="_blank"> <img src = "https://apps.ecmwf.int/satellite-alerts/image/?image=svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'.png" height="200" > </a>' +'</div>'; 
          layer.bindPopup(popupContent); 
       }


       //function onEachFeature(feature, layer) { 
       // var popupContent = '<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 (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 ){ 
          layer.bindPopup(popupContent);
     }
   //function onEachFeature(feature, layer) geojsonMarkerOptions = { 
    //     var popupContent = '<img src = "'+'file://://scratch/mo/mozb/svs/confluence/svs_verif_'+feature.properties.var+'_'+feature.properties.stid+'.png">'+'</div>';
   //   radius:  layer.bindPopup(popupContent);4, 
   //}




   function replace_search(name, value) {
    var str = location.search;
    if (newfillColor: RegExp("[&?]"+name+"([=&].+)?$").test(str)) {
"gold", 
              str     = str.replace(new RegExp("(?:[&?])"+name+"[^&]*", "g"), "")
 color: "#000", 
      }
    str += "&";
      str += name + "=" + value;
weight: 0, 
      str = "?" + str.slice(1);
    // there is an official order for theopacity: query1, and
 the hash if you didn't know.
    location.assign(location.pathname + str + location.hash)
  };  
   fillOpacity: 

0.8 
      
  function addLayers(year) {
     metarLayer = L.geoJSON(stations, {

 }; 
     pointToLayer: function (feature, latlng) {
     
     ifreturn (feature.properties.var == year) {
L.circleMarker(latlng, geojsonMarkerOptions); 
      if(feature.properties.alarm>0 ){
          geojsonMarkerOptions} =else { 
                  radius: 4,
geojsonMarkerOptions = { 
         fillColor: "gold",
            colorradius: "#000"4,
            weight: 0,
            opacityfillColor: 1"grey", 
            fillOpacity: 0.8
            };color: "#000", 
               return L.circleMarker(latlng, geojsonMarkerOptions);
      weight: 0,  
  }    
     else {
          geojsonMarkerOptionsopacity: =1, {
            radius: 4,
            fillColor: "grey",
   fillOpacity: 0.8 
         color: "#000",
          };
  weight: 0,
            opacity: 1,
    return L.circleMarker(latlng, geojsonMarkerOptions); 
     fillOpacity: 0.8
            };
               return L.circleMarker(latlng, geojsonMarkerOptions);
}
             },
        

     onEachFeature: }},onEachFeature
      onEachFeature: onEachFeature
    }).addTo(metarLayer);


    } 

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


if(getUrlVars()["year"]!="00october201800may2019"&& getUrlVars()["year"]!="12october201812may2019"){replace_search("year","00october201800may2019");} 
if(getUrlVars()["year"]=="00october201800may2019"){document.getElementById("get00October2018get00may2019").disabled = true;} 
if(getUrlVars()["year"]=="12october201812may2019"){document.getElementById("get12October2018get12may2019").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:collapsed', function(e) { 

        featuresLayer.eachLayer(function(layer) {    //restore feature color 
            featuresLayer.resetStyle(layer);
        });    
  }); 
 });
    map.addControl( searchControl );  //initialize search control 
}

document.getElementById("get12October2018get12may2019").addEventListener("click", function () {
        replace_search("year","12october201812may2019");      
    });
 document.getElementById("get00October2018get00may2019").addEventListener("click", function () {
        replace_search("year","00october201800may2019");      
    });
    

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


    
</script>