JSFiddle - React, Tailwind, and code Playground

by patrickarlt

HTML

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

CSS

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

JavaScript

require([
  "esri/map",
  "esri/request",
  "esri/graphic",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/SimpleLineSymbol", 
  "esri/geometry/Polygon",
  "esri/Color",
  "esri/geometry/Extent",
    "esri/geometry/webMercatorUtils",
  "dojo/domReady!"
], function(Map, request, Graphic, SimpleFillSymbol, SimpleLineSymbol, Polygon, Color, Extent, webMercatorUtils) {
  var blueOutline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,0,255,0.75]), 2);
  var redOutline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0,0.75]), 2);
  var blue = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, blueOutline, new Color([0,0,255,0.25]));
  var red = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, redOutline, new Color([255,0,0,0.25]));
  
  var map = new Map("map", {
    basemap: "topo",
    center: [-104.95911730827144, 40.00025047581997],
    zoom: 19
  });
  
  var featureId = 126;

  function drawRings(response){
    var rings = response.features[0].geometry.rings;
    for (var i = 0; i < rings.length; i++) {
      var ring = rings[i];
      var polygon = new Polygon(ring);
      var isClockwise = polygon.isClockwise(polygon.rings[0]);
      var graphic = new Graphic(polygon);
      if(isClockwise){
        graphic.setSymbol(blue);
      } else {
        graphic.setSymbol(red);
      }
      map.graphics.add(graphic);
    };
    return response;
  }
    
  function zoomToFeature(response){
    var feature = response.features[0];
    var graphic = new Graphic(feature);
    map.setExtent(graphic.geometry.getExtent());
  }
    
  map.on('click', function(e){
    var center = webMercatorUtils.webMercatorToGeographic(map.extent.getCenter());
    var zoom = map.getZoom();
    console.log([center.x,center.y], zoom);
  });
    
  map.on('load', function(){
     //request({
     //  url:...