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

require([
  "dojo/ready",
  "dojo/parser",
  "esri/map",
  "esri/geometry/Point",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/graphic",
  "esri/geometry/Polyline",
  "esri/SpatialReference"
], function(
  ready,
  parser,
  Map,
  Point,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  Graphic,
  Polyline,
  SpatialReference
) {
  ready(function() {
    parser.parse();
    myMap = new Map("map", {
      basemap: "streets",
      center: [-122.16, 37.7238],
      zoom: 15,
      SpatialReference: 4326
    });
    myMap.on("load", function() {
      var point1 = new Point(-122.159, 37.724, myMap.SpatialReference);
      var point2 = new Point(-122.169, 37.721, myMap.SpatialReference);
      var line = new Polyline(myMap.SpatialReference);

      line.addPath([point1, point2]);

      var lineSymbol = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 4);
      var pointSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0, 0.5]));

      myMap.graphics.add(new Graphic(point1, pointSymbol));
      myMap.graphics.add(new Graphic(point2, pointSymbol));
      myMap.graphics.add(new Graphic(line, lineSymbol));
    });
  });
});