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

Is it possible to get map extent values using ArcGIS JavaScript API 4x?

rlttechcbe

I have been trying to start working on the javascript API. I need to retrieve the feature layer name if any point features are there within the extent values. The extent values will differ, whenever we are performing zoom in or zoom out process. If not possible, how can we do this in some other way?

Thanks in Advance.

Find more posts tagged with

Accepted answers

BenElan

The snippet below is from this sample

<SPAN class="comment token">// Watch view's stationary property for becoming true.</SPAN>
watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrue</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"stationary"</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="comment token">// Get the new center of the view only when view is stationary.</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> info <SPAN class="operator token">=</SPAN>
      <SPAN class="string token">"<br> <span> the view center changed. </span> x: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">" y: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">displayMessage</SPAN><SPAN class="punctuation token">(</SPAN>info<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>

  <SPAN class="comment token">// Get the new extent of the view only when view is stationary.</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> info <SPAN class="operator token">=</SPAN>
      <SPAN class="string token">"<br> <span> the view extent changed: </span>"</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">"<br> xmin:"</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>xmin<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">" xmax: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>xmax<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">"<br> ymin:"</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>ymin<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">" ymax: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>ymax<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">displayMessage</SPAN><SPAN class="punctuation token">(</SPAN>info<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

BenElan

The relevant code being

view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="comment token">// wait for the layer view to finish updating</SPAN>

              <SPAN class="comment token">// query all the features available for drawing.</SPAN>
              layerView
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                  geometry<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">,</SPAN>
                  returnGeometry<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="comment token">// Get count of features</SPAN>
                    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"query failed: "</SPAN><SPAN class="punctuation token">,</SPAN> error<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="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>‍</SPAN></SPAN>

rscheitlin

See this sample for querying a layers view.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurelayerview-query

rlttechcbe

Thank you Mr.Ben Elan.. (view.extent) property is working now... Within this map extent can we able to retrieve the count of point features from the feature layer in the version of 4x series? This functionality is working in 3x series here. But according to the 4x series still I am analyzing about it whether or not it is possible.

rlttechcbe

Ah! Thanks for the help! I'll check it out soon.

BenElan

The snippet below is from this sample

<SPAN class="comment token">// Watch view's stationary property for becoming true.</SPAN>
watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrue</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"stationary"</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="comment token">// Get the new center of the view only when view is stationary.</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> info <SPAN class="operator token">=</SPAN>
      <SPAN class="string token">"<br> <span> the view center changed. </span> x: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">" y: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">displayMessage</SPAN><SPAN class="punctuation token">(</SPAN>info<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>

  <SPAN class="comment token">// Get the new extent of the view only when view is stationary.</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> info <SPAN class="operator token">=</SPAN>
      <SPAN class="string token">"<br> <span> the view extent changed: </span>"</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">"<br> xmin:"</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>xmin<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">" xmax: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>xmax<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">"<br> ymin:"</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>ymin<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
      <SPAN class="string token">" ymax: "</SPAN> <SPAN class="operator token">+</SPAN>
      view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>ymax<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="token function">displayMessage</SPAN><SPAN class="punctuation token">(</SPAN>info<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

rscheitlin

In the 4.x api you just watch the views stationary property to be true then get the view.extent property.

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.