All about GIS

Seperti yang kita ketahui, bila kita memakai Bing Maps, maka dibagian pojok kiri atas peta akan muncul control-control untuk membantu kita dalam menavigasikan peta seperti pada gambar dibawah…

Control tersebut sudah default disediakan oleh Bing Maps. Dengan menggunakan control tersebut kita bisa memilih mode map yang kita inginkan seperti Road Mode, Aerial Mode, atau Hybrid Mode (Aerial with Labels). Selain itu, kita juga bisa menavigasikan peta ke kanan, kiri, atas, dan bawah. Kita juga bisa melakukan zoom in atau zoom out. Nah, pertanyaannya sekarang adalah: Apakah kita bisa membuat control kita sendiri untuk menavigasikan peta tanpa menggunakan control default yang sudah disediakan? Jawabannya adalah bisa. Bagaimana caranya? Berikut ini akan saya jelaskan cara pembuatannya…

1. Buat sebuah project Silverlight baru dalam Visual Studio.
2. Tambahkan reference Bing Maps library ke dalam project (bagi yang lupa caranya, bisa dilihat disini).
3. Masukkan kode berikut ke dalam MainPage.xaml

      1: <UserControl x:Class="BingMapsCustomNavigation.MainPage"

      2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      6:     xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

      7:     mc:Ignorable="d"

      8:     d:DesignHeight="300" d:DesignWidth="400">

      9:  

     10:     <Grid x:Name="LayoutRoot" Background="White">

     11:         <Grid.RowDefinitions>

     12:             <RowDefinition Height="18"/>

     13:             <RowDefinition Height="60" />

     14:             <RowDefinition Height="*"/>

     15:         </Grid.RowDefinitions>

     16:         <Grid.ColumnDefinitions>

     17:             <ColumnDefinition />

     18:             <ColumnDefinition Width="Auto" />

     19:         </Grid.ColumnDefinitions>

     20:  

     21:         <m:Map x:Name="MyMap"

     22:                Grid.Row="0" Grid.RowSpan="5"

     23:                Grid.Column="0" Grid.ColumnSpan="2"

     24:                CacheMode="BitmapCache"

     25:                CredentialsProvider="{StaticResource MyCredentials}"

     26:                Mode="Road"

     27:                NavigationVisibility="Collapsed"/>

     28:  

     29:         <Canvas x:Name="cMiniMap" 

     30:                 Width="150" 

     31:                 Height="150" 

     32:                 HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Grid.Row="2" >

     33:             <m:Map x:Name="MiniMap" 

     34:                    CredentialsProvider="{StaticResource MyCredentials}" 

     35:                    CacheMode="BitmapCache"

     36:                    Width="150" 

     37:                    Height="150" 

     38:                    Mode="Road" 

     39:                    NavigationVisibility="Collapsed" 

     40:                    ScaleVisibility="Collapsed" 

     41:                    LogoVisibility="Collapsed"

     42:                    CopyrightVisibility="Collapsed" Foreground="{x:Null}">

     43:                 <m:Map.Clip>

     44:                     <EllipseGeometry RadiusX="69" RadiusY="69" Center="75,75" />

     45:                 </m:Map.Clip>

     46:             </m:Map>

     47:             <Ellipse Width="150" Height="150" Stroke="#CC4C4C4C" StrokeThickness="6" Margin="0,0,0,0" CacheMode="BitmapCache" />

     48:             <Ellipse Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="70,70,0,0" x:Name="ellipse" Fill="#CC205A5B" />

     49:         </Canvas>

     50:  

     51:         <Canvas x:Name="cNavControl" 

     52:                 Width="100" 

     53:                 HorizontalAlignment="Left" 

     54:                 VerticalAlignment="Top" Grid.Row="2" Margin="60,155,0,0" Grid.RowSpan="3" >

     55:             <StackPanel Width="50">

     56:                 <Ellipse x:Name="ePan" Fill="#CC4C4C4C" Height="50" Canvas.ZIndex="1" Width="50"/>

     57:                 <Path x:Name="pathMiniMap" Stretch="Fill" Stroke="#CCFFFFFF" Height="195" Margin="-50,-195,-50,0" Canvas.ZIndex="1"/>

     58:                 <Grid x:Name="gridPan" Height="50" Margin="0,-50,0,0" Width="50" Canvas.ZIndex="1">

     59:                     <Grid.RowDefinitions>

     60:                         <RowDefinition Height="12"/>

     61:                         <RowDefinition Height="26" />

     62:                         <RowDefinition Height="12"/>

     63:                     </Grid.RowDefinitions>

     64:                     <Grid.ColumnDefinitions>

     65:                         <ColumnDefinition Width="12" />

     66:                         <ColumnDefinition Width="26" />

     67:                         <ColumnDefinition Width="12"/>

     68:                     </Grid.ColumnDefinitions>

     69:  

     70:                     <Image Source="Resources/PanUp.png" Stretch="Fill" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Top" Height="20" Margin="0,5,0,0" Width="34" MouseLeftButtonDown="PanMapUp"/>

     71:                     <Image Source="Resources/PanLeft.png" Stretch="Fill" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="20" Margin="5,0,0,0" Height="34" MouseLeftButtonDown="PanMapLeft"/>

     72:                     <Image Source="Resources/PanRight.png" Stretch="Fill" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Width="20" Margin="0,0,5,0" Height="34" MouseLeftButtonDown="PanMapRight"/>

     73:                     <Image Source="Resources/PanDown.png" Stretch="Fill" Height="20" Margin="0,0,0,5" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" Width="34" MouseLeftButtonDown="PanMapDown"/>

     74:                 </Grid>

     75:                 <Border Margin="0,5,0,0" Width="15" Background="#CC4C4C4C" BorderThickness="1,1,1,0" BorderBrush="#CCFFFFFF" Height="15">

     76:                     <TextBlock Foreground="White" HorizontalAlignment="Center" Text="+" MouseLeftButtonDown="ZoomIn" VerticalAlignment="Center"/>

     77:                 </Border>

     78:                 <Border Margin="0,0,0,5" Width="15" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF" Height="15">

     79:                     <TextBlock Foreground="White" HorizontalAlignment="Center" Text="-" MouseLeftButtonDown="ZoomOut" VerticalAlignment="Center"/>

     80:                 </Border>

     81:                 <Border Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1" BorderBrush="#CCFFFFFF">

     82:                     <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Road" MouseLeftButtonDown="MapStyleRoad" VerticalAlignment="Center"/>

     83:                 </Border>

     84:                 <Border Height="15" Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF">

     85:                     <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Aerial" MouseLeftButtonDown="MapStyleAerial" VerticalAlignment="Center"/>

     86:                 </Border>

     87:                 <Border Height="15" Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF">

     88:                     <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Hybrid" MouseLeftButtonDown="MapStyleHybrid" VerticalAlignment="Center"/>

     89:                 </Border>

     90:             </StackPanel>

     91:         </Canvas>

     92:     </Grid>

     93: </UserControl>

4. Kode diatas akan mengatur tampilan dari web page yang dibuat. Setelah itu, kita tinggal memasukkan logic-logic ke dalam MainPage.xaml.cs untuk mengimplementasikan fungsi-fungsi seperti Zoom In, Zoom Out, mengubah style map, dan panning atau menggeser map.

      1: using System;

      2: using System.Windows;

      3: using System.Windows.Controls;

      4: using System.Windows.Input;

      5: using Microsoft.Maps.MapControl;

      6:  

      7: namespace BingMapsCustomNavigation

      8: {

      9:     public partial class MainPage : UserControl

     10:     {

     11:         public MainPage()

     12:         {

     13:             InitializeComponent();

     14:  

     15:             MyMap.TargetViewChanged += new EventHandler<MapEventArgs>(MyMap_TargetViewChanged);

     16:  

     17:             MiniMap.MouseClick += new EventHandler<MapMouseEventArgs>(MiniMap_MouseClick);

     18:             MiniMap.MouseDoubleClick += new EventHandler<MapMouseEventArgs>(MiniMap_MouseDoubleClick);

     19:             MiniMap.MouseDragBox += new EventHandler<MapMouseDragEventArgs>(MiniMap_MouseDragBox);

     20:             MiniMap.MousePan += new EventHandler<MapMouseDragEventArgs>(MiniMap_MousePan);

     21:             MiniMap.MouseWheel += new System.Windows.Input.MouseWheelEventHandler(MiniMap_MouseWheel);

     22:             MiniMap.KeyUp += new System.Windows.Input.KeyEventHandler(MiniMap_KeyUp);

     23:             MiniMap.KeyDown += new System.Windows.Input.KeyEventHandler(MiniMap_KeyDown);

     24:             MiniMap.KeyPress += new EventHandler<MapKeyPressEventArgs>(MiniMap_KeyPress);

     25:             MiniMap.KeyHeld += new EventHandler<MapKeyHeldEventArgs>(MiniMap_KeyHeld);

     26:             MiniMap.SetView(MyMap.TargetCenter, Math.Max(1.0, MyMap.TargetZoomLevel - 5));

     27:         }

     28:  

     29:         private void MyMap_TargetViewChanged(object sender, MapEventArgs e)

     30:         {

     31:             MiniMap.SetView(MyMap.TargetCenter, Math.Max(1.0, MyMap.TargetZoomLevel - 5));

     32:         }

     33:  

     34:         #region MiniMap Events

     35:  

     36:         private void MiniMap_KeyHeld(object sender, MapKeyHeldEventArgs e)

     37:         {

     38:             e.Handled = true;

     39:         }

     40:  

     41:         private void MiniMap_KeyPress(object sender, MapKeyPressEventArgs e)

     42:         {

     43:             e.Handled = true;

     44:         }

     45:  

     46:         private void MiniMap_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)

     47:         {

     48:             e.Handled = true;

     49:         }

     50:  

     51:         private void MiniMap_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)

     52:         {

     53:             e.Handled = true;

     54:         }

     55:  

     56:         private void MiniMap_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)

     57:         {

     58:             e.Handled = true;

     59:         }

     60:  

     61:         private void MiniMap_MousePan(object sender, MapMouseDragEventArgs e)

     62:         {

     63:             e.Handled = true;

     64:         }

     65:  

     66:         private void MiniMap_MouseDragBox(object sender, MapMouseDragEventArgs e)

     67:         {

     68:             e.Handled = true;

     69:         }

     70:  

     71:         private void MiniMap_MouseDoubleClick(object sender, MapMouseEventArgs e)

     72:         {

     73:             e.Handled = true;

     74:         }

     75:  

     76:         private void MiniMap_MouseClick(object sender, MapMouseEventArgs e)

     77:         {

     78:             e.Handled = true;

     79:         }

     80:  

     81:         #endregion

     82:  

     83:         #region Navigation

     84:  

     85:         private void ZoomIn(object sender, MouseButtonEventArgs e)

     86:         {

     87:             MyMap.ZoomLevel = MyMap.TargetZoomLevel + 1;

     88:         }

     89:  

     90:         private void ZoomOut(object sender, MouseButtonEventArgs e)

     91:         {

     92:             MyMap.ZoomLevel = MyMap.TargetZoomLevel - 1;

     93:         }

     94:  

     95:         private void PanMapLeft(object sender, MouseButtonEventArgs e)

     96:         {

     97:             MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2 - 50, MyMap.ViewportSize.Height / 2));

     98:         }

     99:  

    100:         private void PanMapRight(object sender, MouseButtonEventArgs e)

    101:         {

    102:             MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2 + 50, MyMap.ViewportSize.Height / 2));

    103:         }

    104:  

    105:         private void PanMapUp(object sender, MouseButtonEventArgs e)

    106:         {

    107:             MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2, MyMap.ViewportSize.Height / 2 - 50));

    108:         }

    109:  

    110:         private void PanMapDown(object sender, MouseButtonEventArgs e)

    111:         {

    112:             MyMap.Center = MyMap.ViewportPointToLocation(new Point(MyMap.ViewportSize.Width / 2, MyMap.ViewportSize.Height / 2 + 50));

    113:         }

    114:  

    115:         private void MapStyleRoad(object sender, MouseButtonEventArgs e)

    116:         {

    117:             MyMap.Mode = new RoadMode();

    118:         }

    119:  

    120:         private void MapStyleAerial(object sender, MouseButtonEventArgs e)

    121:         {

    122:             MyMap.Mode = new AerialMode(false);

    123:         }

    124:  

    125:         private void MapStyleHybrid(object sender, MouseButtonEventArgs e)

    126:         {

    127:             MyMap.Mode = new AerialMode(true);

    128:         }

    129:  

    130:         #endregion

    131:     }

    132: }

Mudah bukan? Mungkin yang cukup sulit adalah mengubah-ubah tampilan pada MainPage.xaml tetapi, pembuatan logika pada custom control yang kita buat sendiri tidak terlalu sulit karena itu merupakan fungsi-fungsi dasar yang sudah disediakan oleh Bing Maps SDK.

Yang harus lebih diperhatikan disini adalah fungsi PanMapLeft, PanMapRight, PanMapUp, dan PanMapDown karena untuk menggeser posisi map ke kiri, kanan, atas, ataupun bawah, kita harus mengambil titik tengah dari map yang ditampilkan lalu menggesernya dengan cara mengurangi nilai height atau weight.

Source code dari program ini bisa didownload disini. Sebelum me-run project ini, jangan lupa untuk mengisi Credentials pada App.xaml dengan Bing Maps Credentials yang kalian miliki.

Okay, maybe that’s it for now. Ciao…