ARDUCODING

Beranda
Internet of Things

Mapping Data GPS dengan Leaflet (ThingSpeak GPS Tracker)

ThingSpeak GPS tracking
Thingspeak GPS

Pada tutorial ini saya akan mencoba memberikan gambaran mengenai visualisasi data lokasi (latitude, longitude) kedalam bentuk map. Terdapat banyak platform yang menyediakan jasa mapping ini seperti google maps, open street map, bing map, dan lain sebagainya. Nah untuk yang ini, saya mencoba plugin leaflet js yang platform mappingnya menggunakan open street. Kita akan mengimplementasikannya kedalam aplikasi berbasis web. Jadi pastikan anda sudah memahami pemrograman web (php, java script, html).
Proses kerja dari metode ini sangat sederhana. Dengan memanfaatkan platform IoT ThingSpeak kita akan menyimpan data lokasi (latitude, longitude). Pada sisi aplikasi web, kita akan melakukan request data lokasi terakhir yang disimpan melalui request web API.  Data hasil request kemudian akan kita simpan kedalam variabel (java script) yang selanjutnya digunkan untuk memplotting titik lokasi. Ok, langsung saja kita mulai,

Sebagai contoh kasus kita memiliki perangkat monitoring suhu berbasis IoT menggunakan platform ThingSpeak. Untuk mengetahui lokasi perangkat, kita menggunakan modul GPS (katakanlah modul Neo-6M). Terdapat 4 parameter data yang akan disimpan di ThingSpeak yaitu kelembaban, suhu, latitude, dan longitude. Pada konfigurasi ThingSpeak silahkan untuk membuat channel  dan 4 field seperti gambar berikut:
ThingSpeak GPS Tracker
Setelah beres buat channelnya, maka kita akan proses kirim data dari perangkat ke ThingSpeak. Setelah beberapa sampel anggap saja kita telah berhasil mengirim data dan diperoleh hasil seperti berikut:
ThingSpeak GPS Tracker
Selanjutnya mari kita buat mapnya. Karena kita akan melakukan request via GET, pastikan dulu read  API key nya  serta format request (Read Channel Feed).
ThingSpeak GPS Tracker
Pertama mari kita buat halaman webnya. Biar mudah mari kita gunakan library yang sudah di simpan di cloud sebagai CDN (Content Delivery Network) jadi kita langsung tinggal coding saja. Namun dengan demikian kita perlu koneksi internet saat menjalankan aplikasinya nanti. Untuk code editor saya menggunakan notepad ++.
Pemanasan dulu, silahkan gunakan kode berikut!. simpan dengan format .html lalu buka menggunakan web browser. (harus konek internet ya)

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map
  var map = L.map('map').setView([42.35, -71.08], 13);

  // load a tile layer
  L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

  </script>
</body>
</html>
IoT GPS Tracker

Node MCU GPS Tracker

Ok, kalau sudah dicoba mari lanjut ke permasalahan utama. Copy code dibawah, simpan dengan ekstensi HTML. dan buka dengan Browser!

<html>
<head>
  <title>ThingSpeak GPS Tracker</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <style>
    #map_tracker{ height: 100% }
  </style>
</head>
<body>

  <div id="map_tracker"></div>

  <script>
      //L.map akan dipasang pada id="map_tracker" 
      const mymap = L.map('map_tracker').setView([-6.9032739, 107.5731165], 15); // Set view default nya ..contoh bandung
      const attribution ='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

      const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      const tiles = L.tileLayer(tileUrl, { attribution });
      tiles.addTo(mymap);

      let marker = L.marker([0, 0]).addTo(mymap);
   const api_url = 'https://api.thingspeak.com/channels/YOUR_CHANNEL_ID/feeds/last.json?timezone=Asia%2FJakarta&api_key=YOUR_READ_API_KEYS';
   

      let firstTime = true;

      async function getLoc() {
        const response = await fetch(api_url);
        const data = await response.json();
        const { created_at, field1, field2, field3, field4 } = data; // field1 = kelembaban, field2=suhu, dst...  
  var date_ = created_at.split('T'), //buat split tanggal sama jam ==> 2020-03-11T21:32:27+07:00
   date_now = date_[0], time_z = date_[1];
  var time_ = time_z.split('+'), time_now=time_[0]; // buat menghilangkan GMT +7
  
        // tampil zoom!
        mymap.setView([field3, field4], mymap.getZoom());
  
  //buat popup nya
  var customPopup="<b>Last Data Record<br>"+date_now+" "+time_now+"</b><br><b>Temperature: </b>"+field2+" Celcius<br><b>Humidity: </b>"+field1+" %";
        marker.setLatLng([field3, field4]); // set latitude-longitude
  marker.bindPopup(customPopup).addTo(mymap);
      }

      getLoc();
      setInterval(getLoc, 5000); //reload setiap 5 detik
    </script>
</body>
</html>

Yang perlu diperhatikan adalah proses memperoleh data dari ThingSpeak dengan perintah request GET (Read Channel)

https://api.thingspeak.com/channels/YOUR_CHANNEL_ID/feeds/last.json?timezone=Asia%2FJakarta&api_key=YOUR_READ_API_KEYS'
saya menambahkan timezone agar format jamnya sesuai dengan WIB yaitu +7. Dari perintah ini maka akan diperoleh data JSON sebagai berikut:
Nah.. data-data ini yang selanjutnya diambil untuk ditampilkan dalam pop up serta untuk mensetting lokasi pup up nya (latitude, logitude).
Ok, garis besarnya adalah demikian. Pastikan Channel ID dan read API Key nya sudah sesuai dengan channel yang di buat. Selanjutnya tinggal di kreasikan misal di letakkan pada tampilan Dashboard atau sejenisnya.