<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://apps.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/188024741/ECMWF_WMS_getCapabilities_20200824.xml?version=1&modificationDate=1598257833161&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>