Esri JS API 4.5 TEMPLATE

Template to start off with the Esri ArcGIS JavaScript API 4.5

by Vignesh Gopalakrishnan

HTML

<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/init.js"></script>
<script type="text/javascript">
  var dojoConfig = {
    async: true,
    has: {
        "esri-featurelayer-webgl": 1
      }
  };

</script>
<div id="viewDiv"></div>

CSS

html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

JavaScript

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Legend",
	  "esri/Graphic",
	  "esri/tasks/support/Query",
  "esri/tasks/QueryTask",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer, Legend, Graphic, Query, QueryTask,
    ) {

      var defaultSym = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        outline: { // autocasts as new SimpleLineSymbol()
          color: "lightgray",
          width: 0.5
        }
      };

      /*****************************************************************
       * Set a color visual variable on the renderer. Color visual variables
       * create continuous ramps that map low data values to weak or
       * neutral colors and high data values to strong/deep colors. Features
       * with data values in between the min and max data values are assigned
       * a color proportionally between the min and max colors.
       *****************************************************************/

      var renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: defaultSym
      };
	  
	  var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-85.050200, 33.125524],
        zoom: 6
      });
	  
	  // Each object in this array is autocast as
	// an instance of esri/layers/support/Field
	var fields = [
	  {
		name: "ObjectID",
		alias: "ObjectID",
		type: "oid"
	  }, {
		name: "title",
		alias: "title",
		type: "string"
	  }, {
		name: "type",
		alias: "type",
		type: "string"
	  }, {
		name: "mag",
		alias: "Magnitude",
		type: "double"
	}];
	
	var openSpacesRenderer = {
        "type": "class-breaks",
        "field": "CENSUSAREA",
        "classBreakInfos": [
          {
            "symbol": {
              "color": [
                45,128,120,255
              ],
              "outline": {
   ...