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