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
});
});
}