How to set initial displayed area of map control in windows phone 7?

I’ve decided to make my project on HCI lecture as a windows phone 7 application and, in order to do that, i had to make minimum 2 different design for same project. I’m not gonna talk about content of projects here but i’m gonna make a little tutorial about how i dealed with a problem during development.

Eventhough i don’t have any WP7 device, Windows Phone 7 is my favorite mobile OS. Because i think it’s developer friendly. Unlike Android SDK, it’s easy to install and integrate it’s SDK to your Visual Studio 2010 easly too. And it encourages you to focus on development, not to install the SDK.

Anyway, i decided to add a map control on my app. It’s as easy as adding a button, you should just drag and drop it from the tool bar, and then bing map api adds itself on your app’s screen. What it’s not easy is;  setting the initial displayed area of map control. You can decide it’s zoom level from the properties by changing the value of “ZoomLevel”. But there is no property to set initial displayed area.

In order to set this location, firstly you should open your solution explorer of your project, then find the .cs file which stays at sub-directory of your page design. (In my case, i’m gonna open ResultsPage.xaml.cs)

Then we should code in to our .cs file as:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Phone.Controls.Maps;      // we should add this
using Microsoft.Phone.Controls.Maps.Core; // we should add this
using System.Device.Location;             // we should add this

namespace PhoneApp3
{
    public partial class ResultsPage : PhoneApplicationPage
    {
        // constructor
        public ResultsPage()
        {
            InitializeComponent();

            Map map = new Map();
            map.CredentialsProvider = new ApplicationIdCredentialsProvider("Bing Maps Key");

            // Set the center coordinate and zoom level
            GeoCoordinate mapCenter = new GeoCoordinate(39.8666, 32.866);
            int zoom = 10;


            // Create a pushpin to put at the center of the view
            Pushpin pin1 = new Pushpin();
            pin1.Location = mapCenter;
            pin1.Content = "Center Location";
            map.Children.Add(pin1);


            // Set the map style to Road Mode (could be also aerial mode)
            map.Mode = new Microsoft.Phone.Controls.Maps.RoadMode();


            // Set the view and put the map on the page
            map.SetView(mapCenter, zoom);
            ContentPanel.Children.Add(map);
        }
    }
}

And now, it’s time to explain what does this code do. I overrided the SetView method of the Map control. And i make it to show the coordinate that i defined in the code at the center of the screen. And when i do that, i set zoom level and map mode(aerial or road mode) and also added a pin on my location.

Here is final look of my page:

Yorum bırakın

Filed under Windows Phone 7

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s