Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone

Assalamukum agan semua,,,
untuk mengawali hari pertam di tahun 2015 ini :D, saya ingin memposting tentang Windows Phone lagi, kali ini tentang bagaimana cara Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone,
biaasanya cara ini digunakan jika kita ingin membuat tempat pariwisata ataupun yang lainnya..

Langkah - langkah Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone

1. Buat sebuah Project Windows Phone App baru

2. Tambahkan references Windows Phone Toolkit dengan cara klik kanan references > Manage Nuget Packages > Cari Windows Phone Toolkit > Install

2. Tambahkan 1 map, 2 textbox dan textblock dan buat sebuah application bar

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="Tutorial Koding" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="Map" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map x:Name="mymap" HorizontalAlignment="Left" Grid.Row="0" VerticalAlignment="Top" Height="404" Width="456"/>
            <TextBlock HorizontalAlignment="Left" Margin="10,429,0,0" TextWrapping="Wrap" Text="Longitude" VerticalAlignment="Top"/>
            <TextBox x:Name="txt_longitude" HorizontalAlignment="Left" Height="72" TextWrapping="Wrap" VerticalAlignment="Top" Width="340" Margin="116,404,0,0"/>
            <TextBlock HorizontalAlignment="Left" Margin="10,486,0,0" TextWrapping="Wrap" Text="Latitude" VerticalAlignment="Top"/>
            <TextBox  x:Name="txt_latitude" HorizontalAlignment="Left" Height="72" TextWrapping="Wrap" VerticalAlignment="Top" Width="340" Margin="116,461,0,0"/>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1" IsMenuEnabled="True" IsVisible="True">
            <shell:ApplicationBarIconButton x:Name="cari" Text="Cari" IconUri="/Assets/AppBar/feature.search.png" Click="cari_Click"/>
            <shell:ApplicationBarIconButton x:Name="zoommore" Text="Zoom In" IconUri="/Assets/AppBar1/add.png" Click="zoommore_Click"/>
            <shell:ApplicationBarIconButton x:Name="zoomless" Text="Zoom Out" IconUri="/Assets/AppBar2/minus.png" Click="zoomless_Click"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

3. Buka Capabilities pada file WMAppManifest.xml centang ID_CAP_MAP

4. Import 4 namespace dibawah ini pada file .xaml anda

using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Microsoft.Phone.Maps.Toolkit;
using Microsoft.Phone.Maps.Controls;
using System.Windows.Media;

5. Pada event cari_Click tambahkan script dibawah ini

private void cari_Click(object sender, EventArgs e)
        {
            // Membuat Pushpin
            Pushpin mypushpin = new Pushpin();
            mypushpin.Content = "Lokasi";

            // Menambahkan pushpin ke MapOverlay
            MapOverlay myoverlay = new MapOverlay();
            myoverlay.Content = mypushpin;
            // menyesuaikan koorinate MapOverlay
            myoverlay.GeoCoordinate = new System.Device.Location.GeoCoordinate(Convert.ToDouble(txt_latitude.Text), Convert.ToDouble(txt_longitude.Text));
            myoverlay.PositionOrigin = new Point(0, 0.5);
            
            // tambahkan MapOverlay ke MapLayer
            MapLayer mylayer = new MapLayer();
            mylayer.Add(myoverlay);

            // Menambahkan MapLayer ke map
            mymap.Layers.Add(mylayer);
            // Mengatur posisi tengah map
            mymap.Center = new System.Device.Location.GeoCoordinate(Convert.ToDouble(txt_latitude.Text), Convert.ToDouble(txt_longitude.Text));
            mymap.ZoomLevel = 14;
        }

6. Pada event zoommore_Click dan zoomless_Click tambahkan script dibawah ini

        private void zoommore_Click(object sender, EventArgs e)
        {
            // memperbesar map
            mymap.ZoomLevel = Math.Min(mymap.ZoomLevel + 1, 20);
        }

        private void zoomless_Click(object sender, EventArgs e)
        {
            // memperkecil map
            mymap.ZoomLevel = Math.Max(mymap.ZoomLevel - 1, 1);
        }

7. Jalankan Aplikasi tersebut dengan menekan F5 maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Menampilkan Map Berdasarkan Longitude dan Latitude Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini. . .