Tuesday 13 September 2016

Cara Menggunakan Highmap ( Highchart ) Dari Shapefile

Posted on September 13, 2016 by Hasta Nurhusada
Gambar 1. Gambar judul
Menampilkan chart peta menggunakan Higmap dari Highchart js ada dua cara. Cara pertama menggunakan geojson dan yang kedua file SVG. Pada kali ini kita akan mencoba menampilkan chart peta yang data peta nya bersumber dari geojson. Jika kita ingin menggunakan peta level provinsi kita akan dengan mudah menggunakan highchart tersebut, karena geojson telah disedikan high chart js. Namun bagaimana jika ingin menampilkan peta level kecamatan. Untuk menampilkan peta yang tidak disediakan dari highchart, kita dapat membuat atau miminta peta yang biasanya berformatkan shapefile 

Gambar 2. Proses dari dshapefile sampai peta ditampilkan menggunakan highmap
Sebelum diubah sebaiknya shapefile disederhanakan agar performance penampilan peta baik, karena terlalu banyak titik/point akan lebih membutuhkan waktu bagi browser untuk mengubah titik-titik tersebut menjadi peta/polygon:

Pada halaman sebelumnya kita pernah  mengubah Shapefile menjadi File Geojson:

Lalu sekarang ini bagaimana cara menampilkan file GeoJson menggunakan Highmap / Highchart

1. Perlu sedikit pengubahan nama variabel yang ada didalam geojson, yaitu dengan buka geojson dengan notepad/sublime find and replace nama variabel wilayah atau yang akan dijadikan. misal pada gambar 3 yang ingin ditampilkan nama kecamatan maka Kecamatan diubah menjadi name
Gambar 3. Find and replace menjadi name
2. Kopi kode dibawah dan sesuaikan dengan data yang dimiliki


<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highmaps Example</title>

  <script type="text/javascript" src="jquery.min.js"></script>
  <style type="text/css">
#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
  </style>
  <script type="text/javascript">
$(function () {

    // Prepare random data
    var data = [
        {
            "code": "082",
            "value": 710
        },
        {
            "code": "040",
            "value": 963
        },
        {
            "code": "021",
            "value": 541
        },
        {
            "code": "010",
            "value": 622
        },
        {
            "code": "053",
            "value": 866
        },
        {
            "code": "080",
            "value": 398
        },
        {
            "code": "023",
            "value": 785
        },
        {
            "code": "070",
            "value": 223
        },
        {
            "code": "091",
            "value": 362
        },
        {
            "code": "090",
            "value": 361
        },
        {
            "code": "100",
            "value": 237
        },
        {
            "code": "060",
            "value": 157
        },
        {
            "code": "020",
            "value": 134
        },
        {
            "code": "101",
            "value": 136
        },
        {
            "code": "052",
            "value": 704
        },
        {
            "code": "073",
            "value": 361
        },
        {
            "code": "081",
            "value": 237
        },
        {
            "code": "022",
            "value": 157
        },
        {
            "code": "071",
            "value": 134
        },
        {
            "code": "030",
            "value": 136
        },
        {
            "code": "072",
            "value": 704
        },
        {
            "code": "050",
            "value": 134
        },
        {
            "code": "051",
            "value": 136
        },
        {
            "code": "092",
            "value": 704
        }
    ];

    $.getJSON('Bintuni.geojson', function (geojson) {

        // Initiate the chart
        $('#container').highcharts('Map', {

            title : {
                text : 'GeoJSON in Highmaps'
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            colorAxis: {
            },

          
            series : [{
                data : data,
                mapData: geojson,
                joinBy: ['KEC_NO', 'code'],
                name: 'Random data',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                }
            }]
        });
    });
});
  </script>
 </head>
 <body>
<script src="highmaps.src.js"></script>
<script src="data.js"></script>
<script src="exporting.js"></script>



<div id="container" style="min-width: 310px; max-width: 400px"></div>

 </body>
</html>
ket:  
        a) "code": "050",           Nilai dari variabel yang menjadi kode unik suatu wilayah pada geojson misal  kode kecamatan. Dalam contoh Kec_No    
       b)  joinBy: ['KEC_NO', 'code'],     KEC_NO mendeklarasikan kode unik seperti yang disebutkan pada poin a)        
        c) "value": 704              Nilai dari wilayah tersebut sehinga menghasilkan warna2/ choropleth 
3. Highmap,js dan kawan-kawannya dapat didownload disini:
http://www.highcharts.com/download


Sekian dan Trimakasih





           

Artikel Terkait javascript ,SISTEM INFORMASI GEOGRAFIS

Posted in , | 1 comment

1 comment:

Subscribe to: Post Comments (Atom)