jQuery addClass example

Change class name on click in jQuery

by alfmartss

HTML

<!-- fichero estilos -->
    <link href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css" rel="stylesheet" />
    <link href="https://mapea4-sigc.juntadeandalucia.es/plugins/stylemanager/stylemanager.min.css" rel="stylesheet" />

    <!-- container -->
    <div id="mapaCentros">&nbsp;</div>

    <!-- libraries -->
    <!-- ficheros javascript -->
    <script src="https://www.juntadeandalucia.es/educacion/portals/html/js/everything.jsp?browserId=other&themeId=abacojuntadeandalucia_WAR_abacojuntadeandaluciatheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.jquery.files&languageId=es_ES" type="text/javascript"></script>
    <script type="text/javascript" src="http://mapea4-sigc.juntadeandalucia.es/vendor/browser-polyfill.js"></script>
    <script type="text/javascript" src="https://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
    <script type="text/javascript" src="https://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
    <script type="text/javascript" src="https://mapea4-sigc.juntadeandalucia.es/plugins/stylemanager/stylemanager.ol.min.js"></script>

    <script type="text/javascript" src="https://www.juntadeandalucia.es/educacion/portals/documents/258849/382604/datos.js"></script>
    <script type="text/javascript" src="https://www.juntadeandalucia.es/educacion/portals/documents/258849/382604/comun.js"></script>
    <script type="text/javascript" src="https://www.juntadeandalucia.es/educacion/portals/documents/258849/382604/visor-centros.js"></script>

    <!--  JS plugin here -->
    <!--     <script type="text/javascript" src="http://localhost:6123/noplugin.ol.js"></script> -->

JavaScript

// INFORMACIÓN DEL FICHERO DE DATOS

    var origenDatos =  {
      "5_jun" : "http://www.juntadeandalucia.es/educacion/portals/delegate/content/91c2c9b8-1f4a-45c5-80c9-3b72322d1648",
      "6_jun" : "http://www.juntadeandalucia.es/educacion/portals/delegate/content/0c5b503f-f642-4e52-ab96-9c0aa1dcfe8f"
    };

    var info = {
      "urlDatos" : "http://www.juntadeandalucia.es/educacion/portals/delegate/content/0c5b503f-f642-4e52-ab96-9c0aa1dcfe8f",
      "tipoDatos": "csv",
      "columna_valor_mapeado" : "NSOBRES",
      "columna_valor_mapeado_color" : "PORCENTAJE"
    };
    // FIN DE LA CONFIGURACION


    var mapajs = M.map({
     container:"mapaCentros",
     wmcfiles: [
          "cdau",
          "http://www.juntadeandalucia.es/educacion/portals/delegate/content/699624c7-0acf-4df1-83b6-c8419929ee74*Especifico"
        ],
     layers:[
            "WFST*Centros*http://cecdsig.ced.junta-andalucia.es/geoserver_educasig/educasig/ows?typeName=educasig:CENTROS*educasig:CENTROS*POINT"
       //          "WFST*Centros*http://cecdsig.ced.junta-andalucia.es/geoserver_educasig/educasig/ows?typeName=educasig:CentrosSeneca*educasig:CentrosSeneca*POINT"

            ],
     controls: ["mouse","layerswitcher","scale","panzoombar", "location", "navtoolbar"]
     });

    var atributosBasicosPanel = ["CENTRO", "D_TIPO", "D_DOMICILIO", "D_MUNICIPIO"];
    var etiquetasBasicasPanel = ["Denominación", "Tipo", "Domicilio", "Municipio"];

    // aplicacion directa de estilos

    var styleProportional = new M.style.Proportional(info.columna_valor_mapeado, 2, 35,
      new M.style.Point({
      fill: {    color: 'white'  },
      stroke: {    color: 'black',    width: 1  },
      label: {    text: function(feature,map){      //console.log(map);
        	return feature.getAttribute(info.columna_valor_mapeado);
        },
        //offset: [0, 20],
        stroke: {
          color: 'white', // Color de relleno del halo
          width: 2
        }
      }
    }));

    var...