-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
117 lines (105 loc) · 5.45 KB
/
index.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--Edit the title of the page-->
<title>Your page title goes here</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
<link rel="stylesheet" href="css/makeitresponsive.css">
<!--Switch between the different themes changing the stylesheet below - light-theme.css |dark-theme.css -->
<link rel="stylesheet" href="css/dark-theme.css">
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
</head>
<body>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 context subheader">
<!--Link to your personal website, your blog or your twitter account-->
<p>Map created by <a href="#">{Link to your website}</a></p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<!--In the paragraph below give an introduction to your visualization-->
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12">
<h1>Title of your visualization</h1>
<p>An earthquake of magnitude 9.0 occurred March 11, 2012, off the northeastern Pacific coast of Japan. The earthquake was followed by a tsunami which would reach 9.3m or higher at Fukushima Prefecture. <a href=''>Combined, the two claimed almost</a> 20,000 lives in the region of Tohoku and triggered nuclear meltdowns at three reactors in Fukushima nuclear plant.</p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span8 map" id="map1"></div>
<div class="col span8 map" id="map2"></div>
</div>
<!--Copy and paste the "row" div below a second, third, or fourth time to create content blocks-->
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 titleBlock">
<h3>Description block</h3>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12">
<p>The size and age of the Cosmos are beyond ordinary human understanding. Lost somewhere between immensity and eternity is our tiny planetary home. In a cosmic perspective, most human concerns seem insignificant, even petty. And yet our species is young and curious and brave and shows much promise. In the last few millennia we have made the most astonishing, unexpected discoveries about the Cosmos and our place within it, explorations that are exhilarating to consider. They remind us that humans have evolved to wonder, that understanding is a joy, that knowledge is prerequisite to survival. I believe our future depends powerfully on how well we understand this Cosmos in which we float like a mote of dust in the morning sky.</p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<!--This is an example of a second content block-->
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 titleBlock">
<h3>Description block 2</h3>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12">
<p>Unexpected discoveries about the <a href="#">Cosmos and our place</a> within it, explorations that are <a href="#">exhilarating</a> to consider. They remind us that humans have evolved to wonder, that understanding is a joy, that knowledge is prerequisite to survival. I believe our future depends powerfully on how well we understand this.</p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<!--Play fair and keep the attributions. If you do, we will love you even more. :)-->
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 context footer">
<p>Create your maps with ease using <a href="http://cartodb.com">CartoDB</a></p></p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<!--Change the URL below in order to change the map that is being shown.
Go to your map in CartoDB, click on share, and copy the URL under the API section
Check the cartodb.js documentation for more info
http://developers.cartodb.com/documentation/cartodb-js.html-->
<script type="text/javascript">
var map1,map2;
cartodb.createVis('map1', 'http://examples.cartodb.com/api/v1/viz/23320/viz.json')
.done(function(vis, layers) {
map1 = vis.getNativeMap();
cartodb.createVis('map2', 'http://examples.cartodb.com/api/v1/viz/15590/viz.json')
.done(function(vis, layers) {
map2 = vis.getNativeMap();
map1.on('moveend', function(e) {
changeMapState(map1, map2)
});
map2.on('moveend', function(e) {
changeMapState(map2, map1)
});
})
})
//Applies the same view from src to tgt map
function changeMapState(src,tgt){
tgt.setView(src.getCenter(), src.getZoom());
}
</script>
</body>
</html>