Popup dock positions | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

The Popup component by default contains an icon that (when clicked) docks the popup on the corner of the view component. This sample demonstrates how to remove the docking button and change the docking options that can be configured with the dockOptions property.

1
      viewElement.popupElement.dockEnabled = true;
2
      viewElement.popupElement.hideCloseButton = true;
3
      viewElement.popupElement.hideActionBar = true;
4
      viewElement.popupElement.dockOptions = {
5
        // Removes the dock button from the popup
6
        buttonEnabled: false,
7
        // Ignore the default sizes that trigger responsive docking
8
        breakpoint: false,
9
      };

The map displays educational attainment data for tracts in the southern California area with popups pre-configured in the web map on ArcGIS Online.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Popup dock positions | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      .docking-control {
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        width: 250px;
        height: 80px;
        padding: 10px;
        box-sizing: border-box;
        margin: -40px 0 0 -125px;
        background-color: #fff;
        color: #323232;
      }
    </style>
  </head>

  <body>
    <!-- Note: popup-component-enabled enables the Popup component (beta). See https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupComponentEnabled for details. -->
    <arcgis-map item-id="22d8463bdf79468cb5824391088cf150" popup-component-enabled>
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-expand slot="bottom-right">
        <arcgis-legend></arcgis-legend>
      </arcgis-expand>
    </arcgis-map>
    <div class="docking-control">
      <calcite-label for="doc-position-select"
        >Popup Dock Position
        <calcite-select id="dock-position-select">
          <calcite-option value="auto">Auto</calcite-option>
          <calcite-option value="top-left">Top left</calcite-option>
          <calcite-option value="top-center">Top center</calcite-option>
          <calcite-option value="top-right">Top right</calcite-option>
          <calcite-option value="bottom-left">Bottom Left</calcite-option>
          <calcite-option value="bottom-center">Bottom Center</calcite-option>
          <calcite-option value="bottom-right">Bottom Right</calcite-option>
          <calcite-option value="top-start">Top Start</calcite-option>
          <calcite-option value="top-end">Top End</calcite-option>
          <calcite-option value="bottom-start">Bottom Start</calcite-option>
          <calcite-option value="bottom-end">Bottom End</calcite-option>
        </calcite-select>
      </calcite-label>
    </div>
    <script type="module">
      // Get a reference to the map and popup components
      const viewElement = document.querySelector("arcgis-map");
      // Wait for when the component is ready
      await viewElement.viewOnReady();

      viewElement.popupElement.dockEnabled = true;
      viewElement.popupElement.hideCloseButton = true;
      viewElement.popupElement.hideActionBar = true;
      viewElement.popupElement.dockOptions = {
        // Removes the dock button from the popup
        buttonEnabled: false,
        // Ignore the default sizes that trigger responsive docking
        breakpoint: false,
      };

      const centerPoint = viewElement.center.clone();
      viewElement.popupElement.location = centerPoint;
      viewElement.popupElement.heading = "Popup dock positions";
      viewElement.popupElement.content =
        "Use the control in the center of the map to change the location where the popup will dock.";
      viewElement.popupElement.open = true;
      const selectNode = document.getElementById("dock-position-select");
      // Let user change the position dockOptions.position property of the
      // popup at runtime from the drop-down list.
      selectNode.addEventListener("calciteSelectChange", (event) => {
        viewElement.popupElement.dockOptions = {
          breakpoint: false,
          buttonEnabled: false,
          position: event.target.value,
        };
      });
    </script>
  </body>
</html>