JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<script src="http://js.arcgis.com/3.11/"></script>
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

var map;
require([
    "esri/map", "esri/layers/FeatureLayer",
    "esri/InfoTemplate", "esri/symbols/SimpleFillSymbol",
    "esri/renderers/ClassBreaksRenderer",
    "esri/Color", "dojo/dom-style", "dojo/domReady!"], function (
Map, FeatureLayer,
InfoTemplate, SimpleFillSymbol,
ClassBreaksRenderer,
Color, domStyle) {
    map = new Map("map", {
        basemap: "streets",
        center: [-74.215, 42.382],
        zoom: 6,
        slider: false
    });

    var symbol = new SimpleFillSymbol();
    symbol.setColor(new Color([150, 150, 150, 0.5]));

    // Add five breaks to the renderer.
    // If you have ESRI's ArcMap available, this can be a good way to determine break values.
    // You can also copy the RGB values from the color schemes ArcMap applies, or use colors
    // from a site like www.colorbrewer.org
    //
    // alternatively, ArcGIS Server's generate renderer task could be used
    var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");
    renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
    renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
    renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
    renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
    renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));

    var infoTemplate = new InfoTemplate("${NAME}", "${*}");
    var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
        mode: FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"],
        infoTemplate: infoTemplate
    });

    featureLayer.setDefinitionExpression("STATE_NAME IN ('New York', 'New Jersey', 'Delaware', 'Maryland', 'District of Columbia')");
    featureLayer.setRenderer(renderer);
    map.addLayer(featureLayer);
});