AG-And-2DD

Change class name on click in jQuery

by Francisco

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea-5.0.0.ol.min.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.0.0.ol.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration-5.0.0.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var mapajs = M.map({
  container: "map",
  wmcfiles: ["mapa", "satelite"],
  controls: ["layerswitcher"]
});

//GeoJSON servido
let layerGeoJSON = new M.layer.GeoJSON({
  name: "Áreas Geográficas Andalucia 2DD",
  url: "https://www.consultateleco.andaluciaesdigital.es/documents/409796/0/AGs-And-2DD/ff4777d7-8f7a-4c52-a724-b6c51a4e8972/AGs-2DD-Andalucia.geojson",
  legend: "AGs Andalucia (Septiembre 2019, Fuente PTNTDT, Elaboración Propia)"
/*}, {}, {
  renderMode: "image",*/
  //declutter: true
});

// Colores para categorizar

let verdep = new M.style.Polygon({
  fill: {
    color: 'green',
    opacity: 0.5,
  },
  stroke: {
    color: '"green"',
    opacity: 0.1,
    width:0.001
  }
});

let rosap = new M.style.Polygon({
  fill: {
    color: 'pink',
    opacity: 0.5,
  },
  stroke: {
    color: '"pink"',
    opacity: 0.1,
     width:0.001
  }
});

let amarillop = new M.style.Polygon({
  fill: {
    color: 'yellow',
    opacity: 0.5,
  },
  stroke: {
    color: '"yellow"',
    opacity: 0.1,
     width:0.001
  }
});

let rojop = new M.style.Polygon({
  fill: {
    color: 'red',
    opacity: 0.5,
  },
  stroke: {
    color: '"red"',
    opacity: 0.1,
     width:0.001
  }
});
let azulp = new M.style.Polygon({
  fill: {
    color: 'blue',
    opacity: 0.5,
  },
  stroke: {
    color: '"blue"',
    opacity: 0.1,
     width:0.001
  }
});
let naranjap = new M.style.Polygon({
  fill: {
    color: 'orange',
    opacity: 0.5,
  },
  stroke: {
    color: '"orange"',
    opacity: 0.1,
    width:0.001
  }
});
let marronp = new M.style.Polygon({
  fill: {
    color: 'brown',
    opacity: 0.5,
  },
  stroke: {
    color: '"brown"',
    opacity: 0.1,
     width:0.001
  }
});

let magentap = new M.style.Polygon({
  fill: {
    color: '#e814d9',
    opacity: 0.5,
  },
  stroke: {
    color: '#e814d9',
    opacity: 0.1,
     width:0.001
  }
});

let moradop = new M.style.Polygon({
  fill: {
    color: '#b213dd',
    opacity: 0.5,
  },
  stroke: {
    color: '#b213dd',
    opacity:...