Highlighting Feature and Graphics Layer Issues

1480
8
Jump to solution
08-15-2019 08:04 AM
CalebSchwind
New Contributor II

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);
     });
   });
});
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

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

View solution in original post

0 Kudos
8 Replies
UndralBatsukh
Esri Regular Contributor

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

View solution in original post

0 Kudos
CalebSchwind
New Contributor II

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

0 Kudos
CalebSchwind
New Contributor II

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? 

0 Kudos
mgeorge
Esri Contributor

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 sh... ).

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

0 Kudos
CarolZollweg
New Contributor

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

Hi there, 

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

CarolZollweg
New Contributor

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.

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

0 Kudos