Archive

Archive for March 8, 2020

Canvas App -Working with Bing Maps connector

In this article lets understand the basics of ‘Bing Maps‘ connector to locate the addresses in Canvas App.

Prerequisites:

  • Subscribe to Dynamics 30 days trial and get Office 365 account.
  • Connect to Power Apps maker portal using Office 365 account to build the Canvas App.
  • Bing Map API Key

How to get Bing Map API Key:

  • Connect to Bing Maps Portal
  • ‘Sign In’ using either ‘Microsoft Account’ or ‘Enterprise Azure Active Directory account’.

bm_1

  • Go to ‘My account -> My Keys’ and create a new key. (Steps to create new key)
  • Copy the Key which we gonna use in next steps.

bm_2

Adding ‘Bing Maps’ connector to Canvas App:

  • Create a new Canvas App.
  • Add a ‘Bing Maps’ connector.
  • Provide the ‘API Key’ captured previously.

bm_3

Locate address using ‘Bings Maps’ connector:

  • For better understanding, I added below controls to my Canvas app’s screen.
    • 3 Text box controls to capture address
    • An Image control which loads the map
    • A Button to load the map.
  • On Button ‘OnSelect’, Declare a global variable ‘varAddress‘ and use BingMaps.GetLocationByAddress API to convert the address to coordinates (i.e., Latitude and Longitude).
    • Set(
      varAddress,
      BingMaps.GetLocationByAddress(
      {
      addressLine: txtAddress1.Text,
      locality: txtAddress2.Text,
      postalCode: txtZip.Text
      }
      )
      );

bm_4

  • Now use the coordinates from ‘varAddress‘ variable and load the map in Image control.
  • Set ‘Image’ property to BingMaps.GetMap() by setting coordinates from ‘varAddress’.
    • BingMaps.GetMap(
      “AerialWithLabels”,
      15,
      varAddress.point.coordinates.latitude,
      varAddress.point.coordinates.longitude)

bm_5

  • Run the App and you should see the address located in Map.

bm_6

  • You can also show a ‘Push Pin’ using ‘pushpin’ property. You need to pass coordinates as below.
    • BingMaps.GetMap(
      “AerialWithLabels”,
      15,
      varAddress.point.coordinates.latitude,
      varAddress.point.coordinates.longitude,{pushpin:varAddress.point.coordinates.latitude&”,”&varAddress.point.coordinates.longitude}
      )

bm_7

🙂

Categories: PowerApps Tags: , ,