JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!doctype html>

<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
		<title>EDDM API Test Page</title>
		<link rel="stylesheet" href="EDDM_API.css"/>
		<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/Nihilo/Nihilo.css"/>
		<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"/>
		<script>
			var dojoConfig = {
				parseOnLoad: true
			};
		</script>
		<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
		<script src="EDDM_API.js"></script>
	</head>
	<body class="nihilo">
		<div id="mainDiv" dojotype="dijit.layout.BorderContainer">
		<div id="headerDiv" dojotype="dijit.layout.ContentPane" region="top">EDDM <font color="blue">API</font> TEST</div>
		<div id="mapDiv" class="shadow" dojotype="dijit.layout.ContentPane" region="center"></div>
		<div id="leftDivTop" dojotype="dijit.layout.ContentPane" region="left">
				Select Environment:
				<select id="myList">
					<option selected value="defaultValue">Select..</option>
					<option value="http://eddmapi-dev.usps.gov/arcgis/rest/services/EDDM/selectZIP/GPServer/selectZIP">DEV</option>
					<option value="http://eddmapi-sit.usps.gov/arcgis/rest/services/EDDM/selectZIP/GPServer/selectZIP">SIT</option>  
					<option value="http://eddmapi-cat.usps.gov/arcgis/rest/services/EDDM/selectZIP/GPServer/selectZIP">CAT</option>
					<option value="http://eddmapi.usps.gov/arcgis/rest/services/EDDM/selectZIP/GPServer/selectZIP">PROD</option>
				</select>
					<br>
					<div class="input-text-wrapper input-text-lg">
						Input ZIP CODE:
						<span class="input-cap-left"></span>
						<span class="input-field">				
						<input id="Zip_code" type="text" name="address">
						</span>
						<span class="input-cap-right"></span>
					</div>
					<br>
				<button...

JavaScript

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.Scalebar");
dojo.require("dijit.form.Button");
dojo.require("esri.map");
dojo.require("esri.geometry");
dojo.require("esri.tasks.gp");
dojo.require("dojo.dom");
dojo.require("dojo.on");
dojo.require("dojo.query");

var myMap;
var resultsLayer;

function init() {
    myMap = new esri.Map("mapDiv", {
        basemap: "streets",
        center: [-89.9, 35.1],
        zoom: 10
    });

    dojo.connect(myMap, 'onLoad', function () {
        var scalebar = new esri.dijit.Scalebar({
            map: myMap,
            scalebarUnit: "english"
        });
    });

    require(['dojo/on', 'dojo/query'],
        function (on, query) {
            on(query('#myList'), 'change', function (e) {
                gpURL = e.target.value;
                console.log('Environment changed: ' + '"' + gpURL + '"');
            });
        });

    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function (obj, start) {
            for (var i = (start || 0), j = this.length; i < j; i++) {
                if (this[i] === obj) {
                    return i;
                }
            }
            return -1;
        };
    }

    resultsLayer = new esri.layers.GraphicsLayer();
    myMap.addLayer(resultsLayer)
	
}



dojo.addOnLoad(init);

function selectZIP(Zip_code) {

    gp = new esri.tasks.Geoprocessor(gpURL);
    gp.setOutputSpatialReference(myMap.spatialReference);

    var params = {
        "ZIP": Zip_code,
        "Rte_Box": "C",
    };

    gp.execute(params, displayResults);

    function displayResults(results, messages) {
        var featureset = results[0].value;


        var simplePolySymbol = new esri.symbol.SimpleFillSymbol();
        simplePolySymbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 96, 170, .75]), 1));

        dojo.forEach(featureset.features, function (feature) {
...