I'm having some issues with highlighting graphics in ArcGis API for JS version 4.10. I've got a few different data sets that I'm working with. One data set is coming directly from an arcgis map server. The others are coming from web services that just have a latitude and longitude.
For the arcgis map server data set I am just passing the url as a property to a feature layer and using the highlight function of the feature layer view for mouse over highlights. This method works great and there is no flickering.
For the other web services, I am looping through the results and building an array of graphics, which I then add to the layer.
1. Using the highlight function on a GraphicsLayerView. This method doesn't do anything. I've tried adding an object id attribute to each graphic, but this still doesn't work.
2. Using the highlight function on a FeatureLayerView. This method works, but the highlight flickers when I move the mouse out of the graphic. I've noticed that this issue only occurs if you pass an array of graphics to the source property of the feature layer. The highlighting works without any flickering for the feature layer that is initialized with a url pointing to the arcgis map server. The actual highlighting logic is the same for these two feature layers, so I'm not sure why the one with a url is working and the one with an array of graphics has the flikering.
Below is the pseudo code for the graphics layer method.
const nonprofitsLayer = new GraphicsLayer({
id: 'nonprofitsLayer',
title: 'Nonprofits',
listMode: 'hide',
});
// data comes from a call to an external web service
data.items.forEach((item, index) => { const attributes = {
Name: item.properties['Name'],
Address: item.properties['Address'],
Zip_Postal_Code: item.properties['Zip_Postal_Code'],
type: 'nonprofit',
ObjectID: index,
};
nonprofitsLayer.graphics.add( new Graphic({
geometry: {
type: 'point',
longitude: item.geometry.longitude,
latitude: item.geometry.latitude,
},
symbol: {
type: 'simple-marker',
style: 'square',
color: '#8b6573',
outline: {
color: [68, 68, 68],
width: 1,
},
},
attributes: attributes,
})
);
view.on('pointer-move', (event) => {
view.hitTest(event).then((res) => {
let graphic = res.results[0];
let highlight = global.highlight ;
if (highlight) {
highlight.remove();
global.highlight = null;
}
view.whenLayerView(graphic.layer).then((layerView) => {
global.highlight = layerView.highlight(graphic);
});
});
});
Below is the pseudo code for the feature layer method.
// data comes from a call to an external web service
data.items.forEach((item, index) => { const attributes = {
Name: item.properties['Name'],
Address: item.properties['Address'],
Zip_Postal_Code: item.properties['Zip_Postal_Code'],
type: 'nonprofit',
ObjectID: index,
};
let features = [],
features.push( {
geometry: {
type: 'point', // autocasts as new Point()
longitude: item.geometry.longitude,
latitude: item.geometry.latitude,
},
symbol: {
type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
style: 'square',
color: '#8b6573',
outline: {
color: [68, 68, 68],
width: 1,
},
},
attributes: attributes,
});
});
const nonprofitsLayer = new FeatureLayer({
id: 'nonprofitsLayer',
title: 'Nonprofits',
listMode: 'hide',
geometryType: 'point',
source: features,
objectIdField: 'ObjectID',
renderer: { type: 'simple',
symbol: {
type: 'simple-marker',
style: 'square',
color: 'red',
},
},
fields: [
{ name: 'Name', alias: 'Name', type: 'string' },
{ name: 'Address', alias: 'Address', type: 'string' },
{ name: 'Zip_Postal_Code', alias: 'Zip_Postal_Code', type: 'string' },
{ name: 'type', alias: 'type', type: 'string' },
{ name: 'ObjectID', alias: 'ObjectID', type: 'oid' },
],
}); view.on('pointer-move', (event) => {
view.hitTest(event).then((res) => {
let graphic= res.results[0];
let highlight = global.highlight ;
if (highlight) {
highlight.remove();
global.highlight = null;
}
view.whenLayerView(graphic.layer).then((layerView) => {
global.highlight = layerView.highlight(graphic);
});
});
});