JSFiddle - React, Tailwind, and code Playground

by jatinder_singh02

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>

<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="tooltipTemplate" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th class="tooltipHeading" colspan="2">${item.Name}, ${item.Country}</th></tr>
            <tr>
                <td>Latitude:</td>
                <td>${item.Latitude}</td>
            </tr>
            <tr>
                <td>Longitude:</td>
                <td>${item.Longitude}</td>
            </tr>
        </table>
    </script>

<div id="map"></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 #b51c1c;
            padding: 3px 7px 2px 7px;
        }
        #tooltipTable th
        {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #b51c1c;
            color: #ffffff;
        }

JavaScript

$(function () {           
var data = [
        { Name: "Warsaw", Country: "Poland", Latitude: 52.21, Longitude: 21 },
        { Name: "London", Country: "England", Latitude: 51.50, Longitude: 0.12 },
        { Name: "Berlin", Country: "Germany", Latitude: 52.50, Longitude: 13.33 },
        { Name: "Moscow", Country: "Russia", Latitude: 55.75, Longitude: 37.51 },
        { Name: "Sydney", Country: "Australia", Latitude: -33.83, Longitude: 151.2 },
        { Name: "Tokyo", Country: "Japan", Latitude: 35.6895, Longitude: 139.6917 },
        { Name: "Seoul", Country: "South Korea", Latitude: 37.5665, Longitude: 126.9780 },
        { Name: "Delhi", Country: "India", Latitude: 28.6353, Longitude: 77.2250 },
        { Name: "Mumbai", Country: "India", Latitude: 19.0177, Longitude: 72.8562 },
        { Name: "Manila", Country: "Philippines", Latitude: 14.6010, Longitude: 120.9762 },
        { Name: "Shanghai", Country: "China", Latitude: 31.2244, Longitude: 121.4759 },
        { Name: "Mexico City", Country: "Mexico", Latitude: 19.4270, Longitude: -99.1276 },
        { Name: "New York", Country: "United States", Latitude: 40.7561, Longitude: -73.9870 },
        { Name: "Sao Paulo", Country: "Brasil", Latitude: -23.5489, Longitude: -46.6388 },
        { Name: "Los Angeles", Country: "United States", Latitude: 34.0522, Longitude: -118.2434 },
        { Name: "Sofia", Country: "Bulgaria", Latitude: 42.697845, Longitude: 23.321925 }
    ];
            $("#map").igMap({
                width: "700px",
                height: "500px",
                windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
                // specifies imagery tiles from OpenStreetMap
                backgroundContent: {
                    type: "openStreet"
                },
                series: [{
                    type: "geographicSymbol",
                    name: "worldCities",
                    dataSource: data,
                    latitudeMemberPath: "Latitude",
          ...