No Map Shows If I Modify the Basemap on Esri-React-Boot

[developerarce]

I am pretty stuck and do not know what I am doing wrong. I am currently just trying to modify this library from Esri (https://github.com/Esri/esri-react-boot).

It uses OAuth, but you can view the map without having to sign in. However, if I want to modify the basemap config to show arcgis-topographic like the tutorial shows here (https://developers.arcgis.com/javascript/latest/display-a-map/), I do not get any render of the map.

The tutorial uses an API Key, but when using OAuth, you shouldn't need to do anything like that.

Below are the only 2 files I have modified, everything else is the same as in the repo.

config.json

{
  "appVersion": "2.0.0",

  "apiUrl": "api",
  "loginUrl": "api/auth/arcgis",
  "logoutUrl": "api/logout",
  "jsapiUrl": "https://js.arcgis.com/4.17/",
  "jsapiV4": true,

  "clientId": "<hidden>",

  "sessionId": "esri-react-boot_session",

  "mapConfig": {
    "basemap": "arcgis-topographic",
    "center": [-118.805, 34.027],
    "zoom": 13
  }
}

 
package.json

{
  "name": "react-jsapi-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/",
  "dependencies": {
    "@esri/arcgis-rest-auth": "^3.0.0",
    "@esri/arcgis-rest-portal": "^3.0.0",
    "@esri/arcgis-rest-request": "^3.0.0",
    "calcite-react": "^0.44.0",
    "esri-loader": "^2.16.0",
    "framer-motion": "^1.6.18",
    "js-cookie": "^2.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-transition-group": "^4.3.0",
    "redux": "^4.0.4",
    "redux-saga": "^1.1.3",
    "styled-components": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "^3.3.0"
  },
  "browserslist": {
    "development": [
      "last 2 chrome versions",
      "last 2 firefox versions",
      "last 2 edge versions"
    ],

Thank you in advance.

[Anonymous User · Accepted solution]

It looks like there are tiers of what maps are available and 'arcgis-topographic' falls under needing an API key

BaseMap availability 

'topo' is available for use without an API key, but requires a valid ArcGIS Online organizational subscription or an ArcGIS Enterprise license.  Maybe try using that one?

[developerarce]

Thank you very much.

[coryeicher]

I'm actually trying to get an ArcGIS JS + React application to work _with_ an ArcGIS Developer API key (https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#apiKey)

In vanilla JS it is done like this:

    require(["esri/config"],
      function (esriConfig) {

      esriConfig.apiKey = "YOUR_KEY_HERE";

Has anyone cracked this nut?

[coryeicher]

I was able to make this work using '@arcgis/core/config'

import config from '@arcgis/core/config';
// ...
export const webmap = new WebMap({
	portalItem: {
		id: 'abc123' // portal id of your webmap
	  }
});
// ...
config.apiKey = 'YOUR_KEY';

 For example you can add the import after this line...

https://github.com/odoe/jsapi-esm-react/blob/main/src/data/webmap.js#L3

... replace this webmap with your new WebMap here...

https://github.com/odoe/jsapi-esm-react/blob/main/src/data/webmap.js#L17

... and set apiKey after this line...

https://github.com/odoe/jsapi-esm-react/blob/main/src/data/webmap.js#L33