CP-076-01

Estadísticos GeoJSON

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

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