[Test] Mapea - Agua

by Francisco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<link rel="stylesheet" href="http://publicacion.i-administracion.junta-andalucia.es/mapea/assets/css/mapea-5.0.1.ol.min.css">
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/mapea-5.0.1.ol.min.js"></script>
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/configuration-5.0.1.js"></script>
<div id="map" class="container">

  <select name="lista_capas" id="lista_capas">
</select>
  <button id="button">
SetMaxExtent
</button>
  <button id="button2">
Remove MaxExtent
</button>

</div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

// map
let map = M.map({
  container: 'map',
  controls: ["layerswitcher"],
  //layers: ["OSM", "WMS*https://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_Permeabilidad_Andalucia?*permeabilidad"]
  wmcfiles: ["mapa","satelite","hibrido"]
});



var selectList = document.getElementById("lista_capas");

document.querySelector('#button').onclick = () => {
  let capa = map.getLayers({
    "name": selectList.value
  })[0];
  console.log('Seteando maxextent de ' + capa.name);
  const bbox = map.getBbox();
  capa.setMaxExtent([bbox.x.min, bbox.y.min, bbox.x.max, bbox.y.max]);
}


document.querySelector('#button2').onclick = () => {
  let capa = map.getLayers({
    "name": selectList.value
  })[0];
  console.log('Eliminando maxextent de ' + capa.name);
  capa.setMaxExtent();
}

map.on(M.evt.COMPLETED, function() {
var select = document.getElementById("lista_capas");
        var length = select.options.length;
        for (i = 0; i < length; i++) {
          select.options[i] = null;
        }
      // Rellenamos el select con todas las capas del mapa

      map.getLayers().forEach(function(layer) {
        if (layer instanceof M.layer.WMS) {
          console.log(layer.name);
          let option = document.createElement("option");
          option.value = layer.name;
          option.text = layer.name;
          selectList.appendChild(option);
        }
      });
      
   });