forked from NiklasMM/python-community-map
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
156 lines (140 loc) · 5.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
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
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<!-- Search Engine -->
<meta name="description" content="A map full of lovely Python communities, add yours!">
<meta name="image" content="https://community.python.org.br/preview.png">
<!-- Schema.org for Google -->
<meta itemprop="name" content="The Python Community Map">
<meta itemprop="description" content="A map full of lovely Python communities, add yours!">
<meta itemprop="image" content="https://community.python.org.br/preview.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="The Python Community Map">
<meta name="twitter:description" content="A map full of lovely Python communities, add yours!">
<meta name="twitter:site" content="@jonatasbaldin">
<meta name="twitter:creator" content="@jonatasbaldin">
<meta name="twitter:image:src" content="https://community.python.org.br/preview.png">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="The Python Community Map">
<meta name="og:description" content="A map full of lovely Python communities, add yours!">
<meta name="og:image" content="https://community.python.org.br/preview.png">
<meta name="og:url" content="https://community.python.org.br">
<meta name="og:site_name" content="The Python Community Map">
<meta name="og:type" content="website">
<title>The Python Community Map</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="logo.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="map"></div>
<footer>
<img class="logo" src="logo.png" />
<span class="footer-text">Python Communities Around the World, <a target="_blank" href="https://github.com/jonatasbaldin/python-community-map#how-to-add-a-new-community-to-the-map">add yours!</a></span>
<span class="space"></span>
<span class="made-by">by <a target="_blank "href="https://deployeveryday.com/">Jojo</a></span>
</footer>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5n6IqLiunv2aS2Y8FcE0dUD-Mn6iTVXY"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yamljs/0.3.0/yaml.min.js"> </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128211633-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-128211633-1');
</script>
<script>
let URL = 'https://raw.githubusercontent.com/jonatasbaldin/python-community-map/master/communities.yaml';
fetch(URL).then(function(response) {
response.text().then(function(data) { initMap(data) })
})
function infoWindowContent(strings) {
console.log(strings);
let [name, url, avatar, description] = strings;
let maxLength = 256;
if (description !== undefined) {
description = description.substring(0, maxLength);
}
let content = '';
if (avatar === undefined && description === undefined) {
content = `
<div id="content">
<div id="siteNotice"></div>
<div id="bodyContent">
<p><a target="_blank" href="${url}">${name}</a></p>
</div>
</div>`;
} else if (avatar !== undefined && description !== undefined) {
content = `
<div id="content">
<div id="siteNotice"></div>
<div id="bodyContent">
<div class="avatar">
<a href="${url}">
<img src="${avatar}" alt="">
<span>${name}</span>
</a>
</div>
<p>${description}</p>
</div>
</div>`;
} else if (avatar !== undefined) {
content = `
<div id="content">
<div id="siteNotice"></div>
<div id="bodyContent">
<div class="avatar">
<a href="${url}">
<img src="${avatar}" alt="">
<span>${name}</span>
</a>
</div>
</div>
</div>`;
} else { //description !== undefined
content = `
<div id="content">
<div id="siteNotice"></div>
<div id="bodyContent">
<div class="avatar">
<a href="${url}">
<span>${name}</span>
</a>
<p>${description}</p>
</div>
</div>`;
}
return content
}
function initMap(communities) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: -0, lng: -18}
});
var infowindow = new google.maps.InfoWindow({
content: '',
});
markers = YAML.parse(communities)
markers.forEach(function(item) {
item['marker'] = new google.maps.Marker({
position: {lat: item.lat, lng: item.lng},
map: map,
title: item.name,
})
item['marker'].addListener('click', function(){
infowindow.setContent(infoWindowContent([
item.name,
item.url,
item.avatar,
item.description
]));
infowindow.open(map, item['marker'])
})
})
}
</script>
</body>
</html>