Auto-pan popup to fit Map

Question

Hello all!  I am looking for a way to deal with popups that open off-screen.  If a Feature is near the edge of the Map sometimes the popup gets cutoff.  I would like it to just move the popup to fit, not 'center' the popup.

I have seen MapBox applications that automatically quick pan the popup into full view on-click.   I have also found a fiddle that has this same action that would work perfectly, altho I just cannot decipher how the code works to accomplish this?  it seems to be using "view.watch" and "view.popup.features"?

https://jsfiddle.net/gavinr/1jLmfLLL/

(you will need to add your own Feature Service URL to make this fiddle work)

https://www.nps.gov/subjects/geology/geologic-resources-inventory-products.htm

(this is the MapBox app that has the action im looking for)

thx!

**another ESRI example-  https://totalapis.github.io/sample-code/watch-for-changes/live/index.html

JoelBennett · Answer

I adjusted the "Intro to popups" sample to the following, which works although there's some explanation further below: Intro to popups | Sample | ArcGIS Maps SDK for JavaScript 4.28

The main part is the function "adjustViewForPopup" added on lines 35-63. I also had to explicitly require the Popup widget on line 65, instantiate one on line 74, and assign it to the view on line 83 in order to get around an issue where it didn't fully pan on the first click. I chalk those first-click issues up to the modules being lazy loaded, coupled with the use of a shadow DOM starting in 4.28. The MutationObserver of line 86 doesn't appear to be notified when elements within a shadow root are altered, thus the additional use of "watch" two lines below it for good measure. I used a fixed alignment on line 75, because without it, the alignment will change anchors when the map is panned, thus making it seem like the panning went too far. It seems the popup's contents are fully present when the headerElement of line 40 is present, which is when the domRect has its expected values.

Paco · Answer

Thanks.  but as the original poster had mentioned about the ESRI code,  that first click is still off the screen? a strange first click bug? Also thx for your reactiveUtils code,  altho I tried it(in 4.26x) and it didn't seem to work, then tried with 4.28x and it was closer but still gave me some random cutoffs for certain popup clicks.

So,  that's why the "pan" concept is so great, it opens off screen then quickly pans to fit the entire popup within the "view".   Im still not sure why view.popup "alignment" and "dockEnabled" seem to work fine, but I can't seem to get "visible" to work?   the example code I included seems to be..fairly simple, but I cant get that "pan" to work.  thx

JoelBennett · Answer

If your goal is simply to keep the popup from getting cut off, you might consider the solution here.  It doesn't pan the map, but instead forces to the popup to open towards the direction of the map where there's the most space.