Creating a clickable map in PowerApps

[TerrenceP]

I have a SharePoint Online list which contains the "names" of various Companies, their respective Lat Long "location", and other fields such as "number of employees", "products manufactured", and so on. I would like to display a single map in PowerApps showing the location of each company, and when a specific company is clicked, the user is taken to a Display form showing the other fields related to the Company such as "number of employees", "products manufactured", and so on.

I've already configured a PowerApp to browse/search companies from the above SP Online list, and then display more detailed information for each company; I just need to know how to achieve this using a map instead, as explained above.

Thanks in advance.

[aprildunnam]

I've did this using the Bing Maps API. Pratap Ladhani created a blog post that walks you through how to accomplish this with either Bing Maps or Google Maps. The steps are essentially the same: 1) Insert Image Control 2) Set Image Property to appropriate URL, making sure to pass in your location value

Here's the article:  https://powerapps.microsoft.com/en-us/blog/image-control-static-maps-api/

[TerrenceP]

Hi @aprildunnam

Thanks for this. Using the instructions on Pratap Ladhani's post, I've attempted to set the Image property to: 

"https://dev.virtualearth.net/REST/V1/Imagery/Map/"&drpBingImagerySets.Selected.Value&"/" & EncodeUrl(Company_Location.Text) & "/"& slZoom.Value &"?mapSize=" & txtImageWidth & "," & txtImageHeight & "&pp=" & Company_Location.Text & ";21;I+am+here&key="&txtBingMapsKey.Text 

where "Company_Location" is the field from the SharePoint list.

However, the map is displaying only the first record in the SharePoint list, i.e. one company location, and not all the company locations.

Will the solution work if you want to display just one location? I would like to display multiple locations on the same map. Thanks again.

[aprildunnam]

Sorry I misunderstood your requirements. I thought you wanted to select an item from a gallery and show that selected item on the map (one at a time) not show all locations on the map at once.  If that's the case then this method won't work.  I haven't attempted to plot multiple points on a map in PowerApps and am not sure if that's possible. 

[NabeelNQ]

Any updates on this?

[aprildunnam]

So I got this to work for me. Here's what I did.

1. Add your data source. In the OnVisible of the screen set a variable like below to create a string of plot points for your map:

UpdateContext({plotPoints: Concat('Office Locations', "&pp=" & Latitude & "," & Longitude & ";" &"26"&";" & Title)})

2.  Add an image control and set the image property to this:

"https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=550,550"&plotPoints&"&key=[Your key here]

[NabeelNQ]

Wow thanks for such a fast reply April!

I have one doubt though,

Should I create a data source in which, I have all the points of the Lat and Long, and then call them using the OnSelect property?

Thanks.

[aprildunnam · Accepted solution]

Yes. Sorry I left that part out. What I did is I have a Gallery control on the left hand side of the page which is showing the location data from my SharePoint list. On the right I have the map showing all the plot points. When you click on an item in the gallery it takes you to another screen with that item detail and the selected item showing on the map. See screenshots attached for more info.  I should really write a blog or do a video about this!

[RandyHayes]

@NabeelNQ 

Not sure what kind of update you are looking for - if it's possible, or if they answered the question.

If you're wondering if this is possible - yes it is.  I can't speak for Google maps (and I'm sure you can), but I know we can do it on Bing maps with pushpins. (which would be limited to 18 locations since you would only be able to do an HTTP Get on the map through a URL)

However, the challenge is NOT about displaying the locations on the map, the challenge would be clicking on them and having an action occur within PowerApps.  This is a bit complex as you would need to overlay a horizontal and veritcal gallery overtop of your Map image.  Then you would need to do calculations based on (most likely Lat and Long) of the top left corner of the map, the scale of the map and so forth.  Then you would be able to match a coordinate system to the map (your gallery grid) that could respond to OnSelect actions and match Lat/Lon value against your data. And thus, ultimately displaying the results you need.

Doable - Yes.  Out-of-the-box drop in the bucket - No.

I hope this helps provide some more info for you.

[NabeelNQ]

Yes, this is exactly what I am talking about!

I havent tried it yet, but thanks a lot.

And you really should write something on this topic, there is too little info about using maps for beginners like me.