Mobile Popup and Popup

Question

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

RobertScheitlin__GISP · Accepted Answer

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> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍