forked from burnoutberni/saveyourinternet.today
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (89 loc) · 4.17 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
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Join the protests on August 26 in your city to save the internet from censorship.">
<title>Save Your Internet Today!</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<link rel="stylesheet" href="css/style.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<script src="js/leaflet-providers.js"></script>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
</head>
<body>
<div class="map-container">
<div id="map"></div>
</div>
<div class="info-container">
<h1>Save your internet today!</h1>
<p>Join the protest on copyright action day in your city on August 26.</p>
<div class="event-list">
</div>
<p class="event-description footer">Made with <3 by <a href="https://nini.su" target="_blank">Bernhard Hayden</a>. Find the source code <a href="https://github.com/burnoutberni/saveyourinternet.today" target="_blank">on Github</a>.</p>
</div>
<script>
var exp = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi;
var regexp = new RegExp(exp);
var eventList = document.querySelector('.event-list')
var map = L.map('map').setView([50,5.0], 4);
L.tileLayer.provider('Stamen.Toner').addTo(map);
var pinkIcon = L.divIcon({className: 'pink-icon', html: '<p>×</p>'});
var eventsLayer = omnivore.geojson('copyright_action_day_2018.geojson')
.on('ready', function() {
map.fitBounds(eventsLayer.getBounds());
// After the 'ready' event fires, the GeoJSON contents are accessible
// and you can iterate through layers to bind custom popups.
eventsLayer.eachLayer(function(layer) {
// See the `.bindPopup` documentation for full details. This
// dataset has a property called `name`: your dataset might not,
// so inspect it and customize to taste.
if (layer instanceof L.Marker) {
layer.setIcon(pinkIcon);
}
var title = layer.feature.properties.name;
var description = layer.feature.properties.description;
var link = description.match(regexp) ? description.match(regexp)[0] : undefined;
description = description.replace(link, '');
if (description === '' && link !== undefined) {
description = 'Link';
}
var eventListItemContent = '';
if (link) {
eventListItemContent = `<h3>${title}</h3><p class="event-description"><a href="${link}" target="_blank">${description}</a></p>`;
} else if (description) {
eventListItemContent = `<h3>${title}</h3><p class="event-description">${description}</p>`;
} else {
eventListItemContent = `<h3>${title}</h3>`;
}
layer.bindPopup(eventListItemContent);
var eventListItem = document.createElement('div');
eventListItem.className = "event-item";
eventListItem.innerHTML = eventListItemContent;
eventList.appendChild(eventListItem);
});
})
.addTo(map);
var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
var mq = window.matchMedia('screen and (max-width: 1080px) and (min-resolution: 3dppx), screen and (max-width: 960px)');
if(mq.matches) {
console.log('small device => map zoomable now');
} else {
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
document.querySelector(".leaflet-control-zoom").style.visibility = "hidden";
}
</script>
</body>