JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Select with feature layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css" media="screen">
        
     <body class="claro">
    <span id="messages" >Click on the map <br> to select 1 mile buffer.</span>   
    <div id="mapDiv">
      <button id="btnBufferTool"></button>
    </div>
         </body>
    
    
    
	<script src="http://js.arcgis.com/3.9/"></script>

CSS

html, body, #mapDiv {
    padding: 0;
    margin: 0;
    height: 100%;
}
#messages {
    background-color: #fff;
    box-shadow: 0 0 5px #888;
    font-size: 1.1em;
    max-width: 15em;
    padding: 0.5em;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 40;
}

JavaScript

var map;
 
      require([
        "esri/map", "esri/layers/FeatureLayer", 
        "dijit/form/ToggleButton",
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/parser", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        ToggleButton,
        Query, Circle,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, parser, dom, on
      ) {

        esriConfig.defaults.io.proxyUrl = "/proxy";
        
        parser.parse();
//"xmin":-13587617,"ymin":4564540,"xmax":-13587178,"ymax":4564976
        map = new Map("mapDiv", { 
          basemap: "streets",
          center: [-73.9890,40.7504],
          zoom: 17,
          slider: false
        });
        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
          infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
        });
        // selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          12, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL, 
            new Color([247, 34, 101, 0.9]), 
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol); 
        
        //make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(1);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
        
        map.addLayer(featureLayer);
        
        var...