-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex_v3.html
130 lines (103 loc) · 3.55 KB
/
index_v3.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
<!DOCTYPE html>
<html>
<head>
<title>leaflet-sidebar example</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet"
href="../src/L.Control.Sidebar.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
<style>
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
}
.lorem {
color: rgb(119, 119, 119);
font-size: 14px;
}
body>#sidebar {
display: none;
}
.cloud {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="sidebar">
<h1>Oregon, USA</h1>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr.</p>
<iframe width="400"
height="220"
src="https://www.youtube.com/embed/ghkQoJoipbM?start=3571"
frameborder="0"
allowfullscreen></iframe>
<img class="cloud"
src="words_cloud/oregon.png"
alt="tags"
height="250">
</div>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="../src/L.Control.Sidebar.js"></script>
<script>
var map = L.map('map');
map.setView([51.2, 7], 9);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
}).addTo(map);
var sidebar = L.control.sidebar('sidebar', {
closeButton: true,
position: 'left'
});
map.addControl(sidebar);
var DotIcon = L.Icon.extend({
options: {
iconSize: [25, 25],
iconAnchor: [25, 25],
popupAnchor: [1, 1]
}
});
var greenIcon = new DotIcon({ iconUrl: 'markers/dot-Green.png' }),
redIcon = new DotIcon({ iconUrl: 'markers/dot-Red.png' }),
yellowIcon = new DotIcon({ iconUrl: 'markers/dot-Yellow.png' });
setTimeout(function () {
sidebar.show();
}, 500);
var marker = L.marker([51.2, 7], { icon: greenIcon }).addTo(map).on('click', function () {
sidebar.toggle();
});
map.on('click', function () {
sidebar.hide();
})
sidebar.on('show', function () {
console.log('Sidebar will be visible.');
});
sidebar.on('shown', function () {
console.log('Sidebar is visible.');
});
sidebar.on('hide', function () {
console.log('Sidebar will be hidden.');
});
sidebar.on('hidden', function () {
console.log('Sidebar is hidden.');
});
L.DomEvent.on(sidebar.getCloseButton(), 'click', function () {
console.log('Close button clicked.');
});
</script>
</body>
</html>