JSFiddle - React, Tailwind, and code Playground

by scriptstar

HTML

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

CSS

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

JavaScript

require([
        "esri/map",
        "esri/graphic",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/TextSymbol",
        "esri/symbols/Font",
        "esri/geometry/Circle",
        "esri/geometry/Polygon",
        "esri/geometry/Point",
        "esri/SpatialReference",
        "esri/geometry/webMercatorUtils",
        "esri/layers/GraphicsLayer",
        "dojo/request/script",
        "dojo/_base/array",
        "dojo/promise/all", "dojo/Deferred", "dojo/dom", "dojo/on", "dojo/json",
        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/CartographicLineSymbol",
        "esri/geometry/Polyline",
        "esri/Color",
        "dojo/dom-construct",
        "dojox/charting/Chart",
        "dojo/domReady!",
        ],
        function(Map, Graphic, SimpleFillSymbol, SimpleMarkerSymbol, SimpleLineSymbol, TextSymbol, Font, Circle, Polygon, Point, SpatialReference, webMercatorUtils, GraphicsLayer, script, array, all, Deferred, dom, on, JSON, PictureMarkerSymbol, CartographicLineSymbol, Polyline, Color, domConstruct, Chart) {  // function parameters must be in the same order as requires

          var map = new Map("mapDiv", {
            center: [10, 10],
            zoom: 4,
            basemap: "osm"
          });

          gl = new GraphicsLayer({ id: "someLines" });
          map.addLayer(gl);

          var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10,
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );
        
        const radiusInMeters = (2 * 1609.34).toFixed(1);
    		const radians = Math.PI / 180;
    		const ltLong = webMercatorUtils.xyToLngLat(longitude + radiusInMeters * 	Math.cos(radians), latitude + radiusInMeters * Math.sin(radians));

         var lineGeometry = new Polyline(new SpatialReference({wkid:4326}));
    ...