--> Skip to main content
Home Bootstrap Jquery Map Pemrograman Web Web Programming Menampilkan Jumlah Penduduk Pada Peta Menggunakan Highmaps

Menampilkan Jumlah Penduduk Pada Peta Menggunakan Highmaps


Tutorial kali ini akan mengupas bagaimana caranya kita menampilkan jumlah populasi penduduk pada setiap region peta. Artinya, setiap kita menghover (mengarahkan pointer mouse) ke bagian region tertentu pada peta, maka akan ditampilkan informasi jumlah penduduknya.

Menampilkan informasi pada sebuah peta, kecenderungannya kita sering menggunakan google maps (terutama penulis) dengan membuat marker.

Silahkan baca tutorial yang berkenaan dengan google maps, diantaranya :

Dalam tutorial menampilkan jumlah penduduk dengan peta, kita akan menggunakan bantuan librari highmaps.js yang menawarkan keunggulan dalam mengcreate sebuah fitur-fitur pada peta. Librari ini murni ditulis dalam javascript.

Berikut ini adalah hasil akhir yang akan kita diskusikan dalam tutorial pembuatan statistik populasi penduduk pada peta berbasis web, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :


(Gambar.1)

Seperti yang terlihat pada Gambar.1, peta yang kita tampilkan adalah peta indonesia, dimana kita dapat menampilkan label per region provinsi. Perhatikan tooltip pada region Kalimantan Barat (ketika dihover), tooltipnya menampilkan informasi jumlah penduduk dari provinsi tersebut.

Langkah-langkahnya

1. Memanggil file librari map beserta pendukungnya
Agar peta dapat ditampilkan pada sebuah halaman web, maka kita akan menyertakan tiga file : highmaps.js, id-all.js dan exporting.js.
  • File highmaps.js merupakan file libari yang mengatur properti dalam pembuatan peta.
  • File id-all.js merupakan file librari untuk peta indonesia. Dalam file ini berisikan kordinat untuk suatu region provinsi, sehingga kita dapat memberikan label berdasarkan region.
  • File exporting.js merupakan modul tambahan, seperti tersedianya fasilitas untuk mendownload peta dalam bentuk image (png, jpg), dalam bentuk pdf doc, dan dalam bentuk SVG vector image.
Dalam contoh ini, file highmaps.js dan id-all.js serta file exporting.js berada dalam folder assets/js/filename.js, maka proses pemanggilannya sebagai berikut :
<script src="assets/js/highmaps.js"></script>
<script src="assets/js/id-all.js"></script>
<script src="assets/js/exporting.js"></script>


 2. Menambahkan script pengatur peta
Dalam langkah kedua ini kita akan membuat peta yang menampilkan title, subtitle, mapnavigation serta menampilkan label untuk tiap-tiap region provinsi. Kita juga menambahkan data jumlah populasi penduduk berdasarkan region provinsi.
<script>
    $(function() {    
    var data = [
        {
            "hc-key": "id-3700",
            "value": 0
        },
        {
            // Aceh
            "hc-key": "id-ac",
            "value": 4.48
        },
        {
            // Sumatera Utara
            "hc-key": "id-su",
            "value": 12.98
        },
        {
            // Sumatera Barat
            "hc-key": "id-sb",
            "value": 4.84
        },
        {
            // Riau
            "hc-key": "id-ri",
            "value": 5.54
        },
        {
            // Kepulauan Riau
            "hc-key": "id-kr",
            "value": 1.69
        },
        {
            // Jambi
            "hc-key": "id-ja",
            "value": 3.09
        },
        {
            // Bengkulu
            "hc-key": "id-be",
            "value": 1.71
        },
        {
            // Sumatera Selatan
            "hc-key": "id-sl",
            "value": 7.44
        },
        {
            // Bangka Belitung
            "hc-key": "id-bb",
            "value": 1.22
        },
        {
            // Lampung
            "hc-key": "id-1024",
            "value": 7.59
        },
        {
            // Banten
            "hc-key": "id-bt",
            "value": 10.54
        },
        {
            // Jakarta
            "hc-key": "id-jk",
            "value": 9.59
        },
        {
            // Jawa Barat
            "hc-key": "id-jr",
            "value": 43.02
        },
        {
            // Jawa Tengah
            "hc-key": "id-jt",
            "value": 32.38
        },
        {
            // Jawa Timur
            "hc-key": "id-ji",
            "value": 37.47
        },
        {
            // Yogyakarta
            "hc-key": "id-yo",
            "value": 3.45
        },
        {
            // Bali
            "hc-key": "id-ba",
            "value": 3.89
        },
        {
            // Nusa Tenggara Barat
            "hc-key": "id-nb",
            "value": 4.49
        },
        {
            // Nusa Tenggara Timur
            "hc-key": "id-nt",
            "value": 4.68
        },
        {
            // Kalimantan Barat
            "hc-key": "id-kb",
            "value": 4.39
        },
        {
            // Kalimantan Timur
            "hc-key": "id-ki",
            "value": 3.55
        },
        {
            // Kalimantan Tengah
            "hc-key": "id-kt",
            "value": 2.2
        },
        {
            // Kalimantan Selatan
            "hc-key": "id-ks",
            "value": 3.63
        },
        {
            // Sulawesi Utara
            "hc-key": "id-sw",
            "value": 2.26
        },
        {
            // Sulawesi Tengah
            "hc-key": "id-st",
            "value": 2.63
        },
        {
            // Gorontalo
            "hc-key": "id-go",
            "value": 1.04
        },
        {
            // Sulawesi Barat
            "hc-key": "id-sr",
            "value": 1.16
        },
        
        {
            // Sulawesi Selatan
            "hc-key": "id-se",
            "value": 8.03
        },
         {
            "hc-key": "id-sg",
            "value": 22
        },
        {
            // Maluku Utara
            "hc-key": "id-la",
            "value": 1.03
        },
        {
            // Maluku
            "hc-key": "id-ma",
            "value": 1.53
        },
        {
            // Papua Barat
            "hc-key": "id-ib",
            "value": 0.76
        }, 
        {
            // Papua Barat
            "hc-key": "id-pa",
            "value": 2.85
        }
    ];

    // Initiate the chart
    $('#container').highcharts('Map', {
        legend: {
            enabled: false
          },


        title : {
            text : 'Jumlah Penduduk Indonesia Tahun 2010'
        },

        subtitle : {
            text : '(Sumber : BPS)'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'top'
            }
        },
        series : [{
            data : data,
            mapData: Highcharts.maps['countries/id/id-all'],
            joinBy: 'hc-key',
            name: 'Jumlah Penduduk',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            },
            tooltip: {
                    valueSuffix: ' Juta'
                }
        }]
    });
});
</script>

Jika anda perhatikan kode "hc-key": "id-3700" adalah kode untuk peta indonesia, dimana kode ini terdapat didalam file id-all.js. Bagian kode "hc-key": "id-ac" sampai dengan "hc-key": "id-pa" merupakan pemanggilan masing-masing region provinsi.

Dalam contoh ini kita tidak menampilkan legend-nya, kode untuk mengdisablednya terdapat pada "legend: { enabled: false }" . Untuk mengatur navigasi mapnya dapat dilakukan pada bagian kode mapNavigation:{enabled: true, buttonOptions: {verticalAlign: 'top' }}.

Proses ditampilkan label pada masing-masing region dilakukan pada kode dataLabels: {enabled: true, format: '{point.name}'}. Dalam kode tersebut kita menampilkan label dengan nama provinsi yang lengkap, bila ingin menampilkan kode dengan dua digit, maka pada bagian formatnya diset sebagai berikut : dataLabels: {enabled: true, format: '{point.postal-code}'}.

Bagian dari kode $('#container') merupakan id unique yang nantinya akan dirender pada tag <body></body>.

 3. Mengcustom ukuran peta dan merender peta
Dalam langkah ke-3 ini kita akan mengcustom ukuran peta default dengan ukuran yang kita inginkan. Untuk mengcustomnya bisa dengan menggunakan bantuan css :
<style>
#container {
    height: 600px; 
    min-width: 700px; 
    max-width: 1366px; 
    margin: 0 auto; 
}
</style

Agar peta dirender, maka kita membuat div elemet atau id unique yang harus sama saat kita buat pada langkah ke-2 :
<div id ="container"></div>

Complete Source Code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="ilmu-detil.blogspot.com">
 <title>Display Population By Map</title>
 <!-- Bagian css -->
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
 <script src="assets/js/jquery-1.10.1.min.js"></script>
 <style>
 #container {
  height: 600px; 
  min-width: 700px; 
  max-width: 1366px; 
  margin: 0 auto; 
 }
 </style>
 <script>
 $(function() {    
    var data = [
        {
            "hc-key": "id-3700",
            "value": 0
        },
        {
            // Aceh
   "hc-key": "id-ac",
            "value": 4.48
        },
  {
            // Sumatera Utara
   "hc-key": "id-su",
            "value": 12.98
        },
  {
            // Sumatera Barat
   "hc-key": "id-sb",
            "value": 4.84
        },
  {
            // Riau
   "hc-key": "id-ri",
            "value": 5.54
        },
  {
            // Kepulauan Riau
   "hc-key": "id-kr",
            "value": 1.69
        },
  {
            // Jambi
   "hc-key": "id-ja",
            "value": 3.09
        },
  {
            // Bengkulu
   "hc-key": "id-be",
            "value": 1.71
        },
  {
            // Sumatera Selatan
   "hc-key": "id-sl",
            "value": 7.44
        },
  {
            // Bangka Belitung
   "hc-key": "id-bb",
            "value": 1.22
        },
  {
            // Lampung
   "hc-key": "id-1024",
            "value": 7.59
        },
  {
            // Banten
   "hc-key": "id-bt",
            "value": 10.54
        },
  {
            // Jakarta
   "hc-key": "id-jk",
            "value": 9.59
        },
  {
            // Jawa Barat
   "hc-key": "id-jr",
            "value": 43.02
        },
  {
            // Jawa Tengah
   "hc-key": "id-jt",
            "value": 32.38
        },
  {
            // Jawa Timur
   "hc-key": "id-ji",
            "value": 37.47
        },
  {
            // Yogyakarta
   "hc-key": "id-yo",
            "value": 3.45
        },
  {
            // Bali
   "hc-key": "id-ba",
            "value": 3.89
        },
  {
            // Nusa Tenggara Barat
   "hc-key": "id-nb",
            "value": 4.49
        },
  {
            // Nusa Tenggara Timur
   "hc-key": "id-nt",
            "value": 4.68
        },
  {
            // Kalimantan Barat
   "hc-key": "id-kb",
            "value": 4.39
        },
        {
            // Kalimantan Timur
   "hc-key": "id-ki",
            "value": 3.55
        },
  {
            // Kalimantan Tengah
   "hc-key": "id-kt",
            "value": 2.2
        },
        {
            // Kalimantan Selatan
   "hc-key": "id-ks",
            "value": 3.63
        },
  {
            // Sulawesi Utara
   "hc-key": "id-sw",
            "value": 2.26
        },
  {
            // Sulawesi Tengah
   "hc-key": "id-st",
            "value": 2.63
        },
  {
            // Gorontalo
   "hc-key": "id-go",
            "value": 1.04
        },
  {
            // Sulawesi Barat
   "hc-key": "id-sr",
            "value": 1.16
        },
        
        {
            // Sulawesi Selatan
   "hc-key": "id-se",
            "value": 8.03
        },
   {
            "hc-key": "id-sg",
            "value": 22
        },
  {
            // Maluku Utara
   "hc-key": "id-la",
            "value": 1.03
        },
  {
            // Maluku
   "hc-key": "id-ma",
            "value": 1.53
        },
        {
            // Papua Barat
   "hc-key": "id-ib",
            "value": 0.76
        }, 
  {
            // Papua Barat
   "hc-key": "id-pa",
            "value": 2.85
        }
    ];

    // Initiate the chart
    $('#container').highcharts('Map', {
  legend: {
            enabled: false
          },


        title : {
            text : 'Jumlah Penduduk Indonesia Tahun 2010'
        },

        subtitle : {
            text : '(Sumber : BPS)'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'top'
            }
        },
        series : [{
            data : data,
            mapData: Highcharts.maps['countries/id/id-all'],
            joinBy: 'hc-key',
            name: 'Jumlah Penduduk',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            },
   tooltip: {
                    valueSuffix: ' Juta'
                }
        }]
    });
});
 </script>
 <script src="assets/js/highmaps.js"></script>
 <script src="assets/js/id-all.js"></script>
 <script src="assets/js/exporting.js"></script>     
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Programming</a></li>
    <li class="clr3"><a href="">English</a></li>
   </ul>
  </div>
 </div>
</nav>
</br></br>
<div class="container-fluid" style="margin-top:7px">
 <div id ="container"></div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom footer-bottom">
   <div class="container text-center">
      <p class="text-center">Copyright &copy; 2016,  DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
   </div>
</div>
</body>
</html>

Live Preview Download

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar