topic Re: Refresh GraphicsLayer javascript 4.18 api in ArcGIS JavaScript Maps SDK Questions

Refresh GraphicsLayer javascript 4.18 api

PeteVitt — Mon, 08 Mar 2021 17:18:03 GMT

Hi - I'm using version 4.18 of the api and am adding a polygon graphic and a point graphic (text label)l to a map using the addMany method. After adding the graphics I pan to the center of the polygon and set the zoom level to 16. The problem is that the user needs to zoom the map manually for the label to appear. Does anyone know how I can fix this problem? I'm guessing the text label probably hasnt been added to the map yet when the zoom and center occur in my code below

Thanks

Pete

graphicsLayer.addMany([polygonGraphic, ptGraphic]);

view.zoom = 16;

view.center = polygonGraphic.geometry.extent.center;

Re: Refresh GraphicsLayer javascript 4.18 api

TheoLaughner — Mon, 08 Mar 2021 17:22:09 GMT

I would suggest looking at the after-add event that gets fired when the addMany function is called.

https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Collection.html#event-after-add

Re: Refresh GraphicsLayer javascript 4.18 api

PeteVitt — Mon, 08 Mar 2021 17:39:03 GMT

Thanks Theo. I've tried adding the code shown for this event in the docs, but the event only seems to fire when the graphicsLayer is initially added to the map

map.layers.on("after-changes", function(event){

console.log(event, " layer was added/removed from the map.");

});

Re: Refresh GraphicsLayer javascript 4.18 api

JohnGrayson — Mon, 08 Mar 2021 19:18:16 GMT

I wonder if something like this might help?

view.goTo({target: polygonGraphic.geometry.extent.center, zoom:16}).then(()=>{ graphicsLayer.addMany([polygonGraphic, ptGraphic]); });

Re: Refresh GraphicsLayer javascript 4.18 api

PeteVitt — Mon, 08 Mar 2021 19:52:26 GMT

Thanks John, I tried it, but I still need to zoom in or out to get the graphics to display on the map

Re: Refresh GraphicsLayer javascript 4.18 api

JohnGrayson — Mon, 08 Mar 2021 20:24:36 GMT

Do you have a CodePen where we can experience the issue?

Re: Refresh GraphicsLayer javascript 4.18 api

PeteVitt — Tue, 09 Mar 2021 15:57:30 GMT

Hi John - it works ok with pure Javascript. I'm using typescript and angular so I guess this is whats giving me trouble. My code is below. I've based it on the github jsapi-angular-cli example located here: https://github.com/Esri/jsapi-resources

initializeMap(): Promise<any> {

const map = new Map({

basemap: 'streets'

});

const view = new MapView({

container: this.viewNode.nativeElement,

center: [-117.5, 33.9],

zoom: 10,

map: map

});

const graphicsLayer = new GraphicsLayer();

map.add(graphicsLayer);

//when ticket clicked in ticketlist component--polygon graphic of ticket extent returned here

this.TicketGraphicSubscription =

this.mapService.TicketGraphicRequest.subscribe((polygonGraphic: Graphic) => {

let ptGraphic = new Graphic();

ptGraphic = this.mapService.MakeTicketLabelPoint(polygonGraphic.attributes.Ticket,

polygonGraphic.geometry.extent.center);

graphicsLayer.addMany([polygonGraphic, ptGraphic]);

view.center = polygonGraphic.geometry.extent.center;

view.zoom = 16;

console.log("view zoomed");

//map has to be panned or zoomed to see label

});

this.view = view;

return this.view.when();

}

I also tried taking away the calls to the map service and doing everything within this function but got same results.

Re: Refresh GraphicsLayer javascript 4.18 api

MaksimKatsuba — Wed, 08 Sep 2021 11:22:35 GMT

Hi! Is there any updates about this issue?

I have exactly same problem. I'm using Angular and Typescript. Implemented some logic to select point (Graphics) on a map view. On user 'ctrl+click' on point - it should become 'selected' and change color. Everything works, but points disappearing from map or (rare) don't change color. Only when I manually or throught the code change zoom or move map by mouse - changes appearing.

I really want some way to manually update graphics on the map when I do some changes.

if (some condition) {

drawing.graphic.symbol = new SimpleMarkerSymbol({

color,

outline: {

color: [0, 128, 128],

width: 2

}

});

} else {

drawing.graphic.symbol = new SimpleMarkerSymbol({

color,

outline: {

color: [0, 0, 0],

width: 1

}

});

}

})

Re: Refresh GraphicsLayer javascript 4.18 api

JeremySwagger — Mon, 13 Sep 2021 20:03:46 GMT

I'm seeing a similar issue as well. Mine happens with a Graphics Layer in a SketchViewModel instance But the trigger is modifying the graphic.symbol values. It will make polygons or points in close proximity to one another disappear or partially disappear. Geometries drawn further away from each other do not have this problem. Zooming brings back any missing symbols.
Using TypeScript and React if that helps.