ArcGISDynamicMapServiceLayer - Highlighting a selected polygon

[MattBrunsdon]

Hey Guys,

I am just getting started with the API.

I have a ArcGISDynamicMapServiceLayer of postcode boundaries that I have successfully added to a map. I now want to be able to highlight (set the color) a polygon when it is clicked on. Is there a simple way of doing this?

Thanks for your help!

[StephenLead]

I have a ArcGISDynamicMapServiceLayer ...I now want to be able to highlight (set the color) a polygon when it is clicked on.

Hi Matthew,

You can set a queryTask to run when you click on the map. This will return a result, which you can display as a graphic (code snippet below):

      dojo.connect(map, "onClick", executeQueryTask);

      function executeQueryTask(evt) {
        query.geometry = evt.mapPoint;
        queryTask.execute(query, showResults);
      }

      function showResults(featureSet) {

        dojo.forEach(featureSet.features,function(feature){
          var graphic = feature;
          graphic.setSymbol(symbol);
          map.graphics.add(graphic);
        
        });
      }

See the sample here for a working version of this.

Good luck,
Steve

[derekswingley1]

The show info window immediately sample shows this.

[N_Young]

Hello,

I have tried to follow the example very carefully, but I've had no luck.  Is there a kind soul who could please look at my attempt?

At this point I have no idea why it doesn't work.  My only thought is that the click might be focused more on navigating around the map rather than instigating the selection of a parcel.

Go to http://gis.chcity.org/test/parcel_highlight.html and view the source code for the page.

I tried to do all the steps necessary in the init function, the executeQueryTask function, and the showResults function.

Thank you!

[StephenLead]

I think you were missing two crucial steps.

1. You need to specify which fields the query should return:

query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["*"];

2. The query needs to run against an individual layer (the last bit of the URL):

queryTask = new esri.tasks.QueryTask("http://gis.chcity.org/CHwebMaps/rest/services/CityData/Parcels_SD/MapServer/0");

If I make these changes, the parcel is highlighted in yellow after clicking.

Cheers,
Steve

[N_Young]

Wow, thanks!  I am very pleased.  I thought I didn't have to deal with outFields at all because I didn't want info windows.

That's also interesting about changing the last bit of the URL...especially because if I add the /0 at the place where I create and add my dynamic map service layer, my parcels layer does not load.  So right now I only have the /0 in the queryTask as you suggested, and that works fine.

I'm going to try something a bit more complicated so I may find myself with more questions - thank you for getting me started.

[N_Young]

Hello again.

I'm now trying to add the ability to highlight a clicked parcel to an existing javascript template (the chrome identify template).

My two main difficulties:

1.  Handling what functions happen on a click of the map.  The template calls an identify location function when the map is clicked.  The code I want to add calls the executeQueryTask function when the map is clicked.  I have tried various things, but so far the identify functionality keeps working but showing selected parcels does not.  How do I go about making sure BOTH things happen on a click of the map?  Both use evt.mapPoint so it seems like it might just require small changes.

2.  When using the template, I get mixed up about what javascript I should add in the layout.js file and what should be added to index.html.  For example, do I initialize the event listener, query task, query filter, and symbol properties in the init function of index.html, or in the initMap function of layout.js?

I have attached index.html and layout.js without any selecting-parcel code, because none of that quite worked for me.  Index.html includes some javascript for a search bar I added.  Layout.js has various things removed so the file would attach to this message.  Here is the map I am testing with the chrome identify template.

Any help is appreciated.  Thank you.

[StephenLead]

if I add the /0 at the place where I create and add my dynamic map service layer, my parcels layer does not load.

This is because when you specify a dynamic layer, you omit the layer identifier from the URL, but when you specify a feature layer or query, you need to specify the layer.

How do I go about making sure BOTH things happen on a click of the map?

Search the file layout.js for the section:

dojo.connect(map, "onClick", function(evt) {
    identifyLocation(evt.mapPoint, operationalLayers);
});

This is where the code specifies that the Identify should run when you click on the map. If you add your code here, it will also run when you click on the map.

I get mixed up about what javascript I should add in the layout.js file and what should be added to index.html.  For example, do I initialize the event listener, query task, query filter, and symbol properties in the init function of index.html, or in the initMap function of layout.js?

I'm not an expert on this, but my two cents is that either way will work, so there's no one "correct" answer.


It's generally considered more robust to keep your application modular, so that (for example) the .HTML file contains the page elements (the map, scalebar, header, etc) the styling is stored in a separate .CSS file, and the logic is contained in .js files. As long as you reference the JS files from within the HTML file, it will work.

Good luck,
Steve

[N_Young]

Thank you once more.  You were exactly right.  To run two functions on a click, all I had to do was add executeQueryTask as a second function to run in the onClick section (then include the code for that function later on, of course).  Earlier I had tried adding a second set of onClick instructions.  I also tried to call the second function somewhere within the code for the first one.  Neither worked for me.

Correct Code:

        dojo.connect(map, "onClick", function(evt) {
          identifyLocation(evt.mapPoint, operationalLayers);      //1st function
   executeQueryTask(evt);                                   //2nd function
        }

Also, the things that need to be initialized for highlighting parcels just needed to be added to the init() or initMap() function.

Thank you!