Scene can't read Basemap type

[DaoYu]

When I use  '@arcgis/map-components/components/arcgis-scene',

It was nice when set basemap by string,
such as:

<arcgis-scene

basemap="satellite"

ground="world-elevation"

></arcgis-scene>

but it throw error and didn't work when set basemap by Basemap type,

such as:

import Basemap from '@arcgis/core/Basemap';

<arcgis-scene

basemap=Basemap.fromId('satellite'),

ground="world-elevation"

></arcgis-scene>

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.

[MatteoRizzi1]

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. <arcgis-scene basemap="...">) 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) 

<arcgis-scene basemap="satellite"></arcgis-scene>

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. 

[DaoYu]

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 
});

<arcgis-scene
basemap="satellite"
ground="world-elevation"
popup=popup
></arcgis-scene>

 The second things, I want to add a custom basemap. I followed your answer, it worked.

    <arcgis-scene ref={ref} basemap="satellite" ></arcgis-scene>

    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”.

[DaoYu]

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