Use an interactive map control in Power Apps - Power Apps (2023)

  • Article
  • 4 minutes to read

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.

Use an interactive map control in Power Apps - Power Apps (1)

Interactive map features

  • Use a data source to insert pins
  • Display information about map pins
  • Show routes between waypoints
  • Draw and insert shapes

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:

NameLongitudeLatitude
Fourth Coffee (sample)-98.2927726.2774
Litware, Inc. (sample)-96.8557232.55253
Adventure Works (sample)-96.9995232.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.

Properties

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

Use an interactive map control in Power Apps - Power Apps (2)

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

PropertyDescriptionTypeTab
Satellite viewDisplays the map in satellite view. Leave this property off to display the map in road view.BooleanProperties; Advanced: SatelliteView
Map styleSets the map style. Options: Road, Night, Road shaded relief, Satellite, Satellite road labels, High contrast light, High contrast dark, Grayscale light, Grayscale dark.EnumProperties
TransparencyDetermines the map's transparency, from 0 (opaque) to 100 (transparent).IntegerProperties; Advanced: Transparency
VisibleShows or hides the map.BooleanProperties; Advanced: Visible
PositionPlaces the upper-left corner of the map at the screen coordinates specified in x and y.Floating point numberProperties; Advanced: X, Y
SizeDetermines the size of the map using the pixel values provided in Width and Height.IntegerProperties; Advanced: Width, Height
Border radiusDetermines the corner radius of the map border.Floating point numberProperties; Advanced: BorderRadius
BorderDetermines the style, width, and color of the map border.Not applicableProperties; Advanced: BorderStyle, BorderThickness, BorderColor
DisplayModeDetermines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).EnumAdvanced

Behavioral properties

PropertyDescriptionTypeTab
Show info cardsShows information about a mapped location when the user selects it (On click) or points to it (On hover). If None, no information is shown.EnumProperties; Advanced: InfoCards
Use default locationInitializes the map at a default location.BooleanProperties; Advanced: DefaultLocation
Default latitudeSets the latitude coordinate the map shows if Use default location is enabled.Floating point numberProperties; Advanced: DefaultLatitude
Default longitudeSets the longitude coordinate the map shows if Use default location is enabled.Floating point numberProperties; Advanced: DefaultLongitude
Default zoom levelSets the zoom level if Use default location is enabled, from 0 to 22.IntegerProperties; Advanced: DefaultZoomLevel
Show current locationDisplays the user's current location.BooleanProperties; Advanced: CurrentLocation
Current location latitudeSets 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 numberProperties; Advanced: CurrentLocationLatitude
Current location longitudeSets 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 numberProperties; Advanced: CurrentLocationLongitude
Zoom controlShows the zoom control.BooleanProperties; Advanced: Zoom
Compass controlShows the compass control.BooleanProperties; Advanced: Compass
Pitch controlShows the pitch (tilt) control.BooleanProperties; Advanced: Pitch
TabIndexSpecifies the order the map is selected if the user navigates the app using the Tab key.IntegerProperties; Advanced: Tab index
TooltipDetermines the text to display when the user hovers over a visual.StringAdvanced
ContentLanguageDetermines the display language of the map, if it's different from the language used in the app.StringAdvanced
OnLoadContains code that runs when the map is loaded.EventAdvanced
OnMapClickContains code that runs when the user selects the map. The latitude and longitude of the clicked point is in the ClickedLocation output property.EventAdvanced
OnChangeContains code that runs when any aspect of the map is changed.EventAdvanced
OnSelectContains code that runs when the user selects something on the map.EventAdvanced

Pin properties

PropertyDescriptionTypeTab
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. 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 applicableProperties; Advanced: Items
ItemsLabelsIdentifies the column in Items that contains the labels for the pins.ColumnNameAdvanced
ItemsLatitudesIdentifies the column in Items that contains the latitude position of the pins.ColumnNameAdvanced
ItemsLongitudesIdentifies the column in Items that contains the longitude position of the pins.ColumnNameAdvanced
ItemsAddressesIdentifies 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.ColumnNameAdvanced
ItemsColorsIdentifies the column in Items that contains the colors of the pins.ColumnNameAdvanced
ItemsIconsIdentifies the column in Items that contains the icons of the pins.ColumnNameAdvanced
Cluster pinsGroups nearby map pins instead of displaying them individually.BooleanProperties; Advanced: Clustering
Pin colorDetermines the default color of pins shown on the map. This color is overridden by the ItemsColors property if setColor pickerProperties; Advanced: PinColor
OnItemsChangeContains code that runs when pins on the map are changed.EventAdvanced

Route properties

PropertyDescriptionTypeTab
Enable routingDetermines whether the user can request directions to a specified location.BooleanProperties; 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.EnumProperties; Advanced: RouteWaypoints_Items
RouteWaypointsLabelsIdentifies the column in RouteWaypoints_Items that contains the labels for the waypoints.ColumnNameAdvanced
RouteWaypointsLatitudesIdentifies the column in RouteWaypoints_Items that contains the latitude position of the waypoints.ColumnNameAdvanced
RouteWaypointsLongitudesIdentifies the column in RouteWaypoints_Items that contains the longitude position of the waypoints.ColumnNameAdvanced
RouteWaypointsAddressesIdentifies the column in RouteWaypoints_Items that contains addresses that represent the location of waypoints.ColumnNameAdvanced
Maintain waypoint orderDetermines whether a calculated route maintains waypoints in the order provided.BooleanProperties; Advanced: RouteMaintainOrder
Optimize routeDetermines whether a calculated route is optimized for distance, time, or isn't optimized.EnumProperties; Advanced: RouteOptimization
Route travel modeDetermines whether a route is calculated for a car or a truck, which may require avoiding bridges with certain height or weight restrictions.EnumProperties; Advanced: RouteTravelMode
OnRouteDirectionChangeContains code that runs when the app detects the user has changed direction while on a computed route.EventAdvanced

Shape properties

PropertyDescriptionTypeTab
Show shapesShows the shapes in Shapes_Items.BooleanProperties; Advanced: ShowShapes
Shapes_ItemsIdentifies 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.TableNameAdvanced
ShapeGeoJSONObjectsIdentifies the column in Shapes_Items with strings that represent the GeoJSON objects of the shapes, in shape collection or single shape GeoJSON format.ColumnNameAdvanced
ShapeLabelsIdentifies the column in Shapes_Items that contains the labels for the shapes.ColumnNameAdvanced
ShapeColorsIdentifies the column in Shapes_Items that contains the colors of the shapes.ColumnNameAdvanced
Show shape labelsShows the shape labels, if provided.BooleanProperties; Advanced: ShowShapeLabels
Enable shape drawingShows drawing tools on the map.BooleanProperties; Advanced: ShapeDrawing
Enable shape deleting and label editingDetermines whether the user can delete shapes and edit their labels.BooleanProperties; Advanced: ShapeEditingDeleting
OnShapeCreatedContains code that runs when the user adds a shape to the map.EventAdvanced
OnShapeSelectedContains code that runs when the user selects a shape on the map.EventAdvanced
OnShapeEditedContains code that runs when the user modifies a shape on the map.EventAdvanced
OnShapeDeletedContains code that runs when the user deletes a shape on the map.EventAdvanced

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.

PropertyDescriptionType
CenterLocationCaptures the map's center point.Not Applicable
ClickedLocationCaptures the last location the user selected, either .Latitude or .Longitude.Record
SelectedCaptures the selected pin.Record
SelectedItemsCaptures the selected pin or pins in the selected cluster.Table
GeocodedItemsCaptures the geocoded locations of the pins.Table
RouteWaypoints_SelectedCorresponds to the record of the selected shape in RouteWaypoints_Items.Record
RouteWaypoints_SelectedItemsCorresponds to the records of the selected overlapping shapes in RouteWaypoints_Items.Table
Shapes_SelectedCorresponds to the record of the selected shape in Shapes_Items.Record
Shapes_SelectedItemsCorresponds to the records of the selected overlapping shapes in Shapes_Items.Table
SelectedShapeCaptures the .Perimeter and .Area of the selected shape.Record
DeletedShapeCaptures the .Perimeter and .Area of the last deleted shape.Record
GeoJSONCaptures 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

Top Articles
Latest Posts
Article information

Author: Neely Ledner

Last Updated: 01/02/2023

Views: 6433

Rating: 4.1 / 5 (62 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Neely Ledner

Birthday: 1998-06-09

Address: 443 Barrows Terrace, New Jodyberg, CO 57462-5329

Phone: +2433516856029

Job: Central Legal Facilitator

Hobby: Backpacking, Jogging, Magic, Driving, Macrame, Embroidery, Foraging

Introduction: My name is Neely Ledner, I am a bright, determined, beautiful, adventurous, adventurous, spotless, calm person who loves writing and wants to share my knowledge and understanding with you.