forked from Viglino/ol-ext
-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.control.subbar.html
201 lines (179 loc) · 6.08 KB
/
map.control.subbar.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------
Copyright (c) 2015 Jean-Marc VIGLINO,
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
------------------------------------------------------------>
<title>ol-ext: Control Bar / sub-bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="ol.control.Bar is a control bar that contains controls." />
<meta name="keywords" content="ol3, control, bar, panel, ol3, openlayers, interaction" />
<link rel="stylesheet" href="../style.css" />
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- OL3 -->
<link rel="stylesheet" href="https://openlayers.org/en/master/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/master/build/ol.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/master/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/master/build/ol.js"></script>
<!-- ol-ext -->
<link rel="stylesheet" href="../../dist/ol-ext.css" />
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
<!-- -->
<style>
.ol-button i
{ color: inherit;
}
</style>
</head>
<body >
<a href="https://github.com/Viglino/ol3-ext"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<a href="../../index.html">
<h1>ol-ext: control Bar / sub-bar</h1>
</a>
<div class="info">
<i>ol.control.Bar</i> can be nested in a sub-bar using an <i>ol.control.Toggle</i> to control its activation.
<ul>
<li>
<i>toggleOne</i> option makes only one control activated at once.
</li>
<li>
<i>autoDeactivate</i> option will deactivate all controls in the sub-bar when this is deactivated.
</li>
</ul>
Options of the <i>ol.control.Toggle</i> enables the sub-bar activation:
<ul>
<li>
Use the <i>bar</i> option of the <i>ol.control.Toogle</i> to set the sub-bar you want to display.
</li>
<li>
The <i>autoActive</i> option enable you to automatically activate a control when the sub-bar is shown.
</li>
</ul>
</div>
<!-- Map div -->
<div id="map" style="width:600px; height:400px;"></div>
<div class="options" >
<ul>
<li>
Position:
<select onchange="mainbar.setPosition(this.value)">
<option value="top">top</option>
<option value="top-left">top-left</option>
<option value="left">left</option>
<option value="bottom-left">bottom-left</option>
<option value="bottom">bottom</option>
<option value="bottom-right">bottom-right</option>
<option value="right">right</option>
<option value="top-right">top-right</option>
</select>
</li>
</ul>
Info:<br />
<textarea id="info" style="width:25em; height:10em"></textarea>
</div>
<script type="text/javascript">
// Vector layer
var vector = new ol.layer.Vector( { source: new ol.source.Vector() })
// The map
var map = new ol.Map
({ target: 'map',
view: new ol.View
({ zoom: 14,
center: [270701, 6247637]
}),
layers:
[ new ol.layer.Tile({ source: new ol.source.OSM() }),
vector
]
});
/* Nested subbar */
var sub2 = new ol.control.Bar(
{ toggleOne: true,
controls:
[ new ol.control.TextButton(
{ html:"2.1",
handleClick: function(b) { info("Button 2.1 clicked"); }
}),
new ol.control.TextButton(
{ html:"2.2",
handleClick: function(b) { info("Button 2.2 clicked"); }
})
]
});
var sub1 = new ol.control.Bar(
{ toggleOne: true,
controls:
[ new ol.control.Toggle(
{ html:"1",
autoActivate: true,
onToggle: function(b) { info("Button 1 "+(b?"activated":"deactivated")); }
}),
new ol.control.Toggle(
{ html:"2",
onToggle: function(b) { info("Button 2 "+(b?"activated":"deactivated")); },
// Second level nested control bar
bar: sub2
})
]
});
var mainbar = new ol.control.Bar(
{ controls: [
new ol.control.Toggle(
{ html: '0',
// First level nested control bar
bar: sub1,
onToggle: function() { info(); }
})]
});
map.addControl ( mainbar );
/*/
// inline version
map.addControl ( new ol.control.Bar(
{ controls:[ new ol.control.Toggle(
{ html: '0',
onToggle: function() { info(); },
// Nested control bar
bar: new ol.control.Bar(
{ toggleOne: true,
controls:
[ new ol.control.Toggle(
{ html:"1",
autoActivate: true,
onToggle: function(b) { info("Button 1 "+(b?"activated":"deactivated")); }
}),
new ol.control.Toggle(
{ html:"2",
onToggle: function(b) { info("Button 2 "+(b?"activated":"deactivated")); },
// Second level nested control bar
bar: new ol.control.Bar(
{ toggleOne: true,
controls:
[ new ol.control.Button(
{ html:"2.1",
className: "ol-text-button",
handleClick: function(b) { info("Button 2.1 clicked"); }
}),
new ol.control.Button(
{ html:"22",
className: "ol-text-button",
handleClick: function(b) { info("Button 2.2 clicked"); }
})
]
})
})
]
})
})
]
}));
/**/
// Show info
function info(i)
{ $("#info").html(i||"");
}
</script>
</body>
</html>