CP-030-02 - CARGAR WFS - geotemáticos

CARGAR WFS - geotemáticos

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>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/printer/printer.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/printer/printer.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/attributetable/attributetable.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/attributetable/attributetable.ol.min.js"></script>
<div id="map" class="container"></div>

CSS

html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: scroll;
      }
      
      .m-popup{
position: fixed;
    bottom: inherit;
    left: initial;
    top: 0;
    right: 0;
    z-index: 9999;
      }
      
      .m-popup:before {
    border-top-color: initial;
    border-width: 0;
    left: inherit;
    margin-left: 0;
}

.m-popup:after, .m-popup:before {
    top: 0;
    border: inherit;
    content: " ";
    height: 0;
    width: 0;
    position: inherit;
    pointer-events: inherit;
}

.m-popup tr:nth-child(odd) {
    background-color: rgba(41, 105, 168, 0.78);
    color: white;
}

.tooltip {
  position: relative;
  padding: 3px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  opacity: 0.7;
  white-space: nowrap;
  font: 10pt sans-serif;
}

#categoria{
      background-color: rgba(55, 126, 235, 0.64);
    padding: 6px;
    border: 2px solid black;
}

  .panel {
        display: none;
        padding: 10px;
        background-color: #f6f6f6;
        width: 200px;
        cursor: pointer;
      }

      .closePanel {
        display: none;
      }

      .openPanel {
        display: block;
        position: fixed;
        bottom: inherit;
        left: initial;
        top: 0;
        right: 0;
        z-index: 9999;
        border: 6px solid #5e8fb7;
      }

JavaScript

// CP-030-02 - CARGAR WFS - geotemáticos
// TEST
// Carga WFS de geotemáticos
// 1. Carga WFS geotemáticos
// 2. Establece estilo con rado = 10 

var mapajs = new M.map({
  container: "map",
  layers: [
    new M.layer.WMS({
      url: 'http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?',
      name: 'Catastro',
      legend: 'Catastro',
      transparent: false,
      tiled: false
    })
  ],
  center: [211000, 4040000],
  zoom: 3,
  controls: ['layerswitcher']
});


mapajs.addPlugin(new M.plugin.AttributeTable());

mapajs.addPlugin(new M.plugin.Printer({
  "params": {
    "pages": {
      "clientLogo": "http://www.juntadeandalucia.es/economiayhacienda/images/plantilla/logo_cabecera.gif",
      "creditos": "Impresión generada a través de Mapea"
    },
    "layout": {
      "outputFilename": "mapea_${yyyy-MM-dd_hhmmss}"
    }
  }
}, {
  "options": {
    "legend": "true"
  }
}));


var layer = new M.layer.WFS({
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/wfs",
  name: "empresas"
});

empresasStyle = new M.style.Point({
  radius: 10,
  fill: {
    color: 'red'
  }
});

layer.setStyle(empresasStyle);

mapajs.addLayers(layer);