click event will not select Lines or Points.

[RyanLaird]

Hi everyone,

I've been getting a problem here, my script generates a webmap. When a feature is selected a popup of the selected feature's attributes appears and the URL is updated to contain the object ID. Right now the click event will select polygons and the script will work, but I have two other identical scripts using lines and polygons. The "onmouseover" event will select them, but will not update the URL and I am unsure why. Any help would be greatly appreciated!

The line in question is #152, or "map.on("click", function (e) {"

Please find attached the three scripts.

2 is Polygons,

1 is Points,

0 is Lines.

[JoshHevenor]

I find this function useful for finding points on a map-click (inspired by some other online code that I've lost track of):

function pointToExtent(map, objPoint, distance){
 
            // buffer around point
            var clickOffset = distance || 10;

            var centerPoint = new Point
                    (objPoint.x,objPoint.y,objPoint.spatialReference);
            var mapWidth = map.extent.getWidth();

            //Divide width in map units by width in pixels
            var pixelWidth = mapWidth/map.width;

            //Calculate an envelope width around center point that scales with map zoom level
            var tolerance = clickOffset * pixelWidth;

            //Build tolerance envelope and set it as the query geometry
            var queryExtent = new esri.geometry.Extent
                    (1,1,tolerance,tolerance,objPoint.spatialReference);

            return queryExtent.centerAt(centerPoint);

        };

    // . . . later
    map.on("click", function(evt){
        var query = new Query();
        query.geometry = pointToExtent(map, evt.mapPoint, 10);
        // ...
    });

[RyanLaird]

Hmmm That will let me select points but still won't update the URL. Could the problem be in line #181 "if (selection.length > 0) {"

I mean, it makes no sense for point but you would think it would work for line that do have a "length".

[OwenEarley · Accepted solution]

One problem is that the OBJECTIDLINK field does not exist in any of the layers.

        //when users click on a feature it is selected
        map.on("click", function (e) {
          var query = new Query();
          query.geometry = e.mapPoint;
          var deferred = polys.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) {
            //update the url parameter if a feature was selected (if none were length will be 0)
            if (selection.length > 0) {
              // This field does not exist in the feature attributes
              var feature = selection[0].attributes["OBJECTIDLINK"]; 
              //refresh to add changes to the url, adding the url parameter 
              if (typeof history.pushState !== "undefined") {
                window.history.pushState(null, null, "?feature=" + selection[0].attributes.OBJECTIDLINK);
              }
            }
          });
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(e.mapPoint);
        });

This leads to the new URL having an undefined value for the feature, for example: http://../CPDFN2.html?feature=undefined

Owen

Spatial XP

[OwenEarley]

Also forgot to mention:

Could the problem be in line #181 "if (selection.length > 0) {"

I mean, it makes no sense for point but you would think it would work for line that do have a "length".

The selection.length in this case is the number of selected features. Length in JavaScript refers to the number of items in a list/array. This is not related to the length of line features.

[RyanLaird]

Oh I see! I've been looking for an alternative to .length but I can't seem to have any documentation on it. I'm aware of the problem with OBJECTIDLINK, we're going add that back to the data later. So you happen to know the name for what .length is? I looking i the documentation for arrays.

[JoshHevenor]

array.length is fine, but I think you're looking at selection-complete object and not the selection itself. See

featurelayer-amd | API Reference | ArcGIS API for JavaScript‌

Try something like this:

1. //when users click on a feature it is selected 
2.         map.on("click", function (e) { 
3.           var query = new Query(); 
4.           query.geometry = e.mapPoint; 
5.           var deferred = polys.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (evt) { 
6.             //update the url parameter if a feature was selected (if none were length will be 0) 
7.             if (evt.selection.length > 0) { 
8.               // This field does not exist in the feature attributes 
9.               var feature = evt.selection[0].attributes["OBJECTIDLINK"];  
10.               //refresh to add changes to the url, adding the url parameter  
11.               if (typeof history.pushState !== "undefined") { 
12.                 window.history.pushState(null, null, "?feature=" + feature.attributes.OBJECTIDLINK); 
13.               } 
14.             } 
15.           }); 
16.           map.infoWindow.setFeatures([deferred]); 
17.           map.infoWindow.show(e.mapPoint); 
18.         }); 

You can put a breakpoint on line #7 (chrome debug tools, etc.  F12 in all browsers more or less) and inspect what you're getting back

[RyanLaird]

Thanks! This will be useful in the future.

[RyanLaird]

Guh, looks like that was the problem, I changed it to OBJECTID and it worked. Still though, odd that the polygon script was the only one to give me "?feature=undefined"