Nokia Maps for WP7 using Bing Map Control

Jump to: navigation, search

Revision as of 09:01, 4 April 2012

This article explains how to port Nokia Maps on Windows Phone.

Article Metadata

Code Example

Source file: Media:NokiaMapsWP7.zip

Tested with

Devices(s): Lumia 800

Compatibility

Platform(s): Windows Phone 7.5 and later

Article

Keywords: Nokia Maps, WP7

Created: galazzo (11 Mar 2012)

Last edited: chintandave_er (04 Apr 2012)

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.

Creating the project

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

References

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

Microsoft.Phone.Controls.Maps
Microsoft.Phone.Controls
System.Device

NokiaMapTile.cs

Copy NokiaMapsTile.cs provided in sourcecode Media:NokiaMapsWP7.zip, into your project directory
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
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>";

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;

Enjoy with Nokia Maps on Windows Phone :-) Media:NokiaMapsWP7.zip

Show Case

You can download Trova Farmacie for a real usage example

Wiki

Wiki Resources

Main Platforms

Other

Natural Languages

Toolbox

Namespaces

Variants

Views

Actions

Contents