JSFiddle - React, Tailwind, and code Playground

by scriptstar

HTML

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

CSS

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

      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }

JavaScript

var map;
var graphicsArray = [];
require(["esri/map",
  "esri/toolbars/draw",
  "esri/geometry/Geometry",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",
  "esri/graphic",
  "esri/geometry/Circle",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/units",
  "esri/Color",
  "esri/InfoTemplate",
  "dojo/domReady!",
  "dojo/parser", "dijit/registry",
  "esri/geometry"
], function(Map, Draw,

  Geometry,
  Point,
  Polyline,
  Polygon,
  Graphic,
  Circle,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  SimpleFillSymbol,
  units,
  Color,
  InfoTemplate, parser, registry) {
  map = new Map("map", {
    basemap: "topo",
    center: [-0.786150, 51.613230],
    zoom: 13
  });

  map.on("load", addCircleGraphic);

  var point = new Point(-0.786150, 51.613230);
  var pointSymbol = new SimpleMarkerSymbol();
  var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("black");
  var pointAttributes = {
    city: "High Wycombe",
    state: "Bucks"
  };
  var pointInfoTemplate = new InfoTemplate("Alford Road");
  var pointGraphic = new Graphic(point, pointSymbol, pointAttributes).setInfoTemplate(pointInfoTemplate);
  graphicsArray.push(pointGraphic);

  function addCircleGraphic() {
    var circle = new Circle({
      center: [-0.786150, 51.613230],
      geodesic: true,
      radius: 2,
      radiusUnit: units.MILES
    });
    var graphic = new Graphic(circle, symbol);
    graphicsArray.push(graphic);
    for (i = 0; i < graphicsArray.length; ++i) {
      map.graphics.add(graphicsArray[i]);
    }
  }
});