Mobile Popup and Popup

ChristopherSchreiber — Mon, 12 Dec 2016 22:34:56 GMT

Hello all,

I am working on a map using Esri's JS API version 3.18.

I want to make the map switch the popups from regular popups, created using the Popup class, to mobile Popups, created using the PopupMobile class. I have tried changing the map's infoWindow from one to the other when the screen width falls below a certain threshold, but it does not seem to work.

Has anyone else come across this?

Thanks!

Chris

Re: Mobile Popup and Popup

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:34:35 GMT

Christopher,

Sure here is a sample (borrowing some concepts and code from Web AppBuilder):

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Mobile Popup</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
    </style>

    <script src="https://js.arcgis.com/3.18compact/"></script>
    <script>
      var map, _mapInfoWindow, _mapMobileInfoWindow, isMobileInfoWindow;
      require([
        "esri/map",
        "esri/arcgis/utils",
        "esri/dijit/PopupMobile",
        "esri/dijit/Popup",
        "dojo/dom-construct",
        "dojo/_base/html",
        "dojo/on",
        "dojo/dom",
        "dojo/domReady!"
      ], function(
          Map,
          arcgisUtils,
          PopupMobile,
          Popup,
          domConstruct,
          html,
          on,
          dom
        ) {
          var popup = new Popup(null, domConstruct.create("div"));
          arcgisUtils.createMap("1df512c380994cc5a3dad2e2d428eea3", "mapDiv",{
            mapOptions: {
              center: [-87.62, 41.89],
              zoom: 10,
              infoWindow: popup
            }
          }).then(function (response) {
            map = response.map;
            _mapInfoWindow = map.infoWindow;
            if(_mapMobileInfoWindow){
              _mapMobileInfoWindow.destroy();
            }
            _mapMobileInfoWindow = new PopupMobile(null, html.create("div", null, null, map.root));
            resetInfoWindow();
          });

          function inMobileSize() {
            var layoutBox = html.getMarginBox("main-body");
            if (layoutBox.w <= 600 ||
              layoutBox.h <= 600) {
              html.addClass("main-body", 'ismobile');
              return true;
            } else {
              html.removeClass("main-body", 'ismobile');
              return false;
            }
          }

          function onWindowResize () {
            if (map && map.resize) {
              map.resize();
              resetInfoWindow();
            }
          }

          function resetInfoWindow () {
            console.info(map.infoWindow);
            if (inMobileSize() && !isMobileInfoWindow) {
              map.infoWindow.hide();
              map.setInfoWindow(_mapMobileInfoWindow);
              isMobileInfoWindow = true;
            } else if (!inMobileSize() && isMobileInfoWindow) {
              map.infoWindow.hide();
              map.setInfoWindow(_mapInfoWindow);
              isMobileInfoWindow = false;
            }
          }

          on(window, 'resize', onWindowResize);
      });
    </script>
  </head>

  <body id="main-body">
    <div id="mapDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Mobile Popup and Popup

ChristopherSchreiber — Tue, 13 Dec 2016 16:58:43 GMT

Robert,

I was having issues getting the mobile popups to display. I tried everything I could think of and I eventually found out that the mobile Popup are not compatible with the new 'Calcite' theme. I had to download the popupMobile .css file and host it locally to override the 'calcite' theme css.

Download Link to popupMobile css file: https://developers.arcgis.com/javascript/3/jsapi/css/arcgis-js-sdk-css.zip

Path to the css file:

1. Extract the file

Then go to: esri ==> dijit ==> css ==> popupMobile.css

topic Mobile Popup and Popup in ArcGIS JavaScript Maps SDK Questions

Mobile Popup and Popup

Re: Mobile Popup and Popup

Re: Mobile Popup and Popup