Skip to content

Instantly share code, notes, and snippets.

@pmacMaps
Last active July 17, 2018 17:14
Show Gist options
  • Save pmacMaps/12286013705554eeb525ec41f5a987a3 to your computer and use it in GitHub Desktop.
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
<!-- 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">&times;</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 -->
// 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