Skip to content

Commit 6022f7d

Browse files
author
Iaan D'Souza-Wiltshire
committed
updates to include customization
1 parent 49ce77d commit 6022f7d

File tree

5 files changed

+38
-22
lines changed

5 files changed

+38
-22
lines changed

powerapps-docs/maker/canvas-apps/geospatial-component-map.md

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -56,33 +56,39 @@ You can load a table that contains existing data from an Excel workbook into the
5656

5757
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.
5858

59-
Column description | Maps to property
60-
-- | --
61-
Label for the pin | ItemsLabels
62-
Longitude of the pin | ItemsLongitudes
63-
Latitude of the pin | ItemsLattitudes
59+
Column description | Maps to property | Required
60+
-- | -- | --
61+
Label for the pin | ItemsLabels | Required
62+
Longitude of the pin | ItemsLongitudes | Required
63+
Latitude of the pin | ItemsLattitudes | Required
64+
Color of the pin | ItemsColors | Optional
65+
Icon for the pin | ItemsIcons | Optional
66+
67+
You can also use a string to denote the address in ItemsAddresses, in which case ItemsLongitudes and ItemsLatitudes won't work.
6468

65-
You can also use a string to denote the address, in which case ItemsLongitudes and ItemsLatitudes won't work.
69+
The color field accepts any CSS string, as defined in [Color enumeration and ColorFade, ColorValue, and RGBA functions in Power Apps](./functions/function-colors).
6670

71+
You can use the icons described in the [List of image templates](/azure/azure-maps/how-to-use-image-templates-web-sdk#list-of-image-templates) topic as your icon.
6772

6873
The following is an example of an Excel table with the required columns:
6974

70-
![Sample excel file with a table named TestData and containing Name, Longitude, and Latitude columns](./media/geospatial/sample-excel.png)
75+
76+
:::image type="content" source="media/geospatial/sample-excel.png" alt-text="Sample excel file with a table named TestData and containing Name, Longitude, and Latitude columns":::
7177

7278
You can copy the following sample data to test this functionality:
7379

74-
Name | Longitude | Latitude
75-
-- | -- | --
76-
Fourth Coffee (sample) | -98.29277 | 26.2774
77-
Litware, Inc. (sample) | -96.85572 | 32.55253
78-
Adventure Works (sample) | -96.99952 | 32.72058
79-
Fabrikam, Inc. (sample) | -118.30746 | 34.86543
80-
Blue Yonder Airlines (sample) | -118.66184 | 34.17553
81-
City Power & Light (sample) | -113.46184 | 37.15363
82-
Contoso Pharmaceuticals (sample) | -80.26711 | 40.19918
83-
Alpine Ski House (sample) | -102.63908 | 35.20919
84-
A. Datum Corporation (sample) | -89.39433 | 40.71025
85-
Coho Winery (sample) | -116.97751 | 32.87466
80+
Name | Longitude | Latitude | Color | Icon
81+
-- | -- | -- | -- | --
82+
Fourth Coffee (sample) | -98.29277 | 26.2774 | Blue | marker-flat
83+
Litware, Inc. (sample) | -96.85572 | 32.55253 | #ffefcd| hexagon-thick
84+
Adventure Works (sample) | -96.99952 | 32.72058 | | car
85+
Fabrikam, Inc. (sample) | -118.30746 | 34.86543 | |
86+
Blue Yonder Airlines (sample) | -118.66184 | 34.17553 | |
87+
City Power & Light (sample) | -113.46184 | 37.15363 | |
88+
Contoso Pharmaceuticals (sample) | -80.26711 | 40.19918 | |
89+
Alpine Ski House (sample) | -102.63908 | 35.20919 | |
90+
A Datum Corporation (sample) | -89.39433 | 40.71025 | |
91+
Coho Winery (sample) | -116.97751 | 32.87466 | |
8692

8793

8894

@@ -101,9 +107,10 @@ Coho Winery (sample) | -116.97751 | 32.87466
101107

102108
1. Open or create a new app in Power Apps, and insert the map component.
103109

104-
1. On the **Properties** pane, select the **Data source(Items)** field and then search for *excel* and select **Import from Excel**.
110+
1. On the **Properties** pane, select the **Locations(Items)** field and then search for *excel* and select **Import from Excel**.
111+
112+
:::image type="content" source="media/select-excel.png" alt-text=" ":::
105113

106-
![](./media/geospatial/select-excel.png)
107114

108115
1. Locate the Excel workbook and then select **Open**. Select the table that contains the information, **TestData**, and then **Connect**.
109116

@@ -116,11 +123,20 @@ Coho Winery (sample) | -116.97751 | 32.87466
116123
- **ItemsLabels** as *TestData.Name*
117124
- **ItemLatitudes** as *TestData.Latitude*
118125
- **ItemsLongitudes** as *TestData.Longitude*
126+
- (Optional) **ItemsColors** as *TestData.Colors*
127+
- (Optional) **ItemsIcons as *TestData.Icons*
119128

120-
1. The map component will now show each row in the table as a pin, labeled with its *Name* as defined in the Excel table.
129+
1. 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.
121130

122131
![](./media/geospatial/map-expanded.png)
123132

133+
![A screenshot of the map component with custom icons and different colors ](./media/geospatial/geospatial-custom-pins-formula.png)
134+
135+
>[!TIP]
136+
>You can assign the same custom icon to all pins. For the **ItemsIcons** field in the Advanced Properties pane, enter the icon you want to use. For example, set **ItemsIcons** to *MarkerSquare*.
137+
138+
139+
124140
### Properties
125141

126142
The following properties can be defined and configured in the component's **Properties** pane.
191 KB
Loading
41.2 KB
Loading
5.24 KB
Loading
4.8 KB
Loading

0 commit comments

Comments
 (0)