What event to tell that an imageMapLayer is refreshed clear when zoom in an map

[aliceFAN2017]

• Browser and version:

ie: Chrome 51, IE11

• Version of Leaflet (L.version):

0.7.7, 1.0.0?

• Version of esri Leaflet (L.esri.VERSION):

1.0.4, 2.0.3, master?

Steps to reproduce the error:

1. first do this Get different thumbnails first for a location, then add it to a basemap when user clicks on one of the thumbnails through esri-leaflet.
2. then do this Below is the code to add the selected thumbnail to basemap. addSelectedImageOnMap(imageInfo) { const crossIcon = L.icon({ iconUrl: '../../../assets/marker_plus.png', iconSize: [25, 25] }); if (this.leafletMap.hasLayer(this.currentMarker)) { this.leafletMap.removeLayer(this.currentMarker); } this.currentMarker = L.marker(imageInfo.latlng, { icon: crossIcon }); this.currentMarker.addTo(this.leafletMap); if (this.leafletMap.hasLayer(this.currentSatelliteImage)) { this.leafletMap.removeLayer(this.currentSatelliteImage); } const renderingRule = { 'rasterFunction': imageInfo.rasterFunction }; let mosaicRule = { 'mosaicMethod': 'esriMosaicLockRaster', 'lockRasterIds': [imageInfo.objectid], 'where': 'CloudCover=' + imageInfo.cloudcover }; if (imageInfo.SensorName === 'Sentinel 2A') { mosaicRule = { 'mosaicMethod': 'esriMosaicLockRaster', 'lockRasterIds': [imageInfo.objectid], 'where': 'cloudcover=' + imageInfo.cloudcover }; } const imageURL = imageInfo.thumbnail; const idx1 = imageURL.indexOf('/exportImage'); const idx2 = imageURL.indexOf('token='); const idx3 = imageURL.indexOf('&bbox'); const url = imageURL.substring(0, idx1); const d = imageInfo.acquisitiondate; if (idx2 !== -1) { const token = imageURL.substring(idx2 + 6, idx3); this.currentSatelliteImage = esri.imageMapLayer({ url: url, mosaicRule: mosaicRule, renderingRule: renderingRule, token: token, noDataInterpretation: 'esriNoDataMatchAny', pixelType: imageInfo.pixelType, to: d, from: d }).addTo(this.leafletMap); } else { this.currentSatelliteImage = esri.imageMapLayer({ url: url, mosaicRule: mosaicRule, renderingRule: renderingRule, noDataInterpretation: 'esriNoDataMatchAny', pixelType: imageInfo.pixelType, to: d, from: d }).addTo(this.leafletMap); } this.leafletMap.setView(imageInfo.latlng, 8); }

Now my question is how to detect the image is fully reloaded and can be read clearly when perform zoom in? I tried zoomend, load events, cannot see the expect results. Thank you for help. What happens is [X].

I was expecting [Y].

(if possible, create a jsbin that demonstrates the problem)

• Optional: I'm not using the CDN, I'm loading/bundling the library using:

webpack, browserify, RequireJS?

[jgravois]

Now my question is how to detect the image is fully reloaded and can be read clearly ... I tried zoomend, load events, cannot see the expect results.

load is definitely the event you should be listening for.

https://jsbin.com/jumiwim/1/edit?html,output