Push Pin pada Bing Maps Silverlight Control

Mari kita lanjutkan postingan sebelumnya. Setelah membuat project sederhana memunculkan Bing Maps di browser dengan project Silverlight, sekarang kita akan mencoba menambahkan Pin akan kita Push di beberapa titik koordinat. Bing Maps Silverlight Control menyediakan objek MapLayer, sehingga kita bisa menambahkan object PushPin ke MapLayer. Object PushPin ini kita definisikan lokasinya berdasarkan koordinat.

Sekenarionya, Maps yang kita buat akan mengambil data kota beserta koordinatenya dari sebuah List City. Sebelumnya kita buat dulu class City.

    public class City
    {
        private string cityName;
        private double latitude;
        private double longitude;

        public City(string cityName, double latitude, double longitude)
        {
            this.cityName = cityName;
            this.latitude = latitude;
            this.longitude = longitude;
        }

        public string CityName
        {   get { return cityName; }
            set { city = value; }
        }
        public double Latitude 
        { 
            get { return latitude; }
            set { latitude = value;  } 
        }
        public double Longitude
        {
            get { return longitude; }
            set { longitude = value; }
        }

Lalu kita tambahkan isi list tersebut di event Load dari Object Maps yang kita buat.

  List<City> City = null;
            City = new List<City>();
            City.Add(new City("Jakarta", -6.1744, 106.8294));
            City.Add(new City("Bogor", -6.5944, 106.789));
            City.Add(new City("Metro", -5.11013, 105.308));
            City.Add(new City("Bandar Lampung", -5.45, 105.27));

Selanjutnya, data nama kota dan koordinat diambil dari List ketika melakukan Push Pin dan Object PushPin di tambahkan ke object MapsLayer.

            MapLayer pinLayer = null;
            pinLayer = new MapLayer();
            pinLayer.Name = "PushPinLayer";
            MyMap.Children.Add(pinLayer);

            foreach (City C in City)
            {
                Pushpin pin;
                Location location = new Location(C.Latitude, C.Longitude);
                pin = new Pushpin();
                pin.Location = location;
                pin.Name = C.CityName;
                pinLayer.AddChild(pin, location);
            }

Kode XAML lengkapnya:

<UserControl x:Class="SLApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:bm="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions >
            <RowDefinition Height="50"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <bm:Map Name="MyMap" Loaded="MyMap_Loaded" CredentialsProvider="Bing Maps Key" 
                Grid.Column="1" Grid.Row="1"/>
    </Grid>
</UserControl>

Code Behind lengkapnya:

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.Maps.MapControl;

namespace SLApp
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            MyMap.Center = new Location(-6.1744, 106.8294);
            MyMap.ZoomLevel = 8;
        }

        private void MyMap_Loaded(object sender, RoutedEventArgs e)
        {
            List<City> City = null;
            City = new List<City>();
            City.Add(new City("Jakarta", -6.1744, 106.8294));
            City.Add(new City("Bogor", -6.5944, 106.789));
            City.Add(new City("Metro", -5.11013, 105.308));
            City.Add(new City("Bandar Lampung", -5.45, 105.27));

            MapLayer pinLayer = null;
            pinLayer = new MapLayer();
            pinLayer.Name = "PushPinLayer";
            MyMap.Children.Add(pinLayer);

            foreach (City C in City)
            {
                Pushpin pin;
                Location location = new Location(C.Latitude, C.Longitude);
                pin = new Pushpin();
                pin.Location = location;
                pin.Name = C.CityName;
                pinLayer.AddChild(pin, location);
            }
        }
    }

    public class City
    {
        private string city;
        private double latitude;
        private double longitude;

        public City(string city, double latitude, double longitude)
        {
            this.city = city;
            this.latitude = latitude;
            this.longitude = longitude;
        }

        public string CityName
        {   get { return city; }
            set { city = value; }
        }
        public double Latitude 
        { 
            get { return latitude; }
            set { latitude = value;  } 
        }
        public double Longitude
        {
            get { return longitude; }
            set { longitude = value; }
        }
    }
}

Jangan lupa menambahkan reference Microsoft.Maps.MapControl pada code behind.
Hasilnya:

Push Pin Bing Maps Silverlight Control

About

Seseorang yang terus berusaha menjadi seorang programmer dan blogger sejati di jagad Raya ini.

Tagged with:
Posted in Silverlight
One comment on “Push Pin pada Bing Maps Silverlight Control
  1. […] Materi Java Programming dari JENIWindows XP Mode di Windows 7Belajar Java ProgrammingDownloadPush Pin pada Bing Maps Silverlight ControlMemanggil Class dalam Pewarisan di JavaBing Maps di Silverlight […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Community

INDC

MUGI

WSS-ID

SQLServer-Indo

Indonesia Student Portal

Pengunjung
  • 120,657 orang
Yg lg OL di sini
site statistics
%d bloggers like this: