13 features required to upgrade Windows Phone 8 Nokia map control to WP8

I believe everyone knows that one of the most dazzling Windows Phone 8 device families is the Nokia Lumia 920, but some of them may not know that Nokia is a veteran mobile phone hardware manufacturer, nokia's map service is also awesome. At present, Yahoo and other websites have completely adopted the Nokia image library, and Bing Maps in Windows Phone are also transplanted to the Nokia image library. Windows Phone 8 has integrated native Nokia map controls, so today I will introduce the Nokia map control in Windows Phone 8.

This article is an update of 13 feature series required to be updated to WP8. We hope this series will bring some development convenience to Windows Phone 8 developers.

At the same time, you are welcome to communicate with me or @ Wang Bo _ nick on Sina Weibo.

The following describes how to use the Nokia map control and how to use bingmap in WP7. Here I select location and map because I want to display my local location on the map.

In addition, each Nokia map application needs to specify your applicationid and authenticationtoken in the application, which must be obtained from the dev center.

 

Of course, you must specify this in the app.

  private void myMapControl_Loaded(object sender, RoutedEventArgs e)
        {
            Microsoft.Phone.Maps.MapsSettings.ApplicationContext.ApplicationId = "ApplicationID";
            Microsoft.Phone.Maps.MapsSettings.ApplicationContext.AuthenticationToken = "AuthenticationToken";
        }

Add a map control to our page

 



 <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map x:Name="MyMap"  Center="39.92, 116.46" ZoomLevel="10"/>
        </Grid>

 



public MainPage()
{
   InitializeComponent();
   Map MyMap = new Map();
   ContentPanel.Children.Add(MyMap);
}

 

The above two paragraphsCodeIt is basically equivalent, but careful students must note that the specified two attribute values in the XAML file, center and zoomleve center, refer to the longitude and latitude positions of the center of the map, zoomlevel is used to set the zoom level (1-20) of a map. The higher the zoom level, the higher the resolution of the map.

public MainPage()
{
   InitializeComponent();
   Map MyMap = new Map();

   //Set the Map center by using Center property
   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);

   //Set the map zoom by using ZoomLevel property
   MyMap.ZoomLevel = 10;
   ContentPanel.Children.Add(MyMap);
}

 

Besides the center and zoomlevel, the heading and pitch attributes can be used to set map attributes.

Heading indicates that the map points to "between 0 and 360". The default value is 0 north.

Pitch is the slope of a map 0-180

 



void OnCenterZoom_Click(object sender, EventArgs args)
{
   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
   MyMap.ZoomLevel = 18;
}

void OnAnimate_Click(object sender, EventArgs args)
{
   MyMap.SetView(new GeoCoordinate(47.6097, -122.3331), 15, MapAnimationKind.Parabolic);
}

 

Second, maps are divided into several view modes.

void Road_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Road;
}

void Aerial_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Aerial;
}

void Hybrid_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Hybrid;
}

void Terrain_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Terrain;
}

 

You can also set the map color when you are willful.

 



void Light_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Light;
}

void Dark_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Dark;
}

Here we will introduce you to the following: In a map application, we usually make an image or a UI control to mark the location method or path, here I will show you how to add a uielements or a definition control in Nokia map.

First, the custom control/uielements is displayed on the Nokia map using mapoverlay as the media.

The second mapoverlay is to be added to the layer of Nokia map as an item in maplayer.

 



    MapOverlay MyOverlay = new MapOverlay();
                        MyOverlay.Content = GetGrid();
                        MyOverlay.GeoCoordinate = new GeoCoordinate(CurrenLocation.Latitude, CurrenLocation.Longitude);
                        MyOverlay.PositionOrigin = new Point(0, 0.5);
                        MapLayer MyLayer = new MapLayer();
                        MyLayer.Add(MyOverlay);
                        MyMap.Layers.Add(MyLayer);

 

The above Code actually adds a getgrid function return value to the map.

  Grid GetGrid()
        {
            Grid MyGrid = new Grid();
            MyGrid.RowDefinitions.Add(new RowDefinition());
            MyGrid.RowDefinitions.Add(new RowDefinition());
            MyGrid.Background = new SolidColorBrush(Colors.Transparent);

            //Creating a Rectangle
            Rectangle MyRectangle = new Rectangle();
            MyRectangle.Fill = new SolidColorBrush(Colors.Black);
            MyRectangle.Height = 20;
            MyRectangle.Width = 20;
            MyRectangle.SetValue(Grid.RowProperty, 0);
            MyRectangle.SetValue(Grid.ColumnProperty, 0);

            //Adding the Rectangle to the Grid
            MyGrid.Children.Add(MyRectangle);

            //Creating a Polygon
            Polygon MyPolygon = new Polygon();
            MyPolygon.Points.Add(new Point(2, 0));
            MyPolygon.Points.Add(new Point(22, 0));
            MyPolygon.Points.Add(new Point(2, 40));
            MyPolygon.Stroke = new SolidColorBrush(Colors.Red);
            MyPolygon.Fill = new SolidColorBrush(Colors.Red);
            MyPolygon.SetValue(Grid.RowProperty, 1);
            MyPolygon.SetValue(Grid.ColumnProperty, 0);

            //Adding the Polygon to the Grid
            MyGrid.Children.Add(MyPolygon);

            return MyGrid;
        }

 

Of course, this function is just a reference here to return any UI custom controls as long as they are based on uielements.

Now, I will introduce you to the following articles: how to implement a location-based background applicationProgramWelcome to communicate with me or @ Wang Bo _ nick on Sina Weibo