JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>StreamLayer using ArcGIS API for JavaScript and ArcGIS Server Stream Service</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      }
      body{
        background-color: #fff; overflow:hidden;
        font-family: sans-serif;
      }
      p {
        margin: 2px;
      }
      .controls {
        margin-left: 10px;
        padding-top: 10px;
      }
      #map {
        width: 100%;
        height: 80%;
      }
    </style>
    <script src="https://js.arcgis.com/3.16/"></script>
  </head>
  <body class="tundra">
    <div id="map"></div>
    <div class="controls">
      <span>Stream service url: </span><input type="text" id="txtStreamUrl" value="https://geoeventsample3.esri.com:6443/arcgis/rest/services/SeattleBus/StreamServer" style="color:#ffffff; width:600px; background-color: #8b0000"/><br>
      <input type="button" id="cmdToggleStreamLayer" value="Make Stream Layer" />
    </div>
    <div id="divFilterControls" class="controls" style="display: none">
      <p>Draw extent to filter messages by a bounding box</p>
      <input type="button" id="cmdToggleSpatialFilter" value="Draw Extent" /><br>
    </div>
  </body>
  <script>
    require(["esri/map",
      "esri/toolbars/draw",
      "esri/layers/StreamLayer",
      "esri/InfoTemplate",
      "esri/graphic",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "dojo/_base/Color",
      "dojo/on",
      "dojo/domReady!"
    ], function(Map, Draw, StreamLayer, InfoTemplate, Graphic, SimpleFillSymbol,
                SimpleLineSymbol, Color, on) {
      var map,
          drawTools,
   ...