(Windows Phone 7.8)Map berdasarkan lokasi yang kita piliih menggunakan longitude dan latitude

Selamat pagi agan agan semua, sudah lama ane gak update blog ane ini, ane dah kangen berat deh dengan postingan ane, sampe ada command aja lupa ane balasa, tapi kalo bisa agan agan yang ingin bertanya langsung aja email atau twitt ane, karena insya allah smartphone ane up terus.

Ngomong – ngomong masalah Map, ane sudah banyak sekali menyelesaikan project tapi beda platform, so menurut ane semuanya itu sama aja, hanya beda tempat kita ketik tuh logika, dengan membuat app map pencarian wisata di daerah lampung, pencarian wilayah di daerah ambon, pencarian kantor polisi di daerah jogja dan yang baru baru ini pencarian kampus di daerah jogja. Kemaren kalo gak salah ane sudah memberikan cara cara gimana mendaftarkan app kita agar mendapatkan izin dari pihak bing, karena jika kita ingin menggunakan service dari orang lain kita harus mempunyai izin terlebih dahulu, sama dengan kita kalo ingin menggunakan barang orang lain kita harus minta izin terlebih dahulu…

Windows phone, gak sepamor kompetitornya robot ijo dari google, tapi kenapa ane share ini, sebenarnya gak banyak tujuan ane share ini, cuma iseng iseng dapet oseng – oseng, karena di beberapa project ana kebanyak tugas akhir teman teman, gak tau dari kampus mana pokoknya garap, dan semua tugas akhir itu sekarang kebanyakan larinya ke mobile, kenapa? karena untuk tema dan membuat sistem yang lumayan cerdas masih enakan di smartphone dari pada app desktop yang harus kita menambahkan beberapa device.

12-01-2014 14-14-28

1. download script cs yang ane download dari nokia di sini http://www.mediafire.com/view/qhchm2u45cq3o52/NokiaMapsTile.cs

2. Create New Project dan pilih WP 7

3. Masukkan file yang baru di download tadi dengan cara Project Solution click kanan pada nama project – add – Exist Items

12-01-2014 14-16-56

4. Setelah kita mendapat toket dan id pada saat daftar bing developer maka agan dapat memasukkan token tersebut pada file yang didownload tadi.

   private string token = "";
        private string app_id = "";
        private string language = "ITA";

5. Setelah itu kita akan membuat tampilan, buka file mainpage.xaml dan desain seperti dibawah ini
12-01-2014 14-14-28

 <phone:PhoneApplicationPage 
    x:Class="NokiaMaps.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    xmlns:NokiaMapsSource="clr-namespace:NokiaMaps"    
    xmlns:MSPCMCore="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps"
    shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">

    <!--LayoutRoot è la griglia radice in cui viene inserito tutto il contenuto della pagina-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="187"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!--TitlePanel contiene il nome dell'applicazione e il titolo della pagina-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="PageTitle" Text="Annabe Maps" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            <TextBox x:Name="longi" Height="72" TextWrapping="Wrap" Text="110.407677" Margin="169,0,137,0"/>
            <Button Content="CARI LOKASI" Margin="10,0,0,0" Click="Button_Click_1"/>
        </StackPanel>

        <!--ContentPanel - inserire ulteriore contenuto qui-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <my:Map Height="634" HorizontalAlignment="Left" Name="map" VerticalAlignment="Top" Width="456"
            
                CredentialsProvider="Ap_TDyefYA12RyiGzg2XQdbUxchZNo_IhE_aY-wNNpjQKuCFFGNPMEDhdNevQx7r" 
                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" />

        </Grid>
        <TextBox x:Name="lati" HorizontalAlignment="Left" Height="72" Margin="10,106,0,0" TextWrapping="Wrap" Text="-7.102357" VerticalAlignment="Top" Width="156" TextChanged="TextBox_TextChanged_1"/>
    </Grid>
 
    <!--Codice di esempio che illustra l'utilizzo di ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Pulsante 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Pulsante 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Voce di menu 1"/>
                <shell:ApplicationBarMenuItem Text="Voce di menu 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

6. Membuat Zoom out dan Zoom in pada button, klik dua kali pada desain button

  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;
        }

7. Nah disini kita akan membuat tampilan map yang kita ambil dari bing map, disini kita memasukkan beberapa marker(tempat yang berdasarkan longitude dan latitude).

  public MainPage()
        {
            InitializeComponent();

            MapLayer m_PushpinLayer = new MapLayer();
            map.Children.Add(m_PushpinLayer);

            // Reasonable stab at center of Seattle metro area
            map.SetView(new GeoCoordinate(-7.102357, 110.407677), 10);

            // Create and Add a few push pins
            Pushpin pushpin1 = new Pushpin();
            pushpin1.Background = new SolidColorBrush(Colors.Red);
            pushpin1.Location = new GeoCoordinate(-7.102357, 99.407677);    

            Pushpin pushpin2 = new Pushpin();
            pushpin2.Background = new SolidColorBrush(Colors.Green);
            pushpin2.Location = new GeoCoordinate(-7.102357, 99.407677);      

            Pushpin pushpin3 = new Pushpin();
            pushpin3.Background = new SolidColorBrush(Colors.Blue);
            pushpin3.Location = new GeoCoordinate(-7.102357, 110.407677);   

            m_PushpinLayer.AddChild(pushpin1, pushpin1.Location);
            m_PushpinLayer.AddChild(pushpin2, pushpin2.Location);
            m_PushpinLayer.AddChild(pushpin3, pushpin3.Location);

            map.ZoomLevel = 6;
        }

8. Buka permisson location pada WMAppManifest.xml centang ID_CAP_LOCATION
12-01-2014 14-31-35

Advertisements

Published by

jarcode

hello I am jarcode

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