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/longitude pairs. As you zoom out, the markers are optionally grouped to condense groups of data. In mobile and web experiences, a map can display 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)

(Video) How to Work with the Interactive Map Control in a Power Apps Canvas App | Power Apps for Beginners

Interactive Map Features

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

previous requirements

You will need to satisfy someprevious requirementsbefore you can use maps in your canvas apps. Watch theprivacy and security chartfor more details on how different map features use the data.

Add a map to an app screen

With your application open toeditionnoStudy of energy applications:

  1. Select theInserttab and expandmedia.
  2. selectMapto place a map on the application screen, or drag the handle on the screen to place it more precisely.

Adding pins, routes and shapes.

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

For example, if you have a collection of tables calledlocationscomName,Length, miLatitudecolumns:

(Video) Power Apps: Mapping Plot Points

Coffee room (sample)-98.2927726.2774
litware, inc. (sample)-96,8557232.55253
Adventure Works (mostra)-96,9995232.72058

To display them as non-map labeled pines:

  1. put theElementsproperty to Locations

  2. put theitem tagsproperty for "Name"

  3. put theItem Lengthproperty for "Length"

    (Video) Power Apps Travel App Using Geospatial Controls

  4. put theItemLatitudproperty for "Latitude"


    The relevant column names must be enclosed in quotes in the related properties. The data source must not have quotes.

    (Video) PowerApps Geospatial features - Map & Address Input

you can see howshow pins from an excel sheetobuild an appwhich uses the address input control to populate pins in the map control as additional examples.


Change the behavior and appearance of a map using properties. Some properties are only available in theAdvancedaba

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

The map control has six different types of properties:

(Video) map in power app | power app maps

  1. style properties
  2. behavioral properties
  3. pin properties
  4. route properties
  5. shape properties
  6. output properties

style properties

satellite viewShows the map in satellite view. Leave this property disabled to display the map in road view.boleanoProperties; Advanced:satellite view
map styleDefines the style of the map. Options: Road, Night, Road Shaded Relief, Satellite, Satellite Road Labels, High Contrast Light, High Contrast Dark, Grayscale Light, Grayscale Dark.enumerationproperties
TransparencyDetermines the transparency of the map, from 0 (opaque) to 100 (transparent).wholeProperties; Advanced:Transparency
VisibleShow or hide the map.boleanoProperties; Advanced:Visible
PositionPositions the upper left corner of the map at the screen coordinates specified inXmiy.floating coma numberProperties; Advanced:X,Y
SizeDetermines the size of the map using the pixel values ​​given inAnchomiHeight.wholeProperties; Advanced:Ancho,Height
edge radiusDetermines the corner radius of the map border.floating coma numberProperties; Advanced:BordeRadio
FronteraDetermines the style, width, and color of the map border.Not applicableProperties; Advanced:edge style,edge thickness,border color
vistaDetermines whether the control allows user input (to edit), display only data (To see) or is disabled (disabled).enumerationAdvanced

behavioral properties

Show info cardsshow informationover a mapped location when the user selects it (clicking) or points to it (in stationary flight). SeNeither, no information is displayed.enumerationProperties; Advanced:InfoCards
use default locationInitializes the map at a default location.boleanoProperties; Advanced:default location
standard latitudeDefines the latitude coordinate that the map displays ifuse default locationis enabled.floating coma numberProperties; Advanced:standard latitude
standard lengthDefines the longitude coordinate that the map displays ifuse default locationis enabled.floating coma numberProperties; Advanced:default length
default zoom levelSets the zoom level ifuse default locationis enabled, from 0 to 22.wholeProperties; Advanced:Default zoom level
show current locationDisplays the current location of the user.boleanoProperties; Advanced:Current location
Latitude of current locationSets the latitude coordinate of the current location pin that the map displays ifshow current locationis enabled. To place the marker at the user's current location, set this property tolocation.latitude.floating coma numberProperties; Advanced:Latitude of current location
Current location longitudeSets the longitude coordinate of the current location pin displayed by the map ifshow current locationis enabled. To place the marker at the user's current location, set this property toLocation.Length.floating coma numberProperties; Advanced:current location longitude
check zoomShows the zoom control.boleanoProperties; Advanced:expansion
control the compassShows the compass control.boleanoProperties; Advanced:Compass
step controlDisplays the tilt control.boleanoProperties; Advanced:Tomás
tab indexSpecifies the order in which the map is selected if the user navigates through the application using the Tab key.wholeProperties; Advanced:tab index
tool tipDetermines the text that will be displayed when the user hovers the mouse over a visual element.CordaAdvanced
content languageDetermines the language in which the map is displayed, if it differs from the language used in the application.CordaAdvanced
ChargingContains code that is executed when the map is loaded.EventAdvanced
OnMapClickContains code that is executed when the user selects the map. The latitude and longitude of the clicked point are in theClicked locationoutput property.EventAdvanced
HoweverContains code that is executed when any aspect of the map changes.EventAdvanced
By selectingContains code that is executed when the user selects something on the map.EventAdvanced

pin properties

Locations (articles)identify onedata source(Elements) in table form to get locations to display 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 such as Excel Online. Each row should have an entry for a label, longitude and latitude, or a physical address, and optionally the color of the marker and icon.Not applicableProperties; Advanced:Elements
FoodLabelsIdentifies the column inElementscontaining the pin labels.column nameAdvanced
ElementosLatitudesIdentifies the column inElementscontaining the latitude position of the pins.column nameAdvanced
ElementosLongitudesIdentifies the column inElementscontaining the length position of the pins.column nameAdvanced
food directionsIdentifies the column inElementscontaining addresses that represent the location of the pins. There is a limit to the number of pins that can be displayed from addresses. We recommend geocoding your addresses to latitude/longitude pairs and using them to display pins where possible.column nameAdvanced
ElementosNúcleosIdentifies the column inElementscontaining the colors of the pins.column nameAdvanced
articlesiconsIdentifies the column inElementscontaining the pin icons.column nameAdvanced
cluster pinesGroup nearby map markers together instead of displaying them individually.boleanoProperties; Advanced:Grouping
pin colorDetermines the default color of the pins displayed on the map. This color is replaced byElementosNúcleosproperty if definedcolor pickerProperties; Advanced:PinColor
OnItemsChangeContains code that is executed when the pins on the map change.EventAdvanced

route properties

enable routingDetermines whether the user can request directions to a specific location.boleanoProperties; Advanced:use routing
Route waypoints (elements)Displays route waypoints as provided in a data source (RutaWaypoints_Items) in tabular form. The table can be a collection or from a data source such as Excel Online. YeahNeither, no waypoint is displayed.enumerationProperties; Advanced:RutaWaypoints_Items
RotaWaypointsEtiquetasIdentifies the column inRutaWaypoints_Itemscontaining the waypoint labels.column nameAdvanced
RotaWaypointsLatitudesIdentifies the column inRutaWaypoints_Itemscontaining the latitude position of the waypoints.column nameAdvanced
RotaWaypointsLongitudesIdentifies the column inRutaWaypoints_Itemscontaining the longitude position of the waypoints.column nameAdvanced
RotaWaypointsDirectionsIdentifies the column inRutaWaypoints_Itemscontaining addresses that represent the location of the waypoints.column nameAdvanced
Maintain the order of waypointsDetermines if a calculated route keeps waypoints in the given order.boleanoProperties; Advanced:RotaManterOrdem
optimize routeDetermines if a calculated route is optimized for distance, time, or not optimized.enumerationProperties; Advanced:route optimization
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.enumerationProperties; Advanced:RouteTravelMode
OnRouteDirectionChangeContains the code that is executed when the application detects that the user has changed direction during a calculated route.EventAdvanced

shape properties

show shapesshow the shapes inshapes_elements.boleanoProperties; Advanced:show shapes
shapes_elementsIdentifies a data source (shapes_elements) in table form so that the shapes are displayed on the map. The table can be a collection or from a data source such as Excel Online. Each line must have an input for the shape (GeoJSON object) and (optionally) a label and color.table nameAdvanced
ShapeGeoJSONObjectsIdentifies the column inshapes_elementswith strings that represent the GeoJSON objects of the shapes, either in the shape collection or in the GeoJSON format of a single shape.column nameAdvanced
shape labelsIdentifies the column inshapes_elementscontaining the labels for the shapes.column nameAdvanced
ShapeCoresIdentifies the column inshapes_elementscontaining the colors of the shapes.column nameAdvanced
show shape labelsDisplay shape labels, if provided.boleanoProperties; Advanced:show shape labels
Enable shape drawingShow drawing tools on the map.boleanoProperties; Advanced:shape drawing
Enable shape deletion and label editingDetermines if the user can delete shapes and edit their labels.boleanoProperties; Advanced:Shape editingDelete
OnShapeCreatedContains code that is executed when the user adds a shape to the map.EventAdvanced
AboutFormSelectedContains code that is executed when the user selects a shape on the map.EventAdvanced
OnShapeEditedContains code that is executed when the user modifies a shape on the map.EventAdvanced
OnShapeDeletedContains code that is executed 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 theseoutput propertiesin other controls or to customize the app experience.

CenterLocationCapture the center point of the map.Not applicable
Clicked locationCaptures the last location selected by the user, either.Latitudeo.Length.Registry
SelectedCaptures the selected pin.Registry
selected articlesCaptures the selected pin or pins in the selected cluster.low hill
geocoded elementsCaptures the geocoded locations of the pins.low hill
RutaWaypoints_SelectedCorresponds to the registration of the shape selected in theRutaWaypoints_Items.Registry
RutaWaypoints_SelectedItemsMatches the records of the selected overlapping shapes inRutaWaypoints_Items.low hill
selected_shapesCorresponds to the registration of the shape selected in theshapes_elements.Registry
shapes_selected elementsMatches the records of the selected overlapping shapes inshapes_elements.low hill
selected shapecapture the.Perimetermi.Areain the selected way.Registry
EliminadoFormacapture the.Perimetermi.Arealast excluded.Registry
GeoJSONGets the list of shapes in GeoJSON format from the resource collection.Corda

Other geospatial controls

To see dynamic address suggestions as you type, use theaddress inputto control.

known limitations

  • Internet connection required

see also

Create an app with address input and map controls


How do I create an interactive dashboard in Power App? ›

Sign in to Power Apps. Navigate to an environment with an unmanaged solution. Select Solutions, open the solution required, and then on the toolbar select Switch to classic. In the left navigation pane, select Dashboards, on the toolbar select New, and then select Interactive experience dashboard.

How do I embed a map in Power App? ›

Add a map to an app screen

With your app open for editing in Power Apps Studio: Select the Insert tab and expand Media. Select Map to place a map in the app screen, or drag the control to the screen to position it more precisely.

How do I create an interactive data map? ›

  1. 1 Choose an interactive map template. Your first step in creating an interactive map is choosing a template that looks closest to your vision. ...
  2. 2 Select a country or region. ...
  3. 3 Input your data. ...
  4. 4 Color code your interactive map. ...
  5. 5 Customize your settings. ...
  6. 6 Share your interactive map.
Jun 16, 2020

What is the best way to create an interactive map? ›

10 tools to create interactive maps
  1. Mapbox.
  2. ArcGIS Storymaps.
  3. Google Maps.
  4. StoryMapJS.
  5. Visme.
  6. Zeemaps.
  7. Shorthand.
  8. Felt.

How do you make a custom control on Power Apps? ›

Use a custom control to add visualizations to a column
  1. Sign in to Power Apps.
  2. Expand Data, select Tables, select the Opportunity table, and then select the Forms area.
  3. Open a form such as the Main form for the Opportunity table.
  4. Once in the form, select switch to classic.
Nov 9, 2022

How do I create a navigation menu in Power Apps? ›

  1. Step 1: Create screens. ...
  2. Step 2: Define the collection. ...
  3. Step 3: Define the color theme. ...
  4. Step 4: Define the variable for the active tab. ...
  5. Step 3: Add a component. ...
  6. Step 4: Logic to update the height when the submenu is opened. ...
  7. Step 5: Create output property. ...
  8. Step 6: Set the value of the custom property.
Mar 19, 2022


1. Using Maps and Mapping in Power Apps 👌
(Pragmatic Works)
2. route in power app maps || power app maps
(Classy Powerapps)
3. Power Apps Map and Address Input components
(Shane Young)
4. Create Map using Geospatial Component in Power Apps
(Dhruvin Shah)
5. PowerApps Google Maps API - Build your first App
(Shane Young)
6. How To: Reset Address Input Map Control - PowerApps | ®GitHub - Video#4
(David Soden)


Top Articles
Latest Posts
Article information

Author: Margart Wisoky

Last Updated: 27/11/2023

Views: 5310

Rating: 4.8 / 5 (58 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Margart Wisoky

Birthday: 1993-05-13

Address: 2113 Abernathy Knoll, New Tamerafurt, CT 66893-2169

Phone: +25815234346805

Job: Central Developer

Hobby: Machining, Pottery, Rafting, Cosplaying, Jogging, Taekwondo, Scouting

Introduction: My name is Margart Wisoky, I am a gorgeous, shiny, successful, beautiful, adventurous, excited, pleasant person who loves writing and wants to share my knowledge and understanding with you.