[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'],
  wmcfiles: ['callejero']
});
window.map = map;
const isChecked = (id) => {
  return document.querySelector(`#${id}`).checked;
}

const tab = document.querySelector('#tab');
const button = document.querySelector('#refresh');
tab.addEventListener('click', (evt) => {
  const panel = document.querySelector("#panel");

  if (evt.target.dataset.open === "true") {
    panel.classList.remove("opened");
    evt.target.dataset.open = "false";
    evt.target.classList.add("g-cartografia-flecha-abajo")
    evt.target.classList.remove("g-cartografia-flecha-arriba")
  } else {
    panel.classList.add("opened");
    evt.target.classList.remove("g-cartografia-flecha-abajo")
    evt.target.classList.add("g-cartografia-flecha-arriba")
    evt.target.dataset.open = "true";
  }
});

const initMap = () => {
  map.destroy();
  const layers = [];
  const options = {
    container: 'map',
    controls: ['layerswitcher', 'scale', 'scaleline', 'mouse'],
  };

  if (isChecked('bbox')) {
    options.bbox = "197614.733679,4139327.452359,201646.116653,4141276.060611";
  }

  if (isChecked('wmcfile')) {
    options.wmcfiles = ['callejero'];
  }

  if (isChecked('osm')) {
    layers.push('OSM*true')
  }

  if (isChecked('mapbox')) {
    layers.push('Mapbox*mapbox_streets*true')
  }

  if (isChecked('json')) {
    layers.push('GeoJSON*Provincias*http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sepim:EstructuraJA&maxFeatures=50&outputFormat=application%2Fjson*true*');
  }

  if (isChecked("wms")) {
    layers.push("WMS*Redes*http://www.ideandalucia.es/wms/mta400v_2008?*Redes_energeticas*true");
  }

  if (isChecked('kml')) {
    layers.push("KML*Servicios*http://www.callejerodeandalucia.es/munymap/kmls/u946/21/21030/*mapachucena.kml*true");
  }
  if (isChecked('wfs')) {
   ...