JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<div class="infokarte_wrapper" id="infokarte__2000" style="width:100%;position:relative;"> 
<!--<select class="auswahldatensatz"> 
</select>-->

<ul class="nav nav-tabs pull-right auswahldatensatz"> 
</ul>
                            <div class="infokarte_fakten">
                              <h2>  </h2>
                              <span> Bitte klicken Sie auf eine Stadt oder Gemeinde in der Karte. </span>
                            </div> 
<svg overflow="hidden" style="overflow:hidden;min-height:340px;" viewBox="-4142.1 -3183.3 1215.1 1024" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g class="infokarte_gebiete" data-gebiet="Gebiete" transform="matrix(0.15599916,0,0,0.15599916,-3511.5703,-2695.8061)"><path class="infokarte_schwalbach" d="M-853.4 1281l32.3-60.4 28-141.2 68-12 20-80.8-69-12-8-88.8 32-117 117 4 12-72.6h194l80 193.6 60-5 114-95.8 20 105-41 88.6 48 76.6-77 141.2-73-8-24 125-464 4-73-44.3z" data-gebiet="schwalbach"><title>Schwalbach</title></path><path class="infokarte_saarwellingen" d="M-216 531l76.5 121-32.3 141-32.2 32.3-81 63.6-60.2 5-80.6-194h-193.6l-161.4-16-125-85-12-85-94-146 89-102 190.7-85 127 68 135 4 102-114 63-68 87 138 260 2 81-34 34 76L57 397z" data-gebiet="saarwellingen"><title>Saarwellingen</title></path><path class="infokarte_puettlingen" d="M-228.2 1430.3l-84.7 44.3-4-153.2 25-125 73 8 77-141.2-48-76.6 41-88.8-20-104.8 181 4 80 100.8 77-4 41 56.4-40 177.5-8 157.3 49 64.6-93 52.4-28 72.6-48 96.8-85-44.4-101-4-8-92.8h-73z" data-gebiet="puettlingen"><title>Püttlingen</title></path><path class="infokarte_nalbach" d="M-732 182l-191 85-76-102-4.3-106h-106l-72-122.8h84.8l59.3-118.6 203.4-25.5 42.4-93 178 136 4.2 119 156.8-51 55 51 29.8 187-101.7 114-135.6-4-127-68z" data-gebiet="nalbach"><title>Nalbach</title></path><path class="infokarte_wallerfangen" d="M-2091.6 1127.8L-2269 914l28.2-155.6 131.4-123 72 29.8 76.3-34 101 34 114-72 55 42.3 8-89 140 17 4 34.3 68-4.6 152 114.4 40 52.4 92-35.6 16 84.7-125 9-57 117-218-24-69 53...

CSS

.infokarte_wrapper {
  background: #f1f1f1;
  padding: 10px; width:100%;
}

.infokarte_wrapper .text--tab-items.active { text-decoration:underline;font-weight:bold; }

svg {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; max-width:500px; width:100%;
  opacity:1;
}

svg .infokarte_gebiete > path {
  cursor: pointer;
  fill: #d2d2d2;
  stroke: #202020;
  stroke-width: 20;
  opacity: 1; margin:50px; width:100%;
}

svg .infokarte_gebiete > path:hover {
  opacity: 1;
}

svg .infokarte_gebiete > path.aktiv {
  stroke-width: 70;
  opacity: 1;
}

svg circle, svg text { pointer-events: none; fill:white; font-weight:bold;}
svg text { font-size:45px; font-family:sans-serif; text-shadow: -1px 1px 5px rgba(0,0,0, 1); }

.eigen__legende__farbskala  .eigen__abschnitt {
  margin-top:10px; border-top:1px solid black;border-bottom:1px solid black;
}

.eigen__legende__farbskala  .eigen__abschnitt:first-child {
  margin-top:10px; border-left:1px solid black;
}

.eigen__legende__farbskala  .eigen__abschnitt:last-child {
  margin-top:10px; border-right:1px solid black;
}
  
 
  .eigen__legende__farbskala .eigen__abschnitt {
   position:relative;width:20px;height:12px;display:inline-block;
 }
 
 .eigen__legende__farbskala .eigen__abschnitt .eigen__grenze {
   opacity:0;
 }

.eigen__legende__farbskala .eigen__abschnitt .eigen__grenze {
   display:inline-block;font-size:9pt;
   opacity:1; position:relative;bottom:-5px;width:20px;text-align:center;
   right:-8px;text-align:right;
 }

.eigen__legende__farbskala .eigen__abschnitt:nth-child(2n) .eigen__grenze {
   display:inline-block;font-size:9pt;
   opacity:1; position:relative;top:-20px;width:20px;text-align:center;
 }

.eigen__legende__farbskala .eigen__abschnitt:last-child .eigen__grenze {
   opacity:0;
 }


.infokarte_fakten strong.eigen__topm  { margin-top:14px;display:inline-block; }

JavaScript

(function(wrapper,quelle) {
var index=0;

var gebieteV = document.querySelectorAll("#"+wrapper+" .infokarte_gebiete > path");

 
function gibFarbe(wert,s) {
if (typeof wert == "string") { wert = parseFloat(wert.replace(",","."))}
var skala=s.slice(0);
skala.push([Number.POSITIVE_INFINITY,skala[s.length-1][1]]);
skala.unshift([Number.NEGATIVE_INFINITY,skala[0][1]]);
var farbe=skala[0][1];
	for (var k=0; k<skala.length; k++ ) { 
         if (skala[k][0] >= wert) {
            return skala[k][1];
         } 
				} 
  return farbe;
}

function baukarte(index) {
for (var k=0;k < gebieteV.length; k++) {
try {
  if ( gebieteV[k].getAttribute("data-gebiet") ) { 
gebieteV[k].style.fill=gibFarbe(quelle[index].daten[gebieteV[k].getAttribute("data-gebiet")][quelle[index].faerbeIndex],quelle[index].legende.farbskala); } 
} catch(e) {
 console.log(e);
}
}

$("#"+wrapper+" .eigen__legende__farbskala").empty();
for (var k=0;k < quelle[index].legende.farbskala.length; k++) {
	$("#"+wrapper+" .eigen__legende__farbskala").append($("<span>").addClass("eigen__abschnitt").css('background',quelle[index].legende.farbskala[k][1]).append($("<span>").addClass("eigen__grenze").data("wert",quelle[index].legende.farbskala[k][0]).text((quelle[index].legende.farbskala[k][0]>0?'+':'') + quelle[index].legende.farbskala[k][0])));
}

$("#"+wrapper+" .eigen__legende__title").text(quelle[index].legende.title);
$("#"+wrapper+" .eigen_footer_quelle").text(quelle[index].quelle);

$("#"+wrapper+" .infokarte_gebiete > path.aktiv").click();

}

baukarte(index);


$("#"+wrapper+" select.auswahldatensatz").change(function() { 
  index=$(this).val();
  baukarte(index);
});

$("#"+wrapper+" .nav-tabs.auswahldatensatz").on('click','li',function() { 
  index=$(this).data("datensatz");$(this).addClass("active").siblings().removeClass("active");
  baukarte(index);
});


for (var k in quelle) {
	$("#"+wrapper+" select.auswahldatensatz").append($("<option>").text(quelle[k].label).attr("value",k));
}
 

for (var k in...