Arcgis-JS-API 4.10 - Basemapgallery Error

1121
3
01-09-2019 04:45 AM
SahanFaruk
New Contributor

Hi all

We have upgraded our JS-Api from 4.7 to 4.10 , everything works fine, only some issues need to be fixed. But then we realize when starting our app the BaseMap Gallery Widget is not working any more. 

Error happens when doing following steps:

  1. open widget
  2. choose a basemap from the list

Result:

The basemap can not be loaded because of a classic null-pointer

Error from Browser log:

ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'visible' of null
TypeError: Cannot set property 'visible' of null
at Object.<anonymous> (MapView.js:603)
at b.callback (dojo.js:365)
at b.notify (dojo.js:325)
at b.propertyInvalidated (dojo.js:326)
at b.propertyInvalidated (dojo.js:298)
at b.callback (dojo.js:330)
at b.notify (dojo.js:325)
at b.propertyCommitted (dojo.js:327)
at b.propertyCommitted (dojo.js:299)
at b.internalSet (dojo.js:297)
at resolvePromise (zone.js:795)
at zone.js:847
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:503)
at invokeTask (zone.js:1427)
at HTMLLIElement.globalZoneAwareCallback (zone.js:1445)

Does anybody has already met this problem or a similar problem?

regards,

Sahan

0 Kudos
3 Replies
BjornSvensson
Esri Regular Contributor

Hi Sahan,
I can't repro this with the basic sample at https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-basema... - even when changing to MapView as your error indicates.

Could you provide a simple sample that shows the problem?

0 Kudos
SahanFaruk
New Contributor

Hello Bjorn

Thanks for your answer.

Here is the sample code, which produces the error:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>BasemapGallery widget - 4.10</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.10/"></script>
  <script>
    require([
      "esri/Map",
       "esri/Basemap",
      "esri/views/MapView",
      "esri/widgets/BasemapGallery",
       "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
       "esri/layers/WMTSLayer"
    ], function(
      Map, Basemap, MapView, BasemapGallery, LocalBasemapsSource, WMTSLayer
    ) {
     
      var map = new Map();

      var view = new MapView({
        container: "viewDiv",
        map: map
      });

     
     var mapBaseLayer2 = new WMTSLayer({
       url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best",
        copyright: "<a target='_top' href='https://earthdata.nasa.gov'>Earthdata</a> by <a target='_top' href='https://www.nasa.gov'>NASA</a>",
       activeLayer: {
           id: "SRTM_Color_Index"
        
        }
    });
     
     var mapBaseLayer1 = new WMTSLayer({
       url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best",
        copyright: "<a target='_top' href='https://earthdata.nasa.gov'>Earthdata</a> by <a target='_top' href='https://www.nasa.gov'>NASA</a>",
       activeLayer: {
           id: "SRTM_Color_Index"
        
        }
    });
     // Create a Basemap with the WebTileLayer. The thumbnailUrl will be used for
     // the image in the BasemapToggle widget.
     var stamen = new Basemap({
       baseLayers: [ mapBaseLayer2 ],
       title: "test2",
       id: "test2",
       thumbnailUrl: "icon"
     });

     var stamen1 = new Basemap({
       baseLayers: [ mapBaseLayer1 ],
       title: "test",
       id: "test",
       thumbnailUrl: "icon"
     });
      var basemapGallery = new BasemapGallery({
        view: view,
          source: [stamen, stamen1],
          activeBasemap: stamen
      });

      // Add the widget to the top-right corner of the view
      view.ui.add(basemapGallery, {
        position: "top-right"
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

I hope this helps, for reproducing the error. The basemaps in the sample code come from an esri sample. (ArcGIS API for JavaScript Sandbox )

regards

AndryJoos
New Contributor III

This was filed as a bug:

BUG-000119655  - Basemap Gallery Widget errors switching between WMTS basemaps.

If anyone comes up with a workaround (other than using the JS API 4.9) that would be well appreciated 🙂