Created
February 17, 2017 22:49
-
-
Save asizer/f4863c0487fad7485a7aa7d7de915e9e to your computer and use it in GitHub Desktop.
Simulating loading of 5 webmaps in Cascade. This consistently crashes iOS Safari.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Simulating 5 webmap loads in Cascade</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
<link rel="stylesheet" href="http://js.arcgis.com/3.19/esri/css/esri.css"> | |
<script | |
src="https://code.jquery.com/jquery-3.1.1.min.js" | |
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" | |
crossorigin="anonymous"> | |
</script> | |
<style> | |
html, body { | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
.text-divider { | |
background-color: gray; | |
color: #eee; | |
width: 100%; | |
height: 1.5em; | |
font-size: 30px; | |
text-align: center; | |
line-height: 1.5em; | |
} | |
.text-divider table { | |
width: 100%; | |
height: 100%; | |
} | |
.explainer { | |
height: auto; | |
width: 100%; | |
line-height: 1.4em; | |
font-size: 16px; | |
padding: 10px 20px; | |
box-sizing: border-box; | |
background-color: #bf40bf; | |
color: white; | |
} | |
@media (max-device-width: 1000px) { | |
.text-divider { | |
font-size: 12px; | |
height: 2em; | |
line-height: 1.5em; | |
} | |
.explainer { | |
font-size: 12px; | |
} | |
} | |
.my-map { | |
height: 40vh; | |
width: 80%; | |
margin: 0 19% 0 0%; | |
} | |
</style> | |
<script src="http://js.arcgis.com/3.19/"></script> | |
<script> | |
var maps = []; | |
var canvasCounter = 0; | |
var lostCounter = 0; | |
var timeoutSeconds = 3; | |
require([ | |
'esri/arcgis/utils', | |
'esri/geometry/Extent', | |
'esri/tasks/query', | |
'esri/geometry/Point', | |
'dojo/on' | |
], function(arcgisUtils, Extent, Query, Point, dojoOn) { | |
var medias = [{ | |
type: 'webmap', | |
id: '26e7bf668ba943c0bc63f7a38259a6ca', | |
popup: { | |
layerId: 'NBI_by_county_state_and_zip_9351', | |
fieldName: 'OBJECTID_1', | |
fieldValue: 651, | |
anchorPoint: { | |
'x': -10688954.731145648, | |
'y': 4949964.179031948, | |
'spatialReference': { | |
'wkid': 102100 | |
} | |
} | |
} | |
}, { | |
type: 'webmap', | |
id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6', | |
layers: ['National_Bridge_Inventory_2013_3794'], | |
options: { | |
mapOptions: { | |
extent: new Extent({ | |
'xmin': -9111324.08957585, | |
'ymin': 3524642.291722416, | |
'xmax': -9055983.681097455, | |
'ymax': 3561561.3763841065, | |
'spatialReference': { | |
'wkid': 102100 | |
} | |
}) | |
} | |
}, | |
popup: { | |
'layerId': 'National_Bridge_Inventory_2013_3794', | |
'fieldName': 'OBJECTID', | |
'fieldValue': 84243, | |
'anchorPoint': { | |
'x': -9088507.636632755, | |
'y': 3542948.959996691, | |
'spatialReference': { | |
'wkid': 102100 | |
} | |
} | |
} | |
}, { | |
type: 'webmap', | |
id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6', | |
layers: ['USA_States_Generalized_4441', 'Bad_roads_2295_6768', 'Bad_roads_2295'] | |
}, { | |
type: 'webmap', | |
id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6', | |
layers: ['ShipRoutes_7525', 'World_Ocean_Reference_5411', 'World_Ocean_Base_988', 'featColl_4094_3304_0'], | |
popup: { | |
'layerId': 'featColl_4094_3304_0', | |
'fieldName': 'FID', | |
'fieldValue': 3, | |
'anchorPoint': { | |
'x': -8146874.841023788, | |
'y': 5035188.716466351, | |
'spatialReference': { | |
'wkid': 102100 | |
} | |
} | |
} | |
}, { | |
type: 'webmap', | |
id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6', | |
layers: ['Airports_Cargo_Passengers_3360'], | |
popup: { | |
'layerId': 'Airports_Cargo_Passengers_3360', | |
'fieldName': 'FID', | |
'fieldValue': 123, | |
'anchorPoint': { | |
'x': -9389440.912738346, | |
'y': 3949169.5451040464, | |
'spatialReference': { | |
'wkid': 102100 | |
} | |
} | |
} | |
}]; | |
$('.timeout-seconds').text(timeoutSeconds); | |
medias.forEach(function(media, i) { | |
setTimeout(function() { | |
loadWebmap(media, i); | |
}, timeoutSeconds * 1000 * i); | |
}); | |
function loadWebmap(media, i) { | |
setLoadingText(i); | |
arcgisUtils.createMap(media.id, 'map' + i, media.options || null).then(function(response) { | |
resetCurrentlyLoadingCounters(i); | |
var map = response.map; | |
maps.push(map); | |
configureMapLayers(media.layers, map); | |
dojoOn.once(map, 'update-end', function() { | |
setCanvasListeners(map.container); | |
}); | |
if (media.popup) { | |
showPopup(map, media.popup); | |
} | |
}); | |
} | |
function configureMapLayers(layerIds, map) { | |
if (layerIds) { | |
layerIds.forEach(function(lyrId) { | |
setLayerVisible(map, lyrId); | |
}); | |
} | |
} | |
function setLayerVisible(map, lyrId) { | |
var lyr = map.getLayer(lyrId); | |
if (lyr) { | |
lyr.setVisibility(true); | |
} | |
} | |
function showPopup(map, popupOptions) { | |
var lyr = map.getLayer(popupOptions.layerId); | |
if (lyr) { | |
var q = new Query(); | |
if (popupOptions.fieldName === lyr.objectIdField && lyr.graphics.length) { | |
q.objectIds = [popupOptions.fieldValue]; | |
} else { | |
q.where = popupOptions.fieldName + ' = ' + popupOptions.fieldValue; | |
} | |
q.outFields = ['*']; | |
lyr.queryFeatures(q, function(featureSet) { | |
if (!featureSet.features.length) { | |
console.debug(lyr, q, map); | |
} | |
map.infoWindow.setFeatures(featureSet.features); | |
map.infoWindow.show(new Point(popupOptions.anchorPoint)); | |
}, function(err) { | |
console.debug(err, lyr, q, map); | |
}); | |
} else { | |
console.debug('no layer?!?', popupOptions); | |
} | |
} | |
function setLoadingText(i) { | |
$('.text-divider').css('background-color', 'dodgerblue'); | |
var oldLoading = $('.currently-loading').first().text().trim(); | |
var newText = ' ' + i; | |
$('.currently-loading').text(oldLoading + newText); | |
} | |
function resetCurrentlyLoadingCounters(i) { | |
var oldLoading = $('.currently-loading').first().text(); | |
var newText = oldLoading.replace(new RegExp(i, 'g'), ''); | |
$('.currently-loading').text(newText); | |
if (!newText.trim()) { | |
$('.text-divider').css('background-color', 'gray'); | |
} | |
} | |
function setCanvasListeners(mapContainer) { | |
$(mapContainer).find('canvas').each(function(i, canvas) { | |
$('.canvas-counter').html(++canvasCounter); | |
$(canvas).on('webglcontextlost', function() { | |
$('.lost-counter').html(++lostCounter); | |
console.debug('webglcontextlost'); | |
}); | |
}); | |
} | |
}); | |
</script> | |
</head> | |
<body> | |
<div class="explainer"> | |
(Blue divider backgrounds mean a webmap is currently loading.) | |
This app loads one non-VTL webmap and then a different webmap with 8 VTL's four times, at <span class="timeout-seconds"></span> second intervals, with different layers visible | |
and a popup on a particular feature. | |
There are no listeners or timeouts or waiting for events happening.<br> | |
This crashes iOS Safari pretty consistently -- about 1/3 of the time. | |
</div> | |
<div class="text-divider"> | |
<table> | |
<tr> | |
<td>Map 0 below</td> | |
<td>Canvases: <span class="canvas-counter"></span></td> | |
<td>Lost: <span class="lost-counter"></span></td> | |
<td>Loading index: <span class="currently-loading"></span></td> | |
<td>Waiting indices: <span class="currently-waiting"></span></td> | |
</tr> | |
</table> | |
</div> | |
<div id="map0" class="my-map"></div> | |
<div class="text-divider"> | |
<table> | |
<tr> | |
<td>Map 0 below</td> | |
<td>Canvases: <span class="canvas-counter"></span></td> | |
<td>Lost: <span class="lost-counter"></span></td> | |
<td>Loading index: <span class="currently-loading"></span></td> | |
<td>Waiting indices: <span class="currently-waiting"></span></td> | |
</tr> | |
</table> | |
</div> | |
<div id="map1" class="my-map"></div> | |
<div class="text-divider"> | |
<table> | |
<tr> | |
<td>Map 0 below</td> | |
<td>Canvases: <span class="canvas-counter"></span></td> | |
<td>Lost: <span class="lost-counter"></span></td> | |
<td>Loading index: <span class="currently-loading"></span></td> | |
<td>Waiting indices: <span class="currently-waiting"></span></td> | |
</tr> | |
</table> | |
</div> | |
<div id="map2" class="my-map"></div> | |
<div class="text-divider"> | |
<table> | |
<tr> | |
<td>Map 0 below</td> | |
<td>Canvases: <span class="canvas-counter"></span></td> | |
<td>Lost: <span class="lost-counter"></span></td> | |
<td>Loading index: <span class="currently-loading"></span></td> | |
<td>Waiting indices: <span class="currently-waiting"></span></td> | |
</tr> | |
</table> | |
</div> | |
<div id="map3" class="my-map"></div> | |
<div class="text-divider"> | |
<table> | |
<tr> | |
<td>Map 0 below</td> | |
<td>Canvases: <span class="canvas-counter"></span></td> | |
<td>Lost: <span class="lost-counter"></span></td> | |
<td>Loading index: <span class="currently-loading"></span></td> | |
<td>Waiting indices: <span class="currently-waiting"></span></td> | |
</tr> | |
</table> | |
</div> | |
<div id="map4" class="my-map"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment