Hospitals_Select with layer

Select using Buffer ad send to enhanced grid, Print all and export to CSV

by Alex Azuero

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>Select with feature layer Hospitals</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    </style>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
        
    </script>
</head>
<body> <span id="messages">Click on the map to select Hospitals within specified buffer distance.</span> 
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
        <div id="mapDiv" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
        <div id="bufferDiv">
            <label for="bufferDistance">Buffer distance (miles):</label>
            <input type="text" value="6" id="bufferDistance" />
        </div>
        <div id="cpBottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
<div style="height:20px;">
            <button id="exportAll">Export all to CSV</button>
            <button id="printAll">Print All</button>
        </div>
            <div id="divGrid"></div>
        </div>
    </div>
    </div>
</body>

</html>
<style>

CSS

html, body, #mapDiv {
    padding: 0;
    margin: 0;
}
#messages {
    background-color: #fff;
    box-shadow: 0 0 5px #888;
    font-size: 1.0em;
    max-width: 12em;
    padding: 0.5em;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 40;
}
#bufferDiv {
    background-color: #fff;
    box-shadow: 0 0 5px #888;
    font-size: 1.2em;
    max-width: 15em;
    padding: 0.5em;
    position: absolute;
    left: 70px;
    top: 20px;
    z-index: 40;
}
html, body, #divMap {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFF;
    overflow: hidden;
    font-family:"Trebuchet MS";
    font-size: 0.65em;
}
#bcMain {
    width: 100%;
    height: 100%;
}
#divRenderer {
    position: absolute;
    left: 27px;
    bottom: 27px;
}
#cpBottom {
    height: 100px;
}
#divGrid {
    height: 130px;
}
.dgrid {
    border: none;
}
.field-OBJID {
    width: 100px;
}
.field-Hospital {
    width: 160px;
}
.field-Address {
    width: 60px;
}
.field-City {
    width: 100px;
}
.field-Phone {
    width: 100%;
}

JavaScript

require([
        "esri/map",
        "esri/dijit/Scalebar",
        "esri/layers/FeatureLayer",
        "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/dom",
        "dojo/parser",
        "dojo/store/Memory",
        "dojo/data/ItemFileWriteStore",
        "dgrid/OnDemandGrid",
        "dojox/grid/EnhancedGrid",
        "dojox/grid/enhanced/plugins/exporter/CSVWriter",
        "dojox/grid/enhanced/plugins/Printer",
        "dgrid/Selection",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/_base/declare",
        "dojo/_base/array",
        "dijit/TooltipDialog",
        "dijit/popup",
        "dojo/on",
        "esri/lang",
        "dojo/dom-style",
        "esri/layers/GraphicsLayer",
        "dojo/domReady!"],

    function (
    Map,
    Scalebar,
    FeatureLayer,
    Query,
    Circle,
    Graphic,
    InfoTemplate,
    SimpleMarkerSymbol,
    SimpleLineSymbol,
    SimpleFillSymbol,
    SimpleRenderer,
    esriConfig,
    Color,
    dom,
    parser,
    Memory,
    ItemFileWriteStore,
    Grid,
    EnhancedGrid,
    CSVWriter,
    Printer,
    Selection,
    BorderContainer,
    ContentPane,
    declare,
    array,
    TooltipDialog,
    dijitPopup,
    on,
    esriLang,
    domStyle,
    GraphicsLayer) {


        // Parse DOM nodes decorated with the data-dojo-type attribute
        parser.parse();

        // Initialize the dgrid
        var gridGH = new EnhancedGrid({
            structure: [{
                name: "OID",
                field: "OBJECTID"
            }, {
                name: "Hospital",
                field: "HOSPITAL_N"
            }, {
                name: "Address",
                field: "ARC_Addres"
         ...