Refresh GraphicsLayer javascript 4.18 api

[PeteVitt]

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;

[TheoLaughner]

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-...

[PeteVitt]

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.");

    });

[JohnGrayson]

I wonder if something like this might help?

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

[PeteVitt]

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

[JohnGrayson]

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

[PeteVitt]

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.  

[MaksimKatsuba]

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

            }

          });

        }

    })

[JeremySwagger]

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.