[Mapea5] Bbox

by SIGC

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<div class="container">
      <div class="panel-container opened" id="panel">
        <div class="option">
          <label>
            Bbox
          </label>
          <input type="checkbox" id="bbox" />
        </div>
        <div class="option">
          <label>
            WMCFile
          </label>
          <input type="checkbox" checked id="wmcfile" />
        </div>
        <div class="option">
          <label>
            OSM
          </label>
          <input type="checkbox" id="osm" />
        </div>
        <div class="option">
          <label>
            Mapbox
          </label>
          <input type="checkbox" id="mapbox" />
        </div>
        <div class="option">
          <label>
            WMS
          </label>
          <input type="checkbox" id="wms" />
        </div>
        <div class="option">
          <label>
            WFS
          </label>
          <input type="checkbox" id="wfs" />
        </div>
        <div class="option">
          <label>
            GeoJSON
          </label>
          <input type="checkbox" id="json" />
        </div>
        <div class="option">
          <label>
            KML
          </label>
          <input type="checkbox" id="kml" />
        </div>
        <button id="refresh">Refrescar</button>
      </div>
      <div class="flex-center opened">
        <span class="g-cartografia-flecha-arriba tab" data-open="true" id="tab" />
      </div>
    </div>

    <div id="map" class="map"></div>

CSS

html,body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: auto;
    }

    .makidentist:before {
      content: '\e814';
      color: 'red'
    }

    .container {
      display: flex;
      justify-content: center;
      z-index: 9999;
    }

    .panel-container {
      top: -180px;
      height: 170px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      border: 1px solid #e5008a;
      z-index: 9998;
      padding: 15px;
      background-color: white;
      border-radius: 5%;
      transition: top 0.25s ease;
    }

    .option {
      display: flex;
      justify-content: space-between;
    }

    .tab {
      border-radius: 5%;
      background-color: #e5008a;
      padding: 0 25px;
      border: 1px solid black;
      font-size: 1.2rem;
      color: white;
      cursor: pointer;
      position: absolute;
      z-index: 9999;
      transition: top 0.25s ease;
    }

    .opened2 {
      top: 180px;
    }

    .opened {
      top: 0;
    }

    .flex-center {
      display: flex;
      justify-content: center;
    }

    .option label {
      margin-right: 15px;
    }

JavaScript

let map = M.map({
  container: 'map',
  controls: ['layerswitcher', 'scale', 'scaleline', 'mouse'],
  wmcfile: ['Mapa'],
  layers: ["WFST*CapaWFS*http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows?*sepim:campamentos*POINT***eyJwYXJhbWV0ZXJzIjpbImNvZGlnb3JlZ2kiLHsiZ3JhZGllbnQiOlsiYmx1ZSIsImN5YW4iLCJncmVlbiIsInllbGxvdyIsIm9yYW5nZSIsInJlZCJdLCJibHVyIjoxNSwicmFkaXVzIjoxMCwid2VpZ2h0IjoiY29kaWdvcmVnaSJ9LHsib3BhY2l0eSI6MX1dLCJkZXNlcmlhbGl6ZWRNZXRob2QiOiJNLnN0eWxlLkhlYXRtYXAuZGVzZXJpYWxpemUifQ=="]
});