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">
  <title>Using DataAdapterFeatureLayer</title>
  <link rel="stylesheet" href="//js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="//js.arcgis.com/3.16/esri/css/esri.css">
  <script src="//js.arcgis.com/3.16/"></script>

  <style>
    html,body, #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .roundedCorners {
      border-radius: 10px;
      box-shadow: 4px 4px 8px #adadad;
    }
    #lppanel {
      position: absolute;
      height: 80px;
      font-family: arial;
      top: 10px;
      margin: 5px;
      padding: 5px;
      z-index: 40;
      background: #fff;
      color: #444;
      width: 440px;
      right: 10px;
      box-shadow: 0 0 5px #888;
    }
  </style>
</head>

<body class="claro">
  <script>
    "use strict";
    
    var map, layer;
    require({
      packages: [{
        name: "sample",
        location: location.pathname.replace(/\/[^/]+$/, "")
      }]
    }, [
      "dojo/query",
      "dojo/_base/array",
      "esri/config",
      "esri/graphicsUtils",
      "esri/map",
      "esri/SpatialReference",
      "esri/tasks/locationproviders/StandardGeographyQueryLocationProvider",
      "esri/tasks/locationproviders/GeometryLocationProvider",
      "esri/tasks/locationproviders/CoordinatesLocationProvider",
      "esri/tasks/locationproviders/QueryTaskLocationProvider",
      "esri/tasks/locationproviders/LocatorLocationProvider",
      "esri/layers/DataAdapterFeatureLayer",
      "esri/tasks/geoenrichment/StandardGeographyQueryTask",
      "esri/tasks/QueryTask",
      "esri/tasks/locator",
      "esri/tasks/GeometryService",
      "esri/urlUtils",
      "sample/SampleDataAdapter",
      "esri/IdentityManager",
      "dojo/domReady!"
    ], function(
      query,
      array,
      esriConfig,
      graphicsUtils,
      Map,
      SpatialReference,
     ...