<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/thanos/pen/YyOGrq?limit=all&page=31&q=uikit" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/uikit.almost-flat.css'><link rel='stylesheet prefetch' href='https://doggydashboard.s3.amazonaws.com/org_chart/jquery.orgchart.css'><link rel='stylesheet prefetch' href='https://doggydashboard.s3.amazonaws.com/gridstack/gridstack.css'><link rel='stylesheet prefetch' href='https://handsontable.com/bower_components/handsontable/dist/handsontable.full.css'>
<style class="cp-pen-styles"> .ui-selecting { border-color: 'red'; }
#chartdiv {
width : 100%;
height : 500px;
}
.map-marker {
/* adjusting for the marker dimensions
so that it is centered on coordinates */
margin-left: -8px;
margin-top: -8px;
}
.map-marker.map-clickable {
cursor: pointer;
}
.pulse {
width: 10px;
height: 10px;
border: 5px solid #f7f14c;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #716f42;
z-index: 10;
position: absolute;
}
.map-marker .dot {
border: 10px solid #fff601;
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
height: 50px;
width: 50px;
-webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out;
animation: pulse 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -25px;
left: -25px;
z-index: 1;
opacity: 0;
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
} </style></head><body>
<div class="uk-container uk-container-center">
<nav class="uk-navbar" style="background: #000; color:white;">
<a class="uk-navbar-brand" style="background: #000; color:white;" href="">Refine</a>
<div class="uk-navbar-content">
<div class="uk-button-group">
<a class="uk-button " href="#" ><i class="fa fa-sitemap fa-lg " ></i></a>
<a class="uk-button" href="#" style="background: #000;"><i class="fa fa-th fa-lg fa-inverse" ></i></a>
<a class="uk-button uk-active" href="#"><i class="fa fa-database fa-lg "></i></a>
</div>
</div>
<div class="uk-navbar-content">
<div class="uk-button-group">
<a class="uk-button add-new-widget" href="#" id=""><i class="fa fa-line-chart fa-lg"></i></a>
<a class="uk-button add-new-widget" href="#"><i class="fa fa-table fa-lg"></i></a>
<a class="uk-button add-new-widget" href="#"><i class="fa fa-pencil-square-o fa-lg"></i></a>
<a class="uk-button add-new-widget" href="#"><i class="fa fa-globe fa-lg"></i></a>
</div>
</div>
<div class="uk-navbar-content uk-navbar-flip">
<div class="uk-button-group">
<a class="uk-button add-new-widget" href="#"><i class="fa fa-file-o fa-lg"></i></a>
<a class="uk-button uk-button-success" href="#"><i class="fa fa-floppy-o fa-lg"></i></a>
<a class="uk-button " href="#"><i class="fa fa-clone fa-lg"></i></a>
<a class="uk-button uk-button-danger" href="#"><i class="fa fa-trash fa-lg"></i></a>
</div>
</div>
</nav>
<div class="grid-stack">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/js/uikit.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<script src='https://doggydashboard.s3.amazonaws.com/org_chart/jquery.orgchart.js'></script>
<script src='https://doggydashboard.s3.amazonaws.com/gridstack/gridstack.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://handsontable.com//bower_components/ruleJS/dist/full/ruleJS.all.full.js"></script>
<script src="https://handsontable.com//bower_components/handsontable-ruleJS/src/handsontable.formula.js"></script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script><script src='https://doggydashboard.s3.amazonaws.com/org_chart/jquery.orgchart.js'></script><script src='https://doggydashboard.s3.amazonaws.com/gridstack/gridstack.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script > function addPanel(page, page_type) {
var node = page.items.pop() || {
x: 12 * Math.random(),
y: 5 * Math.random(),
width: 200,
height: 1 + 3 * Math.random()
};
var panel_id = 'panel-'+id;
page.grid.add_widget($('<div style="width:500px; height:500px;"><div class="grid-stack-item-content selectable" id="'+panel_id+'" /><div/>'),
node.x, node.y, node.width, node.height);
//$("#panel-"+id).append(_.template( $( "#"+page_type ).html())());
id +=1;
// var toolbar = $('<div class="uk-navbar-content">');
// var group = $('<div class="uk-button-group">');
// $('<a class="uk-button add-new-widget" href="#" id=""><i class="fa fa-line-chart fa-sm"></i></a>').appendTo(group);
// $('<a class="uk-button add-new-widget" href="#"><i class="fa fa-table fa-sm"></i></a>').appendTo(group);
// $('<a class="uk-button add-new-widget" href="#"><i class="fa fa-pencil-square-o fa-sm"></i></a>').appendTo(group);
// $('<a class="uk-button add-new-widget" href="#"><i class="fa fa-globe fa-sm"></i></a>').appendTo(group);
// group.appendTo(toolbar);
// $(".panelbar").append(toolbar);
$( ".grid-stack-item" ).click(function() {
$(this).css( 'border-color', 'red');
$(this).toggleClass('ui-selected');
});
return panel_id;
}
var id = 0;
$(document).ready(function() {
var options = {
float: true,vertical_margin: 1,
width:16
};
var grid =$('.grid-stack').gridstack(options);
this.items = [
{x: 0, y: 0, width: 2, height: 2},
{x: 3, y: 1, width: 1, height: 2},
{x: 4, y: 1, width: 1, height: 1},
{x: 2, y: 3, width: 3, height: 1},
// {x: 1, y: 4, width: 1, height: 1},
// {x: 1, y: 3, width: 1, height: 1},
// {x: 2, y: 4, width: 1, height: 1},
{x: 2, y: 5, width: 1, height: 1}
];
this.grid = $('.grid-stack').data('gridstack');
this.addChart = function () {
draw_chart(addPanel(this, "chart"));
}.bind(this);
this.addSpread = function () {
build_spread(addPanel(this, "spread"));
}.bind(this);
this.addMap = function () {
make_map(addPanel(this, "map"));
}.bind(this);
this.addHtml = function () {
addPanel(this, "html");
}.bind(this);
// this.add_new_widget = function () {
// var node = this.items.pop() || {
// x: 12 * Math.random(),
// y: 5 * Math.random(),
// width: 200,
// height: 1 + 3 * Math.random()
// };
// this.grid.add_widget($('<div style="width:500px; height:500px;"><div class="grid-stack-item-content selectable" id="panel-'+id+'" /><div/>'),
// node.x, node.y, node.width, node.height);
// $("#panel-"+id).append(_.template( $( "#chart" ).html())());
// id +=1;
// // var toolbar = $('<div class="uk-navbar-content">');
// // var group = $('<div class="uk-button-group">');
// // $('<a class="uk-button add-new-widget" href="#" id=""><i class="fa fa-line-chart fa-sm"></i></a>').appendTo(group);
// // $('<a class="uk-button add-new-widget" href="#"><i class="fa fa-table fa-sm"></i></a>').appendTo(group);
// // $('<a class="uk-button add-new-widget" href="#"><i class="fa fa-pencil-square-o fa-sm"></i></a>').appendTo(group);
// // $('<a class="uk-button add-new-widget" href="#"><i class="fa fa-globe fa-sm"></i></a>').appendTo(group);
// // group.appendTo(toolbar);
// // $(".panelbar").append(toolbar);
// $( ".grid-stack-item" ).click(function() {
// $(this).css( 'border-color', 'red');
// $(this).toggleClass('ui-selected');
// });
// }.bind(this);
// $('.add-new-widget').click(this.add_new_widget);
$('.fa-line-chart').click(this.addChart);
$('.fa-table').click(this.addSpread);
$('.fa-globe').click(this.addMap);
});
function draw_chart(id) {
var chart = AmCharts.makeChart(id, {
"type": "serial",
"theme": "light",
"legend": {
"equalWidths": false,
"useGraphSettings": true,
"valueAlign": "left",
"valueWidth": 120
},
"dataProvider": [{
"date": "2012-01-01",
"distance": 227,
"townName": "New York",
"townName2": "New York",
"townSize": 25,
"latitude": 40.71,
"duration": 408
}, {
"date": "2012-01-02",
"distance": 371,
"townName": "Washington",
"townSize": 14,
"latitude": 38.89,
"duration": 482
}, {
"date": "2012-01-03",
"distance": 433,
"townName": "Wilmington",
"townSize": 6,
"latitude": 34.22,
"duration": 562
}, {
"date": "2012-01-04",
"distance": 345,
"townName": "Jacksonville",
"townSize": 7,
"latitude": 30.35,
"duration": 379
}, {
"date": "2012-01-05",
"distance": 480,
"townName": "Miami",
"townName2": "Miami",
"townSize": 10,
"latitude": 25.83,
"duration": 501
}, {
"date": "2012-01-06",
"distance": 386,
"townName": "Tallahassee",
"townSize": 7,
"latitude": 30.46,
"duration": 443
}, {
"date": "2012-01-07",
"distance": 348,
"townName": "New Orleans",
"townSize": 10,
"latitude": 29.94,
"duration": 405
}, {
"date": "2012-01-08",
"distance": 238,
"townName": "Houston",
"townName2": "Houston",
"townSize": 16,
"latitude": 29.76,
"duration": 309
}, {
"date": "2012-01-09",
"distance": 218,
"townName": "Dalas",
"townSize": 17,
"latitude": 32.8,
"duration": 287
}, {
"date": "2012-01-10",
"distance": 349,
"townName": "Oklahoma City",
"townSize": 11,
"latitude": 35.49,
"duration": 485
}, {
"date": "2012-01-11",
"distance": 603,
"townName": "Kansas City",
"townSize": 10,
"latitude": 39.1,
"duration": 890
}, {
"date": "2012-01-12",
"distance": 534,
"townName": "Denver",
"townName2": "Denver",
"townSize": 18,
"latitude": 39.74,
"duration": 810
}, {
"date": "2012-01-13",
"townName": "Salt Lake City",
"townSize": 12,
"distance": 425,
"duration": 670,
"latitude": 40.75,
"dashLength": 8,
"alpha": 0.4
}, {
"date": "2012-01-14",
"latitude": 36.1,
"duration": 470,
"townName": "Las Vegas",
"townName2": "Las Vegas"
}, {
"date": "2012-01-15"
}, {
"date": "2012-01-16"
}, {
"date": "2012-01-17"
}, {
"date": "2012-01-18"
}, {
"date": "2012-01-19"
}],
"valueAxes": [{
"id": "distanceAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left",
"title": "distance"
}, {
"id": "latitudeAxis",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "right"
}, {
"id": "durationAxis",
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
},
"axisAlpha": 0,
"gridAlpha": 0,
"inside": true,
"position": "right",
"title": "duration"
}],
"graphs": [{
"alphaField": "alpha",
"balloonText": "[[value]] miles",
"dashLengthField": "dashLength",
"fillAlphas": 0.7,
"legendPeriodValueText": "total: [[value.sum]] mi",
"legendValueText": "[[value]] mi",
"title": "distance",
"type": "column",
"valueField": "distance",
"valueAxis": "distanceAxis"
}, {
"balloonText": "latitude:[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"useLineColorForBulletBorder": true,
"bulletColor": "#FFFFFF",
"bulletSizeField": "townSize",
"dashLengthField": "dashLength",
"descriptionField": "townName",
"labelPosition": "right",
"labelText": "[[townName2]]",
"legendValueText": "[[description]]/[[value]]",
"title": "latitude/city",
"fillAlphas": 0,
"valueField": "latitude",
"valueAxis": "latitudeAxis"
}, {
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"dashLengthField": "dashLength",
"legendValueText": "[[value]]",
"title": "duration",
"fillAlphas": 0,
"valueField": "duration",
"valueAxis": "durationAxis"
}],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor":"#000000",
"fullWidth":true,
"valueBalloonsEnabled": false,
"zoomable": false
},
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"autoGridCount": false,
"axisColor": "#555555",
"gridAlpha": 0.1,
"gridColor": "#FFFFFF",
"gridCount": 50
},
"export": {
"enabled": true
}
});
}
function build_spread(id) {
var container = document.querySelector('#'+id);
var headerRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.textAlign = 'center';
};
var diffRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.cellTypes['formula'].renderer.apply(this, arguments);
td.style.backgroundColor = '#c3f89c';
td.style.fontWeight = (col === 13 ? 'bold' : 'normal');
};
var incomeOrExpensesRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.textAlign = 'left';
td.style.backgroundColor = '#BDD7EE'
};
var boldAndAlignRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.verticalAlign = 'middle';
td.style.textAlign = 'left';
};
var personalData = [
["","JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC","Total"],
["Total Incomes","=SUM(B7:B12)","=SUM(C7:C12)","=SUM(D7:D12)","=SUM(E7:E12)","=SUM(F7:F12)","=SUM(G7:G12)","=SUM(H7:H12)","=SUM(I7:I12)","=SUM(J7:J12)","=SUM(K7:K12)","=SUM(L7:L12)","=SUM(M7:M12)","=SUM(B2:M2)"],
["Total Expenses","=SUM(B17:B43)","=SUM(C17:C43)","=SUM(D17:D43)","=SUM(E17:E43)","=SUM(F17:F43)","=SUM(G17:G43)","=SUM(H17:H43)","=SUM(I17:I43)","=SUM(J17:J43)","=SUM(K17:K43)","=SUM(L17:L43)","=SUM(M17:M43)","=SUM(B3:M3)"],
["NET (Income - Expenses)",'=B2-B3',"=C2-C3","=D2-D3","=E2-E3","=F2-F3","=G2-G3","=H2-H3","=I2-I3","=J2-J3","=K2-K3","=L2-L3","=M2-M3","=N2-N3", ""],
["","","","","","","","","","","","","",""],
["Income","","","","","","","","","","","","",""],
["Salary",11370,11370,11370,11370,11370,11370,11370,11370,11370,11370,11370,11370,""],
["Interest income",56,56,56,56,56,56,56,56,56,56,56,56,""],
["Public assistance","- ","- ","- ","- ","- ","- ","- ","- ","- ","- ","- ","- ",""],
["Dividends","- ","- ","- ","- ","- ","- ","- ","- ","- ","- ","- ","- ",""],
["Gifts",300,300,300,300,300,300,300,300,300,300,300,300,""],
["Other",1200,1200,1200,1200,1200,1200,1200,1200,1200,1200,1200,1200,""],
["","","","","","","","","","","","","",""],
["Expenses","","","","","","","","","","","","",""],
["Living","","","","","","","","","","","","",""],
["","","","","","","","","","","","","",""],
["Rent/Mortgage",3200,3200,3200,3200,3200,3200,3200,3200,3200,3200,3200,3200,""],
["Electricity",160,160,160,160,160,160,160,160,160,160,160,160,""],
["Water/Gas/Sewer",80,80,80,80,80,80,80,80,80,80,80,80,""],
["TV/Internet/Phone",50,50,50,50,50,50,50,50,50,50,50,50,""],
["Maintenance",260,260,260,260,260,260,260,260,260,260,260,260,""],
["Obligations","","","","","","","","","","","","",""],
["","","","","","","","","","","","","",""],
["Loans",1500,1500,1500,1500,1500,1500,1500,1500,1500,1500,1500,1500,""],
["Credit cards",120,120,120,120,120,120,120,120,120,120,120,120,""],
["Taxes","450","450","450","450","450","450","450","450","450","450","450","450",""],
["Insurance","140","140","140","140","140","140","140","140","140","140","140","140",""],
["Daily expenses","","","","","","","","","","","","",""],
["","","","","","","","","","","","","",""],
["Food",1200,1200,1200,1200,1200,1200,1200,1200,1200,1200,1200,1200,""],
["Clothing",350,350,350,350,350,350,350,350,350,350,350,350,""],
["Personal supplies",120,120,120,120,120,120,120,120,120,120,120,120,""],
["Health care",320,320,320,320,320,320,320,320,320,320,320,320,""],
["Education",540,540,540,540,540,540,540,540,540,540,540,540,""],
["Entertainment",210,210,210,210,210,210,210,210,210,210,210,210,""],
["Transportation",220,220,220,220,220,220,220,220,220,220,220,220,""],
["Other","","","","","","","","","","","","",""],
["","","","","","","","","","","","","",""],
["Donations",80,80,80,80,80,80,80,80,80,80,80,80,""],
["Savings",500,500,500,500,500,500,500,500,500,500,500,500,""],
["Gifts",200,200,200,200,200,200,200,200,200,200,200,200,""],
["Retirement",800,800,800,800,800,800,800,800,800,800,800,800,""],
["Other",150,150,150,150,150,150,150,150,150,150,150,150,""]
];
var hot = new Handsontable(container, {
data: personalData,
height: 396,
fixedRowsTop: 1,
colHeaders: true,
rowHeaders: true,
formulas: true,
comments: true,
colWidths: [200, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85],
cells: function (row, col, prop) {
var cellProperties = {};
if (row === 0) {
cellProperties.renderer = headerRenderer;
} else if (row === 3) {
cellProperties.renderer = diffRenderer;
} else if (row === 5) {
cellProperties.renderer = incomeOrExpensesRenderer;
} else if (row === 13) {
cellProperties.renderer = incomeOrExpensesRenderer;
} else if (row === 14) {
cellProperties.renderer = boldAndAlignRenderer;
} else if (row === 21) {
cellProperties.renderer = boldAndAlignRenderer;
} else if (row === 27) {
cellProperties.renderer = boldAndAlignRenderer;
} else if (row === 36) {
cellProperties.renderer = boldAndAlignRenderer;
}
if ([1, 2, 3].indexOf(row) !== -1 && col >= 1) {
cellProperties.readOnly = true;
}
if ([1, 2, 3, 6, 7, 8, 9, 10, 11, 16, 17, 18, 19, 20, 23, 24, 25, 26, 29, 30, 31, 32, 33, 34, 35, 38, 39, 40, 41, 42].indexOf(row) !== -1 && col >= 1) {
cellProperties.type = 'numeric';
cellProperties.format = '$0,0.00';
}
return cellProperties;
},
mergeCells: [
{row: 5, col: 0, rowspan: 1, colspan: 14},
{row: 13, col: 0, rowspan: 1, colspan: 14},
{row: 14, col: 0, rowspan: 2, colspan: 14},
{row: 21, col: 0, rowspan: 2, colspan: 14},
{row: 27, col: 0, rowspan: 2, colspan: 14},
{row: 36, col: 0, rowspan: 2, colspan: 14}
]
});
}
function make_map(id) {
/**
* This example uses pulsating circles CSS by Kevin Urrutia
* https://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle
*/
var map = AmCharts.makeChart(id, {
type: "map",
"theme": "none",
path: "https://www.amcharts.com/lib/3/",
imagesSettings: {
rollOverColor: "#089282",
rollOverScale: 3,
selectedScale: 3,
selectedColor: "#089282",
color: "#13564e"
},
areasSettings: {
unlistedAreasColor: "#15A892"
},
dataProvider: {
map: "worldLow",
images: [{
zoomLevel: 5,
scale: 0.5,
title: "Brussels",
latitude: 50.8371,
longitude: 4.3676
}, {
zoomLevel: 5,
scale: 0.5,
title: "Copenhagen",
latitude: 55.6763,
longitude: 12.5681
}, {
zoomLevel: 5,
scale: 0.5,
title: "Paris",
latitude: 48.8567,
longitude: 2.3510
}, {
zoomLevel: 5,
scale: 0.5,
title: "Reykjavik",
latitude: 64.1353,
longitude: -21.8952
}, {
zoomLevel: 5,
scale: 0.5,
title: "Moscow",
latitude: 55.7558,
longitude: 37.6176
}, {
zoomLevel: 5,
scale: 0.5,
title: "Madrid",
latitude: 40.4167,
longitude: -3.7033
}, {
zoomLevel: 5,
scale: 0.5,
title: "London",
latitude: 51.5002,
longitude: -0.1262,
url:"https://www.google.co.uk"
}, {
zoomLevel: 5,
scale: 0.5,
title: "Peking",
latitude: 39.9056,
longitude: 116.3958
}, {
zoomLevel: 5,
scale: 0.5,
title: "New Delhi",
latitude: 28.6353,
longitude: 77.2250
}, {
zoomLevel: 5,
scale: 0.5,
title: "Tokyo",
latitude: 35.6785,
longitude: 139.6823,
url:"https://www.google.co.jp"
}, {
zoomLevel: 5,
scale: 0.5,
title: "Ankara",
latitude: 39.9439,
longitude: 32.8560
}, {
zoomLevel: 5,
scale: 0.5,
title: "Buenos Aires",
latitude: -34.6118,
longitude: -58.4173
}, {
zoomLevel: 5,
scale: 0.5,
title: "Brasilia",
latitude: -15.7801,
longitude: -47.9292
}, {
zoomLevel: 5,
scale: 0.5,
title: "Ottawa",
latitude: 45.4235,
longitude: -75.6979
}, {
zoomLevel: 5,
scale: 0.5,
title: "Washington",
latitude: 38.8921,
longitude: -77.0241
}, {
zoomLevel: 5,
scale: 0.5,
title: "Kinshasa",
latitude: -4.3369,
longitude: 15.3271
}, {
zoomLevel: 5,
scale: 0.5,
title: "Cairo",
latitude: 30.0571,
longitude: 31.2272
}, {
zoomLevel: 5,
scale: 0.5,
title: "Pretoria",
latitude: -25.7463,
longitude: 28.1876
}]
}
});
// add events to recalculate map position when the map is moved or zoomed
map.addListener("positionChanged", updateCustomMarkers);
// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers (event) {
// get map object
var map = event.chart;
// go through all of the images
for( var x in map.dataProvider.images) {if (window.CP.shouldStopExecution(1)){break;}
// get MapImage object
var image = map.dataProvider.images[x];
// check if it has corresponding HTML element
if ('undefined' == typeof image.externalElement)
image.externalElement = createCustomMarker(image);
// reposition the element accoridng to coordinates
image.externalElement.style.top = map.latitudeToY(image.latitude) + 'px';
image.externalElement.style.left = map.longitudeToX(image.longitude) + 'px';
}
window.CP.exitedLoop(1);
}
// this function creates and returns a new marker element
function createCustomMarker(image) {
// create holder
var holder = document.createElement('div');
holder.className = 'map-marker';
holder.title = image.title;
holder.style.position = 'absolute';
// maybe add a link to it?
if (undefined != image.url) {
holder.onclick = function() {
window.location.href = image.url;
};
holder.className += ' map-clickable';
}
// create dot
var dot = document.createElement('div');
dot.className = 'dot';
holder.appendChild(dot);
// create pulse
var pulse = document.createElement('div');
pulse.className = 'pulse';
holder.appendChild(pulse);
// append the marker to the map container
image.chart.chartDiv.appendChild(holder);
return holder;
}
}
//# sourceURL=pen.js
</script>
</body></html>
