Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API
There have been a lot of requests from the community about the ability to display a map in PowerApps. While we don’t yet have a Maps Control in PowerApps, we can use the Image Control to display maps - thankfully to Bing Maps OR Google Maps via the Bing Maps Imagery API & Google Static Maps API respectively.
Map scenarios
Here are the scenarios that we will build today using the Image Control:
- Display a map for a given named location or address
- Display a map for the current GPS location of the device
- Zoom In / Zoom Out using a Slider
- Navigate to the Maps app or Web Page when clicked
Preparation
Get the Bing Maps API Key by visiting this URL OR the Google Static Maps API Key by visiting this URL. Note down the Key for use later in the tutorial.
In the PowerApps Studio or Web, Create a New Blank app (pick either Phone or Tablet layout as per your need).
Add a Configuration Screen
We’ll first create a Configuration Screen to store some information which can be used by other screens in the app. Rename the Screen1 to ConfigurationScreen from the Tree view on the left side.
Insert a Text input control from the Insert Tab > Text > Text input
Rename the control from TextInput1 to txtBingMapsKey (If you want to use the Bing Maps API) or txtGoogleMapsKey (if you want to use Google Maps API). Change HintText to “Enter Maps Key here” and the Default to the ACTUAL KEY value from the Bing Maps or the Google Maps site from the first step of this tutorial.
Insert another Text input control from the Insert tab > Text > Text input. Rename this control to txtImageWidth, change Hint Text to “Enter Maps Image Width here”, change Default to “600” (if phone layout) or “1200” (if tablet layout), change Format to Number from the Properties pane on the right.
Copy the txtImageWidth (CTRL + C) and Paste (CTRL + V) in the same screen to create a copy. Rename the control to txtImageHeight, change the Hint Text to “Enter Maps Image Height here”, change Default to “300” (for phone layout) and “600” (for tablet layout).
Add the Main Screen
Insert > New Screen > Blank layout.
Rename the Screen2 to MainScreen.
Move the MainScreen Up by clicking on the Move Up icon in the context menu
Insert > Media > Image control to add a new Image to the screen.
Rename the control from Image1 to imgMapControl. Set the Width to txtImageWidth and Height to txtImageHeight.
Scenario 1: Display a map for a given named location or address
Let’s insert a Text input control to enter the location or address for the map: Insert Tab > Text > Text input. Rename the control to txtLocation. Move it to a location in the screen where appropriate.
Change Hint Text as “Enter a location or address” and keep Default as an empty string “” or your favorite location – for e.g. Times Square, New York, Seattle etc...
For rendering the Map, use the following formula in the Image property of the imgMapControl :
For Bing Maps Use:
"https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & EncodeUrl(txtLocation.Text) & "?mapSize=" & txtImageWidth & "," & txtImageHeight & "&key="&txtBingMapsKey.Text
Bing Maps: Refer to the Get a Static Map article for examples and other parameters.
For Google Maps Use:
"https://maps.googleapis.com/maps/api/staticmap?center=" & EncodeUrl(txtLocation.Text) & "&size=" & txtImageWidth & "x" & txtImageHeight & "&key="&txtGoogleMapsKey.Text
Google Maps: Refer to examples and parameters in the Google Static Maps Developer Guide.
Here are the screenshots for the Location: Space Needle, Seattle using Bing Maps:
And here is the same location using Google Maps (note the size is restricted to 640x640 in Google Maps, as I am using a Free version of the API):
Playing with some of the options
Changing ImagerySets (Bing Maps) and Map Types (Google Maps):
Bing Maps supports multiple imagerySets. Lets add a dropdown to see the effect of changing these imagerySets.
Insert > Controls > Dropdown to add a dropdown. Rename the control to drpBingImageSets. Set the Items property to the following:
["Road","Aerial", "AerialWithLabels", "AerialWithLabelsOnDemand", "CanvasDark", "CanvasLight", "CanvasGray"]
Change the formula in the Image property of the imgMapControl to include the imagerySet option :
"https://dev.virtualearth.net/REST/V1/Imagery/Map/" & drpBingImagerySets.Selected.Value & "/" & EncodeUrl(txtLocation.Text) & "?mapSize=" & txtImageWidth & "," & txtImageHeight & "&key="&txtBingMapsKey.Text
Google Maps supports four types of maptypes. Lets add a dropdown to see the effect of changing these types.
Insert > Controls > Dropdown to add a dropdown. Rename the control to drpGoogleMaptypes. Set the Items property to the following:
["roadmap","terrain", "satellite", "hybrid"]
Change the formula in the Image property of the imgMapControl to include the maptype option :
"https://maps.googleapis.com/maps/api/staticmap?center=" & EncodeUrl(txtLocation.Text) & "&&size=" & txtImageWidth & "x" & txtImageHeight & "&maptype=" & drpGoogleMaptypes.Selected.Value & "&key="&txtGoogleMapsKey.Text
These Map APIs are pretty powerful and I am sure, you will be tempted to try out other options available for customization. For now let’s move on to the next scenario:
Scenario 2: Display a map for the current GPS location of the device
PowerApps provides native access to Device Signals such as Location (GPS), Acceleration, Compass, etc. Let’s use the Location signal to show the current location on a map.
For that, we shall use the same txtLocation Text input to display the GPS coordinates if we select a Toggle to use GPS Location.
Insert > Controls > Toggle to insert a Toggle control on the screen. Rename it to tglGPSLocation.
Insert > Label to insert a Label control on the screen. Move it next to the Toggle and rename it to lblGPSLocation. Change the Text to “Use GPS Location:”.
Change the Default of the txtLocation Input text to this formula:
If(tglGPSLocation.Value, Location.Latitude & ","& Location.Longitude ,"")
For Bing Maps, change the formula in the Image property of the imgMapControl to include the centerpoint & pushpin options (Note we have to add the zoomLevel as well):
"https://dev.virtualearth.net/REST/V1/Imagery/Map/"&drpBingImagerySets.Selected.Value&"/" & EncodeUrl(txtLocation.Text) & "/15?mapSize=" & txtImageWidth & "," & txtImageHeight & "&pp=" & txtLocation.Text & ";21;I+am+here&key="&txtBingMapsKey.Text
For Google Maps, change the formula in the Image property of the imgMapControl to include the center & markers options (Note we have to add the zoomLevel as well):
"https://maps.googleapis.com/maps/api/staticmap?center=" & EncodeUrl(txtLocation.Text) & "&zoom=15&size=" & txtImageWidth & "x" & txtImageHeight & "&maptype=" & drpGoogleMaptypes.Selected.Value & "&markers=color:blue%7Clabel:M%7C"& EncodeUrl(txtLocation.Text)& "&key="&txtGoogleMapsKey.Text
Scenario 3: Zoom In / Zoom Out using a Slider
Moving the final scenario, lets add a Slider control to control the Zoom level. Insert > Controls > Slider. Rename the Slider1 to slZoom. Change Default to 15, Min to 1 & Max to 21.
Add a Label next to the slider to denote the zoom level. Insert > Label. Rename the Label to lbZoom. Change Text to : "Zoom (1-21):".
For Bing Maps, change the formula in the Image property of the imgMapControl to include the zoomLevel from the slider.
"https://dev.virtualearth.net/REST/V1/Imagery/Map/"&drpBingImagerySets.Selected.Value&"/" & EncodeUrl(txtLocation.Text) & "/"& slZoom.Value &"?mapSize=" & txtImageWidth & "," & txtImageHeight & "&pp=" & txtLocation.Text & ";21;I+am+here&key="&txtBingMapsKey.Text
For Google Maps, change the formula in the Image property of the imgMapControl to include the zoomLevel from the slider.
"https://maps.googleapis.com/maps/api/staticmap?center=" & EncodeUrl(txtLocation.Text) & "&zoom="& slZoom.Value & "&size=" & txtImageWidth & "x" & txtImageHeight & "&maptype=" & drpGoogleMaptypes.Selected.Value & "&markers=color:blue%7Clabel:M%7C"& EncodeUrl(txtLocation.Text)& "&key="&txtGoogleMapsKey.Text
Scenario 4: Navigate to the Maps app or Web Page when clicked
Lastly, lets add the navigation step when clicked on the image to open up the respective web page or app.
For Bing Maps, add the following Formula in the OnSelect for the imgMapControl:
If(tglGPSLocation.Value, Launch("bingmaps:?cp=" & EncodeUrl(Substitute(txtLocation.Text,",","~"))&"&lvl="&slZoom.Value), Launch("bingmaps:?q=" & EncodeUrl(txtLocation.Text)&"&lvl="&slZoom.Value))
Refer to this article for details: https://docs.microsoft.com/en-us/windows/uwp/launch-resume/launch-maps-app
For Google Maps, add the following Formula in the OnSelect for the imgMapControl:
Launch("http://maps.google.com/?q="&EncodeUrl(txtLocation.Text))
Refer to this article for details: https://developers.google.com/maps/documentation/urls/guide
Download the Sample App
Download the Sample App from here. Rename the downloaded zip file to SampleMapsApp.msapp and open using PowerApps Studio. Enjoy !