basemap value for National Geographic Style basemap

[CharlesGeiger]

I am trying to use the National Geographic Style basemap in a JavaScript-coded webpage. The only value for the basemap property listed on https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html gives the property value of "national-geographic" and then says that this is the deprecated version. It provides a link to the ArcGIS.com page hosting the updated version of the map, National Geographic Style. However, no matter how far I dig I cannot see what value to use for that updated "basemap" property." I have tried several variations on "national-geographic" but none have worked. Any ideas?

[AnneFitz · Accepted solution]

Hi @CharlesGeiger - the map.basemap property can either autocast from a string or the Basemap class. Using the Basemap class instead of the string, you can bring that National Geographic webmap into your basemap through the portal item id: 

const map = new Map({
  basemap: { // autocasts as new Basemap()
    portalItem: {
      // id of the National Geographic WebMap
      id: "f33a34de3a294590ab48f246e99958c9"
    }
  }
});

[CharlesGeiger]

Thanks to AnneFitz and UndralBatsukh both. The solutions worked, though they do generate a bunch of font errors in the console.

[UndralBatsukh · Accepted solution]

Hi there, 

The Map SDK document gives the link to the new National geographic basemap: https://www.arcgis.com/home/item.html?id=f33a34de3a294590ab48f246e99958c9

The API allows users to add basemaps by choosing one of the named basemaps (shortcut). The name must exist in the table. Since the new version is not listed in the table you cannot add it by trying different names.

So you have to add the basemap from the portalItem. The Map.basemap either accepts string (must come from the named table list) or a Basemap. If you click on the basemap link  then the SDK document for the basemap shows many different ways of setting up a basemap for your map. 

For the case of national geographic basemap, you do the following.

const map = new Map({
  basemap: new Basemap({
    portalItem: {
      id: "f33a34de3a294590ab48f246e99958c9"
    }
  })
});