forked from codeafrica/github-africa
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (95 loc) · 2.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>GitHub Europe - 26th of Oct 2015</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
<script src="data/github-europe.js" type="text/javascript"></script>
<style>
body { margin:0; padding:0; }
#title {
position:absolute;
top: 0;
right: 0;
background-color: #00008B;
opacity: 0.6;
color: white;
z-index: 101;
padding: 10px;
text-align: center;
}
#title h1,h2 {
padding: 0;
margin: 0;
}
#title h1 {
font-size: 14pt;
}
#title h2 {
font-size: 12pt;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
z-index: 100;
}
.gh_profile {
margin-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #CCC;
height: 25px;
width: 150px;
clear: left;
}
.gh_profile img {
float:left;
height: 25px;
width: 25px;
}
.gh_profile a {
float:left;
padding: 0;
margin: 0;
padding-left: 5px;
}
</style>
</head>
<body>
<div id="title"><h1>GitHub Europe Stats</h1><h2>26th of Oct 2015</h2></div>
<div id="map"></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoiam1laW5rZSIsImEiOiJjaWZmZXRneWQwMGtsdG5seWNicHZuZTVsIn0.2P5cqgkl73xDcgkRV3uYOg';
var map = L.mapbox.map('map', 'mapbox.outdoors')
.setView([50.11552, 8.68417], 5);
var mapLayer = L.mapbox.featureLayer().addTo(map);
// mapLayer.setGeoJSON(europe_info);
L.mapbox.featureLayer(europe_info, {
pointToLayer: function(feature, latlon) {
// L.circleMarker() draws a circle with fixed radius in pixels.
// To draw a circle overlay with a radius in meters, use L.circle()
return L.circleMarker(latlon,
{
radius: feature.properties.radius
}
);
}
}).addTo(map);
/*L.geoJson(europe_info, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 5,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.5
});
}
}).addTo(map);*/
</script>
</body>
</html>