×
Namespaces

Variants
Actions
(Difference between revisions)

Nokia Maps for WP7 using Bing Map Control

From Nokia Developer Wiki
Jump to: navigation, search
galazzo (Talk | contribs)
m (Galazzo -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
[[Category:Windows Phone]][[Category:Location]][[Category:Nokia Maps]][[Category:Code Examples]]
 
[[Category:Windows Phone]][[Category:Location]][[Category:Nokia Maps]][[Category:Code Examples]]
{{Abstract|This article explains how to port Nokia Maps on Windows Phone}}
+
{{FeaturedArticle|timestamp=20120408}}
 
+
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media:NokiaMapsWP7.zip]]
 
|sourcecode= [[Media:NokiaMapsWP7.zip]]
Line 9: Line 8:
 
|platform= Windows Phone 7.5 and later
 
|platform= Windows Phone 7.5 and later
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= Nokia Maps, WP7
 
|keywords= Nokia Maps, WP7
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20120311
|author= sebastiano [[User:galazzo]]  
+
|author= [[User:galazzo]]
 
}}
 
}}
  
 
== Introduction ==
 
== Introduction ==
In this article will be showed a tip on how to use Nokia Maps on Windows Phone using Nokia tiles instead of Bing tiles.
+
{{Abstract|This article shows how to display Nokia Maps (instead of Bing tiles) on Windows Phone using the Bing Map Control.}}
 +
 
 +
[[File:NokiaMapwp7.png|500x380px]]    [[File:NokiaMapwp7 1.png|500x380px]]
  
 
== Creating the project ==
 
== Creating the project ==
Line 44: Line 45:
 
# Let's add to project by right clicking on 'Project Name' -> 'Add' -> 'Exsiting element' and select NokiaMapsTile.cs
 
# Let's add to project by right clicking on 'Project Name' -> 'Add' -> 'Exsiting element' and select NokiaMapsTile.cs
 
# Adjust namespace name NokiaMaps inside NokiaMapsTile.cs as appropriate with your project namespace
 
# Adjust namespace name NokiaMaps inside NokiaMapsTile.cs as appropriate with your project namespace
# Not mandatory, but useful, provide your Nokia Maps token and app id
+
# Provide your Nokia Maps token and app id. Note that these are mandatory for released apps.
<code cpp>
+
#: <code cpp>
 
private string token  = "<YOUR NOKIA MAPS TOKEN>";
 
private string token  = "<YOUR NOKIA MAPS TOKEN>";
 
private string app_id = "<YOUR NOKIA MAPS APP ID>";
 
private string app_id = "<YOUR NOKIA MAPS APP ID>";
Line 51: Line 52:
  
 
=== MainPage.xaml ===
 
=== MainPage.xaml ===
Open MainPage.xaml and add Map component to project. Now add the following lines:
+
Open '''MainPage.xaml''' and add Map component to project. Now add the following lines:
 
<code xml>
 
<code xml>
 
xmlns:NokiaMapsSource="clr-namespace:NokiaMaps"     
 
xmlns:NokiaMapsSource="clr-namespace:NokiaMaps"     
Line 57: Line 58:
 
</code>
 
</code>
  
<small>
 
 
<code cpp>
 
<code cpp>
<my:Map Height="634" HorizontalAlignment="Left" Name="map" VerticalAlignment="Top" Width="456"          
+
<my:Map Height="634" HorizontalAlignment="Left" Name="map" VerticalAlignment="Top" Width="456" CredentialsProvider="<YOU BING CREDENTIAL>"  
              CredentialsProvider="<YOU BING CREDENTIAL>"  
+
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Visible">
              CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Visible">
+
 
                 <my:Map.Mode>
 
                 <my:Map.Mode>
 
                     <MSPCMCore:MercatorMode/>
 
                     <MSPCMCore:MercatorMode/>
Line 94: Line 93:
 
                     <NokiaMapsSource:NokiaMapsTile TileTypes="Physical"/>
 
                     <NokiaMapsSource:NokiaMapsTile TileTypes="Physical"/>
 
                 </my:MapTileLayer.TileSources>
 
                 </my:MapTileLayer.TileSources>
            </my:MapTileLayer>
+
          </my:MapTileLayer>
 
+
 
</my:Map>
 
</my:Map>
 
<Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" Click="buttonZoomIn_Click" />
 
<Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" Click="buttonZoomIn_Click" />
 
<Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" Click="buttonZoomOut_Click" />
 
<Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" Click="buttonZoomOut_Click" />
 
</code>
 
</code>
</small>
 
  
 
=== Zoom control ===
 
=== Zoom control ===
Open MainPage.xaml.cs and add following lines
+
Open '''MainPage.xaml.cs''' and add following lines
 
<code cpp>
 
<code cpp>
 
private void buttonZoomIn_Click(object sender, RoutedEventArgs e)
 
private void buttonZoomIn_Click(object sender, RoutedEventArgs e)
Line 150: Line 147:
 
</code>
 
</code>
  
Enjoy with Nokia Maps on Windows Phone :-) [[Media:NokiaMapsWP7.zip]]
+
== Demo Source Code ==
 +
You can find the source code of demo application using Nokia Map here [[Media:NokiaMapsWP7.zip]].
 +
 
 +
== Show Case ==
 +
You can download [http://www.windowsphone.com/it-IT/apps/0af11fcb-daf7-437a-9616-bf546459b7b7 Trova Farmacie] for a real usage example

Revision as of 02:32, 29 August 2012

Featured Article
08 Apr
2012
SignpostIcon HereMaps 99.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Lumia 800
Compatibility
Platform(s): Windows Phone 7.5 and later
Windows Phone 7.5
Article
Keywords: Nokia Maps, WP7
Created: galazzo (11 Mar 2012)
Last edited: hamishwillee (29 Aug 2012)

Contents

Introduction

This article shows how to display Nokia Maps (instead of Bing tiles) on Windows Phone using the Bing Map Control.

NokiaMapwp7.png NokiaMapwp7 1.png

Creating the project

  1. Open Microsoft Visual Studio Express 2010 and create a new 'Application Project' named NokiaMaps
  2. Chose O.S 7.1

References

Add following references by right clicking 'Reference' > 'Add reference'

  1. Microsoft.Phone.Controls.Maps
  2. Microsoft.Phone.Controls
  3. System.Device

NokiaMapTile.cs

  1. Copy NokiaMapsTile.cs provided in sourcecode Media:NokiaMapsWP7.zip, into your project directory
  2. Let's add to project by right clicking on 'Project Name' -> 'Add' -> 'Exsiting element' and select NokiaMapsTile.cs
  3. Adjust namespace name NokiaMaps inside NokiaMapsTile.cs as appropriate with your project namespace
  4. Provide your Nokia Maps token and app id. Note that these are mandatory for released apps.
    private string token  = "<YOUR NOKIA MAPS TOKEN>";
    private string app_id = "<YOUR NOKIA MAPS APP ID>";

MainPage.xaml

Open MainPage.xaml and add Map component to project. Now add the following lines:

xmlns:NokiaMapsSource="clr-namespace:NokiaMaps"    
xmlns:MSPCMCore="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps"
<my:Map Height="634" HorizontalAlignment="Left" Name="map" VerticalAlignment="Top" Width="456" CredentialsProvider="<YOU BING CREDENTIAL>" 
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Visible">
<my:Map.Mode>
<MSPCMCore:MercatorMode/>
</my:Map.Mode>
 
<my:MapTileLayer Name="street" Margin="0,0,0,32" Height="647" Width="475">
<my:MapTileLayer.TileSources>
<NokiaMapsSource:NokiaMapsTile TileTypes="Street"/>
</my:MapTileLayer.TileSources>
</my:MapTileLayer>
 
<my:MapTileLayer Visibility="Collapsed" Name="wateroverlay" Margin="0,0,0,32">
<my:MapTileLayer.TileSources>
<NokiaMapsSource:NokiaMapsTile TileTypes="WaterOverlay"/>
</my:MapTileLayer.TileSources>
</my:MapTileLayer>
 
<my:MapTileLayer Visibility="Collapsed" Name="hybrid" Margin="0,0,0,32">
<my:MapTileLayer.TileSources>
<NokiaMapsSource:NokiaMapsTile TileTypes="Hybrid"/>
</my:MapTileLayer.TileSources>
</my:MapTileLayer>
 
<my:MapTileLayer Visibility="Collapsed" Name="satellite" Margin="0,0,0,32">
<my:MapTileLayer.TileSources>
<NokiaMapsSource:NokiaMapsTile TileTypes="Satellite"/>
</my:MapTileLayer.TileSources>
</my:MapTileLayer>
 
<my:MapTileLayer Visibility="Collapsed" Name="physical" Margin="0,0,0,32">
<my:MapTileLayer.TileSources>
<NokiaMapsSource:NokiaMapsTile TileTypes="Physical"/>
</my:MapTileLayer.TileSources>
</my:MapTileLayer>
</my:Map>
<Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" Click="buttonZoomIn_Click" />
<Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" Click="buttonZoomOut_Click" />

Zoom control

Open MainPage.xaml.cs and add following lines

private void buttonZoomIn_Click(object sender, RoutedEventArgs e)
{
double zoom;
zoom = map.ZoomLevel;
map.ZoomLevel = ++zoom;
}
 
private void buttonZoomOut_Click(object sender, RoutedEventArgs e)
{
double zoom;
zoom = map.ZoomLevel;
map.ZoomLevel = --zoom;
}

Now you are ready to start using Nokia Maps !!!

Adding Markers

MapLayer m_PushpinLayer = new MapLayer();
map.Children.Add(m_PushpinLayer);
 
// Reasonable stab at center of Seattle metro area
map.SetView(new GeoCoordinate(41.89001, 12.495346), 10);
 
// Create and Add a few push pins
Pushpin pushpin1 = new Pushpin();
pushpin1.Background = new SolidColorBrush(Colors.Red);
pushpin1.Location = new GeoCoordinate(45.463983, 9.187946); // Milan
 
Pushpin pushpin2 = new Pushpin();
pushpin2.Background = new SolidColorBrush(Colors.Green);
pushpin2.Location = new GeoCoordinate(37.066684, 15.282555); // Siracusa
 
Pushpin pushpin3 = new Pushpin();
pushpin3.Background = new SolidColorBrush(Colors.Blue);
pushpin3.Location = new GeoCoordinate(37.102357, 15.124986); // Solarino
 
m_PushpinLayer.AddChild(pushpin1, pushpin1.Location);
m_PushpinLayer.AddChild(pushpin2, pushpin2.Location);
m_PushpinLayer.AddChild(pushpin3, pushpin3.Location);
 
map.ZoomLevel = 6;

Demo Source Code

You can find the source code of demo application using Nokia Map here Media:NokiaMapsWP7.zip.

Show Case

You can download Trova Farmacie for a real usage example

284 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×