2020-03-27 11:56:23 +00:00
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Indonesia Map</title>
|
|
|
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
|
|
|
<style src="map.css" type="text/css"></style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2020-03-31 08:20:47 +00:00
|
|
|
<div id="error"></div>
|
2020-03-27 11:56:23 +00:00
|
|
|
<div id="container" width="600px" height="200px"></div>
|
2020-03-31 08:20:47 +00:00
|
|
|
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
|
2020-03-27 11:56:23 +00:00
|
|
|
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
|
2020-03-31 08:20:47 +00:00
|
|
|
<script src="https://code.highcharts.com/mapdata/countries/id/id-all.js"></script>
|
2020-03-27 11:56:23 +00:00
|
|
|
<script>
|
2020-03-31 08:20:47 +00:00
|
|
|
const showError = document.getElementById('error')
|
|
|
|
|
|
|
|
|
|
var request = new XMLHttpRequest()
|
|
|
|
|
request.open('GET', 'https://api.kawalcorona.com/indonesia/provinsi/', true)
|
|
|
|
|
|
|
|
|
|
request.onload = function () {
|
|
|
|
|
//Begin accessing the data
|
|
|
|
|
var dataprov = JSON.parse(this.response)
|
|
|
|
|
if(request.status >= 200 && request.status < 400){
|
|
|
|
|
var output = [
|
|
|
|
|
['id-ac', [1,2,3]], // Aceh
|
|
|
|
|
['id-su', [0,0,0]], // Sumatera Utara
|
|
|
|
|
['id-sb', [0,0,0]], // Sumatera Barat
|
|
|
|
|
['id-ri', [0,0,0]], // Riau
|
|
|
|
|
['id-ja', [0,0,0]], // Jambi
|
|
|
|
|
['id-sl', [0,0,0]], // Sumatera Selatan
|
|
|
|
|
['id-be', [0,0,0]], // Bengkulu !
|
|
|
|
|
['id-bb', [0,0,0]], // Bangka Belitung
|
|
|
|
|
['id-1024', [0,0,0]], // Lampung
|
|
|
|
|
['id-kr', [0,0,0]], // Kepulauan Riau
|
|
|
|
|
['id-jk', [0,0,0]], // DKI Jakarta
|
|
|
|
|
['id-jr', [0,0,0]], // Jawa Barat
|
|
|
|
|
['id-jt', [0,0,0]], // Jawa Tengah
|
|
|
|
|
['id-yo', [0,0,0]], // DIY Jogjakarta
|
|
|
|
|
['id-ji', [0,0,0]], // Jawa Timur
|
|
|
|
|
['id-bt', [0,0,0]], // Banten
|
|
|
|
|
['id-ba', [0,0,0]], // Bali
|
|
|
|
|
['id-nb', [0,0,0]], // NTB
|
|
|
|
|
['id-nt', [0,0,0]], // NTT !
|
|
|
|
|
['id-kb', [0,0,0]], // Kalimantan Barat
|
|
|
|
|
['id-kt', [0,0,0]], // Kalimantan Tengah
|
|
|
|
|
['id-ks', [0,0,0]], // Kalimantan Selatan
|
|
|
|
|
['id-ki', [0,0,0]], // Kalimantan Timur
|
|
|
|
|
['id-ku', [0,0,0]], // Kalimantan Utara
|
|
|
|
|
['id-sw', [0,0,0]], // Sulawesi Utara
|
|
|
|
|
['id-st', [0,0,0]], // Sulawesi Tengah
|
|
|
|
|
['id-se', [0,0,0]], // Sulawesi Selatan
|
|
|
|
|
['id-sg', [0,0,0]], // Sulawesi Tenggara
|
|
|
|
|
['id-go', [0,0,0]], // Gorontalo !
|
|
|
|
|
['id-sr', [0,0,0]], // Sulawesi Barat
|
|
|
|
|
['id-ma', [0,0,0]], // Maluku
|
|
|
|
|
['id-la', [0,0,0]], // Maluku Utara
|
|
|
|
|
['id-pa', [0,0,0]], // Irian Jaya
|
|
|
|
|
['id-ib', [0,0,0]], // Irian Jaya Barat
|
|
|
|
|
];
|
2020-03-27 11:56:23 +00:00
|
|
|
|
2020-03-31 08:20:47 +00:00
|
|
|
dataprov.forEach(attrib => {
|
|
|
|
|
output[attrib.attributes.FID - 1][1][0] = attrib.attributes.Kasus_Posi
|
|
|
|
|
output[attrib.attributes.FID - 1][1][1] = attrib.attributes.Kasus_Semb
|
|
|
|
|
output[attrib.attributes.FID - 1][1][2] = attrib.attributes.Kasus_Meni
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
getMap(output);
|
|
|
|
|
}else{
|
|
|
|
|
const errorMSG = document.createElement('marquee')
|
|
|
|
|
errorMSG.textContent = 'Server mungkin bermasalah'
|
|
|
|
|
showError.appendChild(errorMSG)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
request.send()
|
|
|
|
|
|
|
|
|
|
function getMap(output){
|
|
|
|
|
// Create the chart
|
|
|
|
|
Highcharts.mapChart('container', {
|
|
|
|
|
chart: {
|
|
|
|
|
map: 'countries/id/id-all'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
title: {
|
|
|
|
|
text: 'Corona Virus Indonesia'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
subtitle: {
|
|
|
|
|
text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/id/id-all.js">Indonesia</a>'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mapNavigation: {
|
|
|
|
|
enabled: true,
|
|
|
|
|
buttonOptions: {
|
|
|
|
|
verticalAlign: 'bottom'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
series: [{
|
|
|
|
|
data: output,
|
|
|
|
|
name: 'Positif-Sembuh-Meninggal',
|
|
|
|
|
states: {
|
|
|
|
|
hover: {
|
|
|
|
|
color: '#BADA55'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
dataLabels: {
|
|
|
|
|
enabled: true,
|
|
|
|
|
format: '{point.name}'
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2020-03-27 11:56:23 +00:00
|
|
|
</html>
|
