nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Updating Find Task Woes

AlexDeVine

Morning,

In my quest to update one of my web apps to AMD style, I am running into a perplexing issue with my find task. The structure of this task is found in many places in the Samples. The following code is my version of it on my app:

Global variables, require and function calls

 var map, navToolbar, infoTemplate, identifyTask, identifyParams, findTask, findParams, graphicsLayer, searchText;         require(["dojo/parser", "dojo/_base/connect", "dojo/_base/array", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/GraphicsLayer", "esri/graphic", "esri/InfoTemplate", "esri/toolbars/navigation", "dojo/dom", "esri/tasks/FindTask",             "esri/tasks/FindParameters", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",             "dijit/layout/AccordionContainer", "dijit/form/TextBox", "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "dijit/registry",             "dojo/_base/Color", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",             "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/tasks/IdentifyResult", "dojo/domReady!"         ], function (           parser, connect, array, Map, ArcGISDynamicMapServiceLayer, GraphicsLayer, Graphic, InfoTemplate, Navigation, dom, FindTask,           FindParameters, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, IdentifyTask, IdentifyParameters, IdentifyResult, registry         )

The find task:

function execute(searchText) {             //set the search text to find parameters             //create find tasks with url to map services             findTask = new esri.tasks.FindTask("http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer");             //create find parameters and define known values             findParams = new esri.tasks.FindParameters();                          findParams.returnGeometry = true;             //findParams.outSpatialReference = map.spatialReference;             findParams.layerIds = [7];             findParams.searchFields = ["NAME", "NUMBER"];                          findParams.searchText = searchText;              findTask.execute(findParams, showResults, findErr);          }          function showResults(results) {              //display the results of the building text search             //symbology for graphics             markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 255, 255]), 1), new dojo.Color([0, 255, 255, 0.25]));             lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([0, 255, 255]), 1);             polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([0, 255, 255]), 2), new dojo.Color([0, 255, 255, 0.25]));              //find results return an array of graphics in the graphicslayer.             graphicsLayer = new esri.layers.GraphicsLayer();             graphicsLayer.spatialReference = map.spatialReference;             map.graphics.clear();              //Build an array of attribute information and add each found graphic to the map             dojo.forEach(results, function (result) {                 var graphic = new esri.Graphic(result.feature);                 graphic.spatialReference = map.spatialReference;                 graphic.setSymbol(polygonSymbol);                 map.graphics.add(graphic);                 graphicsLayer.add(graphic);             });              //create an extent matching the graphics of the parcel(s)             var zoomExtent = esri.graphicsExtent(graphicsLayer.graphics);             var zoomXmin = zoomExtent.xmin;             var zoomXmax = zoomExtent.xmax;             var zoomScale = zoomXmax - zoomXmin;             if (zoomExtent.xmin < 2460000 || zoomExtent.ymin < 1345000 || zoomExtent.xmax > 2630000 || zoomExtent.ymax > 1505000) {                 apprise("Your Find Building results include a building outside of ACC/Main UGA Campus. Please refine your search");             }             else if (zoomScale > 10000) {                 apprise("Your Find Building results require a coarse scale to display. Please refine your search");             }             else {                 map.setExtent(zoomExtent.expand(2));             }         }          function findErr(error) {             //Alerts the user to a return of no results in building search             apprise("Your search returned no results. Please refine your search.");         }

The find task function showResults is failing to findErr at the point when I attempt to add the graphic to the map and to the graphicsLayer:

                map.graphics.add(graphic);                 graphicsLayer.add(graphic);

If I comment out these add statements, I fail out at the extent creation, but one thing at a time, right? 🙂

Anyone have any ideas on why I cannot add the graphics to the map or to the graphics layer? I tried to address any issue that spatial reference might cause with setting the graphics returned from the FindTask and the GraphicsLayer to the map Spatial Reference, but I am at a loss.

Alex DeVine

Find more posts tagged with

Accepted answers

AlexDeVine

Figured it out.

you used to could get away with this when constructing a graphic:

graphic = new esri.Graphic(result.feature);

it appears now that you have to be more descriptive:

graphic = new esri.Graphic(result.feature.geometry);

Lesson learned.

Thank you all for allowing me to bounce ideas and all the great help.

Alex

All comments

TracySchloss

I'm glad you got it figured out. I have gotten turned around before with what class 'result' is that's getting returned. Depending on what the task was you just executed, it isn't always the same. Once I realized that, I started putting breakpoints in at the very top of my callback handler so I check right away, instead of focusing several lines down.

AlexDeVine

Figured it out.

you used to could get away with this when constructing a graphic:

graphic = new esri.Graphic(result.feature);

it appears now that you have to be more descriptive:

graphic = new esri.Graphic(result.feature.geometry);

Lesson learned.

Thank you all for allowing me to bounce ideas and all the great help.

Alex

AlexDeVine

Sorry, Kelly... I have logged a request with our enterprise IT service to open the appropriate ports in our campus firewall. That was something I had overlooked in this conversion process.

Alex

I meant Tracy... Sorry.

I believe the firewall is configured appropriately now...

http://eagle.camplan.uga.edu/development/CampusMap/CampusMap.html

Alex

AlexDeVine

I can get the map to open, but your services must not be public facing because nothing loads after the frame.

Sorry, Kelly... I have logged a request with our enterprise IT service to open the appropriate ports in our campus firewall. That was something I had overlooked in this conversion process.

Alex

TracySchloss

I can get the map to open, but your services must not be public facing because nothing loads after the frame.

AlexDeVine

Maybe this is too obvious, but do you have variables for graphic and graphicsLayer defined earlier? I'm forever leaving out that little word 'var' when I get in a hurry.

I have been guilty of that, too, Tracy, but in this case, I seem to be on top of it. I have both of those declared as global variables.

Here is the url to my page, you can see for yourlsef the behavior I am getting for that Find Task.

http://eagle.camplan.uga.edu/development/CampusMap/CampusMap.html

Alex

TracySchloss

Maybe this is too obvious, but do you have variables for graphic and graphicsLayer defined earlier? I'm forever leaving out that little word 'var' when I get in a hurry.

AlexDeVine

Ken,

It is like the second one. That is very helpful as to why some of my constructors want dot notation, but does it affect the behavior of the methods? I think my function is breaking on map.graphics.add(graphic) in the forEach loop applied for each result of my FindTask. I determined this using a series of console.logs and alerts. From those console logs, I also determined that my graphic did, in fact, exist but seemingly could not be added to the map using the aforementioned method.

Here is my whole showResults function, including my console.logs and alerts:

function showResults(results) {
            //display the results of the building text search

            //find results return an array of graphics in the graphicslayer.
            graphicsLayer = new esri.layers.GraphicsLayer();
            graphicsLayer.spatialReference = map.spatialReference;
            map.graphics.clear();

            //Build an array of attribute information and add each found graphic to the map
            dojo.forEach(results, function (result) {
                console.log(result.feature);
                console.log(result);
                alert("forEach Fired");
                graphic = new esri.Graphic(result.feature);
                graphic.spatialReference = map.spatialReference;
                console.log(graphic);
                graphic.setSymbol(polygonSymbol);
                alert("SymbolSet");
                console.log(graphicsLayer);
                console.log(map.spatialReference);
                console.log(graphic.spatialReference);
                alert("About to attempt to add graphics");
*****This is where it breaks!! I get the above alert, but not the next alert below***************
                map.graphics.add(graphic);
                alert("graphic added to map");
                graphicsLayer.add(graphic);
                alert("graphic added to graphicsLayer");
                alert("forEach looped");
            });

            //create an extent matching the graphics of the parcel(s)
            var zoomExtent = esri.graphicsExtent(graphicsLayer.graphics);
            var zoomXmin = zoomExtent.xmin;
            var zoomXmax = zoomExtent.xmax;
            var zoomScale = zoomXmax - zoomXmin;
            if (zoomExtent.xmin < 2460000 || zoomExtent.ymin < 1345000 || zoomExtent.xmax > 2630000 || zoomExtent.ymax > 1505000) {
                apprise("Your Find Building results include a building outside of ACC/Main UGA Campus. Please refine your search");
            }
            else if (zoomScale > 10000) {
                apprise("Your Find Building results require a coarse scale to display. Please refine your search");
            }
            else {
                map.setExtent(zoomExtent.expand(2));
            }
        }

        function findErr(error) {
            //Alerts the user to a return of no results in building search
            apprise("Your search returned no results. Please refine your search.");
        }

I am just not seeing any logic to why it would behave this way...

kenbuja

I agree that everything looks OK in your code. Now here's a shot in the dark. Where do your functions that use FindTask and IdentifyTask reside? Are the within that require function like this?

require(["dojo/ready", etc]
    function (ready, etc) {

        function execute(searchText) {
            //set the search text to find parameters
            //create find tasks with url to map services
            findTask = new esri.tasks.FindTask("http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer");
            //create find parameters and define known values
            findParams = new esri.tasks.FindParameters();
            
            findParams.returnGeometry = true;
            //findParams.outSpatialReference = map.spatialReference;
            findParams.layerIds = [7];
            findParams.searchFields = ["NAME", "NUMBER"];
            
            findParams.searchText = searchText;

            findTask.execute(findParams, showResults, findErr);

        }
    });

or do you have it outside that function, like this?

require(["dojo/ready", etc]
    function (ready, etc) {

    });

    function execute(searchText) {
        //set the search text to find parameters
        //create find tasks with url to map services
        findTask = new  esri.tasks.FindTask("http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer");
        //create find parameters and define known values
        findParams = new esri.tasks.FindParameters();
            
        findParams.returnGeometry = true;
        //findParams.outSpatialReference = map.spatialReference;
        findParams.layerIds = [7];
        findParams.searchFields = ["NAME", "NUMBER"];
            
        findParams.searchText = searchText;

        findTask.execute(findParams, showResults, findErr);

    }

If it's like the second version, then they won't operate without the dot notation.

TracySchloss

Maybe you're doing something special with your identify, but just because your identifyTask generates something that is typically called results doesn't mean you have to add that as a requirement. I use IdentifyTask all the time and I've never added it either as a requirement or an alias, just IdentifyTask and IdentifyParameters. Try taking that out and see if that helps. You shouldn't have to keep using dot notation if all is well in the top section.

AlexDeVine

I thought the same thing, Ken, but I think all is well the lining up. I broke down the requires and function calls down into manageable sections and put the requires that do not have matching functions at the end like suggested:

require(["dojo/parser", "dojo/_base/connect", "dojo/_base/array", "dojo/on", "dojo/dom-construct", "dijit/form/CheckBox", "dijit/form/Button", "esri/SpatialReference",
            "esri/geometry/Extent", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISImageServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer", "agsjs/dijit/TOC",
            "esri/layers/GraphicsLayer", "esri/graphic", "esri/InfoTemplate", "esri/toolbars/navigation", "dojo/dom", "esri/tasks/FindTask", "esri/dijit/Scalebar", "esri/dijit/Print", "esri/tasks/PrintTemplate",
            "esri/tasks/FindParameters", "dojo/_base/Color", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/request",
            "esri/symbols/SimpleFillSymbol", "esri/renderers/ClassBreaksRenderer", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/tasks/IdentifyResult", "dijit/registry",
            "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/form/TextBox", "dijit/form/Button",
            "dijit/Toolbar", "dijit/Tooltip", "dojo/fx", "dojo/domReady!"
        ], function (
        parser, connect, array, on, domConstruct, CheckBox, Button, SpatialReference,
        Extent, Map, ArcGISDynamicMapServiceLayer, ArcGISImageServiceLayer, ArcGISTiledMapServiceLayer, TOC,
        GraphicsLayer, Graphic, InfoTemplate, Navigation, dom, FindTask, Scalebar, Print, PrintTemplate,
        FindParameters, Color, SimpleMarkerSymbol, SimpleLineSymbol, esriRequest,
        SimpleFillSymbol, ClassBreaksRenderer, IdentifyTask, IdentifyParameters, IdentifyResult, registry
        )

It appears that all is well, yet when I remove the old "dot" style constructor and use the new style, it breaks the app. I think this may be related to why my FindTask is not working.

kenbuja

Tracy,

Thank you for your response.

Strangely, removing the "dot" style constructors breaks my code for some of the constructors. Namely, the IdentifyTask.

Alex

That might be a sign that the function aliases aren't matching up correctly the require modules.

AlexDeVine

Tracy,

Thank you for your response.

Strangely, removing the "dot" style constructors breaks my code for some of the constructors. Namely, the IdentifyTask.

Alex

The thing that caught my eye is you're still declaring your FindTask as using the old 'dot' style.
findTask = new esri.tasks.FindTask("http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer");
One of the things you should do is change this to be simply:
findTask = new FindTask("http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer");
That's part of the point of switching to AMD.

I totally agree with Ken's comments on the order of the require and aliases too. One really basic thing I did was to add some more lines to both. My eye wasn't always tracking the order correctly if I had to keep scrolling over to the right to see whatever I'd tacked onto the far right side. Once I took the time to tidy that section up a bit, putting less on each line, it was a lot more obvious where I was getting off track. If you don't have this part right, you're going to see weird behavior. Ken's comment about putting all the non-aliases requires last is likely also part of your problem. Don't mix those up at the top while your trying to get the requires and aliases "paired up". Stick them at the end, right before dojo/domReady.

kenbuja

Tracy makes a good point about making the require/function section easier to visually examine. Here's an example of how I have one of my applications set up, grouping the modules. It may be overkill, but it's much easier for me when adding new modules and aliases.

require(["dojo/_base/array",
         "dojo/_base/declare",
         "dojo/_base/lang",
         "dojo/Deferred",
         "dojo/json",
         "dojo/ready",

         "dojox/gfx/fx",

         "dgrid/OnDemandGrid",
         "dgrid/Selection",
         "dgrid/extensions/ColumnResizer",
         "dgrid/extensions/ColumnHider",
         "dgrid/util/mouse",
         "dgrid/extensions/DijitRegistry",

         "dijit/MenuItem",
         "dijit/layout/TabContainer",
         "dijit/registry",

         "esri/map",
         "esri/InfoTemplate",

         "esri/dijit/Basemap",
         "esri/dijit/BasemapGallery",
         "esri/dijit/BasemapLayer",
         "esri/dijit/Scalebar",

         "modules/DVParameters",

         "agsjs/dijit/TOC",
         "dojo/domReady!"
], function (array, declare, lang, Deferred, JSON, ready,
             fx,
             Grid, Selection, ColumnResizer, ColumnHider, mouseUtil, DijitRegistry,
             MenuItem, TabContainer, registry,
             Map, InfoTemplate,
             Basemap, BasemapGallery, BasemapLayer, Scalebar,
             DVParameters
             ) {

TracySchloss

The thing that caught my eye is you're still declaring your FindTask as using the old 'dot' style.

findTask = new esri.tasks.FindTask("http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer");

One of the things you should do is change this to be simply:

findTask = new FindTask("http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer");

That's part of the point of switching to AMD.

I totally agree with Ken's comments on the order of the require and aliases too. One really basic thing I did was to add some more lines to both. My eye wasn't always tracking the order correctly if I had to keep scrolling over to the right to see whatever I'd tacked onto the far right side. Once I took the time to tidy that section up a bit, putting less on each line, it was a lot more obvious where I was getting off track. If you don't have this part right, you're going to see weird behavior. Ken's comment about putting all the non-aliases requires last is likely also part of your problem. Don't mix those up at the top while your trying to get the requires and aliases "paired up". Stick them at the end, right before dojo/domReady.

kenbuja

So is the problem that you're not getting any results from the FindTask? Not getting any results back should not give you an error and go into the findErr function. Rather, that will happen if there are problem in executing the Find Task itself. Make sure you are getting results that can be loaded onto your map.

function showResults(results) {
    console.log (results.length);
    
    //display the results of the building text search
    //symbology for graphics
    markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 255, 255]), 1), new dojo.Color([0, 255, 255, 0.25]));

   etc

Take a look at the video from a session at the 2013 Developers Summit called "Debugging Applications Built with ArcGIS API for JavaScript" to see how you can step through the code.

As for the require/function question, I don't know if the require modules have to be loaded in a particular order. However, all of the modules that are being given aliases in the "function" section ("dojo/parser", "dojo/_base/connect", etc) have come before all the modules that don't have a corresponding alias ("dijit/dijit", "dijit/layout/BorderContainer", etc). In your original code, Color would refer to "dijit/dijit".

AlexDeVine

Hi Ken,

Thank you for your reply. Hmmm, I thought I had them in the correct order. I had been working under the idea that the require modules needed to be in the order that they are referenced in the javascript and that the function aliases just needed to be in the same order as the require modules. Perhaps I need to look into that more...

Unfortunately, the reordering of those components did not fix the issue with adding graphics to the map or the GraphicsLayer. It is certainly frustrating.

I have been trying to use Chrome's and Firefox's debuggers and the problem is that I am not getting a report of what actually is causing it to fail to the errback. I have been using a series of alerts and console.logs to get the location down to the "add" methods, but I don't know for CERTAIN. Any suggestion of a debugging tool that can dig into a function like the findtask execute?

Alex

kenbuja

The first thing you have to do is make sure the require modules match the function aliases in the correct order

        require(["dojo/parser", "dojo/_base/connect", "dojo/_base/array", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/GraphicsLayer", "esri/graphic", "esri/InfoTemplate", "esri/toolbars/navigation", "dojo/dom", "esri/tasks/FindTask",
            "esri/tasks/FindParameters", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "dijit/form/TextBox", "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "dijit/registry",
            "dojo/_base/Color", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
            "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/tasks/IdentifyResult", "dojo/domReady!"
        ], function (
          parser, connect, array, Map, ArcGISDynamicMapServiceLayer, GraphicsLayer, Graphic, InfoTemplate, Navigation, dom, FindTask,
          FindParameters, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, IdentifyTask, IdentifyParameters, IdentifyResult, registry
        )

That should look more like this

        require(["dojo/parser", "dojo/_base/connect", "dojo/_base/array", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/GraphicsLayer", "esri/graphic", "esri/InfoTemplate", "esri/toolbars/navigation", "dojo/dom", "esri/tasks/FindTask",
            "esri/tasks/FindParameters", "dojo/_base/Color", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/tasks/IdentifyResult", "dijit/registry",
            "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/form/TextBox", "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "dojo/domReady!"
        ], function (
          parser, connect, array, Map, ArcGISDynamicMapServiceLayer, GraphicsLayer, Graphic, InfoTemplate, Navigation, dom, FindTask,
          FindParameters, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, IdentifyTask, IdentifyParameters, IdentifyResult, registry
        )

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.