I included the relevant code I think for this issue.... I have my Map I am setting the spatial reference of the query results Using the results to create a new graphics Layer The Graphics are located in the correct position so that works fine... BUT when the below runs it zooms off the coast of Africa. I know this is a Spatial Reference issue but not sure where and how to set it... Thoughts? var extGraphics = graphicsUtils.graphicsExtent(map.graphics.graphics); map.setExtent(extGraphics); //SET THE MAP var map = new Map ( "map" , { basemap : "dark-gray" , center : [ - 79.665 , 37.629 ] , zoom : 8 , logo : false , showLabels : true } ) ; // QUERY FOR County and Squad var queryTask = new QueryTask ( " https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Projects/Summons/FeatureServer/5 " ) ; var query = new Query ( ) ; query . outSpatialReference = { wkid : 4326 } ; //4326 //102100 //3857 query . returnGeometry = true ; /// SNIP var countiesGraphicsLayer = new GraphicsLayer ( { opacity : 0.75 } ) ; //This is the click event for the graphics on the map countiesGraphicsLayer . on ( "click" , selectGrid ) ; map . addLayer ( countiesGraphicsLayer ) ; /// SNIP arrayUtils . map ( results . features , function ( feature ) { feature . setSymbol ( symbol ) ; feature . setInfoTemplate ( infoTemplate ) ; countiesGraphicsLayer . add ( feature ) ; var featureAttributes = feature . attributes ; for ( var attr in featureAttributes ) { resultItems . push ( " " + attr + ": " + featureAttributes [ attr ] + " " ) ; } resultItems . push ( " " ) ; } ) ; dom . byId ( ActivePane ) . innerHTML = resultItems . join ( "" ) ; var extGraphics = graphicsUtils . graphicsExtent ( map . graphics . graphics ) ; map . setExtent ( extGraphics ) ; /// SNIP

Jay, Your next issue is this line: var extGraphics = graphicsUtils . graphicsExtent ( map . graphics . graphics ) ; you are not adding your results to map.graphics anymore: countiesGraphicsLayer . graphics ) ; var extGraphics = graphicsUtils . graphicsExtent (

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 Issues

jaykapalczynski

I included the relevant code I think for this issue....

I have my Map

I am setting the spatial reference of the query results

Using the results to create a new graphics Layer

The Graphics are located in the correct position so that works fine...

BUT when the below runs it zooms off the coast of Africa. I know this is a Spatial Reference issue but not sure where and how to set it...

Thoughts?

var extGraphics = graphicsUtils.graphicsExtent(map.graphics.graphics);
map.setExtent(extGraphics);

&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//SET THE MAP</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">79.665</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">37.629</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; logo<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showLabels<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// QUERY FOR County and Squad</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> queryTask <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fvafwisdev.dgif.virginia.gov%2Farcgis%2Frest%2Fservices%2FProjects%2FSummons%2FFeatureServer%2F5" target="_blank">https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Projects/Summons/FeatureServer/5</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; query<SPAN class="punctuation token">.</SPAN>outSpatialReference <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//4326 //102100 //3857</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; query<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">/// SNIP</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> countiesGraphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>opacity<SPAN class="punctuation token">:</SPAN><SPAN class="number token">0.75</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//This is the click event for the graphics on the map</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; countiesGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> selectGrid<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>countiesGraphicsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">/// SNIP</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; feature<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setSymbol</SPAN><SPAN class="punctuation token">(</SPAN>symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; feature<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setInfoTemplate</SPAN><SPAN class="punctuation token">(</SPAN>infoTemplate<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; countiesGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> featureAttributes <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> attr <SPAN class="keyword token">in</SPAN> featureAttributes<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; resultItems<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<b>"</SPAN> <SPAN class="operator token">+</SPAN> attr <SPAN class="operator token">+</SPAN> <SPAN class="string token">":</b>&nbsp; "</SPAN> <SPAN class="operator token">+</SPAN> featureAttributes<SPAN class="punctuation token">[</SPAN>attr<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"<br>"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; resultItems<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<br>"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN>ActivePane<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> resultItems<SPAN class="punctuation token">.</SPAN><SPAN class="token function">join</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> extGraphics <SPAN class="operator token">=</SPAN> graphicsUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">graphicsExtent</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setExtent</SPAN><SPAN class="punctuation token">(</SPAN>extGraphics<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<SPAN class="comment token">/// SNIP‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Encuentra más publicaciones etiquetadas con

Accepted answers

rscheitlin

Jay,

Your next issue is this line:

<SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit; font-size: 14px;">var</SPAN> extGraphics <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit; font-size: 14px;">=</SPAN> graphicsUtils<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">graphicsExtent</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN>map<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>graphics<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>graphics<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN>

you are not adding your results to map.graphics anymore:

countiesGraphicsLayer<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>graphics<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN><SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit; font-size: 14px;">var</SPAN> extGraphics <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit; font-size: 14px;">=</SPAN> graphicsUtils<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">graphicsExtent</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN>

All comments

jaykapalczynski

I got it to work but ONLY by setting it this way.

query.outSpatialReference = {wkid: 102100};

if I use this is does not work.

query.outSpatialReference = map.spatialReference;

rscheitlin

Jay,

Your next issue is this line:

<SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit; font-size: 14px;">var</SPAN> extGraphics <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit; font-size: 14px;">=</SPAN> graphicsUtils<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">graphicsExtent</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN>map<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>graphics<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>graphics<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN>

you are not adding your results to map.graphics anymore:

countiesGraphicsLayer<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>graphics<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN><SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit; font-size: 14px;">var</SPAN> extGraphics <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit; font-size: 14px;">=</SPAN> graphicsUtils<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">graphicsExtent</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN>

jaykapalczynski

maybe I have to set the graphics layer to 102100

jaykapalczynski

If I do this

query.outSpatialReference = map.spatialReference;

and may map looks like this:

var map = new Map("map", {
basemap: "dark-gray",
center: [-79.665, 37.629],
zoom: 8,
logo: false,
showLabels: true
});

Now its not only zooming to Africa but drawing the graphics there....tried clearing my cache etc...

rscheitlin

Jay,

You are using an esri basmap which is in WKID 102100 but when you query your map service you are setting the out spatial reference to WKID 4326. That would cause your issue.

you should use:

= map.spatialReference;query<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN>outSpatialReference

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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