JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>Service Area Task</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      height: 100%;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    #info {
      bottom: 20px;
      color: #444;
      height: auto;
      font-family: arial, sans-serif;
      left: 20px;
      margin: 5px;
      padding: 10px;
      position: absolute;
      text-align: left;
      width: 200px;
      z-index: 40;
    }
  </style>

  <script src="https://js.arcgis.com/3.27/"></script>
  <script>
    require([
      "esri/Color",
      "esri/map",
      "esri/graphic",
      "esri/graphicsUtils",
      "esri/tasks/Geoprocessor",
      "esri/tasks/FeatureSet",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol"
    ], function(Color, Map, Graphic, graphicsUtils, Geoprocessor, FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol,
                SimpleFillSymbol) {

      var map, gp;
      var driveTimes = "1 2 3";

      // Initialize map, GP and image params
      map = new Map("mapDiv", {
        basemap: "streets",
        center: [-95.255, 38.96],
        zoom: 12
      });

      gp = new Geoprocessor("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");
      gp.setOutputSpatialReference({wkid: 102100});
      map.on("click", computeServiceArea);

      function computeServiceArea(evt) {
        map.graphics.clear();
        var pointSymbol = new SimpleMarkerSymbol();
        pointSymbol.setOutline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1);
        pointSymbol.setSize(14);
        pointSymbol.setColor(new Color([0, 255, 0, 0.25]));

       ...