[Wiki] Coropletas

by SIGC GUADALTEL

HTML

<script src="https://mapea4-sigc.juntadeandalucia.es/js/mapea-5.2.0.ol.min.js"></script>
<link rel="stylesheet" href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.2.0.ol.min.css">
<script src="https://mapea4-sigc.juntadeandalucia.es/js/configuration-5.2.0.js"></script>
<label for="firstColor">Color inicial</label>
<input id="firstColor" type="color" value="#000000">
<label for="lastColor">Color final</label>
<input id="lastColor" type="color" value="#ffffff">
<input type="radio" id="JENKS" name="quantification" value="JENKS" checked=true> JENKS
<input type="radio" id="QUANTILE" name="quantification" value="QUANTILE"> QUANTILE
<input id="breaks" type="number" value=5 min=1 max=15 />
<br>
<input type="button" onclick="aplicar()" value="Aplicar" />
<div id="map"></div>

CSS

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

JavaScript

let lyProv = new M.layer.WFS({
  url: "http://clientes.guadaltel.es/geoserver/cta/wms?",
  namespace: "tematicos",
  name: "chile_censos",
  legend: "Censos",
  geometry: 'POLYGON',
});

function aplicar() {
  let colorInicial = document.getElementById("firstColor").value;
  let colorFinal = document.getElementById("lastColor").value;
  let breaks = document.getElementById("breaks").value;
  let quantification = document.getElementById("JENKS").checked ? new M.style.quantification.JENKS(breaks) : new M.style.quantification.QUANTILE(breaks);
  let choropleth = new M.style.Choropleth(valueField, [colorInicial, colorFinal], quantification);
  layer.setStyle(choropleth);
}

let mapajs = M.map({
  container: 'map',
  layers: ["OSM"],
  projection: 'EPSG:3857*m',
  controls: ["layerswitcher"],
});

let valueField = "censo_2017";
let layer = lyProv; 
mapajs.addLayers(layer);
aplicar();