CP-076-02

Estadísticos WFS

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>
<div id="map" class="container"></div>
<div id="style-builder" opened="true">
  <div class="form-content">
    <div class="form-group">
      <h2 class="form-group-title">Gráfica</h2>
      <div class="form-field">
        <label>Type</label>
        <select name="type">
              <option value="BAR">bar</option>
              <option value="PIE">pie</option>
              <option value="PIE_3D">pie3d</option>
              <option value="DONUT">donut</option>
            </select>
      </div>
      <div class="form-field">
        <label>Scheme</label>
        <select name="scheme">
              <option value="Custom">Custom</option>
              <option value="Classic">Classic</option>
              <option value="Dark">Dark</option>
              <option value="Neon">Neon</option>
              <option value="Pale">Pale</option>
              <option value="Pastel">Pastel</option>
            </select>
      </div>
      <div class="form-field">
        <label>Radius</label>
        <input type="number" name="radius" value="25">
      </div>
      <div class="form-field">
        <label>DonutRatio</label>
        <input type="number" name="donutRatio" value="0.5">
      </div>
      <div class="form-field">
        <label>Offset X</label>
        <input type="number" name="offsetX" value="0">
      </div>
      <div class="form-field">
        <label>Offset Y</label>
        <input type="number" name="offsetY" value="0">
      </div>
      <div data-type="pie3d" class="form-field">
        <label>Fill 3D color</label>
        <input type="text" name="fill3DColor" value="#CC33DD">
      </div>
      <div class="form-field">
        <label>rotateWithView</label>
        <input...

CSS

<style rel="stylesheet">html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
}

.hidden {
  display: none;
}

#style-builder {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 0.4s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0, .24, .24, 1);
  box-shadow: 0px 4px 11px black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#style-builder[opened] {
  transform: translateY(0);
}

#style-builder>.display-handler {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -31px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

#style-builder>.display-handler>span {
  font-family: sans-serif;
  background-color: #4a67ff;
  color: white;
  padding: 5px 15px 10px 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}

#style-builder>.form-content,
#style-builder>.form-content>.form-group,
#style-builder>.form-content>.form-group>.chart-variable,
#style-builder>.form-content>.form-group .form-field {
  display: flex;
}

#style-builder>.form-content,
#style-builder>.form-content>.form-group .form-field {
  flex-flow: row nowrap;
}

#style-builder>.form-content {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 20px 20px 20px;
  max-height: 70vh;
  overflow: hidden;
}

#style-builder>.form-content>.form-group,
#style-builder>.form-content>.form-group .form-field {
  align-items: flex-start;
}

#style-builder>.form-content>.form-group>.chart-variable {
  flex-flow: column nowrap;
}

#style-builder>.form-content>.form-group {
  flex-flow: row wrap;
  max-width: 30%;
  padding: 0 10px;
  max-height: inherit;
  overflow: auto;
}

#style-builder>.form-content>.form-group>.chart-variable {
  border: 1px solid black;
  border-radius: 4px;
 ...

JavaScript

// CP-076-02 - DESA - SIMB - ESTADÍSITCAS
// Caso de prueba orientado a verificar el correcto funcionamiento de las opciones de estadísticas
// 1. Cargar capa WFS
// 2. Definir variables 
// 2.1 - s0301h - Personas beneficiarias hombres - color blue
// 2.2 - s0302m - Personas beneficiarias mujeres - color pink
/**
ATRIBUTOS DISPONIBLES: "poblacion", "s0100", "s0101", "s0102", "s0103", "s0104", "s0200", "s0201", "s0203", "s0204", "s0300", "s0301h", "s0302m", "s0301", "s0302", "s0303", "s0304", "s0305", "s0306", "s0307", "s0308", "s0309", "s0400", "s0401", "s01_01_sol", "s01_01_so2", "s03_01_ben", "s03_01_be2", "s01_01_so3", "s03_01_be3", "te0000", "te0001"
*/

const getRandom = () => Math.round(Math.random() * 100);

const defaultStyles = {
  polygon: new M.style.Polygon({
    fill: {
      color: '#33AA21'
    },
    stroke: {
      color: '#FFF',
      width: 3
    }
  }),
  multipolygon: new M.style.Polygon({
    fill: {
      color: '#224ACB'
    },
    stroke: {
      color: '#FFF',
      width: 3
    }
  })
};

const initializeMap = () => {
  window.map = new M.map({
    container: 'map',
    projection: 'EPSG:4326*d',
    layers: ['OSM'],
    controls: ['layerswitcher'],
    zoom: 5,
    center: [-6, 39]
  });

  window.wfsLayer = new M.layer.WFS({
    name: "Centros ASSDA",
    url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
    namespace: "mapea",
    name: "assda_zts_cap_point_indicadores",
    legend: "ASSDA - ZTS",
    getfeatureinfo: "plain",
    geometry: 'POINT',
  });

  map.addLayers(wfsLayer);
};

const domEls = {
  builder: document.querySelector('#style-builder'),
  toggleHandler: document.querySelector('#style-builder > .display-handler'),
  showButtonText: document.querySelector('#style-builder > .display-handler > span[data-role="show"]'),
  hideButtonText: document.querySelector('#style-builder > .display-handler > span[data-role="hide"]'),
  variablesContainer: document.querySelector('.chart-variable').parentNode,
 ...