...
| HTML |
|---|
<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>
#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>
<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="get00Spring2017" type="button" value="Spring 2017 [00UTC]" />
<input id="get12Autumn2018get12October2018" 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://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() {
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/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
metarLayer = L.layerGroup();
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: [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: '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 (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[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) {
// 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 ){
geojsonMarkerOptions = {
radius: 4,
fillColor: "gold",
color: "#000",
weight: 0,
opacity: 1,
fillOpacity: 0.8
};
return L.circleMarker(latlng, geojsonMarkerOptions);
}
else {
geojsonMarkerOptions = {
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"]!="00spring2017" && getUrlVars()["year"]!="12spring2017"&& getUrlVars()["year"]!="12autumn2018"){replace_search("year","00spring2017");}
if(getUrlVars()["year"]=="00spring2017"){document.getElementById("get00Spring2017").disabled = true;}
if(getUrlVars()["year"]=="12autumn2017"){document.getElementById("get12October2018").disabled = true;}
if(getUrlVars()["year"]=="00autumn2017"){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,
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("get00Spring2017").addEventListener("click", function () {
replace_search("year","00spring2017");
});
document.getElementById("get12Spring2017").addEventListener("click", function () {
replace_search("year","12spring2017");
});
document.getElementById("get12Autumn2018").addEventListener("click", function () {
replace_search("year","12autumn2018");
});
document.getElementById("get12October2018").addEventListener("click", function () {
replace_search("year","12october2018");
});
document.getElementById("get00October2018").addEventListener("click", function () {
replace_search("year","00october2018");
});
L.control.layers(baseLayers, overlays,{collapsed:false,disabled:true}).addTo(map);
</script>
|
...