Ejemplo Uruguay - Estadístico

by SIGC GUADALTEL

HTML

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

CSS

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

JavaScript

// Definimos el mapa
let mapajs = M.map({
  container: "map",
  controls: ['mouse', 'layerswitcher', 'panzoombar'],
  layers: ["OSM"],
  projection: 'EPSG:4326*d',
  center: [-50, -34],
  zoom: 3
})

const generateData = function(number) {
  let random = Math.random() * number;
  return Math.round(random);
};

const generateCoordinate = function(options) {
  let coordinateX = options.xCoord - Math.random() * options.xError;
  let coordinateY = options.yCoord - Math.random() * options.yError;
  return [coordinateX, coordinateY];
};

const generateFeature = function(id, options) {
  let feature = {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": generateCoordinate(options)
    },
    "properties": {}
  };
  return feature;
}

let features = [];

for (let i = 0; i < 1000; i++) {
  features.push(generateFeature(`${i}`, {
    xCoord: -54,
    yCoord: -31,
    xError: 3.3,
    yError: 3.3
  }));
}

features2 = []
for (let i = 0; i < 1000; i++) {
  let source = (generateFeature(`${i}`, {
    xCoord: -54,
    yCoord: -31,
    xError: 3.3,
    yError: 3.3
  }));
  features2.push(new M.Feature(`${i}`, source));
}

let source = {
  type: "FeatureCollection",
  features: [...features]
};

features.forEach((feature, i) => {
  feature.properties["name"] = (`centro ${i+1}`);
  feature.properties["data_1"] = (generateData(600));
  feature.properties["data_2"] = (generateData(500));
  feature.properties["data_3"] = (generateData(200));
});

let layer = new M.layer.GeoJSON({
  crs: 4326,
  name: "uruguay",
});
mapajs.addLayers(layer);
layer.setSource(source);
let stylechart = new M.style.Chart({
  type: M.style.chart.types.PIE,
  animation: true,
  radius: 18,
  offsetX: 0,
  offsetY: 0,
  scheme: M.style.chart.schemes.Classic,
  stroke: {
    color: 'white',
    width: 1
  },
  variables: [{
    attribute: "data_1",
    label: {
      stroke: {
        color: 'black',
        width: 2
      },
      fill: M.style.chart.schemes.Classic[0],
    ...