I am highlighting graphic using graphic.setSymbol(pictureSymbol)
. It is working fine. But, when map is zoomed the symbol graphic is reset to default. If anyone has come over the issue, please help!
Below is the sample code which I'm using for zooming.
searchGraphic(e){
var map = this.get('map');
var layers = this.get('layers');
var searchTerm = document.querySelector('.searchitem-node input').value;
this.set('searchTerm', searchTerm);
var selectedPictureSymbol = null;
var pictureSymbol = null;
var i = null;
var j = null;
var k = null;
//if search button clicked
if(searchTerm && e){
e.preventDefault();
searchTerm = searchTerm.toLowerCase();
}
for(i in layers){
for(j in layers[i]){
for(k in layers[i][j].graphics){
if(layers[i][j].graphics[k].attributes.name){
if(layers[i][j].graphics[k].attributes.name.toLowerCase() === searchTerm){
selectedPictureSymbol = this.highlightGraphics(layers[i][j].graphics[k], true);
this.set('graphic', layers[i][j].graphics[k]);
this.set('lineG', layers[i][j].graphics[k]);
}else{
console.log('graphics ! found');
pictureSymbol = this.highlightGraphics(layers[i][j].graphics[k], false);
}
}
}
}
}
//if graphics not found then set graphics to blank for unselecting selected item
if(searchTerm && e){
if(!selectedPictureSymbol){
console.log('set graphics blank');
this.set('formClass', 'circuit-form');
this.set('graphic', '');
this.closeForm();
}else{
var graphic = this.get('graphic');
if (graphic.geometry.type === 'point') {
var maxZoom = map.getMaxZoom();
map.centerAndZoom(graphic.geometry, maxZoom - 4);
}else{
var extent = GraphicsUtils.graphicsExtent([graphic]);
console.log(extent);
extent.xmax = extent.xmax + 50;
extent.ymax = extent.ymax + 50;
extent.xmin = extent.xmin - 50;
extent.ymin = extent.ymin - 50;
map.setExtent(extent);
}
}
}
graphic.setSymbol(pictureSymbol)