-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (103 loc) · 3.73 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
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>
Kenyan Education
</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox-assembly/v0.8.0/assembly.min.css' rel='stylesheet'>
<style>
h1 {
color: black;
background-color: whitesmoke;
}
h3 {
background-color: black
border-radius: 5px;
}
/*
div {
border-style: solid;
border-color: aqua;
}
*/
</style>
</head>
<body>
<!-- Your page... -->
<div class='grid'>
<div class='col col--12 col--3-ml p12 pb6 viewport-third viewport-full-ml'>
<div class='h-full scroll-auto'>
<h1 class='txt-headline mb6'>Kenyan Education Characteristics</h1>
<p>This map illustrates the levels of enrollments of boys and girls in Kenyan Counties. At this stage, only point locations are displayed on the map. Eventually, this map will show levels of school enrollment by either boys or girls, by grade, and by year. User interactive elements include a slider bar that adjust grade level and a pop-up box that identifies by name the county, and enrollment counts by boys and girls
</p>
<h2 class='txt-xl mt18 mb12'>subheading</h2>
<p>This section intentionally left blank.</p>
<footer class='mt12 bg-gray-faint txt-s'>
<ul>
<li>Explore the raw <a class='link' href='#'>data</a></li>
<li>Map createed by Tom Scholten <a class='link' href='https://www.mapwurks.com/'>Mapwurks</a></li>
</ul>
</footer>
</div>
</div>
<div class='col col--12 col--9-ml h180 h-full-ml'>
<div id="map" class='viewport-twothirds viewport-full-ml bg-blue'></div>
</div>
<!-- ui slider -->
<div id='slider' class='range w240 bg-white round-ml p12'>
<input type='range' />
</div>
<!-- legend -->
<div id='legend' class='bg-white round-ml p18'>
<div id='legend' class='border-black'>
<h3 class='txt-bold mb14 w-full mx-auto'>Legend</h3>
<div class='bg-white h180 w240 mx-auto'>
Filler Text
</div>
<!--
div {
border-style: solid'
border-color: green;
}
-->
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script async defer src='https://api.mapbox.com/mapbox-assembly/v0.8.0/assembly.js'></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidHNjaG9sdGVuIiwiYSI6ImNqYWhnOHBiaDFteWkzMnBkazJrZGUzaWEifQ.yQIFH0xDSF8DNeccdgooZA';
var map = L.mapbox.map('map', 'mapbox.streets', {
center: [-.23, 37.8],
zoom: 7,
minzoom: 6,
maxzoom: 9,
maxBounds: L.latLngBounds([-6.22,27.72,],[5.76, 47.83])
});
// create Leaflet control for the legend
var legend = L.control({
position: 'topright'
});
legend.onAdd = function(map) {
var div = L.DomUtil.get("legend");
L.DomEvent.disableScrollPropagation(div);
L.DomEvent.disableClickPropagation(div);
return div;
}
legend.addTo(map);
// create Leaflet control for the slider
var sliderControl = L.control({
position: 'bottomleft'
});
sliderControl.onAdd = function(map) {
var controls = L.DomUtil.get("slider");
L.DomEvent.disableScrollPropagation(controls);
L.DomEvent.disableClickPropagation(controls);
return controls;
}
sliderControl.addTo(map);
omnivore.csv('data/Kenya_education.csv').addTo(map);
</script>
</body>
</html>