How to change Picture marker symbol on click dynamically

[NEERAJNASWA]

Hello,

I want to know how can I change the picture marker symbol after on click dynamically. When the user click on the symbol it will change to a dark red symbol.

[ReneRubalcava]

You can replace the symbol with a new one, with a new url. graphic.symbol = newSymbol

[NEERAJNASWA]

Hi,

This is my code. Can you please help me in adding the new symbol/image on click of a location pin. I am new to this Arcgis Api.

let centroidRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
// url: "https://static.vecteezy.com/system/resources/previews/000/582/855/original/vector-location-pin-icon....",
url: "images/Location-map.png",
width: "26",
height: "26"
}
};

let locationpin = new FeatureLayer({

url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Centroids/FeatureServer/0",

renderer: centroidRenderer
});

  view.when(function() {

                    map.addMany([locationpin]);

                  });

[ReneRubalcava]

The story is a little different when using a FeatureLayer, changing the symbol on click requires you to edit the attributes in some way to distinguish it from other features on the map.

https://developers.arcgis.com/javascript/latest/visualization/data-driven-styles/unique-types/

You may not want that, since you can't or don't want to edit the data. Best option in that case is to create a new Graphic with the symbol you want, add it to a GraphicsLayer, and then use a filter via LayerView filter or Layer definitionExpression to hide the target feature.

https://developers.arcgis.com/javascript/latest/query-filter/#layer-and-layerview

[NEERAJNASWA]

Hi, I tried to use the click event for the images. That approach was also not working. I will share the code once that I tried to implement but it just highlights the symbol.It's not changing the image.

let centroidRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
// url: "https://static.vecteezy.com/system/resources/previews/000/582/855/original/vector-location-pin-icon....",
url: "images/Location-map.png",
width: "26",
height: "26"
}
};

let locationpin = new FeatureLayer({

url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Centroids/FeatureServer/0",

renderer: centroidRenderer
});
// var privateSchoolsPoly = new FeatureLayer({
// url:
// "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/PrivateSchoolEnrollmentNoRendering...",
// outFields: ["*"],
// opacity: 0.8,
// renderer: renderer,

// });

let symbol;

view.when(async () => {
const layerView = await view.whenLayerView(locationpin);
view.on('click', async (e) => {
const {results} = await view.hitTest(e);
try {
const { graphic } = results.find(x => x.graphic.attributes.OBJECTID);
if(symbol.url=="images/Location-map.png"){
(symbol.url==" https://static.vecteezy.com/system/resources/previews/000/582/855/original/vector-location-pin-icon....")
}

else{
symbol.url==" images/Location-map.png"
}
// fWidget.graphic = graphic;
symbol = layerView.highlight(graphic);
} catch(err) {}
});
});

view.when(function() {
map.addMany([locationpin]);
});