Interactive map component (Preview)
[This topic is pre-release documentation and is subject to change.]
Easily bring dynamic mapping capabilities into your canvas apps by viewing the physical position of entities from a data source, or by inputting new physical locations.
Pan, tilt, zoom, and drag to center your map view. As you zoom out, the markers will optionally cluster to represent dense groups of data.
The current location of the user can also be represented on the map on mobile devices or web experiences.
The map component also supports road and satellite views.
Make sure you also review the prerequisites for using geospatial components.
Use the component
Insert the component into your app as you normally would for any other control or component.
With an app open for editing in the Power Apps studio:
Open the Insert tab.
Select the component Map to place it in the center of the app screen, or drag it to position it anywhere on the screen.
(Optional) Select Allow in the window that asks to know your location. This setting allows the component to display the user's current location.
You can modify the component by using a number of properties.
Use the map component with data from Excel
You can load a table that contains existing data from an Excel workbook into the map component. The component will then plot each row in your table as a map pin.
Your workbook needs to contain a named table with the following columns that should then be mapped to the associated property in the component's Advanced pane.
|Column description||Maps to property||Required|
|Label for the pin||ItemsLabels||Required|
|Longitude of the pin||ItemsLongitudes||Required|
|Latitude of the pin||ItemsLatitudes||Required|
|Color of the pin||ItemsColors||Optional|
|Icon for the pin||ItemsIcons||Optional|
The color field accepts any CSS string, as defined in Color enumeration and ColorFade, ColorValue, and RGBA functions in Power Apps.
You can use the icons described in the List of image templates topic as your icon.
The following Excel table shows the required columns:
You can copy the following sample data to test this functionality:
|Fourth Coffee (sample)||-98.29277||26.2774||Blue||marker-flat|
|Litware, Inc. (sample)||-96.85572||32.55253||#ffefcd||hexagon-thick|
|Adventure Works (sample)||-96.99952||32.72058||car|
|Fabrikam, Inc. (sample)||-118.30746||34.86543|
|Blue Yonder Airlines (sample)||-118.66184||34.17553|
|City Power & Light (sample)||-113.46184||37.15363|
|Contoso Pharmaceuticals (sample)||-80.26711||40.19918|
|Alpine Ski House (sample)||-102.63908||35.20919|
|A Datum Corporation (sample)||-89.39433||40.71025|
|Coho Winery (sample)||-116.97751||32.87466|
Copy and paste the table into a new Excel workbook.
Select one of the cells, and then on the Home tab in the ribbon, select Format as Table and choose any style, and then OK.
Select the table, and then go to the Table Design tab on the ribbon. Enter a name for the table under Table Name:, for example TestData.
Save the workbook.
Open or create a new app in Power Apps, and insert the map component.
On the Properties pane, select the Locations(Items) field and then search for excel and select Import from Excel.
Locate the Excel workbook and then select Open. Select the table that contains the information, TestData, and then Connect.
On the Properties pane, go to the Advanced tab, and select More options.
Set the following properties:
- ItemsLabels as TestData.Name
- ItemLatitudes as TestData.Latitude
- ItemsLongitudes as TestData.Longitude
- (Optional) ItemsColors as TestData.Colors
- (Optional) ItemsIcons as TestData.Icons
The map component will now show each row in the table as a pin, labeled with its Name as defined in the Excel table, and using the provided icons and colors. If an icon or color isn't provided, then the component will use the default icon and color.
Add informational cards to pins
You can add informational cards to each pin on the map.
When a user selects the pin (either by hovering over it or selecting it directly), a small card will pop-up with information taken from the dataset you bound to the component, as described in the section Use the map component with data from Excel.
Any column you add to the table in the data source (for example, the Excel table) will be available as a field to show on the card.
To add informational cards to pins:
First, insert the map component and bind a dataset to it as described in Use the map component with data from Excel.
In the Properties pane, select Show info cards and choose whether they should appear when a user hovers over the pin, or if the user has to select the pin.
In the Properties pane, next to Fields, select Edit.
Select Add field, and then select each of the fields you want to show in the card. Select Add.
Each pin will now show the fields associated with that pin in an informational card.
The following properties can be defined and configured in the component's Properties pane.
Some properties are only available on the Advanced tab in the Properties pane, in the More options section.
|Data source(Items)||Data source (table) that lists a predefined set of longitudes and latitudes to display as map pin on the map when it's loaded. Map each of the columns in your data by using the ItemAddresses, ItemLongitudes, ItemLatitudes, and ItemLabels.||Not applicable||Properties|
|Use default location||Whether the map initializes at a default location set by the user.||Boolean||Properties|
|Default longitude||Longitude the map would go to when it's loaded if Use default location is enabled.||Floating point number||Properties|
|Default latitude||Latitude the map would go to when it's loaded if Use default location is enabled.||Floating point number||Properties|
|Default zoom level||Zoom level the map would be set to when it's loaded if Use default location is enabled.||Integer||Properties|
|Show current location||Whether the map should display the current location of the user (if it has permission).||Boolean||Properties|
|Satellite view||Whether the style of the map is a satellite view or a road view.||Boolean||Properties|
|Cluster pins||Whether the map pins are clustered.||Boolean||Properties|
|Zoom control||Whether the zoom component appears on the map.||Boolean||Properties|
|Compass control||Whether the compass component appears on the map.||Boolean||Properties|
|Pitch control||Whether the pitch component appears on the map.||Boolean||Properties|
|Pin color||The color of the pins.||Color picker||Properties|
|ItemsLabels||A column in Items with the strings you want to use as labels for the pins.||TableName.ColumnName||Advanced|
|ItemsAddresses||A column in Items with the strings that represent the location of the pins.||TableName.ColumnName||Advanced|
|ItemsLongitudes||Name of the column in the table in your data source with floating-point numbers that represent the longitude position of the pins.||TableName.ColumnName||Advanced|
|ItemsLatitudes||Name of the column in the table in your data source with floating-point numbers that represent the latitude position of the pins.||TableName.ColumnName||Advanced|
|ItemsColors||Color of the pins||Any CSS color string||Advanced|
|ItemsIcons||Icon of the pins||Icons defined in Azure image templates||Advanced|
|Items||Name of the table in your data source that contains all the records that you want to plot in the map by using pins. Each row must have an entry for the label, longitude, and latitude for each row.||TableName||Advanced|
The component outputs various properties when a user interacts with it inside an app. You can use these outputs in other components or to customize the experience.
The following table lists the output properties available.
|CenterLocation||Center location of the map.|
Additional (common) properties
BorderColor - The color of a control's border.
BorderRadius - The radius of a control's border.
BorderStyle - Whether a control's border is Solid, Dashed, Dotted, or None.
BorderThickness - The thickness of a control's border.
Color - The color of text in a control.
DisplayMode - Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
Height - The distance between a control's top and bottom edges.
TabIndex - Keyboard navigation order.
Tooltip - Explanatory text that appears when the user hovers over a control.
Transparency - How transparent the component is, as a percentage.
Visible - Whether a control appears or is hidden.
Width - The distance between a control's leftmost and rightmost edges.
X - The distance between the leftmost edge of a control and the leftmost edge of its parent container (or screen, if it has no parent container).
Y - The distance between the top edge of a control and the top edge of its parent container (or screen, if it has no parent container).
Other geospatial components
To see dynamic address suggestions as you type, use the Address input component.