JSFiddle - React, Tailwind, and code Playground

by alfmartss

HTML

<!-- fichero estilos -->
<link href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css" rel="stylesheet" />
<!-- ficheros javascript -->
<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>
<div id="mapa6">&nbsp;</div>

JavaScript

/* datos para centrar el mapa en la provincia antes de pedir los datos del cep
  o para filtrar alguna capa al pedirla.  */ 

var datosProvincia = {
	"04" : {"centro": [564202.5120, 4111393.8871], nombre: "Almería"}, 
  "11" : {"centro": [254755.0178, 4046075.7610], nombre: "Cádiz"}, // CADIZ
  "14" : {"centro": [346962.2656, 4194195.9144], nombre: "Córdoba"}, // CORDOBA
  "18" : {"centro": [493611.0267, 4154958.7877], nombre: "Granada"}, // GRANADA
  "21" : {"centro": [167512.1823, 4165799.5685], nombre: "Huelva"}, // HUELVA
  "23" : {"centro": [464069.1172, 4207975.8275], nombre: "Jaén"}, // JAEN
  "29" : {"centro": [359366.9137, 4074863.5070], nombre: "Málaga"}, // MALAGA
  "41" : {"centro": [235902.2204, 4142094.8146], nombre: "Sevilla"}  // SEVILLA
};
var configProxy = {
	"mapea" : {"url": "https://mapea4-sigc.juntadeandalucia.es/mapea/api/proxy?url=", 
  					"dataType" : "json",
  					"getData": function(response){
//            	console.log("code:" + response.code);
//              console.log("content:" + response.content.substr(0,50));
            	return eval(response.content);
              } , 
            "getUrl" : function(proxy, urlDatos) {
            	return proxy.url + encodeURIComponent(urlDatos);
            }
  },
  "cors-anywhere" : {"url" : "https://cors-anywhere.herokuapp.com/", 
  									"dataType" : "json",
  									"getData": function(response){return response;},
                    "getUrl" : function(proxy, urlDatos) {
            					return proxy.url + urlDatos;
            				}
  }
};

var proxy = "";
/* estilos */
let cPrivado = 'black';
let cPublico = 'green';
let fuente = '12px Comic Sans MS';
let funcionTexto = function(feature) {
      return feature.getAttribute('Centro:');
    };     
 let estiloCEPS_old = new M.style.Point({
  radius: 12,
  fill: { color: 'white', opacity: 1  },
  stroke: {     color: 'blue',     width: 2,  }
  //,label: { text: funcionTexto, font: fuente, color: '#0F0F0F'  }
});

let estiloCEPS =...