Update azmaps access token location (#464)

* Use data endpoint for map config

The map config for azmaps key has been moved to a DATA_URL endpoint.
Also adds a loading indicator as this could create some latency between
page load and map load.

* Update workflow build configuration

Remove unused keys from build and allow comments from workflows to get
staging URL links.

* Update perm key

GH docs listed _ when - was required.

* Switch back to compose env settings

.env is not checked in. Removes AZMAPS_KEY

* Use auth method for inset map

* Format

* Set azmaps client id during ci build

.env.sample

@@ -11,10 +11,10 @@ REACT_APP_ONEDS_TENANT_KEY=
 REACT_APP_API_ROOT=https://planetarycomputer-staging.microsoft.com
 
 # Root URL for image function app endpoints
-REACT_APP_IMAGE_API_ROOT=
+REACT_APP_IMAGE_API_ROOT=https://planetarycomputer-staging.microsoft.com/api/f
 
 # Client Id for Azure Maps
-REACT_APP_AZMAPS_CLIENT_ID=0ba71e87-2836-4f72-82b8-8093147375c7
+REACT_APP_AZMAPS_CLIENT_ID=8f49b6d6-5845-4e20-9015-9630df1ca8d2
 
 # URL for JHub cloned repo launch (including 'git-pull')
 REACT_APP_HUB_URL=

.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml

@@ -11,6 +11,8 @@ on:
 
 jobs:
   build_and_deploy_job:
+    permissions:
+      pull-requests: write
     environment: staging
     if:
       github.event_name == 'push' || (github.event_name == 'pull_request' &&
@@ -20,10 +22,9 @@ jobs:
     env:
       REACT_APP_API_ROOT: ${{ secrets.API_ROOT }}
       REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }}
+      REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }}
       REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }}
-      REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }}
       REACT_APP_HUB_URL: ${{ secrets.HUB_URL }}
-      REACT_APP_AUTH_URL: ${{ secrets.AUTH_URL }}
     steps:
       - uses: actions/checkout@v3
         with:

.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml

@@ -11,6 +11,8 @@ on:
 
 jobs:
   build_and_deploy_job:
+    permissions:
+      pull-requests: write
     environment: production
     if:
       github.event_name == 'push' || (github.event_name == 'pull_request' &&
@@ -20,9 +22,8 @@ jobs:
     env:
       REACT_APP_API_ROOT: ${{ secrets.API_ROOT }}
       REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }}
-      REACT_APP_JSLL_APP_ID: ${{ secrets.JSLL_APP_ID }}
+      REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }}
       REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }}
-      REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }}
       REACT_APP_HUB_URL: ${{ secrets.HUB_URL }}
     steps:
       - uses: actions/checkout@v3

.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml

@@ -11,6 +11,8 @@ on:
 
 jobs:
   build_and_deploy_job:
+    permissions:
+      pull-requests: write
     environment: test
     if:
       github.event_name == 'push' || (github.event_name == 'pull_request' &&
@@ -20,10 +22,9 @@ jobs:
     env:
       REACT_APP_API_ROOT: ${{ secrets.API_ROOT }}
       REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }}
+      REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }}
       REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }}
-      REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }}
       REACT_APP_HUB_URL: ${{ secrets.HUB_URL }}
-      REACT_APP_AUTH_URL: ${{ secrets.AUTH_URL }}
     steps:
       - uses: actions/checkout@v3
         with:

docker-compose.yml

@@ -14,7 +14,7 @@ services:
       # environment variables set via GH Actions to test and build.
       - REACT_APP_API_ROOT
       - REACT_APP_IMAGE_API_ROOT
-      - REACT_APP_AZMAPS_KEY
+      - REACT_APP_AZMAPS_CLIENT_ID
       - REACT_APP_ONEDS_TENANT_KEY
       - REACT_APP_HUB_URL
     volumes:

src/components/stac/SpatialExtent.js

@@ -2,6 +2,8 @@ import React, { useEffect, useState, useRef } from "react";
 import * as atlas from "azure-maps-control";
 import "azure-maps-control/dist/atlas.min.css";
 import LabeledValue from "../controls/LabeledValue";
+import { AZMAPS_CLIENT_ID } from "utils/constants";
+import { fetchMapToken } from "pages/Explore/components/Map/helpers";
 
 const SpatialExtent = ({ extent }) => {
   const mapRef = useRef();
@@ -85,8 +87,9 @@ const SpatialExtent = ({ extent }) => {
         style: "grayscale_light",
         renderWorldCopies: true, // This setting may need adjustment for showing whole-world bounds
         authOptions: {
-          authType: "subscriptionKey",
-          subscriptionKey: process.env.REACT_APP_AZMAPS_KEY,
+          authType: atlas.AuthenticationType.anonymous,
+          clientId: AZMAPS_CLIENT_ID,
+          getToken: fetchMapToken,
         },
       });
 

src/pages/Explore/components/Map/components/MapReadyIndicator/index.tsx

@@ -0,0 +1,19 @@
+import { Spinner, SpinnerSize } from "@fluentui/react";
+
+interface MapReadyIndicatorProps {
+  isMapReady: boolean;
+}
+
+const MapReadyIndicator: React.FC<MapReadyIndicatorProps> = ({ isMapReady }) => {
+  if (isMapReady) {
+    return null;
+  }
+
+  return (
+    <div style={{ top: "50vh", left: "60vw", zIndex: 1, position: "fixed" }}>
+      <Spinner size={SpinnerSize.large} />
+    </div>
+  );
+};
+
+export default MapReadyIndicator;

src/pages/Explore/components/Map/helpers.ts

@@ -52,7 +52,7 @@ export const fetchMapToken = async (
   // If no valid cached token, fetch a new one
   try {
     const resp = await axios.get<{ token: string; expires_on: number }>(
-      "./api/map-token"
+      `${DATA_URL}/config/map/token`
     );
 
     if (resp.status === 200 && resp.data.token && resp.data.expires_on) {

src/pages/Explore/components/Map/index.tsx

@@ -31,6 +31,7 @@ import { MobileViewSidebarButton } from "../MobileViewInMap/ViewInMap.index";
 import { addEntityHeader, fetchMapToken } from "./helpers";
 import { PreviewMessage } from "./components/ItemPreview/PreviewMessage";
 import { AZMAPS_CLIENT_ID } from "utils/constants";
+import MapReadyIndicator from "./components/MapReadyIndicator";
 
 const mapContainerId: string = "viewer-map";
 
@@ -124,7 +125,7 @@ const ExploreMap = () => {
     <ExtentMessage onClick={zoomToExtent} layerVisibility={nonVisibleLayers} />
   );
 
-  const loadingIndicator = (
+  const tileLoadingIndicator = (
     <ProgressIndicator
       aria-label="Map tile loading indicator"
       barHeight={1}
@@ -137,9 +138,10 @@ const ExploreMap = () => {
 
   return (
     <div className={`explorer-map ${visibilityClass}`} style={mapContainerStyle}>
-      {mapHandlers.areTilesLoading && loadingIndicator}
+      {mapHandlers.areTilesLoading && tileLoadingIndicator}
       {showZoomMsg && zoomMsg}
       {showExtentMsg && extentMsg}
+      <MapReadyIndicator isMapReady={mapReady} />
       <PreviewMessage mapRef={mapRef} />
       <PlaceSearchControl mapRef={mapRef} />
       <MapSettingsControl mapRef={mapRef} />