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

Prevent continious wrap v4.15

samuelgirardin

Hi everyone, I'm quite new to esri js api. I'm using esri js api 4.15. I can't figure out how doing that :

I try to display only a single world, I don't want to be able to continious wrap around.

I 've seen this jsfiddle using 3.3, it seems that setting wrapAround180 to false, display only a single world and prevent continious wrapping.

jsfiddle demo no continious wrap v3.3

Unfortunately wrapAround180 is no more used in v4.15, doc is talking about SpatialReference.isWrappable . I can't get this working.

Maybe someone solves that before ? Is there any solution ?

Thanks, sam

タグ付けされた投稿をもっと見る

Accepted answers

All comments

samuelgirardin

Thanks Noah for your answer, and this futur background color property. Any chance to get constraint pan/drag and momentum to a given xminmax, yminmax extent ? All I try is just 'not too bad' , but my project manager like perfection (-: .

thx sam

Noah Sager

For that background, we'll expose a configurable property on the view to modify. It should be available on `next` and will release with 4.16 in a month or so.

feedback-js-api-next/CHANGELOG.md at master · Esri/feedback-js-api-next · GitHub

example:

var view = new MapView({
container: "viewDiv",
map: map,
background: { // autocasts as new ColorBackground()
color: "gray" // autocasts as new Color()
}
});

samuelgirardin

I succeed to prevent tiles rendering when they belong to a different world. As my only ''''sources''''' is the view object console printed, maybe that s a really bad way to achieve this. It works. In this code below, I'm not sure that the j loop is necessary. The code is called each new frame

const prelen = this._view._stage?.children.length ;

for (let j = 0; j < prelen; j++) {

const len1 = this._view._stage?.children[j]?.children?.length;

for (let i = 0; i < len1; i++) {

if (this._view._stage?.children[j]?.children[i]) {

if (this._view._stage.children[j].children[i].key.world !== 0) {

this._view._stage.children[j].children[i].visible = false;

}

All is ok but I still have this unwanted blue color under discarded tiles. Any idea ?

thx , sam

ChristianBischof

Right off the cuff I can't come up with a ready to use solution, but I guess your suggestion is a good start. The faster one of us could simply post the solution below. I'll try it myself.

samuelgirardin

@christian bischof, thanks for your 2 answers, but I really need to diplay only one world (the what I want img). Do you think this is possible ? or not ?

Esri js api know which world is displayed at center, I found this :

this._view.frameTask.graphicsView.container.children[xyz]?.key?.world.

world is set at 0 (the first ), world-- on the left and world ++ on the right. I'm trying to disable tiles rendering when world!==0 with no luck for the moment, any idea ?

Thanks. sam.

ChristianBischof

<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>meta
      name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN>
      content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN>
  ArcGIS API <SPAN class="keyword token">for</SPAN> JavaScript<SPAN class="punctuation token">,</SPAN> https<SPAN class="punctuation token">:</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">/</SPAN>js<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com
  For more information about the intro<SPAN class="operator token">-</SPAN>mapview sample<SPAN class="punctuation token">,</SPAN> read the original sample description at developers<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="punctuation token">.</SPAN>
  https<SPAN class="punctuation token">:</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">/</SPAN>developers<SPAN class="punctuation token">.</SPAN>arcgis<SPAN class="punctuation token">.</SPAN>com<SPAN class="operator token">/</SPAN>javascript<SPAN class="operator token">/</SPAN>latest<SPAN class="operator token">/</SPAN>sample<SPAN class="operator token">-</SPAN>code<SPAN class="operator token">/</SPAN>intro<SPAN class="operator token">-</SPAN>mapview<SPAN class="operator token">/</SPAN>index<SPAN class="punctuation token">.</SPAN>html
  <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Intro to MapView <SPAN class="operator token">-</SPAN> Create a 2D map <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.15</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
      html<SPAN class="punctuation token">,</SPAN>
      body<SPAN class="punctuation token">,</SPAN>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>link
      rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN>
      href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/esri/themes/light/main.css"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.15/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <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="punctuation token">{</SPAN>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">,</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">65</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="comment token">// longitude, latitude</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        
        view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN>disableZooming<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">disableZooming</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>dockEnabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// Removes the zoom action on the popup</SPAN>
          view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>actions <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// stops propagation of default behavior when an event fires</SPAN>
          <SPAN class="keyword token">function</SPAN> <SPAN class="token function">stopEvtPropagation</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>

          <SPAN class="comment token">// disables pinch-zoom and panning on the view</SPAN>
          view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"drag"</SPAN><SPAN class="punctuation token">,</SPAN> stopEvtPropagation<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// disable the view's zoom box to prevent the Shift + drag</SPAN>
          <SPAN class="comment token">// and Shift + Control + drag zoom gestures.</SPAN>
          view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"drag"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Shift"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> stopEvtPropagation<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"drag"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Shift"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Control"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> stopEvtPropagation<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">// prevents zooming with the + and - keys</SPAN>
          view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"key-down"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> prohibitedKeys <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"+"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"-"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"Shift"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"_"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"="</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> keyPressed <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>key<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>prohibitedKeys<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>keyPressed<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">!==</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</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="keyword token">return</SPAN> view<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="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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>‍</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><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Another suggestion is to navigate the map only by zooming functionality and prevent the paning from happening.

ChristianBischof

view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</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="token function">limitMapView</SPAN><SPAN class="punctuation token">(</SPAN>view<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="keyword token">function</SPAN> <SPAN class="token function">limitMapView</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
     <SPAN class="keyword token">var</SPAN> initialExtent <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">;</SPAN>
     <SPAN class="keyword token">var</SPAN> initialLon <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">;</SPAN>
     <SPAN class="keyword token">var</SPAN> initialLat <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>latitude<SPAN class="punctuation token">;</SPAN>
     <SPAN class="keyword token">var</SPAN> initialZoom <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>zoom<SPAN class="punctuation token">;</SPAN>
     view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><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>event<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>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
         <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
       <SPAN class="punctuation token">}</SPAN>
       <SPAN class="comment token">// If the center of the map has moved outside the initial extent,</SPAN>
       <SPAN class="comment token">// then move back to the initial map position (i.e. initial zoom and extent</SPAN>
       <SPAN class="keyword token">var</SPAN> currentCenter <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">;</SPAN>
       <SPAN class="keyword token">var</SPAN> currentLon <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">;</SPAN>
       <SPAN class="keyword token">var</SPAN> currentLat <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">.</SPAN>latitude<SPAN class="punctuation token">;</SPAN>
       <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>initialExtent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">contains</SPAN><SPAN class="punctuation token">(</SPAN>currentCenter<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
         view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">goTo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
           target<SPAN class="punctuation token">:</SPAN> initialExtent<SPAN class="punctuation token">,</SPAN>
           zoom<SPAN class="punctuation token">:</SPAN> initialZoom<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I don't know what the exact usecase of your app is but this code snippet should "bring you back" to the inital extent. Maybe it's helpful, maybe it's not. Or should your map be kinda "blocked" when it comes to it's west/east end?

samuelgirardin

I'm still stuck in this really simple problem... I found a 'not too bad' solution. This method is called by an 'update' in a : scheduling.frametask . I'm sure I'm missing something, and you have @esri already implemented something like : this._esriView.WrapAroundMode = false ; in 4.15, can someone can confirm or not that ? It would be really nice.

sam

my not too bad method (ok when momentum anim or dragging)

private warpLimit() {

const left = this._view.toMap({ x: 0, y: 0 }).x;

const mid = this._view.viewpoint.targetGeometry.x;

const dist = Math.abs(mid - left);

const right = left + 2 * dist; ;

const earthCircumHalf = 20037508 ;

const opts = {

duration: 0

};

if (left < -earthCircumHalf) {

this._view.goTo({}, opts).catch((error) => { });

this._view.viewpoint.targetGeometry.x = -earthCircumHalf + dist;

} else if (right > Prop.EarthCircumHalf) {

this._view.goTo({}, opts).catch((error) => { });

this._view.viewpoint.targetGeometry.x = earthCircumHalf - dist;

}

samuelgirardin

Maybe, my explanation is not clear enough. I'm looking for something like this : https://developers.arcgis.com/net/latest/ios/guide/wraparound-maps.htm . This doc is fromm .net framework, do we have something similar with js api 4.15 ?

this._esriView.WrapAroundMode = false ;

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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