Display
Customized Bing Map on PowerApps Portal
There is an out-of-the-box
option of displaying a map on the web page of PowerApps portals. However, we
can not change or modify the underlying aspx file. Hence the options are
limited; customization as per your requirements is not feasible.
The good news is that we can
create new web template and customize the map with the need to use
out-of-the-box map feature. I will be using Bing Map; however similar steps can
be applied for other maps as well.
Let’s get started!
Displaying Maps and Plotting Points on the Web Page:
Following steps will be done:
·
Page template
·
Web template
·
Web page
Scenario:
I will be using account
table from dataverse. The records in the table have latitudes and longitudes. I
have entered them manually. For the sake of this demo, the values are reused.
NOTE:
You must create a Bing Map
developer Account. You will get a key that will be used in code.
1-
Create Web Template:
Go to PowerApps portal management à Select web
templates from left pane à Select new
from the top.
I
created a web template Accounts Map which will only contain a map, you can do a
lot of other things as well. This web template uses an OData(WebAPI) query
to get the record’s latitude, longitude, and city from account table. We could
use additional filters as well.
Fetch XML query
can also be used to retrieve the data.
QUERY: /_api/accounts?$select=address1_longitude,address1_latitude,address1_city&$filter=(address1_latitude
ne null) and (address1_longitude ne null)
Complete Code:
You can find the complete
code on my GitHub.
Code
Breakdown:
There are three parts in the
code. The first part contains ‘div’ to display the map.
Second part:
The second part contains the
WebAPI. This is the ajax code that needs to be used to retrieve data from
dataverse. You just need to copy and paste the code and it will work fine.
The API will fetch the
filtered data in the form of object.
The main purpose of this part
is to retrieve data from account table through web API. The GetMap function is
described below.
Third part:
Here comes the interesting
part of code. The code to get Map!
Here you pass the credentials
then set the center of your map. I have set it to the first latitude and
longitude. I couldn’t find much information about zoom argument but 4 seems to
be US and 10 seems to be UK. I am using 12 which displays Sialkot. I am using a
for loop which runs to the length of results fetched by the query. What it does
is that every time takes a location (longitude, latitude) and then marks pin on
the map.
Click here for Microsoft Bing Maps documentation.
I have called this function after query is executed in the above picture
and assigned results = res.value because
query returns an object and I only need the values.
The next part of
the code is:
<script src="https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<YOUR
API KEY>" async defer></script>
This part of code calls the
map and is responsible to call the map.
2-
Create Page Template:
Go to PowerApps portal management à Select web
templates from left pane à Select new
from the top.
Make sure you select type as
Web template and then from the look up option, choose the template you
previously created. Account map in my case. You must check the Use website
header and footer option as well.
3-
Create Page Template:
Go to PowerApps portal management à Select web
templates from left pane à Select new
from the top.
Here make sure, the page
template you previously created is selected, it is accountsmap in my case.
OUTPUT:
Now, for the output of this
web page simply write the URL: https://YOUR_PORTAL_NAME.powerappsportals.com/accountsmap/
SUMMARY:
PowerApps portals in indeed a
great platform to create your websites quickly with a low code approach.
However, when it comes to customizations there are few limitations and
complications such as this case - integrating map to web page. However, we have
successfully accomplished this task.
This is highly customizable as
per your requirements. You may want to get more data from web API or design
your web template template in a different way etc.