topic Re: Highlighting Feature and Graphics Layer Issues in ArcGIS JavaScript Maps SDK Questions

Highlighting Feature and Graphics Layer Issues

CalebSchwind — Thu, 15 Aug 2019 15:04:14 GMT

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);

});

Re: Highlighting Feature and Graphics Layer Issues

UndralBatsukh — Thu, 15 Aug 2019 16:15:47 GMT

Hi there,

Are you adding your data to 2D MapView? Highlight function does not work in 2D at 4.10 as it is 3D only function. This limitation was removed at 4.12. Can you use version 4.12?

-Undral

Re: Highlighting Feature and Graphics Layer Issues

CalebSchwind — Thu, 15 Aug 2019 16:59:58 GMT

I was able to use version 4.12 and that fixed the issue! Thank you!

Re: Highlighting Feature and Graphics Layer Issues

CalebSchwind — Thu, 07 Nov 2019 14:36:20 GMT

Hi,

Sorry I'm resurrecting this question. We recently upgraded to 4.13 and found that our Graphics layer highlighting is no longer working again, even if I add an objectID attribute. If I downgrade back to 4.12 the highlighting works without changing any code. Is there something I need to do differently, in 4.13, to get the graphics layer highlighting to work?

Re: Highlighting Feature and Graphics Layer Issues

mgeorge — Thu, 07 Nov 2019 20:36:27 GMT

Sorry Caleb Schwind‌, this is a known regression in 4.13. It should be fixed if you point to js.arcgis.com/next (see GitHub - Esri/feedback-js-api-next: Try out the next release of the ArcGIS API for JavaScript and share your feedback. B… ).

EDIT: Looks like there is still one outstanding issue with graphics layer highlight being worked on now.

Re: Highlighting Feature and Graphics Layer Issues

CarolZollweg — Mon, 16 Mar 2020 19:09:50 GMT

Hi,

Is this still a known issue for 2D in ESRI Javascript 4.14? I can't get graphics layer graphic to highlight.

Thanks,

Carol

Re: Highlighting Feature and Graphics Layer Issues

UndralBatsukh — Mon, 16 Mar 2020 21:58:06 GMT

Hi there,

Please take a look at this simple app how to do this at 4.14.

Re: Highlighting Feature and Graphics Layer Issues

CarolZollweg — Thu, 19 Mar 2020 19:58:01 GMT

Thank you so much for the example. The problem was that I was using picture symbols. Picture symbols work when highlighting FeatureLayers created client-side but not in graphics layer.

Re: Highlighting Feature and Graphics Layer Issues

UndralBatsukh — Thu, 19 Mar 2020 21:05:12 GMT

Hi there,

Please take a look at [this test app](https://codepen.io/U_B_U/pen/dyojOLd?editors=1000). I cleaned up the code (which I should done in the first app) and graphic now has pictureMarkerSymbol. GraphicsLayerView.highlight is highlighting the graphic with picture marker symbol.

But I am glad to hear that you are using client-side FeatureLayer. It is better to use client-side layer over GraphicsLayer anyway.

Cheers,

-Undral