Skip to content

Grayson-Bishop/AzureMapsPCF

Repository files navigation

Canvas App GeoData Search PCF

Why This Control Exists

Geospatial controls are unavailable in Power Apps US Government (including GCC), per Microsoft Learn. So a PCF is required to get a map UX in a Power App in GCC/GCC-H/DOD tenants.

There are already some Azure map controls in the PCF ecosystem, but many are designed primarily around model-driven app patterns or don't provide a clean, canvas-first data contract for table-style Items data. This control is intentionally built for canvas app usage where makers typically pass a table/collection and map columns explicitly.

Azure Maps Authentication Options

For an introduction see https://learn.microsoft.com/en-us/azure/azure-maps/azure-maps-authentication. This control supports two authentication approaches:

  1. Subscription key (simpler, less secure for production)
  2. SAS token URL (recommended for production)
Auth Mode Advantages Disadvantages
Subscription key Fastest setup for dev/test; no extra Azure resources. Key is exposed to client; broader access scope; harder production rotation/governance.
SAS URL (token broker) No key in client; short-lived tokens; centralized policy and control in backend. More setup and moving parts (Function, identity, CORS, ops); higher maintenance overhead.

Note

You could extend this further by wrapping the Azure Function call in a Power Platform custom connector and then sharing the custom connector with your Power Apps makers. The customer connector should output the SAS Token to pass into the PCF. Using a custom connector would hide the Azure Function endpoint from the maker and add another authentization layer (this pcf currently works with an anonymous Azure Function). To learn more about this architecture see https://learn.microsoft.com/en-us/power-platform/architecture/reference-architectures/custom-connector-canvas

SAS URL Azure Architecture (High Level)

When using azureMapsAuthFunctionUrl, the architecture is:

  1. Canvas App + PCF control requests a SAS token from your auth endpoint.
  2. Azure Function token broker authenticates to Azure Resource Manager using managed identity.
  3. Function calls Azure Maps management API listSas to mint a short-lived token.
  4. Function returns token payload to the PCF control.
  5. PCF initializes Azure Maps Web SDK using SAS auth and the returned token.

Typical Azure resources involved:

How To Use

Prereqs

  1. Premium licensing is required for this control. It uses external services (atlas.microsoft.com / atlas.azure.us), so treat it as a premium canvas app component. See https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview#licensing.
  2. PCF/code components must be allowed in the target environment before the control can be used in Canvas apps. In the Power Platform admin center (PPAC), verify the environment setting that enables code components for canvas apps. See https://learn.microsoft.com/en-us/power-apps/developer/component-framework/component-framework-for-canvas-apps#prerequisites

Part 1: Install the solution zip

  1. Open the Power Apps maker portal.
  2. Go to Solutions.
  3. Select Import solution.
  4. Upload AzureMapPCF/bin/Release/AzureMapPCF_#-#-#-#.zip and complete the import.

Part 2: Choose and set up authentication

  1. Create an Azure Maps resource
  2. Choose one auth mode:

Option A: Subscription key

  • Retrieve a subscription key (Primary or Secondary).
  • Pass that key to subscriptionKey.
  • Use for dev/test or low-risk scenarios.

Option B: SAS URL (recommended)

  • Deploy an auth endpoint (for example Azure Function) that returns a SAS token payload.
  • Configure azureMapsAuthFunctionUrl with that endpoint.
  • Leave subscriptionKey empty when using SAS URL mode.

Part 3: Configure the control in your Canvas app

The control expects a bound dataset (PCF DataSet input) and a small set of additional PCF property values.

Each row in the dataset should represent one location. Rows with missing or non-numeric latitude/longitude are ignored. recordIdColumn should be unique per row to avoid ambiguous selection behavior. The dataset should map these columns:

Property Required Datatype Notes
recordIdColumn Yes Text/Guid/Number (string-convertible unique id) Used as the stable identity for each pin and for selection sync/output (selectedRecordId).
latitudeColumn Yes Decimal number Valid range is -90 to 90.
longitudeColumn Yes Decimal number Valid range is -180 to 180.
titleColumn No Text Label shown in pin UI (tooltip/popup).

Other Property Values:

Property Direction Required Datatype Notes
subscriptionKey Input Conditional Text Use for subscription-key auth mode. Leave empty when using azureMapsAuthFunctionUrl.
azureMapsAuthFunctionUrl Input Conditional Text URL of your token broker endpoint that returns Azure Maps SAS token payload. Leave empty when using subscriptionKey.
mapDomain Input No Text Azure Maps domain host. Use atlas.microsoft.com (Azure Commercial / GCC) or atlas.azure.us (Azure Government / GCCH, DOD).
mapStyle Input No Text Default Azure Maps style name, see docs for supported options
activeRecordId Input No Text Record id to force-highlight/center from the canvas app side.
selectedRecordId Output No Text Record id emitted when a user clicks a map point.

Auth configuration rule:

  • Provide exactly one of subscriptionKey or azureMapsAuthFunctionUrl.

Note

This PCF expects a bound dataset with mapped recordIdColumn, latitudeColumn, longitudeColumn, and optional titleColumn (for pin labels/popups). If your source data does not have clean coordinates, you can extend this pattern with keyword-to-coordinate lookup using Azure Maps Fuzzy Search.

Canvas App Dataset Terminology

In canvas app terms, think of the input as a table (the same conceptual shape used by a control's Items property):

  • A dataset is a table.
  • Each row is a record.
  • Each mapped column points to a field in that record.

Example logical shape:

Table(
  { recordId: "A-1001", latitude: 47.6101, longitude: -122.2015, title: "Seattle HQ" },
  { recordId: "A-1002", latitude: 37.7749, longitude: -122.4194, title: "San Francisco" }
)

Set each mapping property by typing the source column name as a string value (for example, "Latitude", "Longitude", "AccountId"). These mapping properties are not shown in the standard properties pane for the control. Use the property picker/search, find the PCF mapping property name, and enter the column name string there.

Runtime Features

  • Azure Maps pin rendering from dataset rows
  • Point hover popups and click output (selectedRecordId)
  • In-map Style picker control
  • In-map clustering toggle (on by default)
  • In-map force re-focus on dataset button
  • In-map zoom control
  • Selection sync support via input/output record ids

About

A Power Apps PCF control to render an Azure Map inside a Canvas App

Resources

License

Stars

Watchers

Forks

Contributors