saraneh/gist:d0a2f9f17dd512b9fa52596c6293aefb

## gistfile1.txt
<!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>Wind farm performance throughout the U.S.</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">

<style>
  html, body {
    height: 97%;
    width: 98%;
    margin: 1%;
  }

  #rightPane {
    width: 20%;
  }

  #legendPane {
    border: solid #97DCF2 1px;
  }

  #results {
    position: absolute;
    z-index: 10;
    bottom: 45px;
    right: 10px;
    background-color: black;
    opacity: 0.8;
    color: cornsilk;
    width: 300px;
    padding: 5px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .stats {
    color: darkorange;
  }
</style>

<script src="https://js.arcgis.com/3.29/"></script>
<script>
  var map;
  require([
    "esri/map",
    "esri/dijit/InfoWindowLite",
    "esri/InfoTemplate",
    "esri/layers/FeatureLayer",
    "esri/tasks/query",
    "esri/tasks/StatisticDefinition",
    "esri/geometry/geometryEngine",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/graphic",
    "esri/Color",
    "dojo/dom",
    "dojo/dom-construct",
    "esri/dijit/Legend",
    "dojo/_base/array",
    "dojo/parser",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/AccordionContainer",
    "dojo/domReady!"
  ], function(Map, InfoWindowLite, InfoTemplate, FeatureLayer, Query, StatisticDefinition, geometryEngine,
    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Graphic, Color, dom, domConstruct, Legend,
    arrayUtils, parser) {

    parser.parse();

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

    var url = "https://services9.arcgis.com/1QkVMeO75ILiBLGD/arcgis/rest/services/US_Wind_Farms/FeatureServer/0?token=W_vm7nyRYeXSq-V1lt_tZ5hR7f_tNy2xnIR0e3Y4tLFlrfAdS4tMtHOlVS3nl_FWGpaNjbU-FwGD2G8awQAx2eF9PoN582bI20pCcJgoLfBUEbjGXDtW1-N0fRaYnl6DZb9GJZnytHMDHhQkBmvnqUPJADSXqAYWBO0aLkRkiTUHt9T3GJipFcuTD8PhK08iBJV82kKzvexXFvIEv7NC3F6YhazDetpYT8x9lKZwtDzQyrXP4X32NLi4LOYptdal";

    var fields = ["NAME", "ID", "Latitude", "Longitude", "CapacityMW", "GenerationMWhPerYear", "NetCapFact", "NCFRank"];

    var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

    var template = new InfoTemplate();
        template.setTitle("<b>${NAME}</b>");
        template.setContent("Net Capacity Factor: ${NetCapFact}%");

    var featureLayer = new FeatureLayer(url, {
        infoTemplate: template,
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: fields,
      });

    map.on("layers-add-result", function (evt) {
      var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
        return {layer:layer.layer, title:layer.layer.name};
          });
      if (layerInfo.length > 0) {
        var legendDijit = new Legend({
          map: map,
          layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });

    map.addLayer(featureLayer);
    map.infoWindow.resize(200, 50);

    var WindLyr = new FeatureLayer(url, {
      outFields: fields
    });

    // Symbol used to represent point clicked on map
    var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 1, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,0, 0.3]), 10), new Color([0,255,0,1]));

    // Symbol used to represent one-mile buffer around point
    var buffSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_LONGDASHDOT, new Color([255,128,0,1]), 3), new Color([255,128,0,0.15]));

    // When the map is clicked, get the point at the clicked location and execute getPoint()
    map.on("click", getPoint);


    var sqlExpression = "(GenerationMWhPerYear / (CapacityMW * 8760))*100";

    var minStatDef = new StatisticDefinition();
    minStatDef.statisticType = "min";
    minStatDef.onStatisticField = sqlExpression;
    minStatDef.outStatisticFieldName = "minNCF";

    var maxStatDef = new StatisticDefinition();
    maxStatDef.statisticType = "max";
    maxStatDef.onStatisticField = sqlExpression;
    maxStatDef.outStatisticFieldName = "maxNCF";

    var avgStatDef = new StatisticDefinition();
    avgStatDef.statisticType = "avg";
    avgStatDef.onStatisticField = sqlExpression;
    avgStatDef.outStatisticFieldName = "avgRegNCF";

    var countStatDef = new StatisticDefinition();
    countStatDef.statisticType = "count";
    countStatDef.onStatisticField = sqlExpression;
    countStatDef.outStatisticFieldName = "numFarms";

    // Set the base parameters for the query. All statistic definition objects
    // are passed as an array into the outStatistics param
    var queryParams = new Query();
    queryParams.distance = 100;  // Return all block groups within one mile of the point
    queryParams.units = "kilometers";
    queryParams.outFields = fields;
    queryParams.outStatistics = [ minStatDef, maxStatDef, avgStatDef, countStatDef];

    var queryWindfarm = new esri.tasks.Query();
            queryWindfarm.returnGeometry = true;
            queryWindfarm.outFields = ["NAME", "NetCapFact"];
            queryWindfarm.distance = 100;
            queryWindfarm.units = "kilometers";

    // map click function
    function getPoint(evt){

      // set click point location as input to query paramaters
      var point = evt.mapPoint;
      queryParams.geometry = point;

      // Clears graphics from previous queries
      map.graphics.clear();

      // Add point graphic
      var ptGraphic = new Graphic(point, pointSymbol);
      map.graphics.add(ptGraphic);

      // Add buffer graphic
      var buffer = geometryEngine.geodesicBuffer(point, 100, "kilometers");
      var bufferGraphic = new Graphic(buffer, buffSymbol);
      map.graphics.add(bufferGraphic);

      // Execute the statistics query against the feature service and call the getStats() callback
      WindLyr.queryFeatures(queryParams, getStats, errback);
    }

    // Executes on each query
    function getStats(results){
      // The return object of the query containing the statistics requested
      var stats = results.features[0].attributes;

      // Print the statistic results to the DOM
      dom.byId("countResult").innerHTML = Math.round(stats.numFarms);
      dom.byId("minResult").innerHTML = Math.round(stats.minNCF) + "%";
      dom.byId("maxResult").innerHTML = Math.round(stats.maxNCF) + "%";
      dom.byId("avgResult").innerHTML = Math.round(stats.avgRegNCF) + "%";
    }

    function errback(err){
      console.log("Couldn't retrieve summary statistics. ", err);
    }

  });
</script>
</head>

<body class="claro">
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'left'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  <div id="results"><h3>Regional Wind Farm Statistics</h3>
    Regional statistics include wind farms within 100 km of the selected point.<br><br>
    <div id="display">
      <strong>Number of Wind Farms: </strong><span class="stats" id="countResult"></span><br>
      <strong>Regional Average: </strong><span class="stats" id="avgResult"></span><br>
      Lowest Net Capacity Factor: <span class="stats" id="minResult"></span><br>
      Highest Net Capacity Factor: <span class="stats" id="maxResult"></span>
    </div>
  </div>
</body>
</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>Wind farm performance throughout the U.S.</title>
	<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
	<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">

	<style>
	html, body {
	height: 97%;
	width: 98%;
	margin: 1%;
	}

	#rightPane {
	width: 20%;
	}

	#legendPane {
	border: solid #97DCF2 1px;
	}

	#results {
	position: absolute;
	z-index: 10;
	bottom: 45px;
	right: 10px;
	background-color: black;
	opacity: 0.8;
	color: cornsilk;
	width: 300px;
	padding: 5px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	}
	.stats {
	color: darkorange;
	}
	</style>

	<script src="https://js.arcgis.com/3.29/"></script>
	<script>
	var map;
	require([
	"esri/map",
	"esri/dijit/InfoWindowLite",
	"esri/InfoTemplate",
	"esri/layers/FeatureLayer",
	"esri/tasks/query",
	"esri/tasks/StatisticDefinition",
	"esri/geometry/geometryEngine",
	"esri/symbols/SimpleMarkerSymbol",
	"esri/symbols/SimpleLineSymbol",
	"esri/symbols/SimpleFillSymbol",
	"esri/graphic",
	"esri/Color",
	"dojo/dom",
	"dojo/dom-construct",
	"esri/dijit/Legend",
	"dojo/_base/array",
	"dojo/parser",
	"dijit/layout/BorderContainer",
	"dijit/layout/ContentPane",
	"dijit/layout/AccordionContainer",
	"dojo/domReady!"
	], function(Map, InfoWindowLite, InfoTemplate, FeatureLayer, Query, StatisticDefinition, geometryEngine,
	SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Graphic, Color, dom, domConstruct, Legend,
	arrayUtils, parser) {

	parser.parse();

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

	var url = "https://services9.arcgis.com/1QkVMeO75ILiBLGD/arcgis/rest/services/US_Wind_Farms/FeatureServer/0?token=W_vm7nyRYeXSq-V1lt_tZ5hR7f_tNy2xnIR0e3Y4tLFlrfAdS4tMtHOlVS3nl_FWGpaNjbU-FwGD2G8awQAx2eF9PoN582bI20pCcJgoLfBUEbjGXDtW1-N0fRaYnl6DZb9GJZnytHMDHhQkBmvnqUPJADSXqAYWBO0aLkRkiTUHt9T3GJipFcuTD8PhK08iBJV82kKzvexXFvIEv7NC3F6YhazDetpYT8x9lKZwtDzQyrXP4X32NLi4LOYptdal";

	var fields = ["NAME", "ID", "Latitude", "Longitude", "CapacityMW", "GenerationMWhPerYear", "NetCapFact", "NCFRank"];

	var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
	infoWindow.startup();
	map.setInfoWindow(infoWindow);

	var template = new InfoTemplate();
	template.setTitle("<b>${NAME}</b>");
	template.setContent("Net Capacity Factor: ${NetCapFact}%");

	var featureLayer = new FeatureLayer(url, {
	infoTemplate: template,
	mode: FeatureLayer.MODE_ONDEMAND,
	outFields: fields,
	});

	map.on("layers-add-result", function (evt) {
	var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
	return {layer:layer.layer, title:layer.layer.name};
	});
	if (layerInfo.length > 0) {
	var legendDijit = new Legend({
	map: map,
	layerInfos: layerInfo
	}, "legendDiv");
	legendDijit.startup();
	}
	});

	map.addLayer(featureLayer);
	map.infoWindow.resize(200, 50);

	var WindLyr = new FeatureLayer(url, {
	outFields: fields
	});

	// Symbol used to represent point clicked on map
	var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 1, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,0, 0.3]), 10), new Color([0,255,0,1]));

	// Symbol used to represent one-mile buffer around point
	var buffSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_LONGDASHDOT, new Color([255,128,0,1]), 3), new Color([255,128,0,0.15]));

	// When the map is clicked, get the point at the clicked location and execute getPoint()
	map.on("click", getPoint);


	var sqlExpression = "(GenerationMWhPerYear / (CapacityMW * 8760))*100";

	var minStatDef = new StatisticDefinition();
	minStatDef.statisticType = "min";
	minStatDef.onStatisticField = sqlExpression;
	minStatDef.outStatisticFieldName = "minNCF";

	var maxStatDef = new StatisticDefinition();
	maxStatDef.statisticType = "max";
	maxStatDef.onStatisticField = sqlExpression;
	maxStatDef.outStatisticFieldName = "maxNCF";

	var avgStatDef = new StatisticDefinition();
	avgStatDef.statisticType = "avg";
	avgStatDef.onStatisticField = sqlExpression;
	avgStatDef.outStatisticFieldName = "avgRegNCF";

	var countStatDef = new StatisticDefinition();
	countStatDef.statisticType = "count";
	countStatDef.onStatisticField = sqlExpression;
	countStatDef.outStatisticFieldName = "numFarms";

	// Set the base parameters for the query. All statistic definition objects
	// are passed as an array into the outStatistics param
	var queryParams = new Query();
	queryParams.distance = 100; // Return all block groups within one mile of the point
	queryParams.units = "kilometers";
	queryParams.outFields = fields;
	queryParams.outStatistics = [ minStatDef, maxStatDef, avgStatDef, countStatDef];

	var queryWindfarm = new esri.tasks.Query();
	queryWindfarm.returnGeometry = true;
	queryWindfarm.outFields = ["NAME", "NetCapFact"];
	queryWindfarm.distance = 100;
	queryWindfarm.units = "kilometers";

	// map click function
	function getPoint(evt){

	// set click point location as input to query paramaters
	var point = evt.mapPoint;
	queryParams.geometry = point;

	// Clears graphics from previous queries
	map.graphics.clear();

	// Add point graphic
	var ptGraphic = new Graphic(point, pointSymbol);
	map.graphics.add(ptGraphic);

	// Add buffer graphic
	var buffer = geometryEngine.geodesicBuffer(point, 100, "kilometers");
	var bufferGraphic = new Graphic(buffer, buffSymbol);
	map.graphics.add(bufferGraphic);

	// Execute the statistics query against the feature service and call the getStats() callback
	WindLyr.queryFeatures(queryParams, getStats, errback);
	}

	// Executes on each query
	function getStats(results){
	// The return object of the query containing the statistics requested
	var stats = results.features[0].attributes;

	// Print the statistic results to the DOM
	dom.byId("countResult").innerHTML = Math.round(stats.numFarms);
	dom.byId("minResult").innerHTML = Math.round(stats.minNCF) + "%";
	dom.byId("maxResult").innerHTML = Math.round(stats.maxNCF) + "%";
	dom.byId("avgResult").innerHTML = Math.round(stats.avgRegNCF) + "%";
	}

	function errback(err){
	console.log("Couldn't retrieve summary statistics. ", err);
	}

	});
	</script>
	</head>

	<body class="claro">
	<div id="content"
	data-dojo-type="dijit/layout/BorderContainer"
	data-dojo-props="design:'headline', gutters:true"
	style="width: 100%; height: 100%; margin: 0;">

	<div id="rightPane"
	data-dojo-type="dijit/layout/ContentPane"
	data-dojo-props="region:'left'">

	<div data-dojo-type="dijit/layout/AccordionContainer">
	<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
	data-dojo-props="title:'Legend', selected:true">
	<div id="legendDiv"></div>
	</div>
	</div>
	</div>
	<div id="map"
	data-dojo-type="dijit/layout/ContentPane"
	data-dojo-props="region:'center'"
	style="overflow:hidden;">
	<div id="results"><h3>Regional Wind Farm Statistics</h3>
	Regional statistics include wind farms within 100 km of the selected point.<br><br>
	<div id="display">
	<strong>Number of Wind Farms: </strong><span class="stats" id="countResult"></span><br>
	<strong>Regional Average: </strong><span class="stats" id="avgResult"></span><br>
	Lowest Net Capacity Factor: <span class="stats" id="minResult"></span><br>
	Highest Net Capacity Factor: <span class="stats" id="maxResult"></span>
	</div>
	</div>
	</body>
	</html>