Tutorial Xamarin Forms : Multi Maps Pin Marker / Maps Pin Lokasi dari Data JSON

Jika pada tutorial xamarin sebelumnya kita membahas bagaimana mengimplementasikan maps pada xamarin form (cross platform) yaitu pada link berikut http://www.xamarinindonesia.com/2018/02/tutorial-xamarin-form-implementasi-maps.html.
Dimana data lokasi berupa latitude dan longitude berupa data manual, maka pada tutorial kali ini kita akan mengambil data lokasi tersebut dari JSON.  Pastikan anda sudah mengikuti tutorial saya sebelumnya agar tidak mengalami kesulitan pada tutorial kali ini.

Seperti pada tutorial yang laiinya jika hendak menggunakan data JSON maka kita biasa menggunakan nuget packages berupa Newsoft JSON yang bisa kalian cek dokumentasinya disini https://www.nuget.org/packages/newtonsoft.json/.

Anda juga bisa melakukan instalasi pada xamarin form anda dengan cara pada project klik kanan - add nuget package - cari newtonsoft json -> pilih instal.

Karena ini adalah tutorial lanjutan, maka saya anggap anda sudah mengikuti tutorial instalasi maps pada xamarin forms. Pastikan anda sudah menginstal nuget newtonsoft json pada xamarin form anda. Selanjutnya siapkan sebuah url json , pada contoh kali ini saya menggunakan json dengan format berikut .

Table MySQL

Untuk cara membuat JSON bisa menggunakan berbagai bahasa pemrograman baik php, ruby, phyton, asp.net dan sebagainya. Namun pada kesempatan kali ini saya menggunakan PHP framework CodeIgniter dengan code berikut :

Model : m_maps.php

<?php

class M_maps extends CI_Model{

  var $tabel = 'tb_maps';
  function tampil_data(){
  return $this->db->get('tb_maps');
  }
}

Controller : Api.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Api extends CI_Controller {

 //Load data dari database dengan fungsi construct
 function __construct(){
  parent::__construct();
               $this->load->model('m_maps');
    }

    public function index()
 {
  $this->load->view('welcome_message');
        }

        function getMaps(){
  $json_data = $this->m_maps->tampil_data()->result();
   $arr = array();
   foreach ($json_data as $results) {
   $arr[] = array(
     'id' => $results->id,
     'lokasi' => $results->lokasi,
     'latitude' => $results->latitude,
     'longitude' => $results->longitude

     );
      }
  //save data mysql data in json encode format

  $data = json_encode($arr);
  header('Content-type: text/javascript');
  echo "{"lokasinya":" . $data . "}";
  }
}

Selanjutnya kita buka Visual Studio Xamarin form kita, pada mapsplatformpage.xaml.cs

using Xamarin.Forms;
using Xamarin.Forms.Maps;
using System;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Net.Http.Headers;
using System.Collections.ObjectModel;
using Newtonsoft.Json.Linq;

namespace mapsplatform
{
    public partial class mapsplatformPage : ContentPage
    {
        Map map;

        //Buat sebuah class untuk menampung variable json maps
        public class Lokasi
        {
            public int id { get; set; }
            public string lokasi { get; set; }
            public string latitude { get; set; }
            public string longitude { get; set; }
        }



        public mapsplatformPage()
        {
            GetLokasiList();

            map = new Map
            {
                IsShowingUser = true,
                HeightRequest = 100,
                WidthRequest = 100,
                VerticalOptions = LayoutOptions.FillAndExpand
            };

            //Arahkan maps camera ke sebuah lokasi default
           map.MoveToRegion(MapSpan.FromCenterAndRadius(
                new Position(-7.4335453, 109.2396097), Distance.FromMiles(1)));


            // put the page together
            Content = new StackLayout
            {
                Spacing = 0,
                Children = {
                    map
                }
            };
        }

        //Ambil data JSON dari sebuah URL

        public async void GetLokasiList()
        {
            var client = new HttpClient();
            client.BaseAddress = new Uri("http://192.168.43.201/Api/api/getMaps");
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = await client.GetAsync("http://192.168.43.201/Api/api/getMaps");

            if (response.IsSuccessStatusCode)
            {
                var data = await response.Content.ReadAsStringAsync();

                JObject o = JObject.Parse(data);
                var ab = o.GetValue("lokasinya").ToString();
                JArray arr = JArray.Parse(ab);

                int x = arr.Count;
                int i = 0;

                //Lakukan looping untuk mengkoleksi semua data dari json
                for (i = 0; i < x; i++)
                {
                    string latitude = arr[i]["latitude"].ToString();
                    string longitude = arr[i]["longitude"].ToString();
                    string lokasi = arr[i]["lokasi"].ToString();

                    double latitudex = double.Parse(latitude);
                    double longitudex = double.Parse(longitude);

                    //Tampilkan latitude dan longitude pada map pin
                    map.Pins.Add(new Pin
                    {
                        Position = new Position(latitudex, longitudex),
                        Label = lokasi,
                        Address = "XamarinIndonesia.com"
                    });
                }

            }
        }
    }
}

Jika kita lihat maka ada beberapa penambahan baris code pada page tersebut antara lain adalah

1. Penambahan class Lokasi

//Buat sebuah class untuk menampung variable json maps
        public class Lokasi
        {
            public int id { get; set; }
            public string lokasi { get; set; }
            public string latitude { get; set; }
            public string longitude { get; set; }
        }

Kode tersebut akan menampung variable dari data json .

2. Pemanggilan fungsi GetLokasiList

GetLokasiList();

3. Pembuatan Fungsi GetLokasiList()

 //Ambil data JSON dari sebuah URL

        public async void GetLokasiList()
        {
            var client = new HttpClient();
            client.BaseAddress = new Uri("http://192.168.43.201/Api/api/getMaps");
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = await client.GetAsync("http://192.168.43.201/Api/api/getMaps");

            if (response.IsSuccessStatusCode)
            {
                var data = await response.Content.ReadAsStringAsync();

                JObject o = JObject.Parse(data);
                var ab = o.GetValue("lokasinya").ToString();
                JArray arr = JArray.Parse(ab);

                int x = arr.Count;
                int i = 0;

                //Lakukan looping untuk mengkoleksi semua data dari json
                for (i = 0; i < x; i++)
                {
                    string latitude = arr[i]["latitude"].ToString();
                    string longitude = arr[i]["longitude"].ToString();
                    string lokasi = arr[i]["lokasi"].ToString();

                    double latitudex = double.Parse(latitude);
                    double longitudex = double.Parse(longitude);

                    //Tampilkan latitude dan longitude pada map pin
                    map.Pins.Add(new Pin
                    {
                        Position = new Position(latitudex, longitudex),
                        Label = lokasi,
                        Address = "XamarinIndonesia.com"
                    });
                }

            }

Pertama pada fungsi tersebut kita ambil data jsonnya dengan HttpClient().

var client = new HttpClient();
            client.BaseAddress = new Uri("http://192.168.43.201/Api/api/getMaps");
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = await client.GetAsync("http://192.168.43.201/Api/api/getMaps");

Jika data json tersedia maka ambil valuenya dan looping / ulang agar semua data tampil.

if (response.IsSuccessStatusCode)
            {
                var data = await response.Content.ReadAsStringAsync();

                JObject o = JObject.Parse(data);
                var ab = o.GetValue("lokasinya").ToString();
                JArray arr = JArray.Parse(ab);

                int x = arr.Count;
                int i = 0;

                //Lakukan looping untuk mengkoleksi semua data dari json
                for (i = 0; i < x; i++)
                {
                    string latitude = arr[i]["latitude"].ToString();
                    string longitude = arr[i]["longitude"].ToString();
                    string lokasi = arr[i]["lokasi"].ToString();

                    double latitudex = double.Parse(latitude);
                    double longitudex = double.Parse(longitude);

                    //Tampilkan latitude dan longitude pada map pin
                    map.Pins.Add(new Pin
                    {
                        Position = new Position(latitudex, longitudex),
                        Label = lokasi,
                        Address = "XamarinIndonesia.com"
                    });
                }

            }

Demikianlah tutorial maps json pada xamarin forms.

Thanks

Ipung Purwono
Facebook