Refresh GraphicsLayer javascript 4.18 api

1484
8
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)
8 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
MaksimKatsuba
New Contributor

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: [0128128],
              width: 2
            }
          });
        } else {
          drawing.graphic.symbol = new SimpleMarkerSymbol({
            color,
            outline: {
              color: [000],
              width: 1
            }
          });
        }
    })
JeremySwagger
New Contributor II

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.

0 Kudos