CP-076-01 - DESA - SIMB - ESTADÍSITCAS

TEST SIMBOLOGÍA ESTADÍSITICAS

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" class="container"></div>
<div...

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

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
    }
  })
};
var map = new M.map({
    container: 'map',
    projection: 'EPSG:4326*d',
    layers: ['OSM'],
		controls: [ 'layerswitcher']
  });
  
  let points = new M.layer.GeoJSON({
  name: "points",
  source: {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "alumnos": 400,
          "colegios": 2
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
          -6.383056640625,
          37.3002752813443
        ]
        }
    },
      {
        "type": "Feature",
        "properties": {
          "alumnos": 340,
          "colegios": 5
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
          -6.119384765624999,
          37.60552821745789
        ]
        }
    },
      {
        "type": "Feature",
        "properties": {
          "alumnos": 675,
          "colegios": 3
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
          -5.679931640625,
          37.43997405227057
        ]
        }
    },
      {
        "type": "Feature",
        "properties": {
          "alumnos": 440,
          "colegios": 2
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
          -6.0205078125,
          37.17782559332976
        ]
        }
    },
      {
        "type": "Feature",
        "properties": {
          "alumnos": 520,
          "colegios": 6
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
          -5.47119140625,
          37.84015683604136
        ]
       ...