Using ArcGIS JavaScript API 3.19, I am simply adding some Point Graphics From a JSON object (Schools) like below var data = [ { "SCHOOL_NAME" : "King George Sec." , "LATITUDE" : 49.2898 , "LONGITUDE" : - 123.1364 , "ADDRESS" : "1755 Barclay St" , "URLLINK" : " http://www.vsb.bc.ca/schools/king-george " } , { "SCHOOL_NAME" : "Britannia Sec." , "LATITUDE" : 49.2752 , "LONGITUDE" : - 123.0719 , "ADDRESS" : "1001 Cotton Drive" , "URLLINK" : " http://www.vsb.bc.ca/schools/britannia-secondary " } , { "SCHOOL_NAME" : "Magee Sec." , "LATITUDE" : 49.2286 , "LONGITUDE" : - 123.1515 , "ADDRESS" : "6360 Maple St" , "URLLINK" : " http://www.vsb.bc.ca/schools/magee " } , . . . . ] ; to the map. now I would like to add a functionality to Zoom to Full Extent of ONLY school points on the Map. Technically I add the `Navigation` class to the Map require(["esri/toolbars/navigation"], function(Navigation) { /* code goes here */ }); and in HTML I have a simple button Show All Schools and in JS I have $("#show-all-schools").on("click", function () { navToolbar = new Navigation(map); navToolbar.zoomToFullExtent(); }); but this is setting the basemap in Full Extent state! Can you please let me know how to pass a parameter like points to zoom to cover entire points instead of basemap? Thanks

Bengi, It would be: . graphics ) ; map . setExtent ( schoolGraphicsExtent , true ) ; } ) ; map . addLayer ( schoolGraphicLayer ) ; $ ( ".zoom-to-point" ) . on ( 'click' , function ( ) { var schoolGraphicsExtent = graphicsUtils . graphicsExtent ( schoolGraphicLayer

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

Set Zoom To Full Extent On Exsisting Graphics On Map Instead of Base Map

BehrouzHosseini

Using ArcGIS JavaScript API 3.19, I am simply adding some Point Graphics From a JSON object (Schools) like below

<SPAN class="keyword token">var</SPAN> data <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"SCHOOL_NAME"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"King George Sec."</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"LATITUDE"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">49.2898</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"LONGITUDE"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">123.1364</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"ADDRESS"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1755 Barclay St"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"URLLINK"</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=http%3A%2F%2Fwww.vsb.bc.ca%2Fschools%2Fking-george" target="_blank">http://www.vsb.bc.ca/schools/king-george</A><SPAN>"</SPAN></SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"SCHOOL_NAME"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Britannia Sec."</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"LATITUDE"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">49.2752</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"LONGITUDE"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">123.0719</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"ADDRESS"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1001 Cotton Drive"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"URLLINK"</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=http%3A%2F%2Fwww.vsb.bc.ca%2Fschools%2Fbritannia-secondary" target="_blank">http://www.vsb.bc.ca/schools/britannia-secondary</A><SPAN>"</SPAN></SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"SCHOOL_NAME"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Magee Sec."</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"LATITUDE"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">49.2286</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"LONGITUDE"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">123.1515</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"ADDRESS"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"6360 Maple St"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"URLLINK"</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=http%3A%2F%2Fwww.vsb.bc.ca%2Fschools%2Fmagee" target="_blank">http://www.vsb.bc.ca/schools/magee</A><SPAN>"</SPAN></SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

to the map. now I would like to add a functionality to Zoom to Full Extent of ONLY school points on the Map. Technically I add the `Navigation` class to the Map

require(["esri/toolbars/navigation"], function(Navigation) { /* code goes here */ });

and in HTML I have a simple button

<button id="show-all-schools">Show All Schools</button>

and in JS I have

$("#show-all-schools").on("click", function () {
            navToolbar = new Navigation(map);
            navToolbar.zoomToFullExtent();
          });

but this is setting the basemap in Full Extent state! Can you please let me know how to pass a parameter like points to zoom to cover entire points instead of basemap?

Thanks

Najděte více příspěvků označených jako

Accepted answers

RobertScheitlin__GISP

Bengi,

It would be:

schoolGraphicLayer<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;"></SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>graphics<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>
&nbsp; map<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">setExtent</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>schoolGraphicsExtent<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">true</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>
 <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN><CODE>map<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">addLayer</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>schoolGraphicLayer<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>

 <SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">$</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">".zoom-to-point"</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">on</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'click'</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">function</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN>
&nbsp; <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">var</SPAN> schoolGraphicsExtent <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">=</SPAN> graphicsUtils<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">graphicsExtent</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>

All comments

RobertScheitlin__GISP

Behrouz,

The Navigation widgets zoomToFullExtent is always going to zoom to the basemaps full extent:

Zoom to initial extent of base layer

Instead of using the Navigation toolbar you should just set the maps extent to the school layers extent.

Map | API Reference | ArcGIS API for JavaScript 3.19 | setExtent

BehrouzHosseini

Thanks again Robert

I tried this way as the `schoolGraphicLayer` is my graphic layer added to the Map already

$("#show-all-schools").on("click", function () {
            map.setExtent(schoolGraphicLayer);
          });

but nothing is happening! Can you please let me know what I am doing wrong?

RobertScheitlin__GISP

Behrouz,

So what you are doing is trying to the map extent to a featurelayer then.

This is more like it:

map.setExtent(schoolGraphicLayer.fullExtent, true);

BruceGreen

Thanks Robert,

I Update the code to

$("#show-all-schools").on("click", function () {
            map.setExtent(schoolGraphicLayer.fullExtent, true);
          });

But I am getting this error now!

BehrouzHosseini

Hi Robert did you have a chance to take a look at this issue? Thanks

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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