Revision as of 03:24, 11 March 2012 by galazzo (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Nokia Maps for WP7 using Bing Map Control

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to port Nokia Maps on Windows Phone

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

SignpostIcon HereMaps 99.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Lumia 800
Platform(s): Windows Phone 7.5 and later
Windows Phone 7.5
Keywords: Nokia Maps, WP7
Created: sebastiano galazzo (30 May 2012)
Last edited: galazzo (11 Mar 2012)



In this article will be showed a tip on how to use Nokia Maps on Windows Phone using Nokia tiles instead of Bing tiles.

Creating the project

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


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

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


  1. Download file NokiaMapsTile.cs and copy into your project directory, now let's add to project by right clicking on project name -> Add -> Exsiting element and select NokiaMapsTile.cs
  2. Adjust namespace name NokiaMaps inside NokiaMapsTile.cs as appropriate with your project namespace
  3. Not mandatory, but useful, provide your Nokia Maps token and app id
 private string token = "<YOUR NOKIA MAPS TOKEN>";
private string app_id = "<YOUR NOKIA MAPS APP ID>";


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


<my:Map Height="634" HorizontalAlignment="Left" Name="map" VerticalAlignment="Top" Width="456"            
CredentialsProvider="<YOU BING CREDENTIAL>"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Visible">
<my:MapTileLayer Name="street" Margin="0,0,0,32" Height="647" Width="475">
<NokiaMapsSource:NokiaMapsTile TileTypes="Street"/>
<my:MapTileLayer Visibility="Collapsed" Name="wateroverlay" Margin="0,0,0,32">
<NokiaMapsSource:NokiaMapsTile TileTypes="WaterOverlay"/>
<my:MapTileLayer Visibility="Collapsed" Name="hybrid" Margin="0,0,0,32">
<NokiaMapsSource:NokiaMapsTile TileTypes="Hybrid"/>
<my:MapTileLayer Visibility="Collapsed" Name="satellite" Margin="0,0,0,32">
<NokiaMapsSource:NokiaMapsTile TileTypes="Satellite"/>
<my:MapTileLayer Visibility="Collapsed" Name="physical" Margin="0,0,0,32">
<NokiaMapsSource:NokiaMapsTile TileTypes="Physical"/>
<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();
// 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;

Enjoy with Nokia Maps Media:NokiaMapsWP7.zip

406 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.