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
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="hackmap.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
crossorigin=""></script>
</head>
<body>
<div id="map" style="width:100vw; height:50vh">
</div>
<div id="story" style="">
<p>mercury 6pk, coming from buratinas, stored in rue loquenghien (jan van loquenghien), repaired at hacklab <loc position="50.87286710651607, 4.377062022686005"> , maybe sold off and transported to bukavu <loc position="-2.5106, 28.8439">, to do the rounds on the lakes there.</p>
</div>
</body>
<script type="text/javascript">
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
L.MyMap = L.Map.extend({
openPopup: function (popup, latlng, options) {
document.getElementById("demo").innerHTML = popup.getContent();
return this;
}
});
L.myMap = function (m) {
return new L.MyMap(m);
};
var map = L.myMap('map').setView([50.87287, 4.377], 17);
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="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map) ;
var elementScrolled = function(evt){
console.log(evt.target);
}
window.onscroll = elementScrolled;
var locations = document.querySelectorAll("loc");
console.log(locations);
var locationLength=locations.length;
var markerArray=[];
for(var i=0;i<locationLength; i++) {
position = locations[i].getAttribute("position").split(",");
var m = L.marker(position);
m.addTo(map);
markerArray.push(m.getLatLng());
}
var bounds = L.latLngBounds(markerArray);
map.fitBounds(bounds, {padding: L.point(20, 20)});
var circle = L.circle([50.87286710651607, 4.377062022686005], {
color: 'orangered',
fillColor: 'orangered',
fillOpacity: 1 ,
radius: 2
}).addTo(map);
circle.bindPopup('<iframe src="https://hacklab.brussels"></iframe>');
</script>
</html>
|
