Apply Here Map in Windows Phone HTML5 Apps

• Download source - 244.8 KB

Introduction

This tutorial is about how to add Nokia Here map in Windows Phone Html5 Apps. You know
Windows phone html5 app gives us the facilities to write apps using HTML, CSS and JavaScript. Here I shall use HTML, JavaScript and CSS to implement the Here Map.

This tutorial describes the following topics:

• Create a Windows Phone Html5 App
• Create an Application ID and Application Token for Here Map credential
• Add a Here Map in Html5 App
• Show a Marker and InfoBubble in Here map

Part 1: Create a Windows Phone Html5 App

The following steps show how to create a Windows Phone Html5 App.

1. Open Microsoft Visual Studio 2012.
2. Open File -> New -> Project. It will open the following window:
3. Select Windows Phone option from left panel and select Windows Phone HTML5 App template
   from right panel.
4. Type the Name of the project and Locations and click Ok.
5. This will open a new Html5 App Project. The solution of the app is shown below:

   

6. The XAML code for MainPage.xaml is shown below:
   XML

   <phone:PhoneApplicationPage
       x:Class="AroundYou.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
       xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       FontFamily="{StaticResource PhoneFontFamilyNormal}"
       FontSize="{StaticResource PhoneFontSizeNormal}"
       Foreground="{StaticResource PhoneForegroundBrush}"
       SupportedOrientations="Portrait" Orientation="Portrait"
       shell:SystemTray.IsVisible="True">
       <Grid x:Name="LayoutRoot" Background="Transparent">
           <phone:Pivot Name="pivotBroser" Margin="0">
               <phone:PivotItem Margin="0" >
                   <Grid>
                       <ProgressBar x:Name="pg1" 
                       Value="100"  Margin="20" Maximum="200" 
                       Height="15" IsIndeterminate="True" />
                   </Grid>
               </phone:PivotItem>
               <phone:PivotItem Margin="0" >
                   <Grid>
                       <phone:WebBrowser x:Name="MapBrowser" 
                       IsScriptEnabled="True"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Loaded="MapBrowser_Loaded" 
                             Background="Red"
                             NavigationFailed="MapBrowser_NavigationFailed" 
                             LoadCompleted="MapBrowser_LoadCompleted"
                             Navigated="MapBrowser_Navigated" />
                   </Grid>
               </phone:PivotItem>
           </phone:Pivot>
       </Grid>
       <phone:PhoneApplicationPage.ApplicationBar>
           <shell:ApplicationBar IsVisible="True" 
           IsMenuEnabled="True" Mode="Minimized">
               <shell:ApplicationBarIconButton IconUri=
               "/Assets/AppBar/appbar.back.rest.png" 
                                               IsEnabled="True" 
                                               Text="back" 
                                               Click="BackApplicationBar_Click"/>
               <shell:ApplicationBarIconButton 
               IconUri="/Assets/AppBar/appbar.next.rest.png" 
                                               IsEnabled="True" 
                                               Text="forward" 
                                               Click="ForwardApplicationBar_Click"/>
               <shell:ApplicationBar.MenuItems>
                   <shell:ApplicationBarMenuItem Text="home" 
                   Click="HomeMenuItem_Click" />
               </shell:ApplicationBar.MenuItems>
           </shell:ApplicationBar>
       </phone:PhoneApplicationPage.ApplicationBar>
   </phone:PhoneApplicationPage>

7. The backend code for MainPage is shown below:
   C#

   public partial class MainPage : PhoneApplicationPage
       {
           private string MainUri = "/Html/index.html";
           public MainPage()
           {
               InitializeComponent();
           }
           private void MapBrowser_Loaded(object sender, RoutedEventArgs e)
           {
               MapBrowser.Navigate(new Uri(MainUri, UriKind.Relative));
           }
           private void BackApplicationBar_Click(object sender, EventArgs e)
           {
               MapBrowser.GoBack();
           }
           private void ForwardApplicationBar_Click(object sender, EventArgs e)
           {
               MapBrowser.GoForward();
           }
           private void HomeMenuItem_Click(object sender, EventArgs e)
           {
               MapBrowser.Navigate(new Uri(MainUri, UriKind.Relative));
           }
           private void MapBrowser_NavigationFailed
           (object sender, System.Windows.Navigation.NavigationFailedEventArgs e)
           {
               MessageBox.Show("Navigation to this page failed, 
               	check your internet connection");
           }
           private void MapBrowser_LoadCompleted(object sender, NavigationEventArgs e)
           {
               PivotItem item = (PivotItem)pivotBroser.Items[1];
               pivotBroser.SelectedIndex = 1;
           }
           private void MapBrowser_Navigated(object sender, NavigationEventArgs e)
           {
               
           }
       }

8. The default code for index.html is shown below:
   HTML

    <!DOCTYPE html>
   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           <link rel="stylesheet" type="text/css" 
           href="/html/css/phone.css" />
           <title>Windows Phone</title>
       </head>
       <body>
           <div>
               <p>MY APPLICATION</p>
           </div>
           <div id="page-title">
               <p>page title</p>
           </div>
       </body>
   </html>

Part 2: Create an Application ID and Application Token for Here Map Credential

So, to add a Here Map in our project, we need Authentication Token. It contains one Application Id and one Application Token number. The steps to get Authentication Token are shown below:

1. Browse the site http://developer.here.com.
2. Click on Sign In / Registration.
3. If you are a new user, then click on Registration button.
4. It will bring the following popup.

   

5. Fill the necessary field and click on Registration.
6. After mail verification, login with new Email and Password.
7. After login click on Create App.
8. It will show the following UI.

   

9. After completing the process, you will get an Application Id and Application token.

Note: For details on how to register and get Authentication Token, please go to the URL http://developer.nokia.com/Community/Wiki/How_to_Obtain_Your_Own_Nokia_appID_and_Token with login state.

Part 3: Add a Here Map in Html5 App

Now is the time to add code for Here Map. I shall add Here Map using JavaScript and CSS in index.html page.

The following code shows the code for index.html after applying the Here Map.

<!DOCTYPE html>
<html>
    <head>
        <title>Here Map</title>
		<meta name=viewport content="initial-scale=1.0, 
		maximum-scale=1.0, user-scalable=no"/>
		<script type="text/javascript" 
		charset="UTF-8" 
		src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
        <style type="text/css">
			#mapContainer {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
			}
		</style>
    </head>
    <body>
        <div id="mapContainer"></div>
		<script type="text/javascript" id="exampleJsSource">
		    nokia.Settings.set("app_id", "hgdlNkMDgQ1gNTkpTC0U");
		    nokia.Settings.set("app_code", "D0aMgUETHr8LyoDoo1WF6g");
		    var mapContainer = document.getElementById("mapContainer");
		    var map = new nokia.maps.map.Display(mapContainer, {
		        center: [23.709921, 90.407143],
		        zoomLevel: 15
		    });
		</script>
    </body>
</html>

Description of the above code segment

<script type="text/javascript" 
src="http://js.api.here.com/se/2.5.3/jsl.js" charset="utf-8">
</script> 

This JavaScript file allows the user to create Here Map Objects and call the necessary APIs.

nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR TOKEN"); 

The above two lines are executed first and check for Authentication.

var map = new nokia.maps.map.Display(object,object); 

This line of code initializes a map object in your site and binds it with a div control supplied as a parameter.

Part 4: Show a Marker and InfoBubble in Here Map

Finally, we are going to add a marker and InfoBubble on the Map. To do that, we have to add the following lines of code:

// This statement create a new instance of InfoBubbles 
var infoBubbles = new nokia.maps.map.component.InfoBubbles(); 
//This statement create a new instance of StandardMarker 
var standardMarker = new nokia.maps.map.StandardMarker(map.center); 

//This statement bind click event with the Marker and on click shows the infoBubble.

standardMarker.addListener(
                CLICK,
                function (evt) {
                    infoBubbles.openBubble("Dhaka, Bangladesh", standardMarker.coordinate);
                }
            );

// Next we need to add it to the map's object collection so it will be rendered into the map.
map.objects.add(standardMarker); 

The complete code for index.html is shown below:

<!DOCTYPE html>
<html>
    <head>
        <title>Here Map</title>
		<meta name=viewport content="initial-scale=1.0, 
		maximum-scale=1.0, user-scalable=no"/>
		<script type="text/javascript" charset="UTF-8" 
		src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
        <style type="text/css">
			#mapContainer {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
			}
		</style>
    </head>
    <body>
        <div id="mapContainer"></div>
		<script type="text/javascript" id="exampleJsSource">
		    nokia.Settings.set("app_id", "hgdlNkMDgQ1gNTkpTC0U");
		    nokia.Settings.set("app_code", "D0aMgUETHr8LyoDoo1WF6g");
		    var mapContainer = document.getElementById("mapContainer");
		    var infoBubbles = new nokia.maps.map.component.InfoBubbles();
		    var map = new nokia.maps.map.Display(mapContainer, {
		        center: [23.709921, 90.407143],
		        zoomLevel: 15,
		        components: [infoBubbles]
		    });
		    var standardMarker = new nokia.maps.map.StandardMarker(map.center);
		    var TOUCH = nokia.maps.dom.Page.browser.touch,
                CLICK = TOUCH ? "tap" : "click";
		    standardMarker.addListener(
                CLICK,
                function (evt) {
                    infoBubbles.openBubble
                    ("Dhaka, Bangladesh", standardMarker.coordinate);
                }
            );
		    map.objects.add(standardMarker);
		</script>
    </body>
</html>

The UI for this project is shown below:

Loading	Map

Conclusion

Hope after reading this tutorial, you have come to know about how to add Here Map in Windows Phone Html5 App. During Map loading in the WebBrowser control it takes some time, so I have added a ProgressBar control for user's good impression. For this, I have added a Pivot Control. The attached zip file contains all the code.

My Published Articles

1. Implementation of MVC Patterns in ASP.NET Web forms Application.
2. MVC Patterns (Active and Passive Model) and its presentation using ASP.NET Web forms.