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>MultiVariant linear visualization</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<script src="https://js.arcgis.com/3.16/"></script>
    
<style>
  html, body, #map{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  #info{
    top: 0px;
    right: 0px;
    position: absolute;
    z-index: 99;
    opacity: 0.9;
    background-color: whitesmoke;
    border-bottom-left-radius: 8px;
    padding: 0px 0px 0px 10px;
  }
</style>

<script>
require([
  "esri/map",
  "esri/Color",
  "esri/layers/FeatureLayer",
  "esri/renderers/UniqueValueRenderer",
  "esri/symbols/SimpleLineSymbol",
  "esri/dijit/PopupTemplate",
  "esri/dijit/Legend",
  "dojo/domReady!"
], function(
  Map, Color,
  FeatureLayer,
  UniqueValueRenderer,
  SimpleLineSymbol,
  PopupTemplate,
  Legend
) {

  var map = new Map("map", {
    basemap: "dark-gray",
    center: [ -81.457, 28.591 ],
    zoom: 9
  });
      
  /******************************************************
  * The PopupTemplate can be used to override the
  * field name or default field alias for fields 
  * in the legend. Without the 'label' property in 
  * each fieldInfo object below, the fields in the 
  * legend would read "DISTRICT" and "AADT" respectivly.
  * 
  * Adding a label in the PopupTemplate allows you 
  * to format and re-write the titles for each field 
  * so they're more descriptive
  *****************************************************/
  var template = new PopupTemplate({
    title: "District {DISTRICT}",
    description: "{*}",
    fieldInfos: [{
      fieldName: "DISTRICT",
      label: "Transportation District",
      format: { places: 0, digitSeparator: true }  
    }, {
      fieldName: "AADT",
      label: "Annual Average Daily Traffic",
      format: { places: 0,...