Last active
July 17, 2018 17:14
-
-
Save pmacMaps/12286013705554eeb525ec41f5a987a3 to your computer and use it in GitHub Desktop.
Add error message to Leaflet.js web map if an Esri service fails to load
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
<!-- error message modal --> | |
<div class="modal fade" id="layerErrorModal" tabindex="-1" role="dialog" aria-labelledby="layerErrorModal" aria-hidden="true"> | |
<div class="modal-dialog"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h4 class="modal-title" id="myModalLabel">Error Adding Layers</h4> | |
</div> | |
<div id="erMsg" class="modal-body"> | |
<h4 class="text-danger">Warning: One or more layers failed to load on the map!</h4> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
</div> | |
</div> <!-- /.modal-content --> | |
</div> <!-- /.modal-dialog --> | |
</div> <!-- /.modal --> | |
<!-- / Error message info window --> |
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
// Libraries assumed in snippet | |
// 1. jQuery | |
// 2. Bootstrap | |
// 3. Leaflet | |
// 4. Esri Leaflet | |
// function to handle load event for map services | |
function processLoadEvent(service) { | |
// service request success event | |
service.on('requestsuccess', function(e) { | |
// set isLoaded property to true | |
service.options.isLoaded = true; | |
}); | |
// request error event | |
service.on('requesterror', function(e) { | |
// if the error url matches the url for the map service, display error messages | |
// without this logic, various urls related to the service appear | |
if (e.url == service.options.url) { | |
// set isLoaded property to false | |
service.options.isLoaded = false; | |
// add warning messages to console | |
console.warn('Layer failed to load: ' + service.options.url); | |
console.warn('Code: ' + e.code + '; Message: ' + e.message); | |
// show modal window | |
$('#layerErrorModal').modal('show'); | |
} | |
}); | |
} | |
// create a layer from an Esri web service | |
var mapService = L.esri.featureLayer({ | |
url: '[doman]/arcgis/rest/MyMapService/0', | |
isLoaded: false | |
}); | |
// call function to process loading | |
processLoadEvent(mapService); | |
// add layer to map | |
mapService.addTo(map); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment