view.hitTest returning 0 results

4726
23
01-25-2017 10:30 AM
JasonRainwater
New Contributor II

Hi, I am adding am empty feature layer on the fly in the browser.  After the fact I will add graphics to the source collection of the feature layer and my graphics all render correctly.

I setup the mapView.on("click") and I properly get the event with the click data.  I do the hit test then look at the results.

I am physically clicking directly on the rendered graphic but no matter what the hittest shows 0 results.

I have no idea where to start looking to see what I am doing wrong.  Any ideas?

0 Kudos
23 Replies
KellyHutchins
Esri Frequent Contributor

Are you able to reproduce the problem with this sample from the help? 

ArcGIS API for JavaScript Sandbox 

Is the problem specific to one particular browser? There is a known issue with version 4.2 and IE11 that will be fixed in the next release of the JSAPI.  Details here: 

https://community.esri.com/thread/188819-jsapi-v4-access-features-with-click-events-not-working-in-i... 

0 Kudos
JasonRainwater
New Contributor II

No this is in chrome. Also when will that next version be released? I'm currently testing in chrome with no results but ie11 is our main supported browser. 

0 Kudos
KellyHutchins
Esri Frequent Contributor

Can you reproduce in Chrome with the sample I linked to above? Works just fine for me in the latest version of Chrome. 

0 Kudos
JasonRainwater
New Contributor II

Yes that works but I'm not pointing the feature layer to a url that hosts a server based feature layer.  I am creating an empty feature layer and then in javascript creating graphics objects with symbols and then adding them to the source collection of the feature layer.  Is there a sample that mimics that scenario?

0 Kudos
JasonRainwater
New Contributor II

I tried modifying code in several examples that use simplemarkersymbol and adding features as a collection of graphics but I could not find a sample that more closely matches my current situation.  I am creating an empty feature layer like so

var featureLayer = new FeatureLayer({
fields: [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}
],
id: "CustomPointLayer",
objectIdField: "ObjectID",
geometryType: "point",
spatialReference: spatialReference,
source: sourceCollection
});

this.customPointLayer = featureLayer;
this.customPointLayer.then(() => {

defer.resolve();
});

localMap.add(this.customPointLayer);

And then im adding a graphic like so

var circleProperties: __esri.SimpleMarkerSymbolProperties = {
size: 40,
color: new Color("red"),
outline: {
color: new Color([255, 255, 255]),
width: 0
}
};

var circleSymbol = new SimpleMarkerSymbol(circleProperties);

var circleGraphic = new Graphic();
circleGraphic.geometry = point;
circleGraphic.symbol = circleSymbol;
circleGraphic.attributes = {
ObjectID: this.guidService.newGuid(),
recordsIds: clusterSymbolType.recordIds
}
customPointLayer.source.add(circleGraphic);

I then add a textsymbol on top of it like so

var countProperties: __esri.TextSymbolProperties = {
color: new Color("white"),
yoffset: -5,
text: count.toString(),
font: { // autocast as esri/symbols/Font
size: "20px",
family: "roboto",
weight: "400"
}
};

var countSymbol = new TextSymbol(countProperties);

var countGraphic = new Graphic();
countGraphic.geometry = point;
countGraphic.symbol = countSymbol;
countGraphic.attributes = {
ObjectID: this.guidService.newGuid(),
recordsIds: clusterSymbolType.recordIds
};

customPointLayer.source.add(countGraphic);

im then listening like so

this.mapView.then(() => {
this.mapView.on("click",
(p) => {
this.mapView.hitTest(p.screenPoint)
.then(response => {
// do something with the result graphic
var graphic = response.results[0].graphic;
});

});
this.mapViewDefer.resolve();
});

However no matter which browser the hitTest returns 0 length for the results property

0 Kudos
JasonRainwater
New Contributor II

i think i figured something out.  If i go to this link https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-...

and add this code at line 122

view.then(function(){
view.on("click", function(p){
alert(p.screenPoint.x);
view.hitTest(p.screenPoint).then( function(response){
alert(response.results.length);
});
});
});

and then i change the style to include a margin-top

#viewDiv {
padding: 0;
margin-top: 100px;
height: 100%;
width: 100%;
}

It stops working.  i can click on just a green area and get 0, if i click directly on an orange dot i get 1.  If i do nothing but remove the margin-top and set it back to margin: 0; then if i click in any of the green area i get 1, if i click in the gray area i get 0 and clicking on any orange dot i get 2.  This is what i expect.  It looks like the hittest doesnt work if the map is not taking up the entire area?

0 Kudos
JasonRainwater
New Contributor II

I got something working but i have a feeling the code will break with the next upgrade if it fixes the problem.  I get my graphics properly when i do this

_this.mapView.on("click", function (p) {
var boundingRect = _this.mapElement[0].getBoundingClientRect();
var point = {
x: p.screenPoint.x + boundingRect.left,
y: p.screenPoint.y + boundingRect.top
};
_this.mapView.hitTest(point)
.then(function (response) {
// do something with the result graphic
var graphic = response.results[0].graphic;
});
});

0 Kudos
JasonRainwater
New Contributor II

Hi kelly, is there any update on when a version will be available on the ie11 fix?  We can work around the all browsers issue with what i have below but ie is critical for us

0 Kudos
KellyHutchins
Esri Frequent Contributor

Jason I'm not sure that the issue is the same one you are experiencing - you may want to contact Esri support to setup a test case.  The other issue will be fixed in the next release which is scheduled for the March time frame. 

0 Kudos