JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<script>
    dojoConfig = {
        parseOnLoad: true
    }
</script>
<script src="http://js.arcgis.com/3.8/"></script>
<body class="claro">
    <div id="content" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin: 0;">
        <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Ahero Irrigation Scheme
            <div id="subheader">Turn on and off layers in the Layers panel to manipulate layers</div>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
            <div data-dojo-type="dijit.layout.AccordionContainer">
                <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
                    <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Layers'">	<span style="padding: 10px 0;">Click to toggle the visibilty
						of the various natural disasters</span>

                    <div id="toggle" style="padding: 2px 2px;"></div>
                </div>
            </div>
        </div>
        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow: hidden;">
            <div id="BasemapToggle"></div>
        </div>
        <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">App Created by Oakar Services Ltd</div>
    </div>
</body>

</html>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
body {
    background-color: white;
    overflow: hidden;
    font-family:"Trebuchet MS";
}
#header {
    background-image: url(../images/banner.jpg);
    background-repeat: repeat-x;
    margin: 2px;
    border: solid 2px #224a54;
    color: white;
    font-size: 18pt;
    text-align: left;
    font-weight: bold;
    height: 45px;
}
#subheader {
    font-size: small;
    color: white;
    padding-left: 20px;
}
#leftPane {
    width: 20%;
    margin: 1px;
    border: solid 2px #224a54;
}
#footer {
    margin: 2px;
    border: solid 2px #224a54;
    background-color: #ecefe4;
    color: #3f3f3f;
    font-size: 10pt;
    text-align: center;
    height: 30px;
}
.dijitTabInnerDiv {
    background-color: #ecefe4;
}
#map {
    margin: 1px;
    border: solid 2px #224a54;
    -moz-border-radius: 4px;
}
#BasemapToggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
}
#legendPane {
    border: solid #97DCF2 1px;
}

JavaScript

require(
        ["dojo/parser", "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "esri/map",
            "esri/dijit/BasemapToggle", "esri/layers/FeatureLayer",
            "dojo/on", "esri/dijit/Legend", "dojo/_base/array",
            "dijit/form/CheckBox", "dojo/dom-construct",
            "dojo/domReady!"],

        function (parser, BorderContainer, ContentPane, AccordionContainer,
        Map, BasemapToggle, FeatureLayer, on, Legend,
        array, CheckBox, domConstruct) {
            parser.parse();
            //Add Basemap
            var map = new Map("map", {
                sliderOrientation: "horizontal",
                center: [-90, 40],
                zoom: 8,
                basemap: "osm"
            });
            //toggle Basemap
            var toggle = new BasemapToggle({
                map: map,
                basemap: "satellite"
            }, "BasemapToggle");
            toggle.startup();
            //Add layer
            var cities = new FeatureLayer(
                "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"]
                });
            var rivers = new FeatureLayer(
                "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"]
                });
            var states = new FeatureLayer(
                "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    opacity: 0.5,
                    outFields: ["*"]
                });

            //add the legend
            map.on("layers-add-result", function...