Esri Leaflet Map Service Loaded to Map Function

esri-leaflet-map-service-load-test.js

// function to handle load event for map services
// See API reference at https://esri.github.io/esri-leaflet/api-reference/services/service.html#events
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 error message window
         // sample text inside this element could be "Warning: One or more layers failed to load on the map!"
         var errorMessageWindow =  document.getElementById('layerErrorModal');
         errorMessageWindow.style.display = 'block';         
      }
   });
}

// Sample layer from Esri REST service
// need to call 'processLoadEvent' function before adding layer to map
var sampleLayer = L.esri.featureLayer({
    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0',
    isLoaded: false
});

// call function to process service loading to map
processLoadEvent(sampleLayer);

// add layer to map
sampleLayer.addTo(map);

// you could optionally tie a map loading screen to the layer's 'isLoaded' property being 'true'

I discuss this function in the context of a live web map app at https://pnmcartodesign.wordpress.com/2018/02/08/esri-map-service-loading-error-events-in-leaflet-js/.