115 lines
6.2 KiB
HTML
115 lines
6.2 KiB
HTML
<?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>
|
|
<div id="error"></div>
|
|
<div id="container" width="600px" height="200px"></div>
|
|
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
|
|
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
|
|
<script src="https://code.highcharts.com/mapdata/countries/id/id-all.js"></script>
|
|
<script>
|
|
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', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Aceh
|
|
['id-su', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sumatera Utara
|
|
['id-sb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sumatera Barat
|
|
['id-ri', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Riau
|
|
['id-ja', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jambi
|
|
['id-sl', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sumatera Selatan
|
|
['id-be', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Bengkulu !
|
|
['id-bb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Bangka Belitung
|
|
['id-1024', 'Po<br>sitif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Lampung
|
|
['id-kr', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kepulauan Riau
|
|
['id-jk', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // DKI Jakarta
|
|
['id-jr', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jawa Barat
|
|
['id-jt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jawa Tengah
|
|
['id-yo', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // DIY Jogjakarta
|
|
['id-ji', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jawa Timur
|
|
['id-bt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Banten
|
|
['id-ba', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Bali
|
|
['id-nb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // NTB
|
|
['id-nt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // NTT !
|
|
['id-kb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Barat
|
|
['id-kt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Tengah
|
|
['id-ks', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Selatan
|
|
['id-ki', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Timur
|
|
['id-ku', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Utara
|
|
['id-sw', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Utara
|
|
['id-st', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Tengah
|
|
['id-se', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Selatan
|
|
['id-sg', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Tenggara
|
|
['id-go', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Gorontalo !
|
|
['id-sr', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Barat
|
|
['id-ma', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Maluku
|
|
['id-la', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Maluku Utara
|
|
['id-pa', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Irian Jaya
|
|
['id-ib', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Irian Jaya Barat
|
|
];
|
|
|
|
dataprov.forEach(attrib => {
|
|
output[attrib.attributes.FID - 1][1] = '<br>Positif : '+ attrib.attributes.Kasus_Posi + '<br>Meninggal : ' + attrib.attributes.Kasus_Meni + '<br>Sembuh : ' + attrib.attributes.Kasus_Semb;
|
|
});
|
|
|
|
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: 'Data Provinsi',
|
|
states: {
|
|
hover: {
|
|
color: '#dc3545'
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
format: '{point.name}'
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|