Map Component using custom Basemap

Question

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

Thanks.

Forrest

ForrestLin · Answer

@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

RRubalcava · Answer

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

* Create a custom basemap and assign it to element.map.basemap.
* 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;