Created
February 17, 2017 22:50
-
-
Save asizer/c58900246ae7892bda9f888b8b3e657d to your computer and use it in GitHub Desktop.
Simulating loading of 5 webmaps in Cascade, and trying to wait for context loss. Occasionally 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>Trying to wait for context recycling</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; | |
var defs = { | |
webGL: [], | |
map: [] | |
}; | |
require([ | |
'esri/arcgis/utils', | |
'esri/geometry/Extent', | |
'esri/tasks/query', | |
'esri/geometry/Point', | |
'dojo/Deferred', | |
'dojo/promise/all', | |
'dojo/on' | |
], function(arcgisUtils, Extent, Query, Point, Deferred, dojoAll, dojoOn) { | |
var medias = [{ | |
type: 'webmap', | |
id: '26e7bf668ba943c0bc63f7a38259a6ca' | |
}, { | |
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 | |
} | |
}) | |
} | |
} | |
}, { | |
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'], | |
}, { | |
type: 'webmap', | |
id: 'e6d5c9a33489482bb7fb6efeb3c0f8d6', | |
layers: ['Airports_Cargo_Passengers_3360'], | |
}]; | |
$('.timeout-seconds').text(timeoutSeconds); | |
medias.forEach(function(media, i) { | |
setTimeout(function() { | |
preloadWebmap(media, i); | |
}, timeoutSeconds * 1000 * i); | |
}); | |
function preloadWebmap(media, i) { | |
var webglCount = defs.webGL.length; | |
setWaitingText(i); | |
dojoAll(defs.webGL).then(function() { | |
if (webglCount !== defs.webGL.length) { | |
preloadWebmap(media, i); | |
} else { | |
loadWebmap(media, i); | |
} | |
}); | |
} | |
function loadWebmap(media, i) { | |
setLoadingText(i); | |
resetCurrentlyWaitingCounters(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); | |
}); | |
}); | |
} | |
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 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 resetCurrentlyWaitingCounters(i) { | |
var oldWaiting = $('.currently-waiting').first().text(); | |
var newText = oldWaiting.replace(new RegExp(i, 'g'), ''); | |
$('.currently-waiting').text(newText); | |
} | |
function setWaitingText(i) { | |
var oldWaiting = $('.currently-waiting').first().text().trim(); | |
var newText = ' ' + i; | |
$('.currently-waiting').text(oldWaiting + newText); | |
} | |
function setCanvasListeners(mapContainer) { | |
$(mapContainer).find('canvas').each(function(i, canvas) { | |
var webglDef = new Deferred(); | |
$('.canvas-counter').html(++canvasCounter); | |
$(canvas).on('webglcontextlost', function() { | |
defs.webGL.push(webglDef); | |
$('.lost-counter').html(++lostCounter); | |
console.debug('webglcontextlost'); | |
setTimeout(function() { | |
webglDef.resolve(); | |
}, 2000); | |
}); | |
}); | |
} | |
}); | |
</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. | |
It waits for 2 seconds after the last webglcontextlost event to load the next webmap. <br> | |
This still occasionally crashes iOS Safari. | |
</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