JSFiddle - React, Tailwind, and code Playground

by rachelmc_

HTML

<!--
 --><html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Display a map</title>

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

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

    <script>
      require(["esri/config","esri/Map", "esri/views/MapView", "esri/widgets/Sketch", "esri/layers/GraphicsLayer", "esri/layers/FeatureLayer"], function (esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer) {
      

        esriConfig.apiKey = "AAPK9e1ba1e4673742e1a2c4c380a59e36d0jfRptWT_yZqYC1Y9aJ-q5plDTfpiR7imVl2vFBEef7as7Zo9r9GGzu7vougFcPPh";

        const map = new Map({
          basemap: "streets-vector" // Basemap layer service
        });

        const view = new MapView({
          map: map,
          center: [-97.744867, 30.271483], // Longitude, latitude
          zoom: 11, // Zoom level
          container: "viewDiv" // Div element
        });
        
              // Add sketch widget
        const graphicsLayerSketch = new GraphicsLayer();
        map.add(graphicsLayerSketch);

        const sketch = new Sketch({
          layer: graphicsLayerSketch,
          view: view,
          creationMode: "update" // Auto-select
        });

      view.ui.add(sketch, "top-right");
        
      // Add sketch events to listen for and execute query
      sketch.on("update", (event) => {
        
         // Create
        if (event.state === "start") {
          queryFeaturelayer(event.graphics[0].geometry);
        }
        if (event.state === "complete"){
          graphicsLayerSketch.remove(event.graphics[0]); // Clear the graphic when a user clicks off of it or sketches new one
        }
        // Change
        if...