JS API - Identify a clicked feature

2321
2
10-11-2015 06:32 PM
JamesRose3
New Contributor

By default, when an item is clicked on a map created with arcgisUtils.createMap, it shows the basic popup. I'd like to catch this event and get the ID from the feature (to use AJAX to open up some info in an external database)

I couldn't find a way to catch the event, but instead found the IdentifyTask

Following an example I came up with the code below, but the initFunctionality function never gets called according to Firefox debug. I'm a total newbie to the ArcGIS JS API so please bear with me - I'm just trying to piece code samples together. Hoping there is something glaringly obvious here. Maybe map.on("load, ____") doesn't work with createMap?

require([

        "dojo/parser",

        "dojo/ready",

        "dojo/on",

        "dijit/layout/BorderContainer",

        "dijit/layout/ContentPane",

        "dojo/dom",

        "esri/map",

        "esri/urlUtils",

        "esri/arcgis/utils",

        "esri/dijit/Legend",

        "esri/dijit/Scalebar",

        "esri/tasks/IdentifyTask",

        "esri/tasks/IdentifyParameters",

        "dojo/domReady!"

    ], function(

            parser,

            ready,

            on,

            BorderContainer,

            ContentPane,

            dom,

            Map,

            urlUtils,

            arcgisUtils,

            IdentifyTask,

            IdentifyParameters,

            Legend,

            Scalebar

    ) {

        ready(function(){

            parser.parse();

            arcgisUtils.createMap("THE_MAP_ID","map").then(function(response){

                var map = response.map;

                map.on("load", initFunctionality);

                map.on("click", doIdentify);

                function initFunctionality () {

                    identifyTask = new IdentifyTask("http://OUR_ONLINE_PORTAL_URL/ArcGIS/rest/services/");

                    identifyParams = new IdentifyParameters();

                    identifyParams.tolerance = 3;

                    identifyParams.returnGeometry = true;

                    identifyParams.layerIds = [0, 2];

                    identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

                    identifyParams.width = map.width;

                    identifyParams.height = map.height;

                    map.infoWindow.resize(415, 200);

                    map.infoWindow.setContent(registry.byId("tabs").domNode);

                    map.infoWindow.setTitle("Identify Results");

                    symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

                            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                                    new Color([255, 0, 0]), 2),

                            new Color([255, 255, 0, 0.25]));

                }

                function doIdentify (event) {

                    map.graphics.clear();

                    identifyParams.geometry = event.mapPoint;

                    identifyParams.mapExtent = map.extent;

                    identifyTask.execute(identifyParams, function (idResults) {

                        addToMap(idResults, event);

                    });

                }

            });

        });

    });

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

James,

  Several things.

1. you have one of the most common beginner in JS issues in your code. You requires and your vars to not align. When you list your requires the order that they are listed needs to be mimicked by the vars that follow them.

example you have:

require([
        "dojo/parser",
        "dojo/ready",
        "dojo/on",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "dojo/domReady!"
    ], function(
            parser,
            ready,
            on,
            BorderContainer,
            ContentPane,
            dom,
            Map,
            urlUtils,
            arcgisUtils,
            IdentifyTask,
            IdentifyParameters,
            Legend,
            Scalebar
    ) {

notice after   "esri/arcgis/utils" you have "esri/dijit/Legend" but your vars are arcgisUtils then IdentifyTask so this means that your identifyTask var is actually a Legend Dijit (require). your requires and vars have to match perfectly.

2. There is no need to have the initFunctionality function as the map is already ready because you are in the createMap's promise.

3. You probably do not need to be on the path you are on (using the identifyTask) at all. You could just listen for the map.infoWindow show or

set-features events.

Like this:

on(map.infoWindow, 'set-features', function(event){
  console.info(event);
});
JamesRose3
New Contributor

Thanks Robert. I'll give this a crack shortly.

I've never worked with an SDK that required declarations like this so that was confusing the hell out of me for a while.

And thanks a ton for the infoWindow event.

0 Kudos