Arcgis-JS-API 4.10 - Basemapgallery Error

Question

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:

* open widget
* 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

AndryJoos · Answer

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 🙂

SahanFaruk · Answer

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: "Earthdata by NASA", activeLayer: { id: "SRTM_Color_Index" } }); var mapBaseLayer1 = new WMTSLayer({ url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best", copyright: "Earthdata by NASA", 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

BjornSvensson · Answer

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-basemapgallery - even when changing to MapView as your error indicates.

Could you provide a simple sample that shows the problem?