JSFiddle - React, Tailwind, and code Playground

by Artemiy

HTML

<script  src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
	height: 600px; 
	width: 500px; 
	margin: 0 auto;    
}
.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
}

JavaScript

var input = document.getElementById('file-input');

var url = 'https://raw.githubusercontent.com/rendrom/rendrom.github.io/master/static/RU-KGD-boundary-polygon-lvl6.geojson';

Highcharts.getJSON(url, function(geojson) {

  Highcharts.mapChart('container', {
    title: {
      text: 'RU-KGD-boundary-polygon-lvl6'
    },

    mapNavigation: {
      enabled: true,
    },

    series: [{
      mapData: geojson,
    }]
  });
});