ArcGIS API for JavaScript 4.x Dockable Popups Offer Great Flexibility
Traditionally, popups in mapping apps have always pointed to a feature or location, even if that caused issues with other parts of the user interface. In the ArcGIS API for JavaScript v4.x, docking allows for a better user experience in that you can decouple the popup and place it in a corner, top, or bottom of the map. Even better, these popups are responsive to different screen sizes and orientation, so they offer you quite a bit of flexibility when building apps especially for mobile deployments.
These capabilities are available thru a MapView or SceneView’s default Popup instance: view.popup.dockOptions. The dockOptions Object allows you to directly configure the breakpoint dimension, height, width, and position without having to directly access CSS or needing to figure out and set up CSS media queries.
view.popup.dockOptions = {
// Set a custom breakpoint
// Dock popup when view is less than or equal to 600x1000 pixels
breakpoint: {
width: 600,
height: 1000
}
};
Our recommendation is to simply go play with it in a live app. A picture is worth a thousand words. Go to the Dock Positions with Popup sample, then use Device Mode in Chrome, or your favorite browser, and start playing with different configurations and orientations.
Here's a few screenshots of Chrome Device Mode approximating an iPhone 6 using the default popup settings. Note that in portrait mode, the default popup is docked on the bottom 100%, and when we rotate the phone to landscape, the popup automatically docks in the top-right position.
References:
Popup Class - Popup | API Reference | ArcGIS API for JavaScript 4.3
Get Started With Popups - Get started with popups | ArcGIS API for JavaScript 4.3
Dock Positions with Popup Sample App with Source Code - ArcGIS API for JavaScript Sandbox
Enhanced dock position sample showing where user clicks - Jsbin.com