error registering an event handler on a FeatureLayer when using AMD

Question

Hello All,

I'm trying to register a onMouseOver event on a FeatureLayer, like the following:var featureLayer = new FeatureLayer('http://maps.ngdc.noaa.gov/arcgis/rest/services/web_mercator/ufn/MapServer/5', {
   mode: FeatureLayer.MODE_ONDEMAND,
   outFields: ["*"]
});

map.addLayer(featureLayer);

//Error: Target must be an event emitter
on(featureLayer, "onMouseOver", function(evt) {
   console.log('inside onMouseOver');
});

and it fails with an: "Error: Target must be an event emitter".  The code above is wrapped in a ready().  Strangely a similar non-AMD sample works fine:
var featureLayer = new esri.layers.FeatureLayer('http://maps.ngdc.noaa.gov/arcgis/rest/services/web_mercator/ufn/MapServer/5', {
   mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
   outFields: ["*"]
});

map.addLayer(featureLayer);

dojo.connect(featureLayer, "onMouseOver", function(evt) {
   console.log('inside onMouseOver');
});

Any ideas on what I'm doing wrong in the first case?

Thanks!

--john

JohnCartwright · Answer

Thanks for the clarification Derek, I had not appreciated the distinction.

Are there other legacy issues that I should look out for? I've been going by the "Dojo 1.x to 2.0 migration guide" trying to convert as much of the syntax as possible.

My code now in the listing below now seems to work.

Thanks again for your help!

--john

require(
                [
                    "esri/map", "esri/layers/FeatureLayer", "dojo/on", "dojo/ready", "dojo/_base/connect", "dojo/domReady!"
                ],
                function(Map, FeatureLayer, on, ready, Connect) {
                    ready(function() {
                        var map = new Map("map",{
                            basemap:"oceans",
                            center:[-102,40], //long, lat
                            zoom:5
                        });
                        var featureLayer = new FeatureLayer('http://maps.ngdc.noaa.gov/arcgis/rest/services/web_mercator/ufn/MapServer/5', {
                            mode: FeatureLayer.MODE_ONDEMAND,
                            outFields: ["*"]
                        });

map.addLayer(featureLayer);

Connect.connect(featureLayer, "onMouseOver", function(evt) {
                            console.log('inside onMouseOver');
                        });
                    });
                }
        );

derekswingley1 · Answer

Having support for "dojo/on" and using AMD are two different things. "dojo/on" lets you handle events while AMD refers to how JS modules are created and loaded.

At the current release, 3.4, we do not have support for dojo/on in the API. This is a big item for us in (hopefully) the next release. Until then, load "dojo/_base/connect" and use that to handle events instead of the global dojo.connect.

Once our classes inherit from "dojo/Evented" you'll be able to do things like: 
featureLayer.on("mouseOver", function(evt) { ... });

StephenLead · Answer

I'm not an expert at this stuff, so my terminology may be wrong, but here goes:

Re-reading the help file, it seems that this syntax will only work given that the FeatureLayer object is passed into the function which is immediately called by the require:

require([
  "esri/layers/FeatureLayer", ... 
], function(FeatureLayer, ... ) {
  var censusBlock = new FeatureLayer(layerUrl, {
    showAttribution :false
  });
  ...
});

In the above context, the inner block of the function has a handle on FeatureLayer.

I think the new esri.layers.FeatureLayer syntax is correct when used outside of the function, which is what you have in your code, and in my example above too.

Good luck,
Steve