Power Apps Canvas Map control

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.

  1. Prerequesits
    1. Premium Licence
    2. Activate geospatial feature in your environment
  2. Map Control and Global settings
    1. Default location
    2. Current location
    3. Map Look & Feel
  3. Pin location
    1. Define pin locations
    2. Pin settings (color, icon, labels)
    3. Pin Events & Outputs
  4. Draw routes between points
    1. Enable routing and global settings
    2. Define waypoints
    3. Routes Events & Outputs
  5. Shapes
    1. Enable shapes options
    2. Draw your own shapes
    3. Shapes Events & Outputs
    4. Insert GEOJson Shapes
  6. Address input control
  7. 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 latitudeDefine the default latitude while loading your map.
Default longitudeDefine the default longitude while loading your map.
Default zoom levelDefine 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 controlDisplay or hide compass button. By default, it is north on top. The button let the user to change compass direction.
Zoom controlDisplay or hide zoom buttons. Let the user to zoom in and out.
Pitch controlDispplay 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:

ItemsAddressesEnter the key value of the adress from your locations JSON
ItemsLatitudesEnter the key value of the latitude from your locations JSON
ItemsLongitudesEnter 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 orderShould you keep the waypoint order defined or shoud it propose you the best order depending on your “Optimize route” choice.
Optimize routeDo you want your waypoints be optimized by time or distance?
Route travel modeYou can choose in between car and truck. If truck, it will take in consideration some road restrictions.
Show Route PinsDo 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:

RouteWaypointsAddressesEnter the key value of the adress from your waypoints JSON
RouteWaypointsLatitudesEnter the key value of the latitude from your waypoints JSON
RouteWaypointsLongitudesEnter the key value of the longitudes from your waypoints JSON
RouteWaypointsLabelsEnter 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 RouteDirectionDescription
LengthInMetersTotal distance from the first to the last waypoint in meters.
TravelTimeInSecondsEstimated time in seconds for travelling from the first to the last waypoint.
RouteLegsObject 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

TriggerDescription
OnShapeCreatedIs tiggered when an user create a Shape.
OnShapeDeletedIs triggered when an user delete a Shape.
OnShapeEditedIs triggered when an user edit a Shape (label include)
OnShapeSelectedIs triggered when an user is selecting a Shape
Example : I want to collect the GeoJson of the shape when an user creates it.

So as you see in the last Sreen Shot, as output we have SelectedShape.

Selected Shape is an object:

Key/ParameterDescription
IdUnique GUID of your shape.
GeoJSONGeoJSON of your shape. The GeoJSON is what describe the Shape into a map.
LabelLabel of your shape
ColorColor of your Shape
AreaArea in Square feet of your shape
PerimeterPerimeter 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:

PropertyDescription
Search result limitThe 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 radiusWhether the control should suggest addresses within the user-defined Radius of the Latitude and Longitude. We’ve set it to Yes in this example.
LatitudeThe 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.
LongitudeThe 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.
RadiusThe 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.
LanguageThe language the address suggestions are returned in. We’ve left it with the default – “English (United States)”.
Country setComma-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.
From documentation

And when you select an address, as output:

PropertyDescription
UserInputText the user has typed in the input box.
SelectedLatitudeLatitude of the user-selected address in the input field.
SelectedLongitudeLongitude of the user-selected address in the input field.
SearchResultJsonThe search result (based on the UserInput property), displayed as a string in JSON format.
FreeformAddressSelected address from the list of suggested addresses.
LocalNameAn 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.
PostalCodePostal code.
ExtendedPostalCodeExtended Postal Code.
CountryCodeCountry code.
CountryCountry.
CountryCodeISO3Country code in ISO alpha-3 format.
CountrySubdivisionNameCountry subdivision name.
StreetNameStreet name.
StreetNumberStreet number.
MunicipalityMunicipality.
MunicipalitySubdivisionMunicipality subdivision.
CountryTertiarySubdivisionCountry tertiary subdivision.
CountrySecondarySubdivisionCountry secondary subdivision.
CountrySubdivisionCountry subdivision.
From documentation

7. Practice and tutorials

Try it out by creating a location guesser game with the map.