Mapea5 - Proporcional

by SIGC GUADALTEL

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>
<label for="min">Tamaño mínimo</label>
<input id="min" type="number" value=5 min=1 max=10 />
<label for="max">Tamaño máximo</label>
<input id="max" type="number" value=15 min=10 max=30 />
<br>
<input type="radio" id="symbol" name="tipo" value="symbol"> Símbolo
<br>
<input type="radio" id="simple" name="tipo" value="simple" checked=true>
<label for="borde">Borde</label>
<input id="borde" type="color" value="#ffffff">
<label for="relleno">Relleno</label>
<input id="relleno" type="color" value="#000000">
<br>
<input type="radio" id="icono" name="tipo" value="icono">
<img src="https://cdn0.iconfinder.com/data/icons/citycons/150/Citycons_building-32.png" />
<br>
<input type="button" onclick="aplicar()" value="Aplicar" />
<div id="map" class="container"></div>

CSS

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

JavaScript

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

let indicadoresMun = new M.layer.WFS({
  name: "Municipios Indicadores",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/wfs?",
  namespace: "tematicos",
  name: "ind_mun_simp",  
  geometry: 'POLYGON',
});

mapajs.addLayers(indicadoresMun);

function aplicar() {

  let sizeMin = document.getElementById('min').value;
  let sizeMax = document.getElementById('max').value;

  let proportionalVector = new M.style.Proportional('tot_ibi', sizeMin, sizeMax, new M.style.Point({
    fill: {
      color: document.getElementById('relleno').value
    },
    stroke: {
      color: document.getElementById('borde').value,
      width: 2
    }
  }));

  //M.style.Proportional.SCALE_PROPORTION = 20;
  let proportionalIcon = new M.style.Proportional('tot_ibi', sizeMin, sizeMax, new M.style.Point({
    icon: {
      src: 'https://cdn0.iconfinder.com/data/icons/citycons/150/Citycons_building-128.png',
      opacity: 0.8,
      anchor: [0.5, 0.5],
      rotate: false,
      snaptopixel: true,
    }
  }));

  let proportionalSymbol = new M.style.Proportional('tot_ibi', sizeMin, sizeMax, new M.style.Point({
    icon: {
      form: M.style.form.LOZENGE,
      gradient: true,
      fontsize: 0.8,
      radius: 20,
      color: 'blue',
      fill: '#8A0829',
      gradientcolor: '#088A85'
    }
  }));

  switch (document.querySelector('input[name="tipo"]:checked').value) {
    case 'simple':
      indicadoresMun.setStyle(proportionalVector);
      break;
    case 'icono':
      indicadoresMun.setStyle(proportionalIcon);
      break;
    case 'symbol':
      indicadoresMun.setStyle(proportionalSymbol);
      break;
  }

}