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/Color",
  "esri/geometry/Extent",
  "dojo/domReady!"
], function(Map, request, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, Extent) {
  var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
    new Color([255,0,0]), 2), new Color([255,255,0,0.25])
  ).toJson();
  
  var map = new Map("map", {
    basemap: "topo"
  });
  
  var featureId = 126;

  function drawFeature(response){
    var feature = response.features[0];
    feature.symbol = symbol;
    var graphic = new Graphic(feature);
    map.graphics.add(graphic);
    map.setExtent(graphic.geometry.getExtent());
  }

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