Zoom to Extent of Graphics within several Graphics Layers

688
4
Jump to solution
08-02-2019 01:13 PM
PaulMcCord
Occasional Contributor

Is there a way to use the .goTo() method on an array of Graphics Layers so that I can zoom to the extent of the 'broadest' (most spread out) group of graphics? I'm creating an application where users are able to select from a list of park amenities. For each amenity that they select, a new Graphics Layer is created. I then add that Graphics Layer to an array of Graphics Layers. The problem arises when there are multiple layers in the array and I try to zoom to the extent of the amenities that are toggled on.

I've tried to simply add all of the Graphics from all of the Graphics Layers to a new Graphic Layer. However, when I do this, the Graphics are removed from the Graphic Layer from which they were copied. In other words, if I have a Graphic Layer for parks where basketball courts are located, when I try to "copy" these graphics into a separate Graphic Layer, they're removed from the initial basketball courts Graphic Layer.

Since I suspect that there is no way to run the .goTo() method on an array of Graphics Layers, I believe that the workaround is to add all of my Graphics to a new Graphic Layer, but this, surprisingly, doesn't seem to work. I've spent much more time on this issue than I thought I would; any help would be greatly appreciated!

0 Kudos
1 Solution

Accepted Solutions
BenElan
Esri Contributor

Try something like this:

function createExtentGraphic(amenityGraphicsLayer){
    const graphics = amenityGraphicsLayer.graphics;
    graphics.forEach(function (g) {
        var graphicClone = new Graphic();
        graphicClone = g.clone();
        extentGraphics.add(graphicClone);
        }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note I wrote this directly into the forum so there may be some syntax errors

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Paul,


  Are you cloning the graphics before you add them to the new GL?

0 Kudos
PaulMcCord
Occasional Contributor

Hi Robert, 


Yes, I'm cloning the graphics as they are added to the new GL:

function createExtentGraphic(amenityGraphicsLayer){
        for (g = amenityGraphicsLayer.graphics.length - 1; g>=0; g--){
          var graphicClone = new Graphic(amenityGraphicsLayer.graphics.items[g].clone());
          extentGraphics.add(graphicClone);
        }
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This gives me the error: "[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 'esri.geometry.Extent', 'esri.geometry.Multipoint', 'esri.geometry.Point', 'esri.geometry.Polyline', 'esri.geometry.Polygon', or a plain object that can autocast (having .type = 'extent', 'multipoint', 'point', 'polyline', 'polygon')"

This error seems pretty clear to me, but I'm not sure how to specify the type on the graphic before it is added to the graphic layer.

As you can see, my goal is to iterate through every graphic in the amenityGraphicsLayer GL and add it to the extentGraphics GL (which is a global variable).

0 Kudos
BenElan
Esri Contributor

Try something like this:

function createExtentGraphic(amenityGraphicsLayer){
    const graphics = amenityGraphicsLayer.graphics;
    graphics.forEach(function (g) {
        var graphicClone = new Graphic();
        graphicClone = g.clone();
        extentGraphics.add(graphicClone);
        }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note I wrote this directly into the forum so there may be some syntax errors

PaulMcCord
Occasional Contributor

Thanks Ben! This worked perfectly!