V4_2_0_FACT_ASSDACIPS_DEMO_COROPLETAS_PROPORTIONAL

Demo ASSDA-CIPS.COROPLETAS_PROPORTIONAL

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/assets/css/mapea.ol.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/geosearchbylocation/geosearchbylocation.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/wfstcontrols/wfstcontrols.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/geosearch/geosearch.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/printer/printer.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/measurebar/measurebar.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/streetview/streetview.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/js/configuration.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/geosearchbylocation/geosearchbylocation.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/wfstcontrols/wfstcontrols.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/geosearch/geosearch.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/printer/printer.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/measurebar/measurebar.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet"...

CSS

html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
 }
 
 .m-popup {
   position: fixed;
   bottom: inherit;
   left: initial;
   top: 0;
   right: 0;
   z-index: 9999;
 }
 
 .m-popup:before {
   border-top-color: initial;
   border-width: 0;
   left: inherit;
   margin-left: 0;
 }
 
 .m-popup:after,
 .m-popup:before {
   top: 0;
   border: inherit;
   content: " ";
   height: 0;
   width: 0;
   position: inherit;
   pointer-events: inherit;
 }
 
 .m-popup tr:nth-child(odd) {
   background-color: rgba(41, 105, 168, 0.78);
   color: white;
 }
 
 .tooltip {
   position: relative;
   padding: 3px;
   background: rgba(0, 0, 0, 0.9);
   color: white;
   opacity: 0.7;
   white-space: nowrap;
   font: 10pt sans-serif;
 }
 
 #categoria {
   background-color: rgba(55, 126, 235, 0.64);
   padding: 6px;
   border: 2px solid black;
 }
 
 .panel {
   display: none;
   padding: 10px;
   background-color: #f6f6f6;
   width: 200px;
   cursor: pointer;
 }
 
 .closePanel {
   display: none;
 }
 
 .openPanel {
   display: block;
   position: fixed;
   bottom: inherit;
   left: initial;
   top: 0;
   right: 0;
   z-index: 9999;
   border: 6px solid #5e8fb7;
 }

JavaScript

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

let layer = new M.layer.WFS({
  name: "Municipios",
  url: "https://ws243.juntadeandalucia.es/geoserver/MSS/wfs?",
  namespace: "MSS",
  name: "mss_v_centros",
  legend: "Centros",
  geometry: 'POLYGON',
});;

mapajs.addLayers(layer);
mapajs.addPlugin( new M.plugin.AttributeTable());

/**
 * 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: "gid",
  maxRadius: 25,
  minRadius: 8
};

/**
 * Funcion que calcula el maximo y el minimo valor del atributo
 * por el cual se calcula la proporcion de los features de la cama
 */
const getMaxMinValues = function(features, attribute) {
  let [minValue, maxValue] = [undefined, undefined];
  let filteredFeatures = features.filter(feature =>
    !isNaN(feature.getAttribute(attribute))).map(f => parseInt(f.getAttribute(attribute)));
  let index = 1;
  if (!M.utils.isNullOrEmpty(filteredFeatures)) {
    minValue = filteredFeatures[0];
    maxValue = filteredFeatures[0];
    while (index < filteredFeatures.length - 1) {
      let posteriorValue = filteredFeatures[index + 1];
      minValue = (minValue < posteriorValue) ? minValue : posteriorValue;
      maxValue = (maxValue < posteriorValue) ? posteriorValue : maxValue;
      index++;
    }
  }
  return [minValue, maxValue];
}

/**
 * Funcion que en base al valor maximo, al valor minimo, al radio maximo,
 * al radio minimo y al valor del atributo del feature devuelve el radio
 * que le corresponde al realizar una representación proporcional
 */
const proportionalFunction = function(feature, options) {
  let value = parseFloat(feature.getAttribute(options.attribute));
  return calcProportion(value, options.minValue, options.maxValue, options.minRadius, options.maxRadius);
}

/**
 * Funcion...