-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
150 lines (129 loc) · 6.55 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>PIConGPU Community Map</title>
<meta name="description" content="Map of PIConGPU contributors and users worldwide, current and past. Open and contributable, just like PIConGPU!" />
<!-- TODO <link rel="image_src" href="https://computationalradiationphysics.github.io/picongpu-communitymap/img/preview_600x191.png" /> -->
<!-- Schema.org markup for Google+ (needs additional attributes in <html>)
<meta itemprop="name" content="PIConGPU Community Map" />
<meta itemprop="description" content="Map of PIConGPU contributors and users worldwide, current and past. Open and contributable, just like PIConGPU!" />
<meta itemprop="image" content="https://computationalradiationphysics.github.io/picongpu-communitymap/img/preview_600x191.png" />
-->
<!-- Twitter Card data, https://dev.twitter.com/cards/overview -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@HZDR_Dresden" />
<meta name="twitter:title" content="PIConGPU Community Map" />
<meta name="twitter:description" content="Map of PIConGPU contributors and users worldwide, current and past. Open and contributable, just like PIConGPU!" />
<meta name="twitter:creator" content="@HZDR_Dresden" />
<meta name="twitter:creator" content="@ax3l" />
<!-- Twitter Summary card images must be at least 120x120px -->
<!-- TODO <meta name="twitter:image" content="https://computationalradiationphysics.github.io/picongpu-communitymap/img/preview_600x191.png" /> -->
<!-- Twitter summary card with large image must be at least 280x150px -->
<!-- TODO <meta name="twitter:image:src" content="https://computationalradiationphysics.github.io/picongpu-communitymap/img/preview_600x191.png" /> -->
<!-- Open Graph data (most standardized, most important), http://ogp.me/ -->
<meta property="og:title" content="PIConGPU Community Map" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://computationalradiationphysics.github.io/picongpu-communitymap/" />
<!-- at least 200x200px, up to 1200x630px recommended -->
<!-- TODO <meta property="og:image" content="https://computationalradiationphysics.github.io/picongpu-communitymap/img/preview_600x191.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="191" /> -->
<meta property="og:description" content="Map of PIConGPU contributors and users worldwide, current and past. Open and contributable, just like PIConGPU!" />
<meta property="og:site_name" content="PIConGPU Community Map" />
<!-- <meta property="article:author" content="HZDR, Axel Huebl" /> needs to be a "profile" type -->
<meta property="article:section" content="Research" />
<meta property="article:tag" content="PIConGPU" />
<meta property="article:tag" content="community" />
<meta property="article:tag" content="laser" />
<meta property="article:tag" content="plasma" />
<meta property="article:tag" content="physics" />
<meta property="article:tag" content="gpu" />
<meta property="article:tag" content="physics-simulation" />
<meta property="article:tag" content="gpu-computing" />
<meta property="article:tag" content="particle-accelerator" />
<meta property="article:tag" content="particle-in-cell" />
<meta property="article:tag" content="pic" />
<meta property="article:tag" content="research" />
<!-- <meta property="article:published_time" content="2017-12-12T05:59:00+01:00" />
<meta property="article:modified_time" content="2017-12-13T19:08:47+01:00" />
-->
<!-- <meta property="og:video" content="http://example.com/bond/trailer.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
-->
<!-- style sheets -->
<link rel="stylesheet" href="./bower_components/leaflet/dist/leaflet.css" />
<style type="text/css">
html, body, #map {
height: 100%; width: 100%;
margin: 0;
padding: 0;
}
.leaflet-top {
width: 100%;
}
.leaflet-top .title {
margin: 0;
width: 100%;
background: white;
background: rgba(255,255,255,0.95);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.leaflet-top .title h1 {
font-size: 20px;
padding: 1.1em;
margin: 0;
font-weight: 800;
}
</style>
<script src="bower_components/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var inIframe = (window.location != window.parent.location) ? true : false;
// init map and zoom to Germany
var map = L.map('map', {zoomControl: false}).setView([35.0, 11.0], 3);
// choose tile backend (OSM)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{
minZoom: 3,
maxZoom: 14,
attribution: 'References: <a href="https://github.com/ComputationalRadiationPhysics/picongpu-communitymap">Repo</a> (<a href="https://github.com/ComputationalRadiationPhysics/picongpu-communitymap/issues/new">Add yourself!</a>) | Tiles © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// title bar
var title = L.control({position: 'topleft'});
title.onAdd = function (map) {
var div = L.DomUtil.create('div', 'title');
div.innerHTML = '<h1>PIConGPU Community Map</h1>';
return div;
};
if( !inIframe )
title.addTo(map);
// position zoom buttons
var zoom = L.control.zoom({
position: 'topleft'
});
zoom.addTo(map);
// load JSON
var xmlhttp = new XMLHttpRequest();
var url = "data/picongpu-community.geojson";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
//console.log(xmlhttp.responseText);
//console.log(data);
L.geoJson(data).addTo(map);
}
};
xmlhttp.open("GET", url, true );
xmlhttp.overrideMimeType("application/json");
xmlhttp.send();
</script>
</body>
</html>