Scene can't read Basemap type

Question

When I use '@arcgis/map-components/components/arcgis-scene', It was nice when set basemap by string, such as: but it throw error and didn't work when set basemap by Basemap type,such as: import Basemap from '@arcgis/core/Basemap'; The Error info:Logger.js:5 [esri.support.basemapUtils] Unable to find basemap definition for: [object Object]. Try one of these: "dark-gray", "dark-gray-3d", "dark-gray-vector", "gray", "gray-3d", "gray-vector", "hybrid", "navigation-3d", "navigation-dark-3d", "oceans", "osm", "osm-3d", "satellite", "streets", "streets-3d", "streets-dark-3d", "streets-navigation-vector", "streets-night-vector", "streets-relief-vector", "streets-vector", "terrain", "topo", "topo-3d", "topo-vector" By the way, I guess it's web-component problem, I test Popup type, it's work. So maybe it's @ArcGIS/map-components bug.

DaoYu · Answer

@ArcGIS/map-components/components/arcgis-basemap-toggle has the same problem.

DaoYu · Answer

Thank you for your reply. I understand the HTML attribute you means. But Popup can work, Basemap can't. What are the differences between the two？They are both strings. const popup = new Popup({ dockEnabled: true, dockOptions: { position: "top-left", breakpoint: false }); The second things, I want to add a custom basemap. I followed your answer, it worked. ref.current.addEventListener('arcgisViewReadyChange', () => { ref.current.basemap = basemap; // my custom basemap }); But you must set basemap="satellite" in HTML fisrtly, I think it should be set my custom basemap directly instead of “satellite”.

MatteoRizzi1 · Answer

Hey @DaoYu, thanks for your question. This behavior doesn't seem to be a bug because, by design of web components, HTML attributes (e.g. ) are limited to string values. On the other side, the same component HTML attribute can be accessed programmatically using it's corresponding JavaScript property which can hold complex data types (e.g. an object like `Basemap`). So, when you attempt to assign a Basemap object to an HTML attribute, the object is considered as "[object Object]" string (as you can see in the error above-mentioned). The scene component then receives this string and tries, unsuccessfully, to find a basemap with that name. The correct approach in your scenario is to use JavaScript to assign Basemap.fromId('satellite') to the component's basemap property after the element has been initialized. HTML (attribute) JavaScript (property) import Basemap from '@arcgis/core/Basemap'; const viewElement = document.querySelector("arcgis-scene"); viewElement.viewOnReady(async () => { viewElement.basemap = Basemap.fromId("satellite"); }); Here you can find a simple CodePen: https://codepen.io/rizmat/pen/GgpwZbK Hope this will help you. If you want to have a better overview of attributes and/or properties of the Scene component, check out the https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/#properties documentation.