Map Component using custom Basemap

[ForrestLin]

Where can I find an example for Map Component using custom Basemap?

Thanks.

Forrest

[ReneRubalcava]

There's a couple of ways you could do this.

1. Create a custom basemap and assign it to element.map.basemap.
2. Create a map with custom basemap and assign the map the element.map

Here is a demo with second option. It's really a preference on your part.

https://codepen.io/odoe/pen/emYPBBB?editors=1000

const ArcGISMap = await $arcgis.import("@arcgis/core/Map.js");
const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js");
const Basemap = await $arcgis.import("@arcgis/core/Basemap.js");
const mapBaseLayer = new VectorTileLayer({
  url: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/resources/styles/root.json"
});

const customBasemap = new Basemap({
  baseLayers: [mapBaseLayer],
  title: "Terrain",
  id: "terrain",
  thumbnailUrl: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/info/thumbnail/ago_downloaded.png"
});

const sceneElement = document.querySelector("arcgis-scene");
await sceneElement.componentOnReady();
sceneElement.map.basemap = customBasemap;

[ForrestLin]

@ReneRubalcava 

Thank you! 

I use Angular. Should I put element.map.basemap = customBasemap in event? like:

  arcgisViewReadyChange(event: HTMLArcgisMapElement["arcgisViewReadyChange"]) {

    const element = event.target;

    element.map.basemap = customBasemap

  }

Forrest