Have you ever seen the following map control on Power Apps? Did someone already ask you to integrate a map in your Canvas app? Let’s find out how this control works.

- Prerequesits
- Map Control and Global settings
- Pin location
- Draw routes between points
- Shapes
- Address input control
- Practice and tutorials
1. Prerequesits
1.1. Premium Licence
As you can see, there is a little diamond next to the control name in Power Apps. It means you need a premium licence to use it.
However, if you are just curious about how it works and if you want to learn how to implement it, you can use the developer plan.
1.2. Activate geospatial feature in your environment
This features must be activated to use the map control.
Go to admin.powerplatform.com then select the environment which is going to hold your Canvas app with the map control.
Go to the settings > Products > Features and search for the Map and adress services part.

To process all the parts of this post, you need to turn on the Full version. If you are not using Adress input and route, you can turn on Limited version only.
If you need more information about the geospatial features, you can have a look to the Miscrosoft documentation: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/geospatial-overview
2. Map Control and Global settings
2.1. Default location

When turned on, it set the default location and zoom of your map while loading your app.
Default latitude | Define the default latitude while loading your map. |
Default longitude | Define the default longitude while loading your map. |
Default zoom level | Define the default zoom on your map. High number for zoom in and low number for zoom out. |
2.3. Current Location

When turned on, it is going to add a pin to the current location defined into Current location latitude and current location longitude.

You can use the Location function to get the current user lattitude and longitude.


2.3. Map Look & Feel
Map style

This two first parameters define the template of your map. In Map Style you have multiple style available. You also have Satellite, but keep in mind, if you turn on the Satellite view it is going to force the Satellite template, no matters the value in Map Style dropdown.
Cluster pins

If you turn on Cluster Pins, it will cluster pins that are close together, with the number of pins inside it. If turned off, it is going to represent the point as default. See picture above.
Map controls

The toggle above let you display or hide buttons control on the map.
Compass control | Display or hide compass button. By default, it is north on top. The button let the user to change compass direction. |
Zoom control | Display or hide zoom buttons. Let the user to zoom in and out. |
Pitch control | Dispplay or hide pitch button. Let the user to change Z orientation. |
Info cards


Show info cards, display the selected fields define in fields settings. You can choose to not display it, display it on click or display it on pin hover. Fields comes from Locations(items).
Default pin color

Pin color allows you to define the default Pin color.
3. Pin locations
3.1. Define pin locations
Pin locations can be define in locations(tiems) setting of the map.

It has to be an array of JSON. The JSON itself can be formatted as you wish, because we are going to map our JSON columns later. To put a pin on a map, you need to add for each pin, latitude and longitude or an adress.
Here is an example of my pins locations.
Table( { Name: "Opera House", Latitude: -33.8567799, Longitude: 151.2127218 }, { Name: "Harbour Bridge", Latitude: -33.8523018, Longitude: 151.2082122 }, { Name: "Bondi Beach", Address: "Campbell Parade, Bondi Beach NSW 2026, Australia" } )
Then you need to do mapping, in the map advanced settings, you just need to match as following:
ItemsAddresses | Enter the key value of the adress from your locations JSON |
ItemsLatitudes | Enter the key value of the latitude from your locations JSON |
ItemsLongitudes | Enter the key value of the longitudes from your locations JSON |


3.2. Pin settings (color, icon, labels)
So I have enhanced my pin locations JSON as following:
Table( { Name: "Opera House", Latitude: -33.8567799, Longitude: 151.2127218, Icon : "marker-ball-pin", Color : Color.Gold }, { Name: "Harbour Bridge", Latitude: -33.8523018, Longitude: 151.2082122, Icon : "pin", Color : Color.LightCoral }, { Name: "Bondi Beach", Address: "Campbell Parade, Bondi Beach NSW 2026, Australia", Icon : "flag-triangle", Color : Color.Aqua } )
Pin colors
So now I have defined my color into my pin locations JSON, I can map ItemsColors from the map with my color key from my JSON.


Pin icons
The same way we did with the colors, we can map our icon from pin locations JSON to ItemsIcons.
Icons are defined with a string, the list of available icon can be found on https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-image-templates-web-sdk#list-of-image-templates


Pin labels
You can also display a label for each pin. You just need to map ItemsLabels with a key from the pin locations JSON.


3.3. Pin Events & Outputs
As an events, you can trigger when a pin has been clicked. The setting to use it OnSelect from the map.
As an Output, you can also get which pin has been selected.


4. Draw routes between points
Microsoft documentation: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/geospatial-map-routing
4.1. Enable routing and global settings

To draw routes between waypoints, you need to turn on Enable routing.
Then you have multiple seetings:
Route waypoints(Items) | Define your differents waypoints to draw a route for (see 4.2. Define waypoints) |
Maintain waypoint order | Should you keep the waypoint order defined or shoud it propose you the best order depending on your “Optimize route” choice. |
Optimize route | Do you want your waypoints be optimized by time or distance? |
Route travel mode | You can choose in between car and truck. If truck, it will take in consideration some road restrictions. |
Show Route Pins | Do you want to display the pins of location defined in Route waypoints(items)? |
4.2. Define waypoints
Waypoints can be define in Route waypoints(items) setting of the map.

It has to be an array of JSON. The JSON itself can be formatted as you wish, because we are going to map our JSON columns later. To put a pin on a map, you need to add for each pin, latitude and longitude or an adress.
Here is an example of my waypoint locations.
Table( { Name: "Australian Museum", Latitude: -33.8719344, Longitude: 151.2137524 }, { Name: "Australian National Maritime Museum", Latitude: -33.8724994, Longitude: 151.2066974 }, { Name: "Museum of Sydney", Adress: "Cnr Bridge St &, Phillip St, Sydney NSW 2000, Australia" } )
Then you need to do mapping, in the map advanced settings, you just need to match as following:
RouteWaypointsAddresses | Enter the key value of the adress from your waypoints JSON |
RouteWaypointsLatitudes | Enter the key value of the latitude from your waypoints JSON |
RouteWaypointsLongitudes | Enter the key value of the longitudes from your waypoints JSON |
RouteWaypointsLabels | Enter the key value of the lables from your waypoints JSON |


4.3. Routes Events & Outputs
Output : RouteDirection

RouteDirection is an object which can give you details between waypoints.
Some usefull attributes from RouteDirection
Attribute from RouteDirection | Description |
---|---|
LengthInMeters | Total distance from the first to the last waypoint in meters. |
TravelTimeInSeconds | Estimated time in seconds for travelling from the first to the last waypoint. |
RouteLegs | Object which represent each segments in-between two waypoints |

Event : OnRouteDirectionChange
Event triggered when the Route direction has changed.
More information about Output: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/geospatial-map-routing#calculate-routes-between-the-waypoints
5. Shapes
Microsoft Documentation : https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/geospatial-map-draw-shapes
5.1. Enable shapes options
To enable shapes options, make sure you have set “ShowShapes” to true.
You can also set “ShowShapeLabels” to true, if you want to display Shapes label.

5.2. Draw your own shapes
You can let the users draw their own shapes. You need to turn on “ShapeDrawing” and “ShapeEditingDeleting”.

It is going to turn on the tools on the top left of the map to draw shapes :
- Polygon shapes
- Circle shapes
- Square shapes
- Line Shapes

You can draw a Shape and then edit its labels on the top right of the map.

5.3. Shapes Events & Outputs

Trigger | Description |
---|---|
OnShapeCreated | Is tiggered when an user create a Shape. |
OnShapeDeleted | Is triggered when an user delete a Shape. |
OnShapeEdited | Is triggered when an user edit a Shape (label include) |
OnShapeSelected | Is triggered when an user is selecting a Shape |

So as you see in the last Sreen Shot, as output we have SelectedShape.
Selected Shape is an object:
Key/Parameter | Description |
---|---|
Id | Unique GUID of your shape. |
GeoJSON | GeoJSON of your shape. The GeoJSON is what describe the Shape into a map. |
Label | Label of your shape |
Color | Color of your Shape |
Area | Area in Square feet of your shape |
Perimeter | Perimeter in feet of your shape |
5.4. Insert GEOJson Shapes
I have created a Dataverse table named Map Shape, with a label and the associated GEOJson as following:

The first thing to do is to declare the items collection where the Shapes are. So go to the property Shapes_Items and set you Shape Datasource.

Then you need to tell your map, where is your label and your GEOJson from your datasource.
For the label, find ShapeLabels parameter and define the label column:

For the GEOJson, find ShapeGeoJSONObjects paramenter and define the GEOJson column.

If your datas have a color for each Shape, you can use ShapeColors parameter. Colors has to be RGB.

6. Address input control

https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/how-to/mobile-apps-address-map
I find the documentation quite complete for this input.
Once you have inseted it, you have the following parameter to know:

Property | Description |
---|---|
Search result limit | The number of suggested addresses the control displays. We’ve set it to 5 in this example, so not more than five addresses will show up in search. |
Search within radius | Whether the control should suggest addresses within the user-defined Radius of the Latitude and Longitude. We’ve set it to Yes in this example. |
Latitude | The latitude of the center point used to geo-bias address suggestions. Requires Search within radius to be on. We’ve set it to the formula Location.Latitude in this example to return the latitude of the current location. |
Longitude | The longitude of the center point used to geo-bias address suggestions. Requires Search within radius to be on. We’ve set it to the formula Location.Longitude in this example to return the latitude of the current location. |
Radius | The radius, in meters, around Latitude and Longitude to constrain the address suggestions. Requires Search within radius to be On. We’ve set it to 100000 in this example. |
Language | The language the address suggestions are returned in. We’ve left it with the default – “English (United States)”. |
Country set | Comma-separated list of countries/regions to constrain the address suggestions to, in ISO 3166 alpha-2 country codes. Examples: “US”, “FR”, “KW”. We’ve it as US in this example. |
And when you select an address, as output:
Property | Description |
---|---|
UserInput | Text the user has typed in the input box. |
SelectedLatitude | Latitude of the user-selected address in the input field. |
SelectedLongitude | Longitude of the user-selected address in the input field. |
SearchResultJson | The search result (based on the UserInput property), displayed as a string in JSON format. |
FreeformAddress | Selected address from the list of suggested addresses. |
LocalName | An address control that represents the name of a geographic area or locality that groups multiple addressable objects for addressing purposes, without being an administrative unit. |
PostalCode | Postal code. |
ExtendedPostalCode | Extended Postal Code. |
CountryCode | Country code. |
Country | Country. |
CountryCodeISO3 | Country code in ISO alpha-3 format. |
CountrySubdivisionName | Country subdivision name. |
StreetName | Street name. |
StreetNumber | Street number. |
Municipality | Municipality. |
MunicipalitySubdivision | Municipality subdivision. |
CountryTertiarySubdivision | Country tertiary subdivision. |
CountrySecondarySubdivision | Country secondary subdivision. |
CountrySubdivision | Country subdivision. |

7. Practice and tutorials
Try it out by creating a location guesser game with the map.