3

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);
3

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));
    });
  }
});
  • thanks for your help, but when I run the script I have this error message: ("NetworkError: 404 Not Found - js.arcgis.com/3.7/js/esri/tasks/Query.js") the line of the error corresponds to this link: <script src="js.arcgis.com/3.7/"></script> – Wika Oct 8 '13 at 17:06
  • @Wika are you running the code I posted? My code using "esri/tasks/query" is not a typo– the module name for the Query class uses a lower-case "q" so make sure your require() dependency list uses "esri/tasks/query". – Derek Swingley Oct 8 '13 at 17:13
  • clearly,that was a syntax problem. Thanks again for your help. – Wika Oct 9 '13 at 8:28
  • @Wika glad I could help – Derek Swingley Oct 9 '13 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.