JSFiddle - React, Tailwind, and code Playground
by mgutbor
HTML
<div id="mapea" style="height:400px">
<a href="javascript:void(0);" onclick="mapea.reset()"><div class="icon-home map-reset" alt="Reiniciar" title="Reiniciar"></div></a>
<div id='tooltip_mapea'></div>
<div class='contenedor_principal'>
<div id='mapea_vistaUnica1'></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<link href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css" rel="stylesheet" />
<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>
// ALTURA DEL COMPONENTE AUTO AJUSTABLE AL ANCHO
$("#mapea").height($("#mapea").width()/2.5);
</script>
<script>
var mapea = (function() {
var dominio = "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json";
var mapaSingleton = M.map({
container: "mapea_vistaUnica1",
layers: [new M.layer.Mapbox({
url: 'https://api.mapbox.com/v4/',
name: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiZHZpbGxhbG9uIiwiYSI6ImNqZnV4NGtlZDBzeG0ycnFxd3d0NjQzdmkifQ.4Hc5HpgT6WW-5JXGgNzN3Q',
legend: 'Calles',
zoom: 12,
attributionControl: false
})],
className: "m-tools",
wmcfiles: ["cdau"],
});
var capasCargadas = [];
var createMap = function(idcontainer) {
return mapaSingleton;
};
var estiloNormal = new M.style.Polygon({
stroke: {
color: '#017537',
width: 0.5,
}});
var estiloHover = new M.style.Polygon({
label: {
text: function(feature) {
return (feature.getAttribute('municipio'))
},
color: 'black',
...