-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (93 loc) · 4.39 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
<!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="Interactive map for the events happening during LibreOffice Conference 2018 in Tirana, Albania.">
<meta property="og:image" content="img/events-small.png"/>
<meta property="og:title" content="OSCAL 2019"/>
<meta property="og:url" content="https://oscal.openlabs.cc"/>
<title>OSCAL 2019 - Events</title>
<link rel="icon" type="image/png" href="img/favicon.png" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<link rel="stylesheet" href="css/style.css"/>
<script src="https://unpkg.com/leaflet@1.3.3/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">
<h2>OSCAL Tirana 2019 - PoI Map</h2>
<p>For more information visit <a href="https://oscal.openlabs.cc" target="_blank" rel="noopener">oscal.openlabs.cc</a> or contact the local organizing team at <a href="mailto:libocon@openlabs.cc" target="_blank" rel="noopener">oscal@openlabs.cc</a>.</p>
<div class="event-list">
</div>
<p class="footer">Made with <3 by <a href="https://openlabs.cc" target="_blank" rel="noopener">Open Labs Hackerspace</a>. Find the source code <a href="https://github.com/OpenLabsHackerspace/oscal-events" target="_blank" rel="noopener">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([41.3282,19.8158], 14.3);
L.tileLayer.provider('CartoDB.Positron').addTo(map);
var GreenIcon = L.icon({
iconUrl: 'img/pin_icon.png',
iconRetinaUrl: 'img/favicon_oscal2.png',
iconSize: [30, 40]
});
var eventsLayer = omnivore.geojson('events.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(GreenIcon);
}
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 CartoDB= L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/{variant}/{z}/{x}/{y}{r}.png', {
attribution: '{attribution.OpenStreetMap} © <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 21,
variant: 'light_all'
});
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 {
// disable scroll zoom
map.scrollWheelZoom.disable();
}
</script>
</body>