Can you please let me know how we can enable ArcGIS JavaScript API to use custom ZoomIn function? For example let's say I have a code Like button id = " zoom-to-point " > Zoom To button > and in Js Part $ ( "#zoom-to-point" ) . on ( 'click' , function ( ) { var zoomLat = 49.2898 var zoomLong = - 123.1364 ; map . zoomTo ( zoomLat , zoomLong ) ; } ) ; As you know we have not such a .zoomTo function in API so can you please let me know how can I get it done?

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

Accessing Zoom To Point On ArcGIS JavaScript API

BehrouzHosseini

Can you please let me know how we can enable ArcGIS JavaScript API to use custom ZoomIn function?

For example let's say I have a code Like

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>zoom-to-point<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN> Zoom To <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

and in Js Part

<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#zoom-to-point"</SPAN><SPAN class="punctuation token">)</SPAN><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> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> zoomLat <SPAN class="operator token">=</SPAN> <SPAN class="number token">49.2898</SPAN>
 <SPAN class="keyword token">var</SPAN> zoomLong <SPAN class="operator token">=</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">123.1364</SPAN><SPAN class="punctuation token">;</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">zoomTo</SPAN><SPAN class="punctuation token">(</SPAN>zoomLat<SPAN class="punctuation token">,</SPAN>zoomLong <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>

As you know we have not such a .zoomTo function in API so can you please let me know how can I get it done?

Finde mehr Beiträge mit dem Tag

Accepted answers

rscheitlin

Behrouz,

location is a point class. So you just create a point class and pass it to the centerAndZoom method.

All comments

BehrouzHosseini

Thanks Robert

rscheitlin

Behrouz,

location is a point class. So you just create a point class and pass it to the centerAndZoom method.

BehrouzHosseini

I Tried this and it is working, but not sure if it is the best way to do?

 <SPAN class="keyword token">var</SPAN> location <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN>zoomLong<SPAN class="punctuation token">,</SPAN>zoomLat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAndZoom</SPAN><SPAN class="punctuation token">(</SPAN>location<SPAN class="punctuation token">,</SPAN><SPAN class="number token">16</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

can you please let me know if there is a better way to do this?

BehrouzHosseini

Thanks Robert,

so how can I pass the

<SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">var</SPAN> zoomLat <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">=</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">49.2898</SPAN>
<SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">var</SPAN> zoomLong <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">=</SPAN> <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">-</SPAN><SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">123.1364</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>

to location in :

map.centerAndZoom(location,12);

Thanks again

BehrouzHosseini

Hi Evon,

Thanks for reply, I am using 3.19

EvonFranklin

What version of the API are you using?

rscheitlin

Behrouz,

Map | API Reference | ArcGIS API for JavaScript 3.1 | centerAndZoom

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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