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;
  }
    
  map.on('load', function(){
     request({
       url: "http://services.arcgis.com/IamIM3RJ5xHykalK/arcgis/rest/services/Web_Annexations2/FeatureServer/0/query?where=FID%3D%27"+featureId+"%27&outSr=4326&maxAllowableOffset=0.0001401317362882808&f=json"
     }).then(drawRings);
  });
});