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>QueryTask - 4.10</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #optionsDiv {
      background-color: dimgray;
      color: white;
      padding: 10px;
      width: 350px;
    }

    .esri-popup .esri-popup-header .esri-title {
      font-size: 18px;
      font-weight: bolder;
    }

    .esri-popup .esri-popup-body .esri-popup-content {
      font-size: 14px;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/layers/GraphicsLayer",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query"
    ], function(
      Map, SceneView, GraphicsLayer,
      QueryTask, Query
    ) {

      // URL to feature service containing points representing the 50
      // most prominent peaks in the U.S.
      var peaksUrl =
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";

      // Define the popup content for each result
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{MTN_PEAK}, {STATE}",
        fieldInfos: [{
          fieldName: "ELEV_ft",
          label: "Elevation (feet)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "ELEV_m",
          label: "Elevation (meters)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "PROMINENCE_ft",
          label: "Prominence (feet)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "PROMINENCE_m",
         ...