- 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.
(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:
- Select theInserttab and expandmedia.
- 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
| Name | Length | Latitude |
|---|---|---|
| Coffee room (sample) | -98.29277 | 26.2774 |
| litware, inc. (sample) | -96,85572 | 32.55253 |
| Adventure Works (mostra) | -96,99952 | 32.72058 |
To display them as non-map labeled pines:
put theElementsproperty to Locations
put theitem tagsproperty for "Name"
put theItem Lengthproperty for "Length"
(Video) Power Apps Travel App Using Geospatial Controlsput theItemLatitudproperty for "Latitude"
Important
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.
properties
Change the behavior and appearance of a map using properties. Some properties are only available in theAdvancedaba
The map control has six different types of properties:
(Video) map in power app | power app maps
- style properties
- behavioral properties
- pin properties
- route properties
- shape properties
- output properties
style properties
| Property | Description | Writes | aba |
|---|---|---|---|
| satellite view | Shows the map in satellite view. Leave this property disabled to display the map in road view. | boleano | Properties; Advanced:satellite view |
| map style | Defines 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. | enumeration | properties |
| Transparency | Determines the transparency of the map, from 0 (opaque) to 100 (transparent). | whole | Properties; Advanced:Transparency |
| Visible | Show or hide the map. | boleano | Properties; Advanced:Visible |
| Position | Positions the upper left corner of the map at the screen coordinates specified inXmiy. | floating coma number | Properties; Advanced:X,Y |
| Size | Determines the size of the map using the pixel values ​​given inAnchomiHeight. | whole | Properties; Advanced:Ancho,Height |
| edge radius | Determines the corner radius of the map border. | floating coma number | Properties; Advanced:BordeRadio |
| Frontera | Determines the style, width, and color of the map border. | Not applicable | Properties; Advanced:edge style,edge thickness,border color |
| vista | Determines whether the control allows user input (to edit), display only data (To see) or is disabled (disabled). | enumeration | Advanced |
behavioral properties
| Property | Description | Writes | aba |
|---|---|---|---|
| Show info cards | show informationover a mapped location when the user selects it (clicking) or points to it (in stationary flight). SeNeither, no information is displayed. | enumeration | Properties; Advanced:InfoCards |
| use default location | Initializes the map at a default location. | boleano | Properties; Advanced:default location |
| standard latitude | Defines the latitude coordinate that the map displays ifuse default locationis enabled. | floating coma number | Properties; Advanced:standard latitude |
| standard length | Defines the longitude coordinate that the map displays ifuse default locationis enabled. | floating coma number | Properties; Advanced:default length |
| default zoom level | Sets the zoom level ifuse default locationis enabled, from 0 to 22. | whole | Properties; Advanced:Default zoom level |
| show current location | Displays the current location of the user. | boleano | Properties; Advanced:Current location |
| Latitude of current location | Sets 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 number | Properties; Advanced:Latitude of current location |
| Current location longitude | Sets 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 number | Properties; Advanced:current location longitude |
| check zoom | Shows the zoom control. | boleano | Properties; Advanced:expansion |
| control the compass | Shows the compass control. | boleano | Properties; Advanced:Compass |
| step control | Displays the tilt control. | boleano | Properties; Advanced:Tomás |
| tab index | Specifies the order in which the map is selected if the user navigates through the application using the Tab key. | whole | Properties; Advanced:tab index |
| tool tip | Determines the text that will be displayed when the user hovers the mouse over a visual element. | Corda | Advanced |
| content language | Determines the language in which the map is displayed, if it differs from the language used in the application. | Corda | Advanced |
| Charging | Contains code that is executed when the map is loaded. | Event | Advanced |
| OnMapClick | Contains code that is executed when the user selects the map. The latitude and longitude of the clicked point are in theClicked locationoutput property. | Event | Advanced |
| However | Contains code that is executed when any aspect of the map changes. | Event | Advanced |
| By selecting | Contains code that is executed when the user selects something on the map. | Event | Advanced |
pin properties
| Property | Description | Writes | aba |
|---|---|---|---|
| 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 applicable | Properties; Advanced:Elements |
| FoodLabels | Identifies the column inElementscontaining the pin labels. | column name | Advanced |
| ElementosLatitudes | Identifies the column inElementscontaining the latitude position of the pins. | column name | Advanced |
| ElementosLongitudes | Identifies the column inElementscontaining the length position of the pins. | column name | Advanced |
| food directions | Identifies 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 name | Advanced |
| ElementosNúcleos | Identifies the column inElementscontaining the colors of the pins. | column name | Advanced |
| articlesicons | Identifies the column inElementscontaining the pin icons. | column name | Advanced |
| cluster pines | Group nearby map markers together instead of displaying them individually. | boleano | Properties; Advanced:Grouping |
| pin color | Determines the default color of the pins displayed on the map. This color is replaced byElementosNúcleosproperty if defined | color picker | Properties; Advanced:PinColor |
| OnItemsChange | Contains code that is executed when the pins on the map change. | Event | Advanced |
route properties
| Property | Description | Writes | aba |
|---|---|---|---|
| enable routing | Determines whether the user can request directions to a specific location. | boleano | Properties; 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. | enumeration | Properties; Advanced:RutaWaypoints_Items |
| RotaWaypointsEtiquetas | Identifies the column inRutaWaypoints_Itemscontaining the waypoint labels. | column name | Advanced |
| RotaWaypointsLatitudes | Identifies the column inRutaWaypoints_Itemscontaining the latitude position of the waypoints. | column name | Advanced |
| RotaWaypointsLongitudes | Identifies the column inRutaWaypoints_Itemscontaining the longitude position of the waypoints. | column name | Advanced |
| RotaWaypointsDirections | Identifies the column inRutaWaypoints_Itemscontaining addresses that represent the location of the waypoints. | column name | Advanced |
| Maintain the order of waypoints | Determines if a calculated route keeps waypoints in the given order. | boleano | Properties; Advanced:RotaManterOrdem |
| optimize route | Determines if a calculated route is optimized for distance, time, or not optimized. | enumeration | Properties; Advanced:route optimization |
| 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. | enumeration | Properties; Advanced:RouteTravelMode |
| OnRouteDirectionChange | Contains the code that is executed when the application detects that the user has changed direction during a calculated route. | Event | Advanced |
shape properties
| Property | Description | Writes | aba |
|---|---|---|---|
| show shapes | show the shapes inshapes_elements. | boleano | Properties; Advanced:show shapes |
| shapes_elements | Identifies 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 name | Advanced |
| ShapeGeoJSONObjects | Identifies 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 name | Advanced |
| shape labels | Identifies the column inshapes_elementscontaining the labels for the shapes. | column name | Advanced |
| ShapeCores | Identifies the column inshapes_elementscontaining the colors of the shapes. | column name | Advanced |
| show shape labels | Display shape labels, if provided. | boleano | Properties; Advanced:show shape labels |
| Enable shape drawing | Show drawing tools on the map. | boleano | Properties; Advanced:shape drawing |
| Enable shape deletion and label editing | Determines if the user can delete shapes and edit their labels. | boleano | Properties; Advanced:Shape editingDelete |
| OnShapeCreated | Contains code that is executed when the user adds a shape to the map. | Event | Advanced |
| AboutFormSelected | Contains code that is executed when the user selects a shape on the map. | Event | Advanced |
| OnShapeEdited | Contains code that is executed when the user modifies a shape on the map. | Event | Advanced |
| OnShapeDeleted | Contains code that is executed 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 theseoutput propertiesin other controls or to customize the app experience.
| Property | Description | Writes |
|---|---|---|
| CenterLocation | Capture the center point of the map. | Not applicable |
| Clicked location | Captures the last location selected by the user, either.Latitudeo.Length. | Registry |
| Selected | Captures the selected pin. | Registry |
| selected articles | Captures the selected pin or pins in the selected cluster. | low hill |
| geocoded elements | Captures the geocoded locations of the pins. | low hill |
| RutaWaypoints_Selected | Corresponds to the registration of the shape selected in theRutaWaypoints_Items. | Registry |
| RutaWaypoints_SelectedItems | Matches the records of the selected overlapping shapes inRutaWaypoints_Items. | low hill |
| selected_shapes | Corresponds to the registration of the shape selected in theshapes_elements. | Registry |
| shapes_selected elements | Matches the records of the selected overlapping shapes inshapes_elements. | low hill |
| selected shape | capture the.Perimetermi.Areain the selected way. | Registry |
| EliminadoForma | capture the.Perimetermi.Arealast excluded. | Registry |
| GeoJSON | Gets 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
FAQs
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.
- 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 Select a country or region. ...
- 3 Input your data. ...
- 4 Color code your interactive map. ...
- 5 Customize your settings. ...
- 6 Share your interactive map.
Jun 16, 2020
10 tools to create interactive maps
- Mapbox.
- ArcGIS Storymaps.
- Google Maps.
- StoryMapJS.
- Visme.
- Zeemaps.
- Shorthand.
- Felt.
Use a custom control to add visualizations to a column
- Sign in to Power Apps.
- Expand Data, select Tables, select the Opportunity table, and then select the Forms area.
- Open a form such as the Main form for the Opportunity table.
- Once in the form, select switch to classic.
Nov 9, 2022
Implementation
- Step 1: Create screens. ...
- Step 2: Define the collection. ...
- Step 3: Define the color theme. ...
- Step 4: Define the variable for the active tab. ...
- Step 3: Add a component. ...
- Step 4: Logic to update the height when the submenu is opened. ...
- Step 5: Create output property. ...
- Step 6: Set the value of the custom property.
Mar 19, 2022