JSFiddle - React, Tailwind, and code Playground

by schlomm

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.18/"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <!-- Additional files for the Highslide popup effect -->
    <script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
    <script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css" />
<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>
<div id="highChartContainer"></div>
</body>

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: 90%;
    height: 50%;
}

#highChartContainer{
    min-width: 310px;
    height: 300px;
    margin: 0 auto
}

JavaScript

require(["esri/map",
    "esri/toolbars/draw",
    "esri/layers/StreamLayer",
    "esri/layers/LabelClass",
    "esri/InfoTemplate",
    "esri/graphic",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/TextSymbol",
    "esri/renderers/SimpleRenderer",
    "esri/geometry/Point",
    "dojo/_base/Color",
    "dojo/on",
    "dojo/_base/lang",
    "dojo/dom-construct",
    "dojo/_base/array",
    'dojo/request/xhr',
    "dojo/domReady!"
], function (Map, Draw, StreamLayer, LabelClass, InfoTemplate, Graphic, SimpleFillSymbol,
             SimpleLineSymbol, TextSymbol, SimpleRenderer, Point, Color, on, d_lang, d_domConstruct, d_array, d_request) {
    var map,
        drawTools,
        streamLayer;


    function init() {
        map = new Map("map", {
            basemap: "dark-gray",
            center: [11.645663, 52.149029],
            zoom: 10
        });
        this.map = map;

        drawTools = new Draw(map);
        var url = "http://service30.eggits.net/arcgis/rest/services/allStations/StreamServer";

        //construct Stream Layer
        streamLayer = new StreamLayer(url, {
            purgeOptions: {displayCount: 10000},
            infoTemplate: new InfoTemplate("Attributes", "${*}")
        });

        //When layer loads, register listeners for layer events and add layer to map
        streamLayer.on("load", function () {
            //Add layer to map
            map.addLayer(streamLayer);
        });

        currentMeasurement = [];
        var that = this;
        streamLayer.on("message", function (event) {
            var timeseries = JSON.parse(event.attributes.timeseries)
            var water = JSON.parse(event.attributes.water)
            if (timeseries && timeseries[0].currentMeasurement && timeseries[0].unit === "cm" && water.shortname === "ELBE") {
                var measurement = {
                    name: event.attributes.shortname,
                    y:...