error registering an event handler on a FeatureLayer when using AMD

[JohnCartwright]

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

[StephenLead]

You're using:

var featureLayer = new FeatureLayer('http://maps.....

vs

var featureLayer = new esri.layers.FeatureLayer('http://maps......

Can you try the latter syntax in the first example?

[JohnCartwright]

Thanks for your suggestion Stephen, but that doesn't work either.  It's my understanding though that, using the AMD-style loading, I should be instantiating the FeatureLayer as I had it. Here's a little more context on the code showing the enclosing require function.

--john


       

require(
                [
                    "esri/map", "esri/layers/FeatureLayer", "dojo/on", "dojo/ready", "dojo/domReady!"
                ],
                function(Map, FeatureLayer, on, ready) {
                    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);

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

[StephenLead]

Yep sorry, my mistake. I hadn't read the new help file at http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/featurelayer-amd.html#FeatureLayer1 which backs up what you're doing in the first example.

Having said that, I've used the new esri.layers.FeatureLayer syntax with the new AMD syntax (eg in this sample) and I was able to configure an onMouseOver listener, so I'm not sure what's going on with your code.

[StephenLead]

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

[derekswingley1]

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) { ... });

[JohnCartwright]

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');
                        });
                    });
                }
        );