CP-090-07

COMBINACION COROPLETAS - PROPORTIONAL

by SIGC

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>

<button id="aplicarProporcional" onclick="aplicarProporcional()">Aplicar Proporcional</button>
<div id="map"></div>

CSS

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

JavaScript

// Caso de pruebas
// 1. Cargar capa de municipios
// 2. Se aplica coropletas - incluido campo porcentaje que se añade a la capa y se generan campos aleatorios
// 3. Pulsar Aplicar Proporcional - aplica proporcional respetando la simbología anterior


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

let layer = new M.layer.WFS({
  name: "Municipios",
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
  namespace: "mapea",
  name: "da_municipio_pol",
  legend: "Municipios - COROPLETAS",
  geometry: 'POLYGON',
});;

mapajs.addLayers(layer);

/**
 * attribute: Parametro por el cual se calcula la proporcion en los features
 * maxRadius: Parametro que define el radio maximo de la proporcion
 * minRadius: Parametro que define el radio minimo de la proporcion
 */
let options = {
  attribute: "area",
  maxRadius: 25,
  minRadius: 8
};


let choropleth = new M.style.Choropleth("porcentaje", ['#0edfd0', '#ee440d'], () => [50, 80, 100]);

layer.on(M.evt.LOAD, function() {
  // Crea sobre la capa una atributo de porcentaje aleatorio para aplicar clasificación inicial sobre este.
  layer.getFeatures().forEach(f => f.setAttribute('porcentaje', Math.round(Math.random() * 100)));
  // Aplica estilo coropleta
  layer.setStyle(choropleth);

});



function aplicarProporcional() {
  // Aplica proporcional - En este caso se va a preservar el estilo anterior pero se aplican los atributos proporcionales para representación
  layer.setStyle(new M.style.Proportional(options.attribute, options.minRadius, options.maxRadius));
}