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/symbols/TextSymbol",
  "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,
  TextSymbol,
  units,
  Color,
  InfoTemplate, parser, registry) {
  map = new Map("map", {
    basemap: "topo",
    center: [31.0928, -17.9318],
    zoom: 13
  });

  map.on("load", function() {
    var point = new Point(31.0928, -17.9318);
    var pointAttributes = {
      city: "Harare",
      country: "Zimbabwe"
    };
    var pointInfoTemplate = new InfoTemplate("Airport");
    var pointSymbol = new SimpleMarkerSymbol();
    var pointGraphic = new Graphic(point, pointSymbol, pointAttributes).setInfoTemplate(pointInfoTemplate);
    graphicsArray.push(pointGraphic);

    var circle = new Circle({
      center: [31.0928, -17.9318],
      geodesic: true,
      radius: 3,
      radiusUnit: units.MILES
    });
    var circleSymbol = new SimpleFillSymbol().setColor(null).outline.setColor("black");
    var circleGraphic = new Graphic(circle, circleSymbol);
    graphicsArray.push(circleGraphic);

    var line = new Polyline({
      paths: [[[circle.center.x, circle.center.y], circle.rings[0][45]]]
    });
    var lineSymbol = new SimpleLineSymbol();
    var lineGraphic = new Graphic(line, lineSymbol);
    graphicsArray.push(lineGraphic);

    var textPoint = new Point((circle.rings[0][45][0] + circle.center.x)/2, (circle.rings[0][45][1] + circle.center.y)/2);
    var textSymbol = new TextSymbol("Radius: " + circle.radius + "...