nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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;

Find more posts tagged with

Accepted answers

All comments

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.

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

}

});

}

})

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.

FirstView.jpg

SecondView.jpg

JohnGrayson

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

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

I wonder if something like this might help?

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

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

});

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.