Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Nokia Maps for WP7 using Bing Map Control

From Wiki
Jump to: navigation, search
Featured Article
08 Apr
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: galazzo (11 Mar 2012)
Last edited: jasfox (08 Jul 2013)

Tip.pngTip: For Windows Phone 8 Microsoft recommend developers switch to the new Windows Phone 8 Map Control which is now part of the SDK and uses the on-board HERE maps rather than use the control mentioned in this article.



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


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

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


  1. Copy NokiaMapsTile.cs provided in sourcecode, 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>";


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;

Demo Source Code

You can find the source code of demo application using Nokia Map here

Show Case

You can download Trova Farmacie for a real usage example

This page was last modified on 8 July 2013, at 15:39.
126 page views in the last 30 days.