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.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/js-data/continents-with-countries-and-cities"></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/modules/infragistics.ui.layout.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="splitLayout">
    <div class="left">
        <ul id="tree"></ul>
    </div>
    <div class="center">
        <table id="grid"></table>
    </div>
     <div class="right">
            <div id="map"></div>
        </div>
    <div class="header">HEADER - some text here</div>
    <div class="footer">FOOTER - some text here</div>
</div>

CSS

body {
    font-family:'segoe ui', 'arial', 'helvetica', 'sans-serif';
}
div#splitLayout .left, div#splitLayout .right, div#splitLayout .center, div#splitLayout .footer, div#splitLayout .header {
    color: #fff;
}
div#splitLayout .center {
    background-color: #EEE;
    color: #555;
}
div#splitLayout .right {
    background-color:#555;
    color: #EEE;
}
div#splitLayout .left {
    background-color: #FFA72D;
}
div#splitLayout .header {
    background-color: #2CBDF9;
}
div#splitLayout .footer {
    background-color: #2CBDF9;
}
#splitLayout {
    height: 570px;
}
#map {
    overflow: hidden;
}

JavaScript

$(function () {
    $('#splitLayout').igLayoutManager({
        layoutMode: "border",
        borderLayout: {
            leftWidth: "20%",
            rightWidth: "30%"
        }
    });
    
    $('.left').resizable({
        handles: "e"
    });
     $('.right').resizable({
        handles: "w"
    });
    $("#tree").igTree({
        dataSource: continentsWithCountriesAndCitiesCoordinates,
        dataSourceType: "json",
        bindings: {
            textKey: "Text",
            valueKey: "Text",
            childDataProperty: "Countries"
        }
    });
    $("#map").igMap({
        width: "100%",
        height: "400px",
        crosshairVisibility: "visible",
        overviewPlusDetailPaneVisibility: "visible",
        overviewPlusDetailPaneBackgroundImageUri: "http://igniteui.com/images/samples/splitter/world.png",
        panModifier: "control",
        backgroundContent: {
            type: "openStreet"
        },
        windowResponse: "immediate",
        windowRect: {
            left: 0.27,
            top: 0.20,
            height: 0.45,
            width: 0.45
        }
    });
    $("#tree").on("igtreeselectionchanged", function (sender, eventArgs) {
        var node = eventArgs.selectedNodes[0];
        if (node.data.Cities) {
            $("#grid").igGrid({
                width: "100%",
                defaultColumnWidth: "25%",
                dataSource: node.data.Cities,
                features: [{
                    name: "Selection",
                    mode: "row",
                    rowSelectionChanged: function (ui, args) {
                        var selectedCity = $("#grid").data("igGrid").dataSource.dataView()[args.row.index];
                        var geographic = geographichFromCentered({
                            latitude: selectedCity.Latitude,
                            longitude: selectedCity.Longitude,
                            radius: 0.5
                        });
                        var zoom =...