JSFiddle - React, Tailwind, and code Playground

by Francisco

HTML

<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/mapea-5.0.0.ol.min.js"></script>
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration-5.0.0.js"></script>
<div id="map"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

JavaScript

let mapajs = M.map({
  container: 'map',
  layers: 'OSM',
  projection: 'EPSG:4326*d',
  controls: ["layerswitcher"]
});

var xml='<Query fecha="20160101" field="codccaa" formaRepresentacion="1" fuente="Fuente: Instituto Nacional de Estadística." intervalos="" layer="ccaa" metodoClasificacion="3" name="" notas="" numDimensiones="0" periodicidad="" subtitulo="" titulo="Número de municipios" unidad_medida="Nº de municipios " urlRetorno="http://www.ieca.junta-andalucia.es/iea/resultadosConsulta.jsp?CodOper=104&amp;codConsulta=54412"><Class id="" value="8125"/><Class id="01" value="778"/><Class id="02" value="731"/><Class id="03" value="78"/><Class id="04" value="67"/><Class id="05" value="88"/><Class id="06" value="102"/><Class id="07" value="919"/><Class id="08" value="2248"/><Class id="09" value="947"/><Class id="10" value="542"/><Class id="11" value="388"/><Class id="12" value="314"/><Class id="13" value="179"/><Class id="14" value="45"/><Class id="15" value="272"/><Class id="16" value="251"/><Class id="17" value="174"/><Class id="19" value="1"/><Class id="20" value="1"/></Query>',
  xmlDoc = $.parseXML(xml),
  $xml = $(xmlDoc);
var rutaJSON='http://mapea4-sigc.juntadeandalucia.es/mapea/api/proxy?url=http%3A%2F%2Fwww.ieca.junta-andalucia.es%2Fgeoserver-ieca%2Ftopp%2Fwfs%3Fservice%3DWFS%26request%3DGetFeature%26version%3D1.1.0%26typename%3Dtopp%3Accaa%26srsname%3DEPSG%3A25830%26outputformat%3Dapplication%2Fjson';

let ArraysValores = [];
$xml.find('Query').find('Class').each(function(index){
	ArraysValores.push([$(this).attr('id'), $(this).attr('value')]);
});

$.getJSON(rutaJSON, function( data ) {
	let features=jQuery.parseJSON(data.content).features;
  let numFeatures=features.length;
  let xMin = Number.MAX_VALUE;
	let xMax = Number.MIN_VALUE;
	let yMin = Number.MAX_VALUE;
	let yMax = Number.MIN_VALUE;
	const miFeature = [];
  
  for (let i = 0; i < numFeatures; i += 1) {
		const valorCampo = features[i].properties['codccaa'];
		const ArraysValor =...