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
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.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=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<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="demo" style="">
</div>
</body>
<script type="text/javascript">
L.MyMap = L.Map.extend({
openPopup: function (popup, latlng, options) {
document.getElementById("demo").innerHTML = popup.getContent();
console.log("meeeh");
return this;
}
});
L.myMap = function (m) {
return new L.MyMap(m);
};
var map = L.myMap('map').setView([50.87287, 4.377], 17);
/* L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).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="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map) ;
var circle = L.circle([50.87286710651607, 4.377062022686005], {
color: 'orangered',
fillColor: 'orangered',
fillOpacity: 1 ,
radius: 2
}).addTo(map);
circle.bindPopup('<iframe src="hacklab.brussels"></iframe>');
circle = L.circle([50.884365143500744, 4.3793392181396475], {
color: 'orangered',
fillColor: 'orangered',
fillOpacity: 1 ,
radius: 2
}).addTo(map);
circle.bindPopup('<iframe src="http://www.ooooo.be/techotsukumogami/"></iframe>');
circle = L.circle([50.8286729,4.3385374], {
color: 'orangered',
fillColor: 'orangered',
fillOpacity: 1 ,
radius: 2
}).addTo(map);
circle.bindPopup('<iframe src="https://www.lesteki.be/"></iframe>');
circle = L.circle([50.8324117,4.3216929], {
color: 'orangered',
fillColor: 'orangered',
fillOpacity: 1 ,
radius: 2
}).addTo(map);
circle.bindPopup('<iframe src="https://hsbxl.be/"></iframe>');
/*L.marker([50.87287, 4.377], { color:"blue" }).addTo(map)
.bindPopup('<a href="https://hacklab.brussels/" target="_self" >hacklab.brussels</a>');*/
</script>
</html>
|
