[Wiki] Mapea 4 - estadisticos

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>
<div id="map"></div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

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

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

mapajs.addWFS(layer);

let stylechart = new M.style.Chart({
  type: 'pie',
  donutRatio: 0.5,
  radius: 25,
  //offsetX: 0,
 // offsetY: 0,
  stroke: {
    color: 'black',
    width: 1
  },
//  animation: true,
  scheme: M.style.chart.schemes.Custom,
 // rotateWithView: true,
 // fill3DColor: '#CC33DD',
  variables: [{
    attribute: 'censo_1970',
    legend: 'Censo 1970',
    fill: '#F2F2F2',
    label: {
    	stroke:{
      	color:'white',
        width: 2
      },
      radiusIncrement: 10,
      fill: 'black',
      text: function(value, values, feature) {
        return value.toString();
      },
      font: 'Comic Sans MS',
      //scale: 1.25
    }
  }, {
    attribute: 'censo_1982',
    legend: 'Censo 1982',
    fill: 'blue',
    label: {
      text: function(value, values, feature) {
        return value.toString();
      },
      radiusIncrement: 10,
      stroke: {
        color: '#fff',
        width: 2
      },
      fill: 'blue',
      font: 'Comic Sans MS',
      //scale: 1.25
    }
  }, {
    attribute: 'censo_1992',
    legend: 'Censo 1992',
    fill: 'pink',
    label: {
      text: function(value, values, feature) {
        // return new String(value).toString();
        return value.toString();
      },
      //radiusIncrement: 10,
      stroke: {
        color: '#fff',
        width: 2
      },
      fill: 'red',
      font: 'Comic Sans MS',
      //scale: 1.25
    }
  }, {
    attribute: 'censo_2002',
    legend: 'Censo 2002',
    fill: 'pink',
    label: {
      text: function(value, values, feature) {
        // return new String(value).toString();
        return value.toString();
      },
     ...