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

let map = new M.map({
  container: 'map',
  projection: 'EPSG:4326*d',
  layers: ['OSM']
});

let geojson = new M.layer.GeoJSON({
  name: 'paises',
  source: {
    "type": "FeatureCollection",
    "crs": {
      "type": "name",
      "properties": {
        "name": "EPSG:4326"
      }
    },
    "features": [{
        "type": "Feature",
        "properties": {
          "name": "Bahamas",
          "continent": "North America",
          "iso": "BS",
          "iso3": "BHS"
        },
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [
            [
              [
                [-77.53466, 23.75975],
                [-77.78, 23.71],
                [-78.03405, 24.28615],
                [-78.40848, 24.57564],
                [-78.19087, 25.2103],
                [-77.89, 25.17],
                [-77.54, 24.34],
                [-77.53466, 23.75975]
              ]
            ],
            [
              [
                [-77.82, 26.58],
                [-78.91, 26.42],
                [-78.98, 26.79],
                [-78.51, 26.87],
                [-77.85, 26.84],
                [-77.82, 26.58]
              ]
            ],
            [
              [
                [-77, 26.59],
                [-77.17255, 25.87918],
                [-77.35641, 26.00735],
                [-77.34, 26.53],
                [-77.78802, 26.92516],
                [-77.79, 27.04],
                [-77, 26.59]
              ]
            ]
          ]
        }
      }, {
        "type": "Feature",
        "properties": {
          "name": "Belize",
          "continent": "North...