[OD] Filtrado capas localizador y paisaje

[OD] Filtrado capas localizador y paisaje

by deivil79

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<label for="letra">Que la provincia contenga las letras: </label>
<input type="text" id="letra" maxlength="20" value="C" />
<button id="filtrar" onclick="filtrar();">
  Filtrar
</button>
<div id="map"></div>

CSS

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

#letra {
  width: 120px;
}

JavaScript

let mapajs = M.map({
   container: "map",
   wmcfile: "callejero",
   controls: ["layerswitcher"]
 });

  let paisajes =  new M.layer.GeoJSON(
            {name: "Paisaje",
             url:  "http://www.iaph.es/ide/paisaje/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=paisaje:PICA_2018&outputFormat=application/json"
  });
  
  let localizador =  new M.layer.GeoJSON(
            {name: "Localizador",
             url:  "http://www.iaph.es/ide/localizador/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=localizador:localizador&outputFormat=application/json"
  });

 mapajs.addLayers(paisajes);
 mapajs.addLayers(localizador);

 function filtrar() {

   let filter = new M.filter.Function(feature => {
     let letra = document.getElementById('letra').value.toLowerCase();
     return feature.getAttribute('provincia').toLowerCase().indexOf(letra) >=0;
   });

   localizador.setFilter(filter);
   paisajes.setFilter(filter);
 }