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

Day 11 - Customizing Option Sets Dropdown Fields with JavaScript

  In this Blog, we will see how to Customizing Option Sets Dropdown Fields with JavaScript label1 = formContext.getAttribute( "bosch_op...