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"/>
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Popup</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"/>
    <style>
      html,body,#map{
        padding:0;
        margin:0;
        height:100%;
      }

    </style>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
      require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/tasks/query",
        "dojo/dom-class",
        "dojo/dom-construct",
        "dojo/_base/array",
        "dojo/on",
        "dojo/domReady!"
      ], function(
        Map,
        FeatureLayer,
        Query,
        domClass,
        domConstruct,
        array,
        on,
        Chart,
        theme
      ){


        var map = new Map("map", {
          basemap: "gray",
          center: [-98.57, 39.82],
          zoom: 4
        });


        var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
          mode: FeatureLayer.MODE_SELECTION,
          outFields: ["*"]
        });
          

   
        map.on("layers-add-result", function(){
          //layer added lets create a query 
          var query = new Query();
          query.where = "1=1";


          featureLayer.selectFeatures(query);

        });

        map.addLayers([featureLayer]);

      });

 
    </script>
  </head>
  
  <body class="claro">
    <div id="map"></div>
  </body>

</html>