Popup Functionality in Mobile View

Anonymous User · ‎12-23-2019

In the ArcGIS JS API 4.x when resizing a screen to a mobile view the popup automatically docks to the bottom center of the screen. It appears to default to a collapsed view. Is it possible to always have the popup automatically expanded in a mobile view?

RobertScheitlin__GISP · ‎12-24-2019

Dara,

Here is a sample of how to do that.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Mobile Popup Collapse - 4.14</title>

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

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

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/WebMap"], function(
        Map,
        MapView,
        WebMap
      ) {
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "3af548bac6054938b615d08104197ba0"
          }
        });

        var view = new MapView({
          map: webmap,
          container: "viewDiv"
        });

        popup = view.popup;

        view.when(function() {
          popup.watch("collapsed", function(value){
            if(value && popup.currentDockPosition === 'bottom-center'){
              popup.collapsed = false;
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv" class="esri-widget"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎12-24-2019

Dara,

Here is a sample of how to do that.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Mobile Popup Collapse - 4.14</title>

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

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

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/WebMap"], function(
        Map,
        MapView,
        WebMap
      ) {
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "3af548bac6054938b615d08104197ba0"
          }
        });

        var view = new MapView({
          map: webmap,
          container: "viewDiv"
        });

        popup = view.popup;

        view.when(function() {
          popup.watch("collapsed", function(value){
            if(value && popup.currentDockPosition === 'bottom-center'){
              popup.collapsed = false;
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv" class="esri-widget"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Anonymous User · ‎12-24-2019

Perfect! Thank you that worked great!!

MikeDolbow · ‎02-05-2020

Super cool. I logged in just to come here and say "thanks" for this solution - while I actually couldn't get it working I think I was only about a few steps away from getting it there. Since I created my popup at the same time as the MapView, I don't think the variable was quite right. BUT it led me to look at the Property Overview:

Popup | ArcGIS API for JavaScript 4.14

And from there I saw that I could set

collapseEnabled: false,

on the popup during construction, and achieve the same end result!

Cheers, mike