JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

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

JavaScript

var data = [
    { Name: "Warsaw", Country: "Poland", Latitude: 52.21, Longitude: 21, Population: Math.floor(Math.random()*50)  },
        { Name: "London", Country: "England", Latitude: 51.50, Longitude: 0.12 , Population: Math.floor(Math.random()*50)  },
        { Name: "Berlin", Country: "Germany", Latitude: 52.50, Longitude: 13.33 , Population: Math.floor(Math.random()*50)  },
        { Name: "Moscow", Country: "Russia", Latitude: 55.75, Longitude: 37.51 , Population: Math.floor(Math.random()*50)  },
        { Name: "Sydney", Country: "Australia", Latitude: -33.83, Longitude: 151.2 , Population: Math.floor(Math.random()*50)  },
        { Name: "Tokyo", Country: "Japan", Latitude: 35.6895, Longitude: 139.6917 , Population: Math.floor(Math.random()*50)  },
        { Name: "Seoul", Country: "South Korea", Latitude: 37.5665, Longitude: 126.9780 , Population: Math.floor(Math.random()*50)  },
        { Name: "Delhi", Country: "India", Latitude: 28.6353, Longitude: 77.2250 , Population: Math.floor(Math.random()*50)  },
        { Name: "Mumbai", Country: "India", Latitude: 19.0177, Longitude: 72.8562 , Population: Math.floor(Math.random()*50)  },
        { Name: "Manila", Country: "Philippines", Latitude: 14.6010, Longitude: 120.9762 , Population: Math.floor(Math.random()*50)  },
        { Name: "Shanghai", Country: "China", Latitude: 31.2244, Longitude: 121.4759 , Population: Math.floor(Math.random()*50)  },
        { Name: "Mexico City", Country: "Mexico", Latitude: 19.4270, Longitude: -99.1276, Population: Math.floor(Math.random()*50)  },
        { Name: "New York", Country: "United States", Latitude: 40.7561, Longitude: -73.9870 , Population: Math.floor(Math.random()*50)  },
        { Name: "Sao Paulo", Country: "Brasil", Latitude: -23.5489, Longitude: -46.6388 , Population: Math.floor(Math.random()*50)  },
        { Name: "Los Ang4les", Country: "United States", Latitude: 34.0522, Longitude: -118.2434 , Population: Math.floor(Math.random()*50)  },
        {...