You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/planetary-computer/build-web-application.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,9 +13,9 @@ ms.date: 12/08/2024
13
13
14
14
# Quickstart: Build a web application with Microsoft Planetary Computer Pro
15
15
16
-
In this quickstart, you build a web application that displays satellite imagery and geospatial data from your GeoCatalog on an interactive map. You'll authenticate users with Microsoft Entra ID, query STAC collections, and render map tiles—all from browser JavaScript.
16
+
In this quickstart, you build a web application that displays satellite imagery and geospatial data from your GeoCatalog on an interactive map. You authenticate users with Microsoft Entra ID, query STAC collections, and render map tiles—all from browser JavaScript.
17
17
18
-
**What you'll learn:**
18
+
**What you learn:**
19
19
20
20
- Authenticate users and acquire access tokens using MSAL.js
21
21
- Query the STAC API to discover collections and items
@@ -68,7 +68,7 @@ Before your web application can authenticate users, you need to register it in M
68
68
69
69
### Register as a single-page application
70
70
71
-
1. Go to **Microsoft Entra ID** in the Azure Portal.
71
+
1. Go to **Microsoft Entra ID** in the Azure portal.
72
72
1. Select **App registrations** from the side panel.
73
73
1. Select **New registration**.
74
74
1. Enter a name for your application (for example, "GeoCatalog Web App").
> **Project structure:** The code samples in this quickstart are standalone functions you can organize however you prefer. A common pattern:
117
-
> -`auth.js` — MSAL configuration and token functions
118
-
> -`api.js` — STAC API, Tiler API, and SAS token functions
119
-
> -`map.js` — MapLibre initialization and tile layer management
120
-
> -`App.js` or `main.js` — Wire everything together with your UI
117
+
> -`auth.js`: MSAL configuration and token functions
118
+
> -`api.js`: STAC API, Tiler API, and SAS token functions
119
+
> -`map.js`: MapLibre initialization and tile layer management
120
+
> -`App.js` or `main.js`: Wire everything together with your UI
121
121
>
122
122
> Each function receives its dependencies (access tokens, URLs) as parameters, making them easy to integrate into any framework or project structure.
123
123
@@ -643,7 +643,7 @@ Handle common error scenarios:
643
643
| "Invalid scope" error | Using GeoCatalog URL instead of API scope | Use `https://geocatalog.spatio.azure.com/.default` as the scope |
644
644
| 401 Unauthorized on tile requests | Map library not including auth headers | Use `transformRequest` (MapLibre) to add the Bearer token; ensure token is current |
645
645
| Tiles don't align with basemap | Wrong tile matrix set | Use `tileMatrixSetId=WebMercatorQuad` for Web Mercator projection (EPSG:3857) |
646
-
| "Could not decode image" | Wrong asset name, multiband imagery, or outside data extent | Check `item_assets` for valid names; use `asset_bidx=image\|1,2,3` for RGB; 404/424 outside coverage is expected |
646
+
| "Couldn't decode image" | Wrong asset name, multiband imagery, or outside data extent | Check `item_assets` for valid names; use `asset_bidx=image\|1,2,3` for RGB; 404/424 outside coverage is expected |
0 commit comments