Edit

Share via

Interactive map control

  • Article

Easily add an interactive map to your canvas apps. Plot markers from a data source containing addresses or latitude and longitude pairs. As you zoom out, the markers will optionally cluster to condense groups of data. On mobile devices and web experiences, a map can show the user's current position and calculate a route to the user's destination. Maps can be switched between road and satellite views.

A screenshot of a tablet app in which a map control is under construction in Microsoft Power Apps Studio.

Interactive map features

Prerequisites

You'll need to satisfy a few prerequisites before you can use maps in your canvas apps. Refer to the privacy and security table for more details on how different map features use data.

Add a map to an app screen

With your app open for editing in Power Apps Studio:

  1. Select the Insert tab and expand Media.
  2. Select Map to place a map in the app screen, or drag the control to the screen to position it more precisely.

Adding pins, routes, and shapes

Pins, routes, and shapes are data set properties that need to both identify a data source, which is a table from a collection or connector, and the relevant columns. The data source is set in the Items property (Items for pins, RouteWaypoints_Items for routes, Shape_Items for shapes) and the relevant columns are set in the related properties (e.g. ItemLatitudes, ItemLongitudes, etc for pins). The Properties section contains additional information about these data sets and their related properties.

For example, if you had a table collection named Locations with Name, Longitude, and Latitude columns:

Name Longitude Latitude
Fourth Coffee (sample) -98.29277 26.2774
Litware, Inc. (sample) -96.85572 32.55253
Adventure Works (sample) -96.99952 32.72058

To display these as labeled pins on the map:

  1. Set the Items property to Locations

  2. Set the ItemLabels property to "Name"

  3. Set the ItemLongitude property to "Longitude"

  4. Set the ItemLatitude property to "Latitude"

    Important

    The relevant column names need to be in quotation marks in the related properties. The data source should not have quotation marks.

You can see how to do display pins from an Excel sheet or build an app that uses the address input control to populate pins on the map control as additional examples.

Note

  • Each map control can display up to 5000 pins from latitude or longitude and 50 pins from addresses. The pin limit is lower for addresses as the map needs to geocode these addresses into latitude or longitude to display them. We recommend not using addresses where possible. You can save geocoded addresses back to your data source.
  • When both latitude or longitude and an address is given for a single pin, the map control will prioritize using the latitude or longitude to avoid geocoding the address.
  • The maximum number of shapes that can be drawn in a map control is limited to 500.

Properties

Change a map's behavior and appearance using properties. Some properties are only available on the Advanced tab.

A screenshot of a phone app in which a map control is shown next to the Properties tab in Microsoft Power Apps Studio.

The map control has six different types of properties:

  1. Styling properties
  2. Behavioral properties
  3. Pin properties
  4. Route properties
  5. Shape properties
  6. Output properties

Styling properties

Property Description Type Tab
Satellite view Displays the map in satellite view. Leave this property off to display the map in road view. Boolean Properties; Advanced: SatelliteView
Map style Sets the map style. Options: Road, Night, Road shaded relief, Satellite, Satellite road labels, High contrast light, High contrast dark, Grayscale light, Grayscale dark. Enum Properties
Transparency Determines the map's transparency, from 0 (opaque) to 100 (transparent). Integer Properties; Advanced: Transparency
Visible Shows or hides the map. Boolean Properties; Advanced: Visible
Position Places the upper-left corner of the map at the screen coordinates specified in x and y. Floating point number Properties; Advanced: X, Y
Size Determines the size of the map using the pixel values provided in Width and Height. Integer Properties; Advanced: Width, Height
Border radius Determines the corner radius of the map border. Floating point number Properties; Advanced: BorderRadius
Border Determines the style, width, and color of the map border. Not applicable Properties; Advanced: BorderStyle, BorderThickness, BorderColor
DisplayMode Determines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled). Enum Advanced

Behavioral properties

Property Description Type Tab
Show info cards Shows information about a mapped location when the user selects it (On click) or points to it (On hover). If None, no information is shown. Enum Properties; Advanced: InfoCards
Use default location Initializes the map at a default location. Boolean Properties; Advanced: DefaultLocation
Default latitude Sets the latitude coordinate the map shows if Use default location is enabled. Floating point number Properties; Advanced: DefaultLatitude
Default longitude Sets the longitude coordinate the map shows if Use default location is enabled. Floating point number Properties; Advanced: DefaultLongitude
Default zoom level Sets the zoom level if Use default location is enabled, from 0 to 22. Integer Properties; Advanced: DefaultZoomLevel
Show current location Displays the user's current location. Boolean Properties; Advanced: CurrentLocation
Current location latitude Sets the latitude coordinate of the current location pin that the map shows if Show current location is enabled. To place the pin at the user's current location, set this property to Location.Latitude. Floating point number Properties; Advanced: CurrentLocationLatitude
Current location longitude Sets the longitude coordinate of the current location pin that the map shows if Show current location is enabled. To place the pin at the user's current location, set this property to Location.Longitude. Floating point number Properties; Advanced: CurrentLocationLongitude
Zoom control Shows the zoom control. Boolean Properties; Advanced: Zoom
Compass control Shows the compass control. Boolean Properties; Advanced: Compass
Pitch control Shows the pitch (tilt) control. Boolean Properties; Advanced: Pitch
TabIndex Specifies the order the map is selected if the user navigates the app using the Tab key. Integer Properties; Advanced: Tab index
Tooltip Determines the text to display when the user hovers over a visual. String Advanced
ContentLanguage Determines the display language of the map, if it's different from the language used in the app. String Advanced
OnLoad Contains code that runs when the map is loaded. Event Advanced
OnMapClick Contains code that runs when the user selects the map. The latitude and longitude of the clicked point is in the ClickedLocation output property. Event Advanced
OnChange Contains code that runs when any aspect of the map is changed. Event Advanced
OnSelect Contains code that runs when the user selects something on the map. Event Advanced

Pin properties

Property Description Type Tab
Locations(Items) Identifies a data source (Items) in the form of a table from which to get locations to show on the map. The table lists sets of longitudes and latitudes, or physical addresses, to display as pins. Using latitude or longitude is recommended as addresses need to be geocoded and so have a more restrictive pin limit. The table can be a collection or from a data source like Excel Online. Each row must have an entry for label, longitude, and latitude, or a physical address, and optionally the pin color and icon. Not applicable Properties; Advanced: Items
ItemsLabels Identifies the column in Items that contains the labels for the pins. ColumnName Advanced
ItemsLatitudes Identifies the column in Items that contains the latitude position of the pins. ColumnName Advanced
ItemsLongitudes Identifies the column in Items that contains the longitude position of the pins. ColumnName Advanced
ItemsAddresses Identifies the column in Items that contains addresses that represent the location of the pins. There is a limit to how many pins can be displayed from addresses. We recommend geocoding your addresses to latitude, longitude pairs and using those to display pins when possible. ColumnName Advanced
ItemsColors Identifies the column in Items that contains the colors of the pins. ColumnName Advanced
ItemsIcons Identifies the column in Items that contains the icons of the pins. ColumnName Advanced
Cluster pins Groups nearby map pins instead of displaying them individually. Boolean Properties; Advanced: Clustering
Pin color Determines the default color of pins shown on the map. This color is overridden by the ItemsColors property if set Color picker Properties; Advanced: PinColor
OnItemsChange Contains code that runs when pins on the map are changed. Event Advanced

Route properties

Property Description Type Tab
Enable routing Determines whether the user can request directions to a specified location. Boolean Properties; Advanced: UseRouting
Route waypoints(Items) Shows route waypoints, as provided in a data source (RouteWaypoints_Items) in the form of a table. The table can be a collection or from a data source like Excel Online. If None, no waypoints are shown. Enum Properties; Advanced: RouteWaypoints_Items
RouteWaypointsLabels Identifies the column in RouteWaypoints_Items that contains the labels for the waypoints. ColumnName Advanced
RouteWaypointsLatitudes Identifies the column in RouteWaypoints_Items that contains the latitude position of the waypoints. ColumnName Advanced
RouteWaypointsLongitudes Identifies the column in RouteWaypoints_Items that contains the longitude position of the waypoints. ColumnName Advanced
RouteWaypointsAddresses Identifies the column in RouteWaypoints_Items that contains addresses that represent the location of waypoints. ColumnName Advanced
Maintain waypoint order Determines whether a calculated route maintains waypoints in the order provided. Boolean Properties; Advanced: RouteMaintainOrder
Optimize route Determines whether a calculated route is optimized for distance, time, or isn't optimized. Enum Properties; Advanced: RouteOptimization
Route travel mode Determines whether a route is calculated for a car or a truck, which may require avoiding bridges with certain height or weight restrictions. Enum Properties; Advanced: RouteTravelMode
OnRouteDirectionChange Contains code that runs when the app detects the user has changed direction while on a computed route. Event Advanced

Shape properties

Property Description Type Tab
Show shapes Shows the shapes in Shapes_Items. Boolean Properties; Advanced: ShowShapes
Shapes_Items Identifies a data source (Shapes_Items) in the form of a table from which to get shapes to show on the map. The table can be a collection or from a data source like Excel Online. Each row must have an entry for the shape (GeoJSON object) and (optionally) a label and color. TableName Advanced
ShapeGeoJSONObjects Identifies the column in Shapes_Items with strings that represent the GeoJSON objects of the shapes, in shape collection or single shape GeoJSON format. ColumnName Advanced
ShapeLabels Identifies the column in Shapes_Items that contains the labels for the shapes. ColumnName Advanced
ShapeColors Identifies the column in Shapes_Items that contains the colors of the shapes. ColumnName Advanced
Show shape labels Shows the shape labels, if provided. Boolean Properties; Advanced: ShowShapeLabels
Enable shape drawing Shows drawing tools on the map. Boolean Properties; Advanced: ShapeDrawing
Enable shape deleting and label editing Determines whether the user can delete shapes and edit their labels. Boolean Properties; Advanced: ShapeEditingDeleting
OnShapeCreated Contains code that runs when the user adds a shape to the map. Event Advanced
OnShapeSelected Contains code that runs when the user selects a shape on the map. Event Advanced
OnShapeEdited Contains code that runs when the user modifies a shape on the map. Event Advanced
OnShapeDeleted Contains code that runs when the user deletes a shape on the map. Event Advanced

Output properties

Other properties become available when a user interacts with a map. You can use these output properties in other controls or to customize the app experience.

Property Description Type
CenterLocation Captures the map's center point. Not Applicable
ClickedLocation Captures the last location the user selected, either .Latitude or .Longitude. Record
Selected Captures the selected pin. Record
SelectedItems Captures the selected pin or pins in the selected cluster. Table
GeocodedItems Captures the geocoded locations of the pins. Table
RouteWaypoints_Selected Corresponds to the record of the selected shape in RouteWaypoints_Items. Record
RouteWaypoints_SelectedItems Corresponds to the records of the selected overlapping shapes in RouteWaypoints_Items. Table
Shapes_Selected Corresponds to the record of the selected shape in Shapes_Items. Record
Shapes_SelectedItems Corresponds to the records of the selected overlapping shapes in Shapes_Items. Table
SelectedShape Captures the .Perimeter and .Area of the selected shape. Record
DeletedShape Captures the .Perimeter and .Area of the last deleted shape. Record
GeoJSON Captures the list of shapes in Feature Collection GeoJSON format. String

Other geospatial controls

To see dynamic address suggestions as you type, use the Address input control.

Known limitations

  • Requires internet connection

See also

Create an app with address input and map controls