Hi,
I am trying to load a layer that has different SpatialReference of mapview. I know I need to project it to the new coordinates but i would expect getting an error when trying to add the layer to the map but that is not the case, i get nothing instead and i can't know that the layer couldn't add.
I added a code the reproduce the issue, you will see that view.when and view.whenLayerView are not being called but also their errorCallback/exception handling do not execute.
Is there any way to know that a layer view or a view failed to create?
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
MapImageLayer - Wrong spatialReference
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.22/"></script>
<script>
/*****************************************************************
*demo code loading service with incorrect spatialReference, result- the layer is loaded but view.when() and view.whenLayerView() are not being triggerd
*and there are no errors
*****************************************************************/
require(["esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/widgets/Expand",
"esri/geometry/SpatialReference"], (
Map,
MapView,
MapImageLayer,
LayerList,
Expand,
SpatialReference
) => {
const layer = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"
});
const map = new Map({
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
spatialReference: new SpatialReference({ wkid: 102100 }),
zoom: 3
});
const layerList = new LayerList({
view: view
});
const layersExpand = new Expand({
view: view,
content: layerList,
expandIconClass: "esri-icon-layers",
id: "expandWidget"
});
view.ui.add(layersExpand, "top-right");
layer.when(() => {
console.log('layer loaded')
},
() => {
console.log('failed to load layer')
});
/*****************************************************************
*layer was loaded but this is not getting called and no error callback
*****************************************************************/
view.when(() => {
console.log('view is ready')
}, ()=> {
console.log('view error')
});
/*****************************************************************
* layer view is not created here and we do not get any error
*****************************************************************/
view.whenLayerView(layer)
.then(function (layerView) {
console.log('layer view created')
})
.catch(function (error) {
console.log('creating layer view failed')
});
});
</script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 60px;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
