Monday, September 6, 2021

Powerapps with Bing Maps

 Introduction:

In this Post we will see how to user Powerapps with Bing Maps


1. Login to https://make.poweapps.com

2. Click Apps --> select New --> Select Canvas --> Select Tablet Mode

3. Add two Labels and Name like Follows

       a. "Latitude" & Location.Latitude

       b. "Longitude" & Location.Longitude

4. Go to Bing Maps Dev Center - Bing Maps Dev Center (bingmapsportal.com)

5. Click Sign In

6. Enter the Respective Details

7. Once the Account Created --> Go to My Account -->Select Keys



8. Expand show Key and Copy the Key

9. Navigate to Powerapps again ---> Select DataSource --> Select Add Data select  Bings Maps--> Paste the Key and click Done


10. Once Connected--> Add Image field in the Gallery

        a. in the Image Column BingMaps.GetMap("Road",15,Location.Latitude,Location.Longitude)

11. Once you provided you can see the map gets loaded


12. Once Done to add a Dynamic Values


13. Create 3 Text Box for Street,Country and PostalCode then three lables for the same
        a. then Add a Button and in onselect of button write this code     Set(getLocationByAddress,BingMaps.GetLocationByAddress({addressLine:TextInput1.Text,adminDistrict:TextInput1_1.Text,postalCode:TextInput1_2.Text}))


14. Then in the Label --> 2 new Lables
        "Latitude" & getLocationByAddress.point.coordinates.latitude
        "Longitude" & getLocationByAddress.point.coordinates.longitude

15. Once we click on Button the 14(labels will auto populate

16. Then select the Map and write below code

BingMaps.GetMap("Road",15,getLocationByAddress.point.coordinates.latitude,getLocationByAddress.point.coordinates.longitude,{pushpin:getLocationByAddress.point.coordinates.latitude&","&getLocationByAddress.point.coordinates.longitude&";21;"& TextInput1.Text})

"Road" --> Road View

15 --> Zoom Level

getLocationByAddress.point.coordinates.latitude --> Latitude

getLocationByAddress.point.coordinates.longitude --> Longitude

PushPin{} --> for Showing push pin with Comma separator with Latitude and Longitude

21--> Map with Pushpin number

TextInput1.Text --> To display address



GitHub Link for your reference



No comments:

Post a Comment

How to Clear Cache in Canvas PowerApps while working on Offline mode?

  Introduction In this blog, we’ll look at how to clear cache in Canvas Apps when using the Power Apps mobile application, especially when t...