JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js/map-helper.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="geoSymbolTooltip" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th colspan="2">${item.City}, ${item.Country}</th></tr>
            <tr>
                <td>Population:</td>
                <td>${item.Population}</td>
            </tr>
        </table>
    </script>

<div>
        <div id="map"></div>
        
    </div>

CSS

#tooltipTable
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }
        #tooltipTable td, #tooltipTable th
        {
            font-size: 9px;
            border: 1px solid #5da7df;
            padding: 3px 7px 2px 7px;
        }
        #tooltipTable th
        {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #5da7df;
            color: #ffffff;
        }

JavaScript

$(function () {
            
            // load geo-locations from shapefile and simplify data structure
            var worldAirports = [];
            var worldConnections = [];

            var worldCities = [];
            var points = [];
            var shapeDataSource = new $.ig.ShapeDataSource({
                shapefileSource: "https://igniteui.com/data-files/shapes/world_cities.shp",
                databaseSource: "https://igniteui.com/data-files/shapes/world_cities.dbf",
                transformRecord: function (rec) {
                    var pointX = rec.points.item(0).item(0).x();
                    var pointY = rec.points.item(0).item(0).y();
                    var city = rec.fields.item("NAME");
                    var country = rec.fields.item("COUNTRY");
                    var population = rec.fields.item("POPULATION");
                    if (population > 0) {
                        points.push({
                            Latitude: pointY, Longitude: pointX,
                            City: city, Country: country,
                            Population: population
                        });
                    }
                },
                // process data and create map when finished loading shapefile
                callback: function () {
                    worldCities = points;
                    generateConnections();
                    createMap();
                }
            });
            shapeDataSource.dataBind();
            // generate flight paths and airport connections
            function generateConnections() {

                var count = worldCities.length;
                var airports = [];
                var flights = [];
                var minDistance = 200;
                var maxDistance = 7000;
                var maxConnections = 300;
                var total = 0;
                
                for (var i = 0; i < count; i++) {
                    var connections = [];

                   ...