Zoom Buttons don't work

Farerb · ‎03-06-2022

Hello,
I need the Zoom buttons to work even when the coordinate system of a map is different than a coordinate system of a layer.
How can it be done?

Code example:

<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,
          
          scale: 36978595.474472,

          center: [-130, 30]
        });
        
        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(() => {
		     view.spatialReference = new SpatialReference({ wkid: 102100 });
            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>

Thank you.

UndralBatsukh · ‎03-07-2022

Hi there,

So at JS API version 4.22 and previous versions, you cannot change or set the spatialReference of the view after the view is initialized. If you want to set the spatialReference of the view, you must set it in the constructor.

In your code, you are setting the MapView.spatialReference to Web Mercator, so you'd have to update your code as the following:

 const view = new MapView({
   container: "viewDiv",
   map: map,
   scale: 36978595.474472,
   center: [-130, 30],
   spatialReference: {
     wkid: 102100
   }
 });

The MapView will have the MapImageLayer's spatialReference if you do not set it in the constructor. In that case, you'd have to set the MapView.center in the spatialReference of the view as shown below:

 const view = new MapView({
   container: "viewDiv",
   map: map,
   scale: 36978595.474472,
   center: {
     x: -130,
     y: 30, 
     type: "point",
     spatialReference: {
       wkid: 4269
     }
  }
});

At version 4.23, your code will work as is because we are adding a support for switching MapView.spatialReference at runtime.

Hope this helps,

-Undral