topic Re: No Map Shows If I Modify the Basemap on Esri-React-Boot in ArcGIS JavaScript Maps SDK Questions

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

developerarce — Fri, 29 Jan 2021 21:28:37 GMT

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.

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

Anonymous User — Sat, 30 Jan 2021 15:30:04 GMT

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?

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

developerarce — Tue, 02 Feb 2021 19:32:55 GMT

Thank you very much.

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

coryeicher — Fri, 04 Feb 2022 17:48:42 GMT

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?

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

coryeicher — Mon, 07 Feb 2022 19:26:41 GMT

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