-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtooltip3.html
233 lines (210 loc) · 8.56 KB
/
tooltip3.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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE HTML>
<html>
<head>
<!-- from : http://www.mail-archive.com/[email protected]/msg11117.html -->
<title>tooltip3 demo</title>
<style type="text/css">
html, body, #basicMap {
margin: 0;
width: 100%;
height: 100%;
}
.olMarkerLabel {
font-size: small;
color: black;
background-color: #FFFFCC;
width: 150px;
padding: 1px;
border: 1px black solid;
z-index: 1000;
}
</style>
<script src="js/OpenLayers.js"></script>
<script src="js/label.js"></script>
<script>
// testing of using Marker.Label (extended) class
var use_marker_label = true;
// if false, marker displayed, but no popup, and still the many
// Uncaught TypeError: Object #<Object> has no method 'getFeatureFromEvent'
var map, select;
var mapnik, fromProjection, toProjection, position, markers, marker;
var icon;
var circleLayer, lineLayer;
// not getting mousemove location display!!!
var add_select = true; // is this needed? - seems YES???
var add_events_on = false; // but maybe not this? - hmmm NO? and the events are NOT fired anyway
var add_second_select = true; // what about this? - hmmm, popup shown but single error message
// shown - Uncaught TypeError: Cannot read property 'events' of null
// With it 'true' popup shown, but get 'hundreds' of errors on 'mousemove'
// Uncaught TypeError: Object #<Object> has no method 'getFeatureFromEvent'
var add_vector_layers = false;
var add_2nd_marker = true;
var lon2 = 13.39416;
var lat2 = 52.51608;
function init(lat,lon,zoom) {
map = new OpenLayers.Map("basicMap", {
projection: new OpenLayers.Projection("EPSG:3857"),
// this sets wgs84/4326 as default for display coords
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
mapnik = new OpenLayers.Layer.OSM();
fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
position = new OpenLayers.LonLat(lon,lat).transform( fromProjection, toProjection);
map.addLayer(mapnik);
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
// can/should this be a vector layer - NO, has to be Layer.Markers to have 'AddMarker(marker)'!!!
// markers = new OpenLayers.Layer.Vector( "Markers" );
markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
//marker = new OpenLayers.Marker(position);
var ttTxt = " Marker lat="+lat+", lon="+lon+" ";
icon = new OpenLayers.Icon('js/img/marker.png');
if (use_marker_label) {
marker = new OpenLayers.Marker.Label(position, icon.clone(), ttTxt ,{mouseOver:true});
} else {
marker = new OpenLayers.Marker(position);
}
markers.addMarker(marker);
if (add_2nd_marker) {
var pos = new OpenLayers.LonLat(lon2,lat2).transform( fromProjection, toProjection);
var icon2 = new OpenLayers.Icon('img/OM.png');
ttTxt = " Outer Marker at lat="+lat2+", lon="+lon2+" ";
marker = new OpenLayers.Marker.Label(pos, icon2.clone(), ttTxt ,{mouseOver:true});
markers.addMarker(marker);
}
// does the tooltip get messed up if I add other layers
// YES IT DOES??? WHY???
if (add_vector_layers) {
// for circle drawing
console.log("Adding vector layers... circleLayer and lineLayer.");
circleLayer = new OpenLayers.Layer.Vector("Cicle Layer");
map.addLayer(circleLayer);
// for line drawing
lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
}
map.setCenter(position, zoom );
if (add_select) {
// seems this is NOT needed????
console.log("Adding select controls... select and highlightCtrl.");
//add the main select (for regular popups)
select = new OpenLayers.Control.SelectFeature(markers, {toggle:true,
clickout: true});
if (add_events_on) {
markers.events.on({ "featureselected": onMarkerSelect,
"featureunselected": onMarkerUnselect});
}
//add the second select for tooltips:
if (add_second_select) {
var highlightCtrl = new OpenLayers.Control.SelectFeature(markers, {
hover: true, highlightOnly: true, renderIntent: "temporary",
eventListeners: { featurehighlighted: tooltipSelect,
featureunhighlighted: tooltipUnselect } });
//the order in which you add these lines seems to matter!
map.addControl(highlightCtrl);
map.addControl(select);
highlightCtrl.activate();
}
select.activate();
}
}
//support functions
var lastFeature = null;
var tooltipPopup = null;
function tooltipSelect(event){
var feature = event.feature;
var selectedFeature = feature;
console.log('tooltipSelect() fired');
//if there is already an opened details window, don\'t draw the tooltip
if(feature.popup != null){
return;
}
//if there are other tooltips active, destroy them
if(tooltipPopup != null){
map.removePopup(tooltipPopup);
tooltipPopup.destroy();
if(lastFeature != null){
delete lastFeature.popup;
tooltipPopup = null;
}
}
lastFeature = feature;
var tooltipPopup = new OpenLayers.Popup("activetooltip",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(80,12),
" "+feature.attributes.name,
true );
//this is messy, but I'm not a CSS guru
tooltipPopup.contentDiv.style.backgroundColor='ffffcb';
tooltipPopup.closeDiv.style.backgroundColor='ffffcb';
tooltipPopup.contentDiv.style.overflow='hidden';
tooltipPopup.contentDiv.style.padding='3px';
tooltipPopup.contentDiv.style.margin='0';
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
feature.popup = tooltipPopup;
map.addPopup(tooltipPopup);
}
function tooltipUnselect(event){
var feature = event.feature;
console.log('tooltipUnselect() fired');
if(feature != null && feature.popup != null){
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
tooltipPopup = null;
lastFeature = null;
}
}
function onMarkerSelect(event) {
//unselect any previous selections
console.log('onMarkerSelect() fired');
tooltipUnselect(event);
var feature = event.feature;
var selectedFeature = feature;
var popup = new OpenLayers.Popup.FramedCloud("activeAlarm",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"Loading...<img src='http://$server/map/symbols/ajax-loader.gif' border=0>",
null, true, onMarkerPopupClose );
feature.popup = popup;
popup.setOpacity(0.7);
map.addPopup(popup);
//call ajax to get the data
loadDetails(feature.attributes.description);
}
function onMarkerUnselect(event) {
console.log('onMarkerUnselect() fired');
var feature = event.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
function onMarkerPopupClose(evt) {
select.unselectAll();
}
</script>
</head>
<body>
<div id="basicMap"></div>
<script type="text/javascript" defer="defer">
function gup2( name, def ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return def;
return results[1];
}
var lat = gup2('lat',52.52);
var lon = gup2('lon',13.41);
var zoom = gup2('zoom',15);
init(lat,lon,zoom);
</script>
</body>
</html>