<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.js" type="text/javascript"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style>
.map { height: 137px; width: 260px; margin-top: 10px; float: left; }
.caption { background-color: #808080; color: white; font-size:1.2em; font-weight: 600; margin-top:-120px; position:relative; width: 260px; z-index: 9; }
</style>
<script type="text/javascript">
var parser = new ol.format.WMSCapabilities();
function add_map(map_id, layer) {
var map = L.map(map_id, {
zoom: 0,
zoomControl:false,
attributionControl:false,
dragging:false,
fullscreenControl: false,
crs: L.CRS.EPSG4326,
maxZoom: 8,
// minZoom: 16,
maxBounds: [
//south west
[30, -25],
//north east
[72, 45]
],
center: [51, 10]
});
var ecmwf = "https://appseccharts.ecmwf.int/wms?token=public";
var wms = L.tileLayer.wms(ecmwf, {
layers: layer+',foreground',
format: 'image/png',
version : '1.3.0',
transparent: true
});
wms.addTo(map);
}
$.ajax('/download/attachments/208502280/ECMWF_WMS_getCapabilities_2020082420220216.xml?api=v2').then(function(response) {
var result = parser.read(response);
$('#log').html(window.JSON.stringify(result, null, 2));
var i = 0;
for (var key in result["Capability"]["Layer"]["Layer"]) {
if ( (result["Capability"]["Layer"]["Layer"].hasOwnProperty(key)) && ( result["Capability"]["Layer"]["Layer"][key]["Name"].substr(0,18) == "composition_europe") ) {
var layer = result["Capability"]["Layer"]["Layer"][key]["Name"];
var map_id = "map-"+ i;
console.log(map_id, layer);
AJS.$('<div/>', { id: map_id, class: 'map' }).appendTo('#map');
AJS.$('<span class="caption">'+layer+'</span>').appendTo('#'+map_id);
add_map(map_id, layer);
i += 1;
}
}
});
</script>
<div id="map"></div>
|