CODEWITHSUNDEEP
arcgisesriarcgis-js-api
Naresh Kumar
Naresh Kumar

Reputation: 83

ESRI Popup Maximize button missing

Currently working on showing a popup in the map using ESRI ArcGIS API for JavaScript 4.15. But that is missing the Maximize button which was available with ArcGIS API for JavaScript 3.35

enter image description here

Is there any config to be set to show the same.

Upvotes: 0

Views: 380

Answers (1)

cabesuon
cabesuon

Reputation: 5270

As far as I know the new API does not have that capability out of the box. But no worries, you can implement it by adding a custom action to the popup.

See the example I made for you to get an idea.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Popup actions | ArcGIS API for JavaScript 4.18</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.18/"></script>

  <script>
    require(["esri/Map", "esri/layers/FeatureLayer", "esri/views/MapView"], function (
      Map,
      FeatureLayer,
      MapView
    ) {
      const map = new Map({
        basemap: "gray-vector"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-117.08, 34.1],
        zoom: 11
      });

      const toggleFullScreenAction = {
        type: "toggle",
        title: "Full Screen",
        id: "toggle-full-screen",
        className: "esri-icon-maximize"
      };

      view.popup.actions.add(toggleFullScreenAction);


      const template = {
        title: "Trail run",
        content: "{name}"
      };

      featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(featureLayer);

      function toggleFullScreen() {
        if (!document.fullscreenElement) {
          document.getElementsByClassName('esri-popup__main-container')[0].requestFullscreen()
            .catch(err => {
              alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            });
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          }
        }
      }

      view.popup.on("trigger-action", function (event) {
        if (event.action.id === "toggle-full-screen") {
          toggleFullScreen();
        }
      });



    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

To run the snippet, copy and save as an html file. The full screen action does not work in the snippet, I guess because it is embedded, not sure though.

Upvotes: 2

Related Questions