JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the featurelayer-query sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html
  -->
<title>Query features from a FeatureLayer - 4.14</title>

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

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

      #infoDiv {
        background-color: white;
        color: black;
        padding: 6px;
        width: 400px;
      }

      #results {
        font-weight: bolder;
        padding-top: 10px;
      }
      .slider {
        width: 100%;
        height: 60px;
      }
      #drop-downs {
        padding-bottom: 15px;
      }
    </style>
 
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="infoDiv" class="esri-widget">
      <div id="drop-downs">
        Select well type:
        <select id="well-type" class="esri-widget"></select>
      </div>
      Well buffer distance (meters):
      <div id="distance" class="slider"></div>
      Earthquake magnitude:
      <div id="mag" class="slider"></div>
      <button id="query-quakes" class="esri-widget">Query Earthquakes</button>
      <div id="results" class="esri-widget"></div>
    </div>
  </body>
</html>

JavaScript

require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/geometryEngine",
        "esri/Graphic",
        "esri/widgets/Slider"
      ], function(
        Map,
        MapView,
        FeatureLayer,
        GraphicsLayer,
        geometryEngine,
        Graphic,
        Slider
      ) {
      	console.warn('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA')
        var quakesUrl =
          "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0";

        var wellBuffer, wellsGeometries, magnitude;

        var wellTypeSelect = document.getElementById("well-type");

        var magSlider = new Slider({
          container: "mag",
          min: 0,
          max: 5,
          steps: 0.1,
          values: [2],
          rangeLabelsVisible: true,
          labelsVisible: true
        });

        var distanceSlider = new Slider({
          container: "distance",
          min: 100,
          max: 10000,
          steps: 100,
          labelFormatFunction: function(value, type) {
            if (type === "value") {
              return parseInt(value);
            }
            return value;
          },
          values: [5000],
          rangeLabelsVisible: true,
          labelsVisible: true
        });

        var queryQuakes = document.getElementById("query-quakes");

        // oil and gas wells
        var wellsLayer = new FeatureLayer({
          portalItem: {
            // autocasts as new PortalItem()
            id: "8af8dc98e75049bda6811b0cdf9450ee"
          },
          outFields: ["*"],
          visible: false
        });

        // historic earthquakes
        var quakesLayer = new FeatureLayer({
          url: quakesUrl,
          outFields: ["*"],
          visible: false
        });

        // GraphicsLayer for displaying results
        var resultsLayer = new GraphicsLayer();

        var map = new...