Refresh GraphicsLayer javascript 4.18 api

461
6
03-08-2021 09:18 AM
PeteVitt
Occasional Contributor II

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([polygonGraphicptGraphic]);
        view.zoom = 16;
        view.center = polygonGraphic.geometry.extent.center;

 

Tags (1)
0 Kudos
6 Replies
TheoLaughner
New Contributor

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
Occasional Contributor II

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.");
    });
0 Kudos
JohnGrayson
Esri Regular Contributor

I wonder if something like this might help?

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

 

0 Kudos
PeteVitt
Occasional Contributor II

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

0 Kudos
JohnGrayson
Esri Regular Contributor

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

0 Kudos
PeteVitt
Occasional Contributor II

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.533.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((polygonGraphicGraphic=> {
        let ptGraphic = new Graphic();
        ptGraphic = this.mapService.MakeTicketLabelPoint(polygonGraphic.attributes.Ticket,
          polygonGraphic.geometry.extent.center);
        graphicsLayer.addMany([polygonGraphicptGraphic]);
        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.  
0 Kudos