[Test] Mapea - Seleccion municipios

by SIGC

HTML

<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<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>
<div id="seleccion">-</div>
<div id="map"></div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

//GeoJSON servido
let provincias = new M.layer.GeoJSON({
  name: "Provincias",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json",
  extract: false
});

//GeoJSON municipios
let municipios = new M.layer.GeoJSON({
  name: "Municipios",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:ind_mun_simp&outputFormat=application/json",
  extract: false
});

var mapajs = M.map({
  container: "map",
  wmcfiles: ["cdau"],
  //layers: [provincias],
  //bbox: [96388, 3959795, 621889, 4299792],
  controls: ["mouse"]
});

// Polígono verde
let estilo1 = new M.style.Polygon({
  fill: {
    color: '#FFFFFF',
    opacity: 0.3,
  },
  stroke: {
    color: 'black',
    width: 1,
    opacity: 0.5,
  }

});

// Polígono rosa semitransparente con borde rojo de grosor dos
let estilo2 = new M.style.Polygon({
  label: {
    text: function(feature) {
      return (feature.getAttribute('municipio'))
    },
    color: 'black',
    stroke: {
      'color': '#E5FFCC',
      'width': 3
    }
  },
  fill: {
    color: 'yellow',
    opacity: 0.5,
  }
});

let estiloMunicipios = null;



provincias.setStyle(estilo1);
mapajs.addLayers(provincias);

municipios.on(M.evt.LOAD, function() {
  console.log('Cargados municipios');
  municipios.setVisible(false);
  estiloMunicipios = municipios.getStyle();
  estiloMunicipios.get("stroke").width = 1
});

municipios.on(M.evt.SELECT_FEATURES, function(features) {
  alert('Ha seleccionado ' + features[0].getAttribute("municipio"));
});

municipios.on(M.evt.HOVER_FEATURES, function(features) {
  let municipio = features[0];
  document.getElementById("seleccion").innerHTML = municipio.getAttribute("municipio");
  municipio.setStyle(estilo2);

});

municipios.on(M.evt.LEAVE_FEATURES, function(features) {
 ...