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>QueryTask with geometry, results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/graphic",
        "esri/InfoTemplate",
        "esri/SpatialReference",
        "esri/geometry/Extent",
        "esri/layers/GraphicsLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/query",
        "esri/tasks/QueryTask",
        "esri/Color",
        "dojo/domReady!"
      ],
        function (
          Map, Graphic, InfoTemplate, SpatialReference, Extent, GraphicsLayer,
          SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask, Color
        ) {

          map = new Map("mapDiv", {
              basemap: "streets",
              center: [-80.94, 33.646],
              zoom: 8
            });

          map.on("load", setUpQuery);

          function setUpQuery () {
            var queryTask = new QueryTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

            //build query filter
            var query = new Query();
            query.returnGeometry = true;
            query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];
            query.outSpatialReference = { "wkid": 102100 };
            query.where = "STATE_NAME = 'South Carolina'";

            var infoTemplate = new InfoTemplate();
            var content = "<b>2000 Population: </b>${POP2000}<br/>" +
                          "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"...