topic Re: Popup Not Showing Content On Mobile Devices in ArcGIS JavaScript Maps SDK Questions

Popup Not Showing Content On Mobile Devices

CurtisSpurlock — Mon, 10 Feb 2020 21:20:11 GMT

I'm using javascript api version 4.13. My popup is not showing the content when application is viewed on a mobile device (ios and android). It works fine on a desktop. I used the developer tools in Chrome to look at the html and css. I attached two files that show what the popup content looks like on the desktop and mobile device. I believe there is a media query somewhere but I don't know where to find it. I tried the following but it did not work:

.esri-view-width-xsmall .esri-popup__content,
.esri-view-width-small .esri-popup__content {
display: flex;
}

Re: Popup Not Showing Content On Mobile Devices

AnneFitz — Wed, 12 Feb 2020 00:30:35 GMT

Hi Curtis,

Thanks for your feedback. Could you provide a CodePen with your code or a sample where you are seeing this happen?

Thanks,

Anne

Re: Popup Not Showing Content On Mobile Devices

CurtisSpurlock — Wed, 12 Feb 2020 17:58:23 GMT

Here are screen shots from a desktop and mobile device. You will see on the mobile device the popup content is not showing.

Re: Popup Not Showing Content On Mobile Devices

AnneFitz — Wed, 12 Feb 2020 18:17:58 GMT

Yes, thank you for the screenshots. Would you be willing to share your code? Or have you seen this kind of behavior in any of our samples in the SDK? We want to make sure we can reproduce the problem to see if it is a bug or something we can fix within your code. Thanks!

Re: Popup Not Showing Content On Mobile Devices

CurtisSpurlock — Wed, 12 Feb 2020 18:50:54 GMT

I have not seen this kind of behavior before. Below is my code:

var map;
var view;
var policeLayer;
var centerPt;
var isResponsiveSize;

require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/geometry/Extent", "esri/widgets/Expand", "esri/widgets/Home", "esri/widgets/Legend"], function (Map, MapView, MapImageLayer, Extent, Expand, Home, Legend) {
var initExtent = new Extent({
"xmin": -10843481.213449172,
"ymin": 3840648.34577054,
"xmax": -10775949.098959311,
"ymax": 3871184.9385704272,
"spatialReference": { "wkid": 102100 }
});

// Create the Map
map = new Map({
basemap: "topo"
});

view = new MapView({
container: "dvMap",
map: map,
extent: initExtent,
zoom: 12,
popup: {
dockEnabled: false,
dockOptions: {
buttonEnabled: false,
breakpoint: false
}
}
});

var homeBtn = new Home({
view: view
});

view.ui.add(homeBtn, "top-left");

policeLayer = new MapImageLayer({
url: "https://gis2.arlingtontx.gov/agsext/rest/services/Police/Police/MapServer"
});

map.layers.add(policeLayer);

var legend = new Legend({
view: view,
layerInfos: [{
layer: policeLayer,
title: "Police"
}],
container: document.createElement("div")
});

var expandLegend = new Expand({
view: view,
content: new Legend({
view: view,
layerInfos: [{
layer: policeLayer,
title: "Police"
}],
container: document.createElement("div")
})
});

if (view.widthBreakpoint === "xsmall" || view.widthBreakpoint === "small") {
isResponsiveSize = true;
} else {
isResponsiveSize = false;
}

setLegendView(isResponsiveSize);

view.watch("widthBreakpoint", function (breakpoint) {
switch (breakpoint) {
case "xsmall":
case "small":
setLegendView(true);
break;

case "medium":
case "large":
case "xlarge":
setLegendView(false);
break;
default:
}
});

centerPt = view.center;

function setLegendView(isMobile) {
var toAdd = isMobile ? expandLegend : legend;
var toRemove = isMobile ? legend : expandLegend;

view.ui.remove(toRemove);
view.ui.add(toAdd, "top-right");
}
});

function AddJsonToMap(jsonString) {
view.graphics.removeAll();

require(["esri/Graphic"], function (Graphic) {
var pointSymbol = {
type: "simple-marker",
style: "circle",
color: [0, 102, 51],
size: "16px",
outline: {
color: [0, 0, 0],
width: 1
}
};

$.each(jsonString, function (i, item) {
var point = {
type: "point",
longitude: item.X,
latitude: item.Y
};

var pointGraphic = new Graphic({
geometry: point,
symbol: pointSymbol,
popupTemplate: {
title: item.Description,
content: BuildInfoWindow(item)
}
});

view.graphics.add(pointGraphic);
});
});
}

function BuildInfoWindow(item) {
var iw = "<table>";
iw += "<tr><td>";
iw += "<b>District: </b>" + item.District;
iw += "</td></tr>";
iw += "<tr><td>";
iw += "<b>Beat: </b>" + item.Beat;
iw += "</td></tr>";
iw += "<tr><td>";
iw += "<b>Case Number: </b><a href='https://arlingtonpd.org/webapps/PublicReportForMap?CaseNumber=" + item.CaseNumber + "' target='_blank'>" + item.CaseNumber + "</a>";
iw += "</td></tr>";
iw += "<tr><td>";
iw += "<b>Date Time Occurred: </b>" + item.DateOccurred;
iw += "</td></tr>";
iw += "</table>";

return iw;
}

function ResetMap() {
view.graphics.removeAll();

require(["esri/geometry/Point"], function (Point) {
var center = new Point({
latitude: centerPt.latitude,
longitude: centerPt.longitude
});

view.goTo({
target: center,
zoom: 12
});
});
}

Re: Popup Not Showing Content On Mobile Devices

AnneFitz — Wed, 12 Feb 2020 23:10:09 GMT

Have you tried setting view.popup.collapseEnabled: false?

The popup will automatically collapse when it has reached its breakpoint so that you will only see the title, unless this property is set to false. Let me know if this works!

I wasn't able to repro the issue with your code because it looks like AddJsonToMap() is never called, which should create the graphics that have the popupTemplate set.

Re: Popup Not Showing Content On Mobile Devices

CurtisSpurlock — Thu, 13 Feb 2020 16:29:41 GMT

Setting collapseEnabled to false fixed the issue. Thanks Anne for all your help.