Last active
February 17, 2017 22:51
-
-
Save asizer/b4ad49de5cc014c74b102babe51ad20a to your computer and use it in GitHub Desktop.
Simulating loading of 5 webmaps in Cascade, but without popups. This consistently crashes iOS Safari.
This file contains hidden or 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, no popups</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' | |
| }, { | |
| 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() { | |
| 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); | |
| }); | |
| }); | |
| } | |
| 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 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. | |
| 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