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; } } }

Zoom to Extent of Graphics within several Graphics Layers

PaulMcCord

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!

Find more posts tagged with

Accepted answers

BenElan

Try something like this:

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">createExtentGraphic</SPAN><SPAN class="punctuation token">(</SPAN>amenityGraphicsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">const</SPAN> graphics <SPAN class="operator token">=</SPAN> amenityGraphicsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">;</SPAN>
    graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>g<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> graphicClone <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        graphicClone <SPAN class="operator token">=</SPAN> g<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        extentGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicClone<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

All comments

RobertScheitlin__GISP

Paul,

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

PaulMcCord

Hi Robert,

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

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">createExtentGraphic</SPAN><SPAN class="punctuation token">(</SPAN>amenityGraphicsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>g <SPAN class="operator token">=</SPAN> amenityGraphicsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> g<SPAN class="operator token">>=</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> g<SPAN class="operator token">--</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> graphicClone <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>amenityGraphicsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN>items<SPAN class="punctuation token">[</SPAN>g<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          extentGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicClone<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

BenElan

Try something like this:

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">createExtentGraphic</SPAN><SPAN class="punctuation token">(</SPAN>amenityGraphicsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">const</SPAN> graphics <SPAN class="operator token">=</SPAN> amenityGraphicsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">;</SPAN>
    graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>g<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> graphicClone <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        graphicClone <SPAN class="operator token">=</SPAN> g<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        extentGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicClone<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

PaulMcCord

Thanks Ben! This worked perfectly!

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.