V4_2_0_FACT_ASSDACIPS_DEMO_COROPLETAS_PROPORTIONAL

Demo ASSDA-CIPS.COROPLETAS_PROPORTIONAL

by gdtel_mapea_test

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.GeoJSON({
  name: "Municipios",
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?outputFormat=application/json&request=getfeature&typeNames=mapea:da_municipio_pol&version=1.3.0",
});

let layer2 = new M.layer.GeoJSON({
  name: "Municipios2",
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?outputFormat=application/json&request=getfeature&typeNames=mapea:da_municipio_pol&version=1.3.0",
});

let layer3 = new M.layer.GeoJSON({
  name: "Municipios3",
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?outputFormat=application/json&request=getfeature&typeNames=mapea:da_municipio_pol&version=1.3.0",
});

mapajs.addLayers([layer]);
layer2.setStyle(new M.style.Point({
  fill: {
    color: 'red'
  },
  radius: 5
}));

/**
 * 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
};

layer.on(M.evt.LOAD, function() {
  layer.getFeatures().forEach(f => f.setAttribute('porcentaje', Math.round(Math.random() * 100)));
  layer.setStyle(choropleth);
  layer.setStyle(new M.style.Proportional(options.attribute, options.minRadius, options.maxRadius));
});


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