[INT] Mapea4 - MTA estilos

by SIGC GUADALTEL

HTML

<script src="http://www.juntadeandalucia.es/sandetel/publicacion/mapea/js/mapea.ol3.min.js"></script>
<script src="http://www.juntadeandalucia.es/sandetel/publicacion/mapea/js/configuration.js"></script>
<link rel="stylesheet" href="http://www.juntadeandalucia.es/sandetel/publicacion/mapea/assets/css/mapea.ol3.min.css">
<script src="http://www.juntadeandalucia.es/sandetel/publicacion/mapea/plugins/wfstcontrols/mapea.wfstcontrols.ol3.min.js"></script>
<link rel="stylesheet" href="http://www.juntadeandalucia.es/sandetel/publicacion/mapea/plugins/wfstcontrols/wfstcontrols.min.css">
<div id="map" class="container">
  <div id="builder" class="panel m-control">
    Estilos
    <br>
    <input type="radio" name="estilo" id="color" value="Ráster 2001. Color polígonos transparentes" onClick="cambiaMTA(color)" checked="checked" />
    <label for="sizeSmall">Color polígonos transparentes</label>
    <br>
    <input type="radio" name="estilo" id="byn" onClick="cambiaMTA(byn)" value="Ráster 2001. Monocromo negro" />
    <label for="sizeMed">Monocromo negro</label>
    <br>
    <input type="radio" name="estilo" id="gris" onClick="cambiaMTA(gris)" value="Ráster 2001. Monocromo gris" />
    <label for="sizeMed">Monocromo gris</label>
    <br>

  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

div.panel {
  background-color: rgba(255, 255, 255, 0.9);
  left: 5%;
  width: 30%;
  height: 20%;
  top: 5%;
}

JavaScript

var mta10 = new M.layer.WMS({
          url: 'http://www.ideandalucia.es/wms/mta10r_2001-2013?version=1.3.0',
          name: 'mta10_raster_2001',
          legend: 'Ráster 2001',
          transparent: false,
          tiled: true
        });

        mapajs = M.map({
          container: "map",
          layers: [mta10],
          center: [358011, 4105333],
          zoom: 11,
          controls: ['layerswitcher', 'mouse']
        });



        function cambiaMTA(estilo) {
          console.log('Cambiando a estilo: ' + estilo.value);
          mta10.getImpl().getOL3Layer().getSource().getParams()["STYLES"] = estilo.value;
          mta10.getImpl().getOL3Layer().getSource().updateParams({
            "time": Date.now()
          });

          // Cambiamos la leyenda
          var legendStyle = mta10.getLegendURL();
          var re = /(STYLE=)[^\&]+/;
          var nuevoLegend = re.test(legendStyle) ? legendStyle.replace(re, "STYLE=" + estilo.value) : legendStyle + "&STYLE=" + estilo.value;
          mta10.setLegendURL(nuevoLegend);

          var panel = mapajs.getPanels('layerswitcher')[0];
          panel.collapse();
        }