forked from Viglino/ol-ext
-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.control.bar.html
142 lines (121 loc) · 4.81 KB
/
map.control.bar.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
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------
Copyright (c) 2015-2018 Jean-Marc VIGLINO,
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
------------------------------------------------------------>
<title>ol-ext: Control 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>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 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</h1>
</a>
<div class="info">
<i>ol.control.Bar</i> is a panel that contains other controls. Control bar can be nested.
<br/>
You can choose the position for the control bar.
<br/>
It can group <i>ol.control.Toggle</i> with a toggleOne propertie to have only one activated at a time. You can compose toolbars with it.
<br/>
A sub-bar can be nested to add options/controls visible when the parent <i>ol.control.Toggle</i> is active (see the <a href="map.control.subbar.html">sub-bar example</a>).
</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>
Information:<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
]
});
// Main control bar
var mainbar = new ol.control.Bar();
map.addControl(mainbar);
/* Nested toobar with one control activated at once */
var nested = new ol.control.Bar ({ toggleOne: true, group:true });
mainbar.addControl (nested);
// Add selection tool (a toggle control with a select interaction)
var selectCtrl = new ol.control.Toggle(
{ html: '<i class="fa fa-hand-pointer-o"></i>',
className: "select",
title: "Select",
interaction: new ol.interaction.Select (),
active:true,
onToggle: function(active)
{ $("#info").text("Select is "+(active?"activated":"deactivated"));
}
});
nested.addControl(selectCtrl);
// Add editing tools
var pedit = new ol.control.Toggle(
{ html: '<i class="fa fa-map-marker" ></i>',
className: "edit",
title: 'Point',
interaction: new ol.interaction.Draw
({ type: 'Point',
source: vector.getSource()
}),
onToggle: function(active)
{ $("#info").text("Edition is "+(active?"activated":"deactivated"));
}
});
nested.addControl ( pedit );
/* Standard Controls */
mainbar.addControl (new ol.control.ZoomToExtent({ extent: [ 265971,6243397 , 273148,6250665 ] }));
mainbar.addControl (new ol.control.Rotate());
mainbar.addControl (new ol.control.FullScreen());
// Show info
function info(i)
{ $("#info").html(i||"");
}
</script>
</body>
</html>