topic Re: Graphics added to GraphicLayer do not render until you zoom in ArcGIS JavaScript Maps SDK Questions

Graphics added to GraphicLayer do not render until you zoom

patryks — Tue, 10 Oct 2023 23:54:42 GMT

I have found similar bug from 2021 https://github.com/Esri/feedback-js-api-next/issues/122 but my case is different (don't use Zone.js) and according to post in forum https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/graphics-in-a-graphics-layer-only-appear-on-zoom/td-p/1037515 the issue should be fixed.

In my case I generate grid (1km x 1km) drawing polyline every 5 meters. When the vectors are straight everything works just fine and the grid renders instantly. I have an options to rotate the lines with configurable angle. To calculate the grid I rotate every vector with following code:

geometryEngine.rotate(geometry, angle, point)

The problem is that the graphics are not rendered until I change the zoom level of the map. I tried to use the workaround from the post i mentioned with cloning symbols and then reapplying it to graphics after timeout and it works partialy as the other way around the old symbols stays on map until zoom level is changed.

Is there an option to refresh graphic or to reaply/rerender graphic symbols somehow?

Re: Graphics added to GraphicLayer do not render until you zoom

SamEngel — Wed, 11 Oct 2023 19:45:15 GMT

Hey @patryks ! I'm having some trouble reproducing this problem. I may be misunderstanding your question, but something like this works for me:

// Add graphics to map const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); graphicsLayer.addMany([ ...rows, ...cols ]); // Rotate graphics for (const graphic of graphicsLayer.graphics) { graphic.geometry = geometryEngine.rotate(graphic.geometry, angle, point); }

Would you be willing to share your code, or a simplified example of the problem in a codepen?

Re: Graphics added to GraphicLayer do not render until you zoom

patryks — Sat, 14 Oct 2023 09:14:34 GMT

Thank you for your time @SamEngel. Your example helped me find the solution to my problem. My code that generates the grid.

Graphic generation:

for (let x = xmin; x <= xmax; x = x + precision) {
    x = Number(x.toFixed(6));

    let line = new Polyline({
        spatialReference: geometry.spatialReference
    });
    line.addPath([[x, ymin], [x, ymax]]);
    line = <Polyline>GeometryService.clip(GeometryService.rotate(line, angle, new Point({x: extent.xmin, y: extent.ymin, spatialReference: geometry.spatialReference})), extent.extent);

    const graphic = new Graphic({
        geometry: line,
        symbol: StyleService.createPolylineDefaultStyle()
    });

    graphics.push(graphic);
}

for (let y = ymin; y <= ymax; y = y + precision) {
    let line = new Polyline({
        spatialReference: geometry.spatialReference
    });
    line.addPath([[xmin, y], [xmax, y]]);
    line = <Polyline>GeometryService.clip(GeometryService.rotate(line, angle, new Point({x: extent.xmin, y: extent.ymin, spatialReference: geometry.spatialReference})), extent.extent);

    const graphic = new Graphic({
        geometry: line
    });
    graphics.push(graphic);
}

Adding generated graphics to layer:

this.gridLayer.removeAll();
this.gridLayer.addMany(graphics);

It renders correctly when I generate less than 600 lines, with more there is a problem. In my case, I am adding already rotated lines.

The way you did it works. You first added graphics, then modified the geometry of the graphic. With modification to my code:

const graphics = this.calculateGridWithoutAngle(geometry, precision);
this.gridLayer.removeAll();
this.gridLayer.addMany(graphics);
this.rotateGraphics(geometry, graphics, angle);

everything works as expected.