change selected feature symbol

Question

Hi!

I want to change the fill of the symbol of a feature after double-click to show it is selected.

my code now :

myView.on('double-click', (event) => {
      myView.hitTest(event).then((graphics) => {
      })
    })

and after that I get the graphics that have been double-clicked, but where is the symbol property of the selected feature graphic?

JeffreyWilkerson · Answer

And check out this latest post from  UndralBatsukh. Seems you can change the color properties on the Highlight option.

https://community.esri.com/t5/arcgis-api-for-javascript-questions/hittest-different-highlight-based-on-feature-value/m-p/1215504

JeffreyWilkerson · Answer

There is a way to 'highlight' a selected feature (), but I'm not sure about setting its properties. There is a default graphics layer which is handling all of the graphics you see when you specify a feature layer, and you can interact with this but I think it's recommended to add a new graphicsLayer and interact with that. Maybe  you can get the graphic, change its properties, and add it back to the default graphics layer, but I'm not sure about that.

I have an application that adds a graphic at the selected feature location by creating a new graphic and adding it to an added graphics layer. The previous graphic is removed whenever a new one is created so there needs to be a tool to get rid of the last one unless it can be left in the graphics layer. I handle this with a button but I imagine it could be a time delayed thing.

Some code on this last point:

// Selection point symbol
const markerSymbol = {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    color: { r: 51, g: 51, b: 204, a: 0.6 },
    outline: {
        // autocasts as new SimpleLineSymbol()
        color: [51, 51, 204],
        width: 2
    }
}

// Set up function to collect location if clicked and nothing exists so that a new point can be added.
 view.on("immediate-click", (event) => {

// require(["esri/layers/GraphicsLayer"

// Layer used to draw graphics returned
    const gLayer = new GraphicsLayer({
      id: "tempGraphics"
    });
    map.add(gLayer);

view.on("immediate-click", (event) => {
      // Listen for when the user clicks on the view
      view.hitTest(event).then((response) => {
          let curPt = view.toMap(response.screenPoint);

let graphics = response.results.filter(function (result) {
              // check if the graphic belongs to the layer of interest
              return result.graphic.layer === busStopLayer;
          });

if (graphics.length > 0) {
            if (gLayer) {
              gLayer.removeAll();
            }

//Add a graphic at the point selected
            let ptGraphic = new Graphic({
              geometry: curPt,
              symbol: markerSymbol
            })
            gLayer.graphics.add(ptGraphic);
          }
      });
    });
});