Nokia Maps for WP7 using Bing Map Control
m (Croozeus - Added in the FA List) |
|||
| 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]] | ||
| + | {{FeaturedArticle|timestamp=20120408}} | ||
{{Abstract|This article explains how to port Nokia Maps on Windows Phone.}} | {{Abstract|This article explains how to port Nokia Maps on Windows Phone.}} | ||
Revision as of 18:00, 8 April 2012
08 Apr
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: croozeus
(08 Apr 2012)
Contents |
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;
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
Screenshots
Here are some screen shots of Nokia Map used in real windows phone application.
