CP-076-02 - FACTORIA - SIMB - ESTADÍSITCAS

Caso Prueba montaje indicadores ASSDA. TEST SIMBOLOGÍA ESTADÍSITICAS

by SIGC GUADALTEL

HTML

<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/assets/css/mapea.ol.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/printer/printer.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/plugins/attributetable/attributetable.min.css">
<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"...

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,
     ...

JavaScript

// CP-076-02 - FACTORÍA - 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 - s030/añadir1h - Personas beneficiarias hombres - color blue
// 2.2 - s0302m - Personas beneficiarias mujeres - color pink
// 3. Pulsar aplicar para cada cambio de configuración que se lleva a cabo



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']
  });

  M.proxy(true);
  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',
    extract: true
  });

  map.addLayers(wfsLayer);
	
	map.addPlugin(new M.plugin.AttributeTable());
};

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,
  addVariableButton: document.querySelector('#add-var')
};

const eventHandlers = {
  toggleStyleBuilder: function() {
    if (domEls.builder.hasAttribute('opened')) {
      domEls.builder.removeAttribute('opened');
     ...