JSFiddle - React, Tailwind, and code Playground

by Erik Jan de Wilde

HTML

<script src="https://api.myjson.com/bins/prsy"></script>
<script src="https://api.myjson.com/bins/20xc2"></script>
<script src="https://api.myjson.com/bins/12mrm"></script>
<script src="https://api.myjson.com/bins/4pdk2"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/drilldown.js"></script>
<div id="map00"></div>

JavaScript

String.prototype.unescapeHtml = function () {
    var temp = document.createElement("div");
    temp.innerHTML = this;
    var result = temp.childNodes[0].nodeValue;
    temp.removeChild(temp.firstChild);
    return result;
} 

$(function () {
	var titleText = "tooltips in drilldown";
	var subtitleText = " ";
	var minCol = '#E0EACC';
	var maxCol = '#669900';
	var menoObv = 'Obvod ';
	var menoObc = 'Obec ';
	var Leg = '%';

	var drillUpEncodeText = 'Back to SR';

    Highcharts.seriesTypes.map.prototype.hideOverlappingDataLabels = function() {};
	
$.getJSON('https://api.myjson.com/bins/12mrm', function(dataokr) { 
$.getJSON('https://api.myjson.com/bins/prsy', function(geojson) {
var data = Highcharts.geojson(geojson);
$.each(data, function (i) {
	this.drilldown = this.properties['OBVOD']; });
$('#map00').highcharts('Map', {
	lang:{drillUpText: drillUpEncodeText.unescapeHtml() },
	chart : {
		borderWidth : 0,
		events: {
			drilldown: function (e) {
				if (!e.seriesOptions) {
					var chart = this,
					mapKey = e.point.drilldown ;
					chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); 
					$.getJSON( 'https://api.myjson.com/bins/4pdk2', function(dataobce) {
                	$.getJSON('https://api.myjson.com/bins/20xc2', function(geojson2) {
					var data = Highcharts.geojson(geojson2);
					chart.hideLoading();
					chart.addSeriesAsDrilldown(e.point, {
						name: menoObc.unescapeHtml() + e.point.properties.NAZOV ,//Nazov
						data: dataobce,
						mapData: data,
						joinBy: ['IDN2', 'c0'],
						dataLabels: {
							enabled: true,
					        backgroundColor: 'rgba(255,255,255, 0.6)',
							style:{"HcTextStroke": "0px rgba(223,223,223,0)" },
							borderRadius: 3,
						    borderColor: '#D1CBD0',
							borderWidth:1,
							//padding: 2,
							color: '#786674',
							format: '{point.properties.MESTO}'
						},
						tooltip: {
							positioner: function () {
								return { x: 0, y: 250 };
							},
							borderWidth:...