Search code examples
javascriptarcgis-js-api

Is there an ArcGis Javascript setting or function to center map around a popup?

The problem I'm encountering is that if an ArcGis map is sufficiently small in height (around 400px or so), when you click on a point near the top the popup does not fit in the view (pictured below):

Image of popup going outside the view

1

I was wondering if there was some way to have the map/view center around the popup, where it would look something like this:

Image of popup if it was centered

2

I tried looking at the documentation first but didn't see anything that looked like it would solve my problem.

Solution

  • By default, the popup should pop "up" or "down" as appropriate to fit within the view. But if the height isn't very tall and/or the popup is tall, you could still experience it "cut-off".

    As an alternative, you can "dock" the popup in a corner or at the bottom/top using the Popup dockOptions. For example, for a typical mobile case, the popup usually ends up "docked" at the bottom of the screen.

    You can do something similar when the view is not very tall. In this example, if the map view is less than 400px tall, show the popup in the top right corner.

      const view = new MapView({
    container: "viewDiv",
    map: map,
    popup: {
      dockOptions: {
        position: "top-right",
        breakpoint: {height:400}
      }
    }
  });

    Or if you want it to always show in the corner:

      const view = new MapView({
    container: "viewDiv",
    map: map,
    popup: {
      dockEnabled: true,
      dockOptions: {
        position: "top-right",
        breakpoint: false
      }
    }
  });