MS Build 2022 Bing Maps in Microsoft Power Pages

During the opening keynote of Microsoft Build 2022, Microsoft CEO, Satya Nadella highlighted the Ukraine Live Aid platform. UkraineLiveAid.com is an initiative to support Ukrainian refugees in Portugal, that was created by Edgar Simões, an Economist. What makes this accomplishment more amazing is even without a developer background, Edgar leveraged power pages within Microsoft’s Power Platform, which includes Bing Maps, to build a website. This website provides an interactive map showing donation sites around the country.

“My first thought was that we needed a live map”
 

Edgar published his full thought process and development story on LinkedIn at Ukraine Live Aid - An interactive map of donation points in Portugal and you can view the video highlight from MS Build on YouTube at Ukraine Live Aid- Power Pages (Satya Nadella 2022 Build Keynote).  Let's look deeper into Edgar's choices

Microsoft Power Platform

Edgar chose the power platform because he is not a developer. He freely admits that he does not know how to code, or even edit html, so it would be a challenge for him to build a custom platform from scratch. But, he did have experience with building low code solutions with Power Apps.  He then leveraged Power Pages to build his custom website in as little as two days.

Ukraine Live Aid site

You can create a free Microsoft 365 Developer account like Edgar did at https://developer.microsoft.com/en-us/microsoft-365/dev-program. Once you have set up your Power Platform Developer environment, it is as easy as drag and drop to add a Bing Map to your report or Web page in the power platform. Check out Tips and Tricks for maps (including Bing Maps integration) - Power BI | Microsoft Docs

Bing Maps Custom URL


To enable users, in Edgar's case donors and refugees, a navigation experience from the web page or app, it is as easy as creating a custom URL Create a Custom Map URL - Bing Maps | Microsoft Docs.  Just start with the Bing Maps base map URL:

https://bing.com/maps/default.aspx


Add a “?” and whatever parameters you need to launch the map in the right location with the right attributes. For example, this URL brings up the map with a search result for “Portugal”

https://www.bing.com/maps/default.aspx?where1=Portugal
 

Low Code with Bing Maps

Should your solution not require the Microsoft Power Platform, you can take advantage of an incredibly easy, low code option to add a Bing Map to your website. Our Bing Maps V8 Interactive SDK shows how to add a map with only a few lines of HTML or script. For a simple introduction, try the following steps:

  1. Go to Set color of default pushpin (bing.com)
  2. In the Javascript panel type and replace the word “red” the word “blue”
  3. Press the green circle with the white triangle to run the script with your change
  4. The red pin will now be drawn in blue

Just Get Started

Edgar turned his passion for working with Microsoft Power Platform into a job.  He is a Microsoft  Technical Power Platform Support Engineer in the area of low-code/no-code automation.  Let his story inspire you to also try creating something, even if you are not a developer.