View maps in sharepoint/powerapps

[bags999]

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!

[RusselThomas]

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]

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

[RusselThomas]

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;

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]

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

[RusselThomas]

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]

Hello RT, 

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

Thanks!

[RusselThomas]

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 🙂

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 🙂

Hope this helps,

RT

[bags999]

Hello, 

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

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: 

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. 

[RusselThomas]

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

• The original URL format was https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/47.619048,-122.35384/8?mapSize=500,500&pp=
• The new format without a static centrepoint is https://dev.virtualearth.net/REST/v1/Imagery/Map/Road?mapSize=500,500&pp=

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;

OLD IMAGE WITH MANUAL STATIC CENTREPOINT

NEW IMAGE WITH AUTO-ZOOM AND CENTRE

Hope this helps 🙂

Kind regards,

RT