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?
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:
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.
Can you reproduce in Chrome with the sample I linked to above? Works just fine for me in the latest version of Chrome.
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?
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
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?
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;
});
});
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
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.