topic Re: Private shared webmap is not working in ReactJS App. in ArcGIS JavaScript Maps SDK Questions

Private shared webmap is not working in ReactJS App.

TapanPatra1 — Wed, 22 May 2024 14:19:07 GMT

Hi All,

I am using npm @ArcGIS/core and version is 4.27.6 in my ReactJs Application (version 18).
I have an Esri developer account and created a webmap. I use the webmap id to display it in my React app.
If I publish the webmap as public, it works well in my react app, but, if I publish it as private (Owner) then not working.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-un-associations/
The above URL is a sample code by Esri, and the ID is private; it always asks for the username and password popup to access the items. When I use the Esri sample code ID in my ReactJs app, it asking me for a user id and password to login, if I provide the correct credentials then map elements appear correctly.

However, my developer account's private sharing webmap is not working in ReactJS app. Public Shared webmap id is working. (Plain html, css and javascript code also working).

Sharing here my ReactJS code, and please help me how to display my private webmap in my ReactJS app without login popup.

import React, { useEffect, useRef, useState } from "react"; import MapView from "@arcgis/core/views/MapView"; import MyMap from "@arcgis/core/WebMap"; import esriConfig from "@arcgis/core/config"; import "./map/Map.css"; function App() { const theMap = useRef(null); esriConfig.apiKey = "AAPK631c4105f38a407da4ee98fd2ea6a6a5xDYahTe5h9KOpsaHw4JfGhURXrMOgs_iq-a0V9Tn_CwjvL94Q8m87Y9CmivczPv8"; useEffect(() => { const view = new MapView({ map: new MyMap({ basemap: 'arcgis-oceans', portalItem: { //id: "471eb0bf37074b1fbb972b1da70fb310" // a private map id by esri sample code. id: "9d9dea828acb4e65aa95baa03f0e1270" // private map id by me. }, }), container: theMap.current, }); }, []); return ( <div> <h1>Esri JS SDK Maps</h1> <div className="theMap" ref={theMap}></div> </div> ); } export default App;

Below are my private webmap

Re: Private shared webmap is not working in ReactJS App.

ReneRubalcava — Wed, 22 May 2024 15:56:05 GMT

You will need to add some authentication to your application. In the documentation there is a section in the table of contents you can refer to.

https://developers.arcgis.com/javascript/latest/

The links in that dropdown

ArcGIS Org Portals - https://developers.arcgis.com/javascript/latest/arcgis-organization-portals/
Access Secure Resources - https://developers.arcgis.com/javascript/latest/secure-resources/
Tutorial - https://developers.arcgis.com/javascript/latest/tutorials/implement-user-authentication/
Sample - https://developers.arcgis.com/javascript/latest/sample-code/identity-oauth-basic/

Re: Private shared webmap is not working in ReactJS App.

TapanPatra1 — Fri, 07 Jun 2024 06:18:34 GMT

Hi ReneRubalcava,

Thank you for your response; it helped me achieve authentication without a login popup.

---- 😀 ----

I have another feature scenario that I want to implement, but I'm not sure how to proceed. Could you please take a look and share your thoughts ?
How to add a onClick event on cluster image ?

Re: Private shared webmap is not working in ReactJS App.

mazlianamohd_nordin — Tue, 13 Aug 2024 07:39:18 GMT

Hi, can I know how method do you achieve authentication without a login popup?