Menampilkan Lokasi Device di Map Secara Real Time di Windows Phone

Assalamualaikum semua,, Setelah beberapa hari yang lalu saya memposting tentang Menampilkan Lokasi Device di Map di Windows Phone, kali ini saya akan memposting hal yang tidak jauh beda,
Hanya saja pada postingan yang kali ini Lokasi Device yang di tampilkan di map akan secara Real Time, jadi ketika lokasi device berpindah maka Lokasi yang di map juga akan berubah secara langsung sesuai dengan koordinat yang baru. Hal ini biasanya digunakan jika kita ingin membuat sebuah GPS atau yang lainnya.

Langkah - langkah Menampilkan Lokasi Device di Map Secara Real Time di Windows Phone

1. Buat sebuah project Windows Phone App baru

2. Seperti pada tutorial sebelumnya kita perlu menambahkan Windows Phone Toolkit pada references project kita dengan cara Klik kanan pada References -> Manage NuGet Packages -> Cari Windows Phone Toolkit -> Klik Install

3. Buka Capabilities pada file WMAppManifest.xml centang ID_CAP_MAP dan ID_CAP_LOCATION

4. Tambahkan 1 Map, 6 Textblock dan 1 Button atau anda bisa mengcopy script dibawah ini

<!--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>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="Lokasi Real Time" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="50"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,1,12,-1">
            <Button x:Name="btn_start" Content="Mulai Melacak" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,564,0,0" Width="446" Click="btn_start_Click"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Latitude :" VerticalAlignment="Top" Margin="28,497,0,0"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Longitude :" VerticalAlignment="Top" Margin="28,532,0,0" FontSize="20"/>
            <TextBlock x:Name="txt_longitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="158,532,0,0"/>
            <TextBlock x:Name="txt_latitude" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="158,497,0,0"/>
            <TextBlock x:Name="lbl_status" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="158,465,0,0"/>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Status :" VerticalAlignment="Top" Margin="27,465,0,0"/>

            <maps:Map x:Name="map" HorizontalAlignment="Left" VerticalAlignment="Top" Height="465" Width="446" ZoomLevel="14">
                <toolkit:MapExtensions.Children>
                    <toolkit:Pushpin x:Name="pushpinlokasi" Content="Posisi Saya"/>
                </toolkit:MapExtensions.Children>
            </maps:Map>
        </Grid>
    </Grid>

5. Tambahkan script dibawah ini pada file .xaml.cs

// Namespace yang diperlukan
using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Microsoft.Phone.Maps.Toolkit;
using Microsoft.Phone.Maps.Controls;

6. Tambahkan script dibawah ini di atas constructor mainpage.xaml.cs

// deklarasi variable
Geolocator geolocator = null;
bool lacak = false;

7. Pada event btn_start_Click Tambahkan script dibawah ini

private void btn_start_Click(object sender, RoutedEventArgs e)
        {
            if (lacak == false)
            {
                geolocator = new Geolocator();
                // menentukan akurasi
                geolocator.DesiredAccuracy = PositionAccuracy.High;
                // jarak perpindahan dalam satuan meter
                geolocator.MovementThreshold = 20;
                
                geolocator.StatusChanged += geolocator_StatusChanged;
                geolocator.PositionChanged += geolocator_PositionChanged;

                lacak = true;
                btn_start.Content = "Berhenti Melacak"; 
            }
            else
            {
                // menghapus event handler
                geolocator.PositionChanged -= geolocator_PositionChanged;
                geolocator.StatusChanged -= geolocator_StatusChanged;
                
                geolocator = null;

                lacak = false;
                btn_start.Content = "Mulai Melacak";
            }
        }

8. Buat event untuk menghandle geolocator_PositionChanged dan geolocator_StatusChanged

        void geolocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
        {
            Dispatcher.BeginInvoke(() =>
            {
                // menampilkan koordinat yang baru
                txt_latitude.Text = args.Position.Coordinate.Latitude.ToString();
                txt_longitude.Text = args.Position.Coordinate.Longitude.ToString();

                // memindahkan pushpin berdasarkan koordinat yang baru
                Pushpin pushpin = (Pushpin)this.FindName("pushpinlokasi");
                pushpin.GeoCoordinate = new System.Device.Location.GeoCoordinate(args.Position.Coordinate.Latitude,args.Position.Coordinate.Longitude);
                map.Center = new System.Device.Location.GeoCoordinate(args.Position.Coordinate.Latitude, args.Position.Coordinate.Longitude);
            });
        }

        void geolocator_StatusChanged(Geolocator sender, StatusChangedEventArgs args)
        {
            string status = "";
   
            switch (args.Status)
            {
                case PositionStatus.Disabled:
                    status = "Lokasi dinonaktifkan pada pengaturan telepon";
                    break;
                case PositionStatus.Initializing:
                    status = "Menginisialisasi";
                    break;
                case PositionStatus.NoData:
                    status = "Gagal mendapatkan lokasi";
                    break;
                case PositionStatus.Ready:
                    status = "Lokasi telah di dapatkan";
                    break;
            }
            // menampilkan status pada label status
            Dispatcher.BeginInvoke(() =>
            {
                lbl_status.Text = status;
            });
        }

9. Jalankan program dengan menekan F5 maka akan seperti gambar dibawah ini

Ketka pertama kali dijalankan

Menemukan lokasi device

Ketika lokasi device berpindah maka pushpin akan ikut berpindah

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tentang Menampilkan Lokasi Device di Map Secara Real Time di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini