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?
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);
}
});
});
});
And check out this latest post from UndralBatsukh. Seems you can change the color properties on the Highlight option.