![Build Interactive Map Control On Canvas App Build Interactive Map Control On Canvas App](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-22.png?fit=480%2C337&ssl=1?v=1640424785)
Build Interactive Map Control On Canvas App
Step1: Enable Geospatial service.
Admin Center –> Environments –>”Your Environment” –>Settings –>Features
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-28.png?resize=601%2C136&ssl=1)
Step2: Adding Map control into screen
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-2.png?resize=245%2C356&ssl=1)
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
- ClearCollect(colAccountData,Accounts); –> Load entire table into collection.
- 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
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-3.png?resize=358%2C446&ssl=1)
Step 6: Select ItemAddresses property under map control. Here I’m using “address1_composite” column as an input address for the map control.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-4.png?resize=640%2C48&ssl=1)
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.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-5.png?resize=630%2C346&ssl=1)
Step 7: How to change pin color.
In this example I’m using static color for all the pins.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-6.png?resize=640%2C19&ssl=1)
ItemsColors:”Your Color Column Name”
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-29.png?resize=594%2C53&ssl=1)
Note: you can apply your logic while adding color column into collection to show different color based on requirement.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-23.png?resize=377%2C243&ssl=1)
Step 8: How to change pin icon.
Here I’m using static Icon for all the pins.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-10.png?resize=640%2C18&ssl=1)
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-12.png?resize=580%2C47&ssl=1)
Some of the icons you can use in canvas app.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-13.png?resize=640%2C120&ssl=1)
Refer this URL for different icons:
Step 9: Show label for each pins.
Here I’m showing account name on the label. You can map different column.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-14.png?resize=587%2C48&ssl=1)
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-24.png?resize=430%2C302&ssl=1)
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.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-25-1024x228.png?resize=640%2C143&ssl=1)
Step 11: Cluster near by addresses
Here you can cluster the near by address into single point.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-27.png?resize=350%2C203&ssl=1)
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-26.png?resize=640%2C168&ssl=1)
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
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-18.png?resize=624%2C52&ssl=1)
Step 2: Select RouteWayPointsAddresses property under map control. Here I’m using “address1_composite” column as an input address for the map control.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-19.png?resize=640%2C53&ssl=1)
Then, enable routing option on map control.
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-20.png?resize=314%2C137&ssl=1)
You optimize the route by distance or time.
Now, your map will look like this
![](https://i0.wp.com/365stack.in/wp-content/uploads/2021/12/image-22.png?resize=480%2C337&ssl=1)
Happy Building 🙂