cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
bags999
Level: Powered On

View maps in sharepoint/powerapps

I have a sharepoint list that contains job site locations. I want to create a screen in powerapps where I can view all locations in the list on one google map.

 

Also, is it possible to customize the markers to display additional information when clicked. For instance, if I clicked on a marker, the powerapp would take me to a screen which displayed additional information contained in the sharepoint list. Also, is it possible for the markers to show additional data in the map itself without moving to a different screen? 

 

Thanks!

18 REPLIES 18
Super User
Super User

Re: View maps in sharepoint/powerapps

Hi bags999,

 

You would need to get yourself a developer key for a map API service, be it Bing or Google or one of the others.

The keys are free, but you're usually limited to x-number of calls per app per day.

 

I've found the static map method to be useful, but you will need to play around with the properties and layers that each service provides to determine what level of detail suits you.

 

Then, in PowerApps, it's a simple matter of inserting a normal media image, and specifying the URL of the mapping service along with the methods and properties you want returned - this blog by @pratapladhani has a great write-up about it.

 

Hope this helps,

 

RT

bags999
Level: Powered On

Re: View maps in sharepoint/powerapps

This does not help with viewing all data in the list. Could you point me to any solutions?

Super User
Super User

Re: View maps in sharepoint/powerapps

Hi bags999,

 

I've used this method to display multiple elements on a map from list data, including locations and location labels which were provided by the data.  Using the POST method you can get up to 100 pins on the map.

 

About the only limitation I can see is having the markers click-through to another page on the app itself - as the image and the markers are generated by Bing maps, not PowerApps.  Here I've just added 2 markers as an example;

 

map.jpeg

 

https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/47.619048,-122.35384/15?mapSize=500,500&pp=47....]

 

Perhaps I misunderstood - I thought you wanted to see job locations on the map?

 

Kind regards,

 

RT

bags999
Level: Powered On

Re: View maps in sharepoint/powerapps

Hello RT, 

 

This most certainly helps, however; I have a list of job locations (lat/long) in a sharepoint list. I want the map to automatically update when a list item is added/deleted. The map should also map all the job locations in one map (placing multiple markers). Also, I want the map to have different colored markers based on contractors. 

 

Thanks!

 

bags999

Super User
Super User

Re: View maps in sharepoint/powerapps

If you read up on the Static Map input parameters for the URL, you can pretty much do all of that, except you may be limited in terms of marker customisations - I know with google maps you could use your own markers, but as it seems they've changed their billing model, I haven't used it in a while.  You should be able to find a similar reference for google maps.

 

 

 

Hope this helps,

 

RT

bags999
Level: Powered On

Re: View maps in sharepoint/powerapps

Hello RT, 

 

I read through and was unable to figure out how to make it happen. Could you please provide me some assistance...

 

Thanks!

Super User
Super User

Re: View maps in sharepoint/powerapps

Hi there,

 

It's just a matter of inserting your data as variables into the URL string.

Let's say you have varLat and varLong as latitude and longitude location data, varLabel as a description and varIcon as a specific icon mapped to a job type.

If you take the URL I posted and break it up, you can see the parameters in the URL;

 

Syntax:

https://dev.virtualearth.net/REST/v1/Imagery/Map/imagerySet/centerPoint/zoomLevel?mapSize=mapSize&pu...

 

Example:

https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/47.619048,-122.35384/15?mapSize=500,500&pp=47.620495,-122.34931;21;Job1&pp=47.619385,-122.351485;21;Job2&pp=47.616295,-122.3556;22&key=[yourmapkeyhere]

 

each iteration of &pp= is a placepoint marker in the following syntax;

pushpin=latitude,longitude;iconStyle;label

 

You can see the syntax as well as the different icons here

 

In Powerapps you can prepare the URL string by setting it as a varaible itself and insert your data where needed.  Using the link above, you can pre-determine your icon style against your jobs.

You might set your variables based on the current row of data selected out of a Gallery as follows;

 

UpdateContext({varLat: ThisItem.LatitudeColumn, varLong: ThisItem.LongitudeColumn, varIcon: Switch({ThisItem.Description, "Permanent Job", 21, "Temp Job", 22, "FTC" 23, 20}))

or something like that anyway Smiley Happy

You can then construct the URL you will use for the image by inserting your variables into their proper places according to the URL syntax;

 

 

UpdateContext({myMapImageURL: "https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/47.619048,-122.35384/15?mapSize=500,500&pp=" & varLat & "," & varLong & ";" & varIcon & ";" & varLabel & "&pp=47.619385,-122.351485;21;Job2&pp=47.616295,-122.3556;22&key=[yourmapkeyhere]"})

 

If you have too many entries for the HTTP GET you can use the HTTP POST method for up to 100 markers - but that would be a different post entirely.

If you can post some data and some screenshots I can perhaps help you with your specific example, but this should be enough to get you going at least Smiley Happy

 

Hope this helps,


RT

 

bags999
Level: Powered On

Re: View maps in sharepoint/powerapps

Hello, 

 

Thanks for all your help! This is my sharepoint list:list in sharepoint.PNG 

 

There are more than 18 values and so I will need some help with the post method...

 

For the single map, I have done this: 2.PNG

 

The image field has this value: http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/?pushpin="& ThisItem.Latitude & "," &ThisItem.Longitude &";5;A"& "&key=[bing key hidden]"

 

Basically, I want to have a separate screen, which I have already made... and all the lat/long should be mapped (pushpins) and colored based on the contractor from the Sharepoint list (if possible). It would also be helpful if there are labels. 

Super User
Super User

Re: View maps in sharepoint/powerapps

Hi there,


There are a couple of ways you can achieve this, so my way is not necessarily the only way or the best way.

That said, this is how I do it;

 

[EDIT:

I changed the URL format to allow Bing to auto-centre and auto-zoom to show all points

This allows Bing to autocentre and autozoom for you]

 

If you consider the map URL, there are three parts - a fixed beginning (or prefix), a variable body with the pins and then a fixed ending (or suffix).

 

URL example:

https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=500,500&pp=47.63156378,-122.20375238;26;Label&pp=47.61031576,-122.19883025;26;Label&key=[yourAPIkey]

  

The fixed prefix is 

"https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=500,500"

 

The variable body is each pushpin, which may have one or multiple of the following;

"&pp=latitude,longitude;icon;label"

"&pp=latitude,longitude;icon;label"

"&pp=latitude,longitude;icon;label"

...

 

And the fixed suffix is your key at the end of the URL

"&key=[yourAPIkey]"

 

So to dynamically build this from data, the idea would be to build the string piece by piece, iterating the middle piece for your data, and then put the pieces together into one URL at the end.

 

For this example, I'm going to assume you've allocated an icon to each user manually and placed that data into your table - how you choose to do this may vary, I just collect the data into a collectIcons collection and added an "icon" column where I arbitrarily decided Kevin would get one icon (26) and Dave another (27). 

ClearCollect(collectIcons, AddColumns(Source, "icon", If(name="Kevin", 26, name="Dave", 27, "false")))

You could also build an If(name="Kevin", 26, name="Dave", 27) logic directly into your formula, but to keep it simple I'm going to assume you've put it into your table.

 

Next, contruct the prefix:

UpdateContext({strPrefix: "https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=500,500"})

[Edit: I've changed the URL to exclude a static centre point and zoom level, so you don't have to do anything else, Bing will auto-centre and auto-zoom for you.]  

 

Then the variable body of pushpins - here I create a concatenated variable based on the rows of the table as follows;

UpdateContext({strPoints: Concat(collectIcons, "&pp=" & latitude & "," & longitude & ";" & icon & ";" & name)})

latitude, longitude, icon and name are all columns in my collectIcons collection.  The Concat function let's me add rows of data together into one long string and place the result conveniently into a variable.   my strPoints variable now looks like this;

 

&pp=47.63156378,-122.20375238;26;Kevin&pp=47.61031576,-122.19883025;26;Kevin&pp=47.79679871,-122.01410675;26;Kevin&pp=47.56910516,-122.11846989;26;Kevin&pp=47.56875563,-122.11540806;26;Kevin&pp=47.53805161,-122.39715576;27;Dave&pp=47.72306,-122.35329;27;Dave&pp=47.60911213,-122.28940197;27;Dave&pp=47.57616,-122.22172;27;Dave&pp=47.6665352,-122.30149344;27;Dave

 

Then you construct the suffix, which is easily enough just your bing maps Key;

UpdateContext({strSuffix: "&key=[yourAPIkey]"})

Lastly, you pull it all together into the URL string you will use for your image;

UpdateContext({imageURL: Concatenate(strPrefix, strPoints, strSuffix)})

so my imageURL variable now looks like this;

https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=500,500&pp=47.63156378,-122.20375238;26;Kevin&pp=47.61031576,-122.19883025;26;Kevin&pp=47.79679871,-122.01410675;26;Kevin&pp=47.56910516,-122.11846989;26;Kevin&pp=47.56875563,-122.11540806;26;Kevin&pp=47.53805161,-122.39715576;27;Dave&pp=47.72306,-122.35329;27;Dave&pp=47.60911213,-122.28940197;27;Dave&pp=47.57616,-122.22172;27;Dave&pp=47.6665352,-122.30149344;27;Dave&key=[yourAPIkey]

Unfortunately I have to wrap it in the codeblock for this post, otherwise it get's treated like a hyperlink and gets cut off.

 

You can then set the Image property of your image to imageURL.  I edited my reply to change the URL from a fixed zoom and centrepoint to a BING-defined one - to show the difference between the two I've include both images below;

map2.jpegOLD IMAGE WITH MANUAL STATIC CENTREPOINT

 

map3.jpegNEW IMAGE WITH AUTO-ZOOM AND CENTRE

 

Hope this helps Smiley Happy

 

Kind regards,

 

RT

Helpful resources

Announcements
firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

Top Kudoed Authors
Users Online
Currently online: 63 members 3,702 guests
Please welcome our newest community members: