How to replace the legacy function "doQueries " to AMD ESRI Javascript format?

Question

I'm trying to understand the migration of ESRI API for javascript, from legacy to AMD. In the case of this example, how replace the fucntion doqueries????:

function init() {
    map = new esri.Map("map", {
      extent: new esri.geometry.Extent(-102.61, 36.2, -93.82, 40.5, new esri.SpatialReference({wkid: 4326})),
      slider: false
    });
    dojo.connect(map, "onLoad", doQueries);
    map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
  }

  function doQueries(map) {
    //Query all counties in Kansas
    var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
    var countyQuery = new esri.tasks.Query();
    countyQuery.outFields = ["*"];
    countyQuery.returnGeometry = true;
    countyQuery.outSpatialReference = map.spatialReference;
    countyQuery.where = "STATE_NAME = 'Kansas'";
    countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);

    //Query all cities in Kansas
    var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
    var cityQuery = new esri.tasks.Query();
    cityQuery.outFields = ["*"];
    cityQuery.returnGeometry = true;
    cityQuery.outSpatialReference = map.spatialReference;
    cityQuery.where = "STATE_NAME = 'Kansas'";
    cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
  }

  function addCountyFeatureSetToMap(featureSet) {
    var symbol = new esri.symbol.SimpleFillSymbol();
    symbol.setColor(new dojo.Color([150,150,150,0.5]));

    //Create graphics layer for counties
    var countyLayer = new esri.layers.GraphicsLayer();
    map.addLayer(countyLayer);

    var infoTemplate = new esri.InfoTemplate("${NAME}","${*}");

    //Add counties to the graphics layer
    dojo.forEach(featureSet.features, function(feature) {
      countyLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
    });
  }

  function addCityFeatureSetToMap(featureSet) {
    var symbol = new esri.symbol.SimpleMarkerSymbol();
    symbol.setColor(new dojo.Color([0,0,255]));

    //Create graphics layer for cities
    var cityLayer = new esri.layers.GraphicsLayer();
    map.addLayer(cityLayer);
    map.reorderLayer(cityLayer,1);

    var infoTemplate = new esri.InfoTemplate("${CITY_NAME}","${*}");

    //Add cities to the graphics layer
    dojo.forEach(featureSet.features, function(feature) {
      cityLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
    });
  }

  dojo.addOnLoad(init);

Answer 1

I've converted this to AMD below. Specific things to point out:

• use require() to load modules instead of dojo.require()
• no longer use any esri.whatever globals
• no longer use any dojo.whatever globals
• dojo/domReady (or dojo/ready) replaces dojo.addOnLoad or dojo.ready
• use object.on to listen to events, this replaces dojo.connect (example is map.on(), this is not specific to AMD)
• take a look at this AMD require generator until you get a handle on module names and recommended aliases: http://swingley.github.io/arg/

Code using AMD rather than legacy globals stuff:

var map;

require([
    "esri/map", "esri/geometry/Extent", "esri/SpatialReference",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/tasks/query", "esri/tasks/QueryTask", 
    "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleMarkerSymbol",
    "esri/InfoTemplate", "esri/layers/GraphicsLayer",
    "dojo/_base/Color", "dojo/_base/array",
    "dojo/domReady!"
], function(
    Map, Extent, SpatialReference, 
    ArcGISTiledMapServiceLayer,
    Query, QueryTask,
    SimpleFillSymbol, SimpleMarkerSymbol, 
    InfoTemplate, GraphicsLayer,
    Color, arrayUtils
) {
    map = new Map("map", {
      extent: new Extent(-102.61, 36.2, -93.82, 40.5, new SpatialReference({wkid: 4326})),
      slider: false
    });
    map.on("load", doQueries);
    map.addLayer(new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

  function doQueries(map) {
    //Query all counties in Kansas
    var countyQueryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
    var countyQuery = new Query();
    countyQuery.outFields = ["*"];
    countyQuery.returnGeometry = true;
    countyQuery.outSpatialReference = map.spatialReference;
    countyQuery.where = "STATE_NAME = 'Kansas'";
    countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);

    //Query all cities in Kansas
    var cityQueryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
    var cityQuery = new Query();
    cityQuery.outFields = ["*"];
    cityQuery.returnGeometry = true;
    cityQuery.outSpatialReference = map.spatialReference;
    cityQuery.where = "STATE_NAME = 'Kansas'";
    cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
  }

  function addCountyFeatureSetToMap(featureSet) {
    var symbol = new SimpleFillSymbol();
    symbol.setColor(new Color([150,150,150,0.5]));

    //Create graphics layer for counties
    var countyLayer = new GraphicsLayer();
    map.addLayer(countyLayer);

    var infoTemplate = new InfoTemplate("${NAME}","${*}");

    //Add counties to the graphics layer
    arrayUtils.forEach(featureSet.features, function(feature) {
      countyLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
    });
  }

  function addCityFeatureSetToMap(featureSet) {
    var symbol = new SimpleMarkerSymbol();
    symbol.setColor(new Color([0,0,255]));

    //Create graphics layer for cities
    var cityLayer = new GraphicsLayer();
    map.addLayer(cityLayer);
    map.reorderLayer(cityLayer,1);

    var infoTemplate = new InfoTemplate("${CITY_NAME}","${*}");

    //Add cities to the graphics layer
    arrayUtils.forEach(featureSet.features, function(feature) {
      cityLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
    });
  }
});