1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
var drawMarkersMap = function(rawData) {
if(! rawData) {
rawData =[];
}
var data = google.visualization.arrayToDataTable(rawData);
var options = {backgroundColor : '#0B173B', minValue: 0, colors: ['#F2F5A9', '#04B431']};
var chart = new google.visualization.GeoChart(document.getElementById('paintedMap'));
chart.draw(data, options);
google.load('visualization', '1', {packages: ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
window.onload = function() {
GenerateHeatmap.initFileList();
};
GenerateHeatmap = {};
GenerateHeatmap.fileName = "";
GenerateHeatmap.initFileList = function(){
var sb =[];
$.each(LinkData.getWorks(), function(workKey, workValue) {
$.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
sb[sb.length] = "<option value=\"" + fileValue + "\">"+ fileValue +"</option>";
});
$("#fileOptions").append(sb.join(""));
$("#fileOptions").change(GenerateHeatmap.drawMap);
$("#generate").click(generatePng);
$("#generate").click(function(){
$(".downloadButton").css("display", "");
GenerateHeatmap.drawMap = function(event){
var fileValue = event.currentTarget.value;
if(fileValue == ""){
return ;
GenerateHeatmap.fileName = fileValue;
var data = [];
data[data.length] = ["Country", fileValue];
var workId = "rdf1s794i";
$.each(LinkData.getSubjects( workId, fileValue), function(subjKey, subjValue) {
var countryCode ="";
var measured =0;
var propAry = LinkData.getProperties(workId, fileValue);
for(var i = 0 ; i < propAry.length ; i++){
var propValue = propAry[i]
if(propValue == "http://www.geonames.org/ontology#countryCode"){
countryCode = LinkData.getObjects(workId, fileValue, subjValue, propValue)[0];
if(propValue == "http://linkdata.org/property/"+workId+"#value"){
measured = LinkData.getObjects(workId, fileValue, subjValue, propValue)[0];
data[data.length] = [countryCode, parseInt(measured, 10)];
// $("#debug").append(countryCode + " <-> "+measured + "<br>");
drawMarkersMap(data);
function generatePng(){
var svg = $("#paintedMap").children().children();
canvg('canvas', svg.html(), { ignoreMouse: true, ignoreAnimation: true } );
var c = document.getElementById('canvas');
var type = 'image/png';
var data = c.toDataURL(type);
$('#png').attr('download', GenerateHeatmap.fileName + ".png");
$('#png').attr('href', data);
*{
background: #FFF;
#generate {
font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #dcdcdc;
padding:4px 20px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
color:#777777;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;
margin-top: 10px;
#generate:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
#generate:active {
position:relative;
top:1px;
.downloadButton {
border:1px solid #74b807;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
background:-ms-linear-gradient( top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
color:#ffffff;
text-shadow:1px 1px 0px #528009;
-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
box-shadow:inset 1px 1px 0px 0px #a4e271;
.downloadButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #77a809), color-stop(100%, #89c403) );
background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
background:-ms-linear-gradient( top, #77a809 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
background-color:#77a809;
.downloadButton:active {
<div id="result"></div>
<div id="fileList">
Input Data: <select id="fileOptions" >
<option value="">Select a file</option>
</select> <br>
<button id="generate">Generate PNG file</button>
<a id="png" href="" type="application/octet-stream" download="sample.png" class="downloadButton" style="display:none;">Dowload</a>
</div>
<div id="paintedMap" style="width: 900px; height: 500px;">
<canvas id="canvas" width="1000px" height="600px" style="display:none;"></canvas>
<div id="debug"></div>
Click the Browse button or drag and drop to choose files to upload
The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)
*Required field
Add name for another language
You can upload jpg, gif, png file formats
Add description for another language
Fork original application has been updated. >>see
Original application has been updated. >>see
Playing...
Please enter a valid URL