forked from joeyklee/geosandbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
oakland-crime.html
114 lines (102 loc) · 3.49 KB
/
oakland-crime.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
<!DOCTYPE html>
<html>
<head>
<title>Building Curious GeoGeometries</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
iframe{
overflow-y: hidden;
overflow-x: hidden;
border: none;
}
body {
position: relative;
}
.nav-pills > li.active > a{
background-color: #673ab7;
}
#myScrollspy{
z-index: 1000;
position: fixed;
left: 0px;
height: 100%;
overflow-y: auto;
}
@media (max-width: 1020px) {
#myScrollspy {
display: none;
}
}
</style>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">
<!-- navbar top -->
<nav class="navbar navbar-default">
<div class="">
<a class="navbar-brand" href="index.html">
<img alt="geosandbox" src="assets/geosandbox.png" width="30px">
</a>
<p class="navbar-text"><b>GeoSandbox</b></p>
<p class="navbar-text pull-right"><a href="boilerplate/index.html" download>Download Leaflet Boilerplate</a></p>
</div>
</nav>
<!-- page main -->
<div class="col-md-12">
<div id="myScrollspy" class="col-md-2">
<ul id="legend" class="nav nav-pills"></ul>
</div>
<div class="col-md-offset-2" id="lessons"></div>
<div><br><br><br></div>
</div>
</body>
<script type="text/javascript">
// create an array of the html
var lessons = [
{
link: '01_crime_points.html',
title: 'Crime as markers'
},{
link: '02_crime_points.html',
title: 'Crime as circles'
},{
link: '03_crime_overview_grid_square.html',
title: 'Crime as square grid'
},{
link: '04_crime_overview_grid_hex.html',
title: 'Crime as hex grid'
},{
link: '05_crime_overview_grid_triangle.html',
title: 'Crime as triangle grid'
},{
link: '06_crime_overview_isolines.html',
title: 'Crime isolines'
},{
link: '08_crime_envelope_vandalism.html',
title: 'Crime Vandalism Convex Hull'
},
];
//
//
lessons.forEach(function(d,i){
var output = "<h3>"+d.title+ "</h3>"+ "<p>"+d.desc+ "</p>"+
"<iframe src=" + "'lessons/output/oakland-crime/" + d.link + "'"+ "width = '100%' height = '720px'" + "id='section"+ i +"'></iframe>";
var legendItems = "<li><a href='#section"+i+"'>"+ d.title+ "</a></li>";
$('#lessons').append(output);
$('#legend').append(legendItems);
})
// $("#dl").click(function() {
// var text = editor.getValue();
// var filename = $("#input-fileName").val()
// var blob = new Blob([text], {
// type: "text/plain;charset=utf-8"
// });
// saveAs(blob, filename + ".js");
// });
// {
// link: '09_crime_absenceof.html',
// title: 'Crime Absence of'
// }
</script>
</html>