...
| HTML |
|---|
<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>
<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++)
{
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.
reporTypesTable={"fields": ["id"], "data": [[16001], [16004]]};
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.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); }
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://charts-dev.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>';
layer.bindPopup(popupContent);
}
function onEachFeature(feature, layer) {
var popupContent ='<a href="'+'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+''+'" target="_blank"> <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+'" 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 = 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"]!="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) {
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("get12summer2023").addEventListener("click", function () { replace_search("year","12summer2023"); }); document.getElementById("get00summer2023").addEventListener("click", function () { replace_search("year","00summer2023"); });
L.control.layers(baseLayers, overlays,{collapsed:false,disabled:true}).addTo(map);
</script>
|
...