Build Interactive Map Control On Canvas App

Step1: Enable Geospatial service.

 Admin Center –> Environments –>”Your Environment” –>Settings –>Features

Step2: Adding Map control into screen

Step3:

Here my backend database is Dataverse.

Table Name: Account

Collection Used: colAccountData, colRouteCollection

Usage:

colAccountData : To collect all the account address from Account Table.

colRouteCollection: To collect account address which will be used to show routing information.

Step 4: Here I’m loading collection on button click

1. ClearCollect(colAccountData,Accounts); –> Load entire table into collection.
2. ClearCollect(colAccountData,AddColumns(Accounts,”Color”,”red”,”AccountIcon”,”car”,”AccountName”,’Account Name’)); à Adding three more columns into our collection (Color,AccountIcon,AccountName).

Note: If your table already contains color or icon column you can skip b.

• ClearCollect(colRouteCollection,Filter(colAccountData,’Address 1: City’=”Lynnwood”||’Address 1: City’=”Renton”||’Address 1: City’=”Redmond”)); –> Planning to show route direction for this particular address alone. You can apply your logic here based on requirement.

ClearCollect(colAccountData,Accounts);
ClearCollect(colAccountData,AddColumns(Accounts,"Color","red","AccountIcon","marker","AccountName",'Account Name'));
ClearCollect(colRouteCollection,Filter(colAccountData,'Address 1: City'="Lynnwood"||'Address 1: City'="Renton"||'Address 1: City'="Redmond"));

Step 5: Select your map source

Step 6: Select ItemAddresses property under map control. Here I’m using “address1_composite” column as an input address for the map control.

Note: you can use latitude, longitude property as well to locate address.

            Eg: ItemsLatitudes:”Your Latitude Column Name”

            ItemLongitudes:”Your Longitude Column Name”

Now you can find pins located on the map.

Step 7: How to change pin color.

In this example I’m using static color for all the pins.

ItemsColors:”Your Color Column Name”

Note: you can apply your logic while adding color column into collection to show different color based on requirement.

Step 8: How to change pin icon.

Here I’m using static Icon for all the pins.

Some of the icons you can use in canvas app.

Refer this URL for different icons:

https://docs.microsoft.com/en-us/azure/azure-maps/how-to-use-image-templates-web-sdk#list-of-image-templates

Step 9: Show label for each pins.

Here I’m showing account name on the label. You can map different column.

Step 10: Show Info card for each pin when user clicks/hover

You can show multiple fields data in info card by adding fields in the map control. Refer below image.

Step 11: Cluster near by addresses

Here you can cluster the near by address into single point.

How to show Route information

Here I’m planning to show route direction for particular addresses alone so I’m using filter. You can apply your logic here based on requirement.

ClearCollect(colRouteCollection,Filter(colAccountData,'Address 1: City'="Lynnwood"||'Address 1: City'="Renton"||'Address 1: City'="Redmond"));

Step 1: Assign your route collection to RouteWaypoints_Items

Step 2: Select RouteWayPointsAddresses property under map control. Here I’m using “address1_composite” column as an input address for the map control.

Then, enable routing option on map control.

You optimize the route by distance or time.

Now, your map will look like this

Happy Building 🙂