Not able to display map using Map from react-map-gl after added Auth through CLI.

[el-devgit]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication, Geo

Amplify Categories

geo

Environment information

# Put output below this line
 System:
    OS: Windows 10 10.0.17763
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Memory: 2.17 GB / 7.88 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 106.0.5249.119
    Edge: Spartan (44.17763.831.0)
    Internet Explorer: 11.0.17763.771
  npmPackages:
    @aws-amplify/ui-react: ^3.5.1 => 3.5.1
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-legacy:  undefined ()
    @emailjs/browser: ^3.7.0 => 3.7.0
    @emotion/react: ^11.10.4 => 11.10.4
    @emotion/styled: ^11.10.4 => 11.10.4
    @fontsource/roboto: ^4.5.8 => 4.5.8
    @mapbox/mapbox-gl-style-spec:  13.18.0-dev
    @mui/icons-material: ^5.10.9 => 5.10.9
    @mui/material: ^5.10.9 => 5.10.9
    @mui/x-data-grid: ^5.17.2 => 5.17.2
    @testing-library/jest-dom: ^5.16.5 => 5.16.5
    @testing-library/react: ^13.4.0 => 13.4.0
    @testing-library/user-event: ^13.5.0 => 13.5.0
    aws-sdk: ^2.1224.0 => 2.1224.0
    mapbox-gl: ^1.13.1 => 1.13.1
    react: ^18.2.0 => 18.2.0 (18.1.0)
    react-dom: ^18.2.0 => 18.2.0
    react-map-gl: ^7.0.15 => 7.0.15
    react-router-dom: ^6.4.0 => 6.4.0
    react-scripts: ^5.0.1 => 5.0.1
    web-vitals: ^2.1.4 => 2.1.4
  npmGlobalPackages:
    @aws-amplify/cli: 10.3.1
    @aws-amplify/datastore: 3.12.10
    npm: 8.19.2
    serve: 14.0.1

Describe the bug

I had React Map component working using IdentityPool and map resources in Oregon. My region is in CA. But CA does not support map, thus the divergence. Anyway, I have every thing working using the react Map component.

However after I added auth through CLI, of course, it created the user pool and identity pool in Oregon. The access to the map resource is denied. I tried to tie the user pool to my initial identity pool with no success.

Anything I can do to have the access to the Map resource and with auth?

Another question, does Mapview from Amazon support {Source} and {Layer} from react-map-gl? If so I may switch to use Mapview.

Expected behavior

Access to Map resource in Oregon should be granted after auth addition.

Reproduction steps

1 create Map resources, identity pool in Oregon, define the permission for unauth users
2 manually configure Auth:

**Amplify.configure({
Auth: {
identityPoolId: IDENTITY_POOL_ID, // REQUIRED - Amazon Cognito Identity Pool ID
region: REGION, // REQUIRED - Amazon Cognito Region
},
geo: {
AmazonLocationService: {
maps: {
items: {
[MAP.NAME]: {
// REQUIRED - Amazon Location Service Map resource name
style: [MAP.STYLE], // REQUIRED - String representing the style of map resource
},
},
default: [MAP.NAME], // REQUIRED - Amazon Location Service Map resource name to set as default
},
region: REGION, // REQUIRED - Amazon Location Service Region
},
},
});**

3. get credentials : const credentials = await Auth.currentUserCredentials() to access the location service.

After add the auth, I believe #3 failed.

Code Snippet

// Put your code below this line.
<Map
                        initialViewState={{
                            longitude: resortInfo.lng,
                            latitude: resortInfo.lat,
                            zoom: 17,
                        }}
                        // mapLib={maplibregl}
                        mapStyle={geoConfig.mapName[0]}
                        style={styleProps}
                        transformRequest={transformRequest}
                        onClick={handleClick}
                        interactiveLayerIds={["points"]} // 'points' layer from clusters to have a pointer cursor when hovered
                        attributionControl={false} // We are using the AttributionControl component instead to add custom attribution
                    >
                        <Marker longitude={resortInfo.lng} latitude={resortInfo.lat} anchor="bottom" >
                            <img src="/pin.png" alt="pin" />
                        </Marker>
                        <NavigationControl
                            showCompass={false}
                            style={{ left: 20, top: 20 }}
                        />
                        <AttributionControl
                            compact={true}
                            style={attributionStyle}
                            customAttribution="0-3, red; 3-8, yellow; above 8, green for one user/one device"
                        />
                        <ClustersFeature wifis={resortInfo.wifis.items} />
                        {popup && (
                            <LocationPopup popupData={popup} onPopupClose={() => setPopup()} />
                        )}
                    </Map>

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[el-devgit]

Just did a really simple test case.

Have my primary region in CA, then add auth and geo. Geo MapView will not work.

[jeff-accountably]

I am having the same issue. Deployed in CA region, I can see the location map gets deployed into US-east-1 and the awsconfig.js has the correct information.

 "geo": {
        "amazon_location_service": {
            "region": "us-east-1",
            "maps": {
                "items": {
                    "mapbea76632-dev": {
                        "style": "VectorEsriStreets"
                    }
                },
                "default": "mapbea76632-dev"
            }
        }
    }

It actually does work properly when running from localhost, but after deployment it doesn't work from my domain.