|
0
|
1 /*
|
|
|
2 * PlacenameTags.js
|
|
|
3 *
|
|
|
4 * Copyright (c) 2012, Stefan Jänicke. All rights reserved.
|
|
|
5 *
|
|
|
6 * This library is free software; you can redistribute it and/or
|
|
|
7 * modify it under the terms of the GNU Lesser General Public
|
|
|
8 * License as published by the Free Software Foundation; either
|
|
|
9 * version 3 of the License, or (at your option) any later version.
|
|
|
10 *
|
|
|
11 * This library is distributed in the hope that it will be useful,
|
|
|
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
|
14 * Lesser General Public License for more details.
|
|
|
15 *
|
|
|
16 * You should have received a copy of the GNU Lesser General Public
|
|
|
17 * License along with this library; if not, write to the Free Software
|
|
|
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
|
|
|
19 * MA 02110-1301 USA
|
|
|
20 */
|
|
|
21
|
|
|
22 /**
|
|
|
23 * @class PlacenameTags
|
|
|
24 * place labels computation for circles
|
|
|
25 * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
|
|
|
26 * @release 1.0
|
|
|
27 * @release date: 2012-07-27
|
|
|
28 * @version date: 2012-07-27
|
|
|
29 */
|
|
|
30 function PlacenameTags(circle, map) {
|
|
|
31
|
|
|
32 this.circle = circle;
|
|
|
33 this.map = map;
|
|
|
34
|
|
|
35 this.placeLabels
|
|
|
36 this.selectedLabel
|
|
|
37
|
|
|
38 this.allLabel
|
|
|
39 this.othersLabel
|
|
|
40 this.unknownLabel
|
|
|
41
|
|
|
42 this.calculate = function() {
|
|
|
43 this.calculateLabels();
|
|
|
44 this.calculatePlacenameTags();
|
|
|
45 }
|
|
|
46
|
|
|
47 this.calculateLabels = function() {
|
|
|
48 var elements = this.circle.elements;
|
|
|
49 var k = this.circle.search;
|
|
|
50 var weight = 0;
|
|
|
51 var labels = [];
|
|
|
52
|
|
|
53 var levelOfDetail = 0;
|
|
|
54 if (this.map.options.placenameTagsStyle === 'zoom')
|
|
|
55 levelOfDetail = this.map.getLevelOfDetail();
|
|
|
56
|
|
|
57 if (this.map.options.placenameTagsStyle === 'value'){
|
|
|
58 //find max level that _all_ elements have a value for
|
|
|
59 var maxLevel;
|
|
|
60 for (var i = 0; i < elements.length; i++) {
|
|
|
61 var level = elements[i].placeDetails[this.map.options.mapIndex].length-1;
|
|
|
62
|
|
|
63 if (typeof maxLevel === "undefined")
|
|
|
64 maxLevel = level;
|
|
|
65 if (maxLevel > level)
|
|
|
66 maxLevel = level;
|
|
|
67 //smallest level anyway, no need to look any further
|
|
|
68 if (level == 0)
|
|
|
69 break;
|
|
|
70 }
|
|
|
71 //search for highest level where the values differ
|
|
|
72 for (levelOfDetail = 0; levelOfDetail < maxLevel; levelOfDetail++){
|
|
|
73 var differenceFound = false;
|
|
|
74 for (var i = 0; i < (elements.length-1); i++) {
|
|
|
75 if ( elements[i].getPlace(this.map.options.mapIndex, levelOfDetail) !==
|
|
|
76 elements[i+1].getPlace(this.map.options.mapIndex, levelOfDetail))
|
|
|
77 differenceFound = true;
|
|
|
78 }
|
|
|
79 if (differenceFound === true)
|
|
|
80 break;
|
|
|
81 }
|
|
|
82 }
|
|
|
83
|
|
|
84 for (var i = 0; i < elements.length; i++) {
|
|
|
85 weight += elements[i].weight;
|
|
|
86 var found = false;
|
|
|
87 var label = elements[i].getPlace(this.map.options.mapIndex, levelOfDetail);
|
|
|
88 if (label == "") {
|
|
|
89 label = "unknown";
|
|
|
90 }
|
|
|
91 for (var j = 0; j < labels.length; j++) {
|
|
|
92 if (labels[j].place == label) {
|
|
|
93 labels[j].elements.push(elements[i]);
|
|
|
94 labels[j].weight += elements[i].weight;
|
|
|
95 found = true;
|
|
|
96 break;
|
|
|
97 }
|
|
|
98 }
|
|
|
99 if (!found) {
|
|
|
100 labels.push({
|
|
|
101 id : elements[i].name,
|
|
|
102 place : label,
|
|
|
103 elements : new Array(elements[i]),
|
|
|
104 weight : elements[i].weight,
|
|
|
105 index : k
|
|
|
106 });
|
|
|
107 }
|
|
|
108 }
|
|
|
109 var sortBySize = function(label1, label2) {
|
|
|
110 if (label1.weight > label2.weight) {
|
|
|
111 return -1;
|
|
|
112 }
|
|
|
113 return 1;
|
|
|
114 }
|
|
|
115 labels.sort(sortBySize);
|
|
|
116 if (map.options.maxPlaceLabels) {
|
|
|
117 var ml = map.options.maxPlaceLabels;
|
|
|
118 if (ml == 1) {
|
|
|
119 labels = [];
|
|
|
120 labels.push({
|
|
|
121 place : "all",
|
|
|
122 elements : elements,
|
|
|
123 weight : weight,
|
|
|
124 index : k
|
|
|
125 });
|
|
|
126 }
|
|
|
127 if (ml == 2) {
|
|
|
128 ml++;
|
|
|
129 }
|
|
|
130 if (ml > 2 && labels.length + 1 > ml) {
|
|
|
131 var c = [];
|
|
|
132 var w = 0;
|
|
|
133 for (var i = ml - 2; i < labels.length; i++) {
|
|
|
134 c = c.concat(labels[i].elements);
|
|
|
135 w += labels[i].weight;
|
|
|
136 }
|
|
|
137 labels = labels.slice(0, ml - 2);
|
|
|
138 labels.push({
|
|
|
139 place : "others",
|
|
|
140 elements : c,
|
|
|
141 weight : w,
|
|
|
142 index : k
|
|
|
143 });
|
|
|
144 }
|
|
|
145 }
|
|
|
146 if (labels.length > 1) {
|
|
|
147 labels.push({
|
|
|
148 place : "all",
|
|
|
149 elements : elements,
|
|
|
150 weight : weight,
|
|
|
151 index : k
|
|
|
152 });
|
|
|
153 }
|
|
|
154 this.placeLabels = labels;
|
|
|
155 };
|
|
|
156
|
|
|
157 this.calculatePlacenameTags = function() {
|
|
|
158 var cloud = this;
|
|
|
159 var c = GeoTemConfig.getColor(this.circle.search);
|
|
|
160 if( map.options.useGraphics ){
|
|
|
161 c = map.config.getGraphic(this.circle.search).color;
|
|
|
162 }
|
|
|
163 var color0 = 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')';
|
|
|
164 var color1 = 'rgb(' + c.r1 + ',' + c.g1 + ',' + c.b1 + ')';
|
|
|
165 var allStyles = "", hoverStyle = "", highlightStyle = "", selectedStyle = "", unselectedStyle = "";
|
|
|
166
|
|
|
167 if (GeoTemConfig.ie) {
|
|
|
168 highlightStyle += map.options.ieHighlightLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
169 hoverStyle += map.options.ieHoveredLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
170 selectedStyle += map.options.ieSelectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
171 unselectedStyle += map.options.ieUnselectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
172 } else {
|
|
|
173 highlightStyle += map.options.highlightLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
174 hoverStyle += map.options.hoveredLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
175 selectedStyle += map.options.selectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
176 unselectedStyle += map.options.unselectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
177 }
|
|
|
178
|
|
|
179 var clickFunction = function(label) {
|
|
|
180 label.div.onclick = function() {
|
|
|
181 cloud.changeLabelSelection(label);
|
|
|
182 }
|
|
|
183 }
|
|
|
184 var maxLabelSize = this.count
|
|
|
185 for (var i = 0; i < this.placeLabels.length; i++) {
|
|
|
186 var l = this.placeLabels[i];
|
|
|
187 l.selected = false;
|
|
|
188 var div = document.createElement("div");
|
|
|
189 div.setAttribute('class', 'tagCloudItem');
|
|
|
190 var fontSize = 1 + (l.weight - 1) / this.map.count * map.options.maxLabelIncrease;
|
|
|
191 if (l.place == "all") {
|
|
|
192 fontSize = 1;
|
|
|
193 }
|
|
|
194 div.style.fontSize = fontSize + "em";
|
|
|
195 l.allStyle = allStyles + "font-size: " + fontSize + "em;";
|
|
|
196 l.selectedStyle = selectedStyle;
|
|
|
197 l.unselectedStyle = unselectedStyle;
|
|
|
198 l.highlightStyle = highlightStyle;
|
|
|
199 l.hoverStyle = hoverStyle;
|
|
|
200 div.innerHTML = l.place + "<span style='font-size:" + (1 / fontSize) + "em'> (" + l.weight + ")</span>";
|
|
|
201 l.div = div;
|
|
|
202 clickFunction(l);
|
|
|
203 }
|
|
|
204 if (map.options.labelGrid) {
|
|
|
205 this.showPlacelabels();
|
|
|
206 } else {
|
|
|
207 for (var i = 0; i < this.placeLabels.length; i++) {
|
|
|
208 this.placeLabels[i].div.setAttribute('style', this.placeLabels[i].allStyle + "" + this.placeLabels[i].highlightStyle);
|
|
|
209 }
|
|
|
210 }
|
|
|
211 };
|
|
|
212
|
|
|
213 this.selectLabel = function(label) {
|
|
|
214 if ( typeof label == 'undefined') {
|
|
|
215 label = this.placeLabels[this.placeLabels.length - 1];
|
|
|
216 }
|
|
|
217 if (this.map.popup) {
|
|
|
218 this.map.popup.showLabelContent(label);
|
|
|
219 }
|
|
|
220 this.selectedLabel = label;
|
|
|
221 this.selectedLabel.div.setAttribute('style', this.selectedLabel.allStyle + "" + this.selectedLabel.selectedStyle);
|
|
|
222 this.map.mapLabelSelection(label);
|
|
|
223 };
|
|
|
224
|
|
|
225 // changes selection between labels (click, hover)
|
|
|
226 this.changeLabelSelection = function(label) {
|
|
|
227 if (this.selectedLabel == label) {
|
|
|
228 return;
|
|
|
229 }
|
|
|
230 if ( typeof this.selectedLabel != 'undefined') {
|
|
|
231 this.selectedLabel.div.setAttribute('style', this.selectedLabel.allStyle + "" + this.selectedLabel.unselectedStyle);
|
|
|
232 }
|
|
|
233 this.selectLabel(label);
|
|
|
234 };
|
|
|
235
|
|
|
236 this.showPlacelabels = function() {
|
|
|
237 this.leftDiv = document.createElement("div");
|
|
|
238 this.leftDiv.setAttribute('class', 'tagCloudDiv');
|
|
|
239 this.map.gui.mapWindow.appendChild(this.leftDiv);
|
|
|
240 this.rightDiv = document.createElement("div");
|
|
|
241 this.rightDiv.setAttribute('class', 'tagCloudDiv');
|
|
|
242 this.map.gui.mapWindow.appendChild(this.rightDiv);
|
|
|
243 for (var i = 0; i < this.placeLabels.length; i++) {
|
|
|
244 if (i % 2 == 0) {
|
|
|
245 this.leftDiv.appendChild(this.placeLabels[i].div);
|
|
|
246 } else {
|
|
|
247 this.rightDiv.appendChild(this.placeLabels[i].div);
|
|
|
248 }
|
|
|
249 this.placeLabels[i].div.setAttribute('style', this.placeLabels[i].allStyle + "" + this.placeLabels[i].highlightStyle);
|
|
|
250 }
|
|
|
251 this.placeTagCloud();
|
|
|
252 };
|
|
|
253
|
|
|
254 this.placeTagCloud = function() {
|
|
|
255 var lonlat = new OpenLayers.LonLat(this.circle.feature.geometry.x, this.circle.feature.geometry.y);
|
|
|
256 var pixel = map.openlayersMap.getPixelFromLonLat(lonlat);
|
|
|
257 var radius = this.circle.feature.style.pointRadius;
|
|
|
258 var lw = this.leftDiv.offsetWidth;
|
|
|
259 var rw = this.rightDiv.offsetWidth;
|
|
|
260 this.leftDiv.style.left = (pixel.x - radius - lw - 5) + "px";
|
|
|
261 this.rightDiv.style.left = (pixel.x + radius + 5) + "px";
|
|
|
262 var lh = this.leftDiv.offsetHeight;
|
|
|
263 var rh = this.rightDiv.offsetHeight;
|
|
|
264 var lt = pixel.y - lh / 2;
|
|
|
265 var rt = pixel.y - rh / 2;
|
|
|
266 this.leftDiv.style.top = lt + "px";
|
|
|
267 this.rightDiv.style.top = rt + "px";
|
|
|
268 };
|
|
|
269
|
|
|
270 this.remove = function() {
|
|
|
271 $(this.leftDiv).remove();
|
|
|
272 $(this.rightDiv).remove();
|
|
|
273 };
|
|
|
274
|
|
|
275 };
|
|
|
276
|
|
|
277 function PackPlacenameTags(circle, map) {
|
|
|
278
|
|
|
279 this.circle = circle;
|
|
|
280 this.map = map;
|
|
|
281
|
|
|
282 this.placeLabels
|
|
|
283 this.selectedLabel
|
|
|
284
|
|
|
285 this.allLabel
|
|
|
286 this.othersLabel
|
|
|
287 this.unknownLabel
|
|
|
288
|
|
|
289 this.calculate = function() {
|
|
|
290 this.calculateLabels();
|
|
|
291 this.calculatePlacenameTags();
|
|
|
292 }
|
|
|
293
|
|
|
294 this.getLabelList = function(circle) {
|
|
|
295
|
|
|
296 var elements = circle.elements;
|
|
|
297 var k = circle.search;
|
|
|
298 var weight = 0;
|
|
|
299 var labels = [];
|
|
|
300 var levelOfDetail = this.map.getLevelOfDetail();
|
|
|
301 for (var i = 0; i < elements.length; i++) {
|
|
|
302 weight += elements[i].weight;
|
|
|
303 var found = false;
|
|
|
304 var label = elements[i].getPlace(this.map.options.mapIndex, levelOfDetail);
|
|
|
305 if (label == "") {
|
|
|
306 label = "unknown";
|
|
|
307 }
|
|
|
308 for (var j = 0; j < labels.length; j++) {
|
|
|
309 if (labels[j].place == label) {
|
|
|
310 labels[j].elements.push(elements[i]);
|
|
|
311 labels[j].weight += elements[i].weight;
|
|
|
312 found = true;
|
|
|
313 break;
|
|
|
314 }
|
|
|
315 }
|
|
|
316 if (!found) {
|
|
|
317 labels.push({
|
|
|
318 id : elements[i].name,
|
|
|
319 place : label,
|
|
|
320 elements : new Array(elements[i]),
|
|
|
321 weight : elements[i].weight,
|
|
|
322 index : k
|
|
|
323 });
|
|
|
324 }
|
|
|
325 }
|
|
|
326 var sortBySize = function(label1, label2) {
|
|
|
327 if (label1.weight > label2.weight) {
|
|
|
328 return -1;
|
|
|
329 }
|
|
|
330 return 1;
|
|
|
331 }
|
|
|
332 labels.sort(sortBySize);
|
|
|
333 var droppedLabels = [];
|
|
|
334 if (map.options.maxPlaceLabels) {
|
|
|
335 var ml = map.options.maxPlaceLabels;
|
|
|
336 if (ml == 1) {
|
|
|
337 labels = [];
|
|
|
338 labels.push({
|
|
|
339 place : "all",
|
|
|
340 elements : elements,
|
|
|
341 weight : weight,
|
|
|
342 index : k
|
|
|
343 });
|
|
|
344 }
|
|
|
345 if (ml == 2) {
|
|
|
346 ml++;
|
|
|
347 }
|
|
|
348 if (ml > 2 && labels.length + 1 > ml) {
|
|
|
349 var c = [];
|
|
|
350 var w = 0;
|
|
|
351 for (var i = ml - 2; i < labels.length; i++) {
|
|
|
352 c = c.concat(labels[i].elements);
|
|
|
353 w += labels[i].weight;
|
|
|
354 droppedLabels.push(labels[i]);
|
|
|
355 }
|
|
|
356 labels = labels.slice(0, ml - 2);
|
|
|
357 var ol = {
|
|
|
358 place : "others",
|
|
|
359 elements : c,
|
|
|
360 weight : w,
|
|
|
361 index : k
|
|
|
362 };
|
|
|
363 labels.push(ol);
|
|
|
364 this.othersLabels.push(ol);
|
|
|
365 }
|
|
|
366 }
|
|
|
367 if (labels.length > 1) {
|
|
|
368 labels.push({
|
|
|
369 place : "all",
|
|
|
370 elements : elements,
|
|
|
371 weight : weight,
|
|
|
372 index : k
|
|
|
373 });
|
|
|
374 }
|
|
|
375 this.placeLabels.push(labels);
|
|
|
376 this.droppedLabels.push(droppedLabels);
|
|
|
377 };
|
|
|
378
|
|
|
379 this.calculateLabels = function() {
|
|
|
380 var circles = this.circle.circles;
|
|
|
381 this.placeLabels = [];
|
|
|
382 this.droppedLabels = [];
|
|
|
383 this.othersLabels = [];
|
|
|
384 for (var i = 0; i < circles.length; i++) {
|
|
|
385 this.getLabelList(circles[i]);
|
|
|
386 }
|
|
|
387 };
|
|
|
388
|
|
|
389 this.calculatePlacenameTags = function() {
|
|
|
390 var cloud = this;
|
|
|
391
|
|
|
392 var unselectedStyles = [];
|
|
|
393 var selectedStyles = [];
|
|
|
394 var hoverStyles = [];
|
|
|
395
|
|
|
396 for (var k = 0; k < this.placeLabels.length; k++) {
|
|
|
397 var c = GeoTemConfig.getColor(this.circle.circles[k].search);
|
|
|
398 if( map.options.useGraphics ){
|
|
|
399 c = map.config.getGraphic(this.circle.circles[k].search).color;
|
|
|
400 }
|
|
|
401 var color0 = 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')';
|
|
|
402 var color1 = 'rgb(' + c.r1 + ',' + c.g1 + ',' + c.b1 + ')';
|
|
|
403 var allStyles = "", hoverStyle = "", highlightStyle = "", selectedStyle = "", unselectedStyle = "";
|
|
|
404
|
|
|
405 if (GeoTemConfig.ie) {
|
|
|
406 highlightStyle += map.options.ieHighlightLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
407 hoverStyle += map.options.ieHoveredLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
408 selectedStyle += map.options.ieSelectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
409 unselectedStyle += map.options.ieUnselectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
410 } else {
|
|
|
411 highlightStyle += map.options.highlightLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
412 hoverStyle += map.options.hoveredLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
413 selectedStyle += map.options.selectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
414 unselectedStyle += map.options.unselectedLabel.replace(/COLOR1/g, color1).replace(/COLOR0/g, color0) + ";";
|
|
|
415 }
|
|
|
416
|
|
|
417 allStyles += 'margin-right:5px;';
|
|
|
418 allStyles += 'margin-left:5px;';
|
|
|
419 unselectedStyles.push(unselectedStyle);
|
|
|
420 selectedStyles.push(selectedStyle);
|
|
|
421 hoverStyles.push(hoverStyle);
|
|
|
422
|
|
|
423 var clickFunction = function(label, id) {
|
|
|
424 label.div.onmouseover = function() {
|
|
|
425 if (!label.opposite) {
|
|
|
426 var oppositeLabel, oppositeLabelDiv;
|
|
|
427 label.div.setAttribute('style', allStyles + "" + selectedStyles[id]);
|
|
|
428 var c = GeoTemConfig.getColor(id);
|
|
|
429 if( map.options.useGraphics ){
|
|
|
430 c = map.config.getGraphic(id).color;
|
|
|
431 }
|
|
|
432 var color0 = 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')';
|
|
|
433 if (id == 0) {
|
|
|
434 for (var i = 0; i < cloud.droppedLabels[1].length; i++) {
|
|
|
435 if (cloud.droppedLabels[1][i].place == label.place) {
|
|
|
436 oppositeLabel = cloud.droppedLabels[1][i];
|
|
|
437 cloud.rightDiv.appendChild(oppositeLabel.div);
|
|
|
438 cloud.drawLine(cloud.ctxOl, label.div, oppositeLabel.div);
|
|
|
439 var olDiv = cloud.othersLabels[1].div;
|
|
|
440 olDiv.innerHTML = olDiv.innerHTML.replace(/\(\d*\)/g, '(' + (cloud.othersLabels[1].weight - oppositeLabel.weight) + ')');
|
|
|
441 break;
|
|
|
442 }
|
|
|
443 }
|
|
|
444 } else {
|
|
|
445 for (var i = 0; i < cloud.droppedLabels[0].length; i++) {
|
|
|
446 if (cloud.droppedLabels[0][i].place == label.place) {
|
|
|
447 oppositeLabel = cloud.droppedLabels[0][i];
|
|
|
448 cloud.leftDiv.appendChild(oppositeLabel.div);
|
|
|
449 cloud.drawLine(cloud.ctxOl, oppositeLabel.div, label.div);
|
|
|
450 var olDiv = cloud.othersLabels[0].div;
|
|
|
451 olDiv.innerHTML = olDiv.innerHTML.replace(/\(\d*\)/g, '(' + (cloud.othersLabels[0].weight - oppositeLabel.weight) + ')');
|
|
|
452 break;
|
|
|
453 }
|
|
|
454 }
|
|
|
455 }
|
|
|
456 if ( typeof oppositeLabel == 'undefined') {
|
|
|
457 oppositeLabel = {
|
|
|
458 div : cloud.naDiv
|
|
|
459 };
|
|
|
460 if (id == 0) {
|
|
|
461 cloud.rightDiv.appendChild(cloud.naDiv);
|
|
|
462 cloud.drawLine(cloud.ctxOl, label.div, cloud.naDiv);
|
|
|
463 oppositeLabel.div.setAttribute('style', allStyles + "" + selectedStyles[1]);
|
|
|
464 } else {
|
|
|
465 cloud.leftDiv.appendChild(cloud.naDiv);
|
|
|
466 cloud.drawLine(cloud.ctxOl, cloud.naDiv, label.div);
|
|
|
467 oppositeLabel.div.setAttribute('style', allStyles + "" + selectedStyles[0]);
|
|
|
468 }
|
|
|
469 cloud.map.mapLabelHighlight(label);
|
|
|
470 } else {
|
|
|
471 cloud.map.mapLabelHighlight([label, oppositeLabel]);
|
|
|
472 }
|
|
|
473 label.div.onmouseout = function() {
|
|
|
474 label.div.setAttribute('style', allStyles + "" + unselectedStyles[id]);
|
|
|
475 var olDiv = cloud.othersLabels[0].div;
|
|
|
476 olDiv.innerHTML = olDiv.innerHTML.replace(/\(\d*\)/g, '(' + cloud.othersLabels[0].weight + ')');
|
|
|
477 var olDiv2 = cloud.othersLabels[1].div;
|
|
|
478 olDiv2.innerHTML = olDiv2.innerHTML.replace(/\(\d*\)/g, '(' + cloud.othersLabels[1].weight + ')');
|
|
|
479 $(oppositeLabel.div).remove();
|
|
|
480 cloud.ctxOl.clearRect(0, 0, cloud.cvOl.width, cloud.cvOl.height);
|
|
|
481 cloud.map.mapLabelHighlight();
|
|
|
482 }
|
|
|
483 }
|
|
|
484 }
|
|
|
485 }
|
|
|
486 var maxLabelSize = this.count
|
|
|
487 for (var i = 0; i < this.placeLabels[k].length; i++) {
|
|
|
488 var l = this.placeLabels[k][i];
|
|
|
489 l.selected = false;
|
|
|
490 var div = document.createElement("div");
|
|
|
491 div.setAttribute('class', 'tagCloudItem');
|
|
|
492 var fontSize = 1 + (l.weight - 1) / this.map.count * map.options.maxLabelIncrease;
|
|
|
493 if (l.place == "all") {
|
|
|
494 fontSize = 1;
|
|
|
495 }
|
|
|
496 div.style.fontSize = fontSize + "em";
|
|
|
497 l.allStyle = allStyles + "font-size: " + fontSize + "em;";
|
|
|
498 l.selectedStyle = selectedStyle;
|
|
|
499 l.unselectedStyle = unselectedStyle;
|
|
|
500 l.hoverStyle = hoverStyle;
|
|
|
501 div.innerHTML = l.place + "<span style='font-size:" + (1 / fontSize) + "em'> (" + l.weight + ")</span>";
|
|
|
502 l.div = div;
|
|
|
503 clickFunction(l, k);
|
|
|
504 }
|
|
|
505 for (var i = 0; i < this.droppedLabels[k].length; i++) {
|
|
|
506 var l = this.droppedLabels[k][i];
|
|
|
507 l.selected = false;
|
|
|
508 var div = document.createElement("div");
|
|
|
509 div.setAttribute('class', 'tagCloudItem');
|
|
|
510 var fontSize = 1 + (l.weight - 1) / this.map.count * map.options.maxLabelIncrease;
|
|
|
511 div.style.fontSize = fontSize + "em";
|
|
|
512 l.allStyle = allStyles + "font-size: " + fontSize + "em;";
|
|
|
513 l.selectedStyle = selectedStyle;
|
|
|
514 l.unselectedStyle = unselectedStyle;
|
|
|
515 l.hoverStyle = hoverStyle;
|
|
|
516 div.innerHTML = l.place + "<span style='font-size:" + (1 / fontSize) + "em'> (" + l.weight + ")</span>";
|
|
|
517 l.div = div;
|
|
|
518 div.setAttribute('style', allStyles + "" + selectedStyle);
|
|
|
519 }
|
|
|
520 }
|
|
|
521
|
|
|
522 this.naDiv = document.createElement("div");
|
|
|
523 this.naDiv.setAttribute('class', 'tagCloudItem');
|
|
|
524 var fontSize = 1;
|
|
|
525 div.style.fontSize = fontSize + "em";
|
|
|
526 l.allStyle = allStyles + "font-size: " + fontSize + "em;";
|
|
|
527 l.selectedStyle = selectedStyle;
|
|
|
528 l.unselectedStyle = unselectedStyle;
|
|
|
529 l.hoverStyle = hoverStyle;
|
|
|
530 this.naDiv.innerHTML = "Not available";
|
|
|
531 l.div = this.naDiv;
|
|
|
532
|
|
|
533 if (map.options.labelGrid) {
|
|
|
534 this.showPlacelabels();
|
|
|
535 }
|
|
|
536 };
|
|
|
537
|
|
|
538 this.showPlacelabels = function() {
|
|
|
539 this.leftDiv = document.createElement("div");
|
|
|
540 this.leftDiv.setAttribute('class', 'tagCloudDiv');
|
|
|
541 this.leftDiv.style.textAlign = 'right';
|
|
|
542 this.map.gui.mapWindow.appendChild(this.leftDiv);
|
|
|
543 this.centerDiv = document.createElement("div");
|
|
|
544 this.centerDiv.setAttribute('class', 'tagCloudDiv');
|
|
|
545 this.centerDiv.style.opacity = 0.7;
|
|
|
546 this.map.gui.mapWindow.appendChild(this.centerDiv);
|
|
|
547 this.centerDivOl = document.createElement("div");
|
|
|
548 this.centerDivOl.setAttribute('class', 'tagCloudDiv');
|
|
|
549 this.centerDivOl.style.opacity = 0.7;
|
|
|
550 this.map.gui.mapWindow.appendChild(this.centerDivOl);
|
|
|
551 this.rightDiv = document.createElement("div");
|
|
|
552 this.rightDiv.setAttribute('class', 'tagCloudDiv');
|
|
|
553 this.rightDiv.style.textAlign = 'left';
|
|
|
554 this.map.gui.mapWindow.appendChild(this.rightDiv);
|
|
|
555 for (var i = 0; i < this.placeLabels.length; i++) {
|
|
|
556 for (var j = 0; j < this.placeLabels[i].length; j++) {
|
|
|
557 if (i == 0) {
|
|
|
558 this.leftDiv.appendChild(this.placeLabels[i][j].div);
|
|
|
559 } else {
|
|
|
560 this.rightDiv.appendChild(this.placeLabels[i][j].div);
|
|
|
561 }
|
|
|
562 this.placeLabels[i][j].div.setAttribute('style', this.placeLabels[i][j].allStyle + "" + this.placeLabels[i][j].unselectedStyle);
|
|
|
563 }
|
|
|
564 }
|
|
|
565 this.placeTagCloud();
|
|
|
566 this.setCanvas();
|
|
|
567 };
|
|
|
568
|
|
|
569 this.placeTagCloud = function() {
|
|
|
570 var lonlat = new OpenLayers.LonLat(this.circle.feature.geometry.x, this.circle.feature.geometry.y);
|
|
|
571 var pixel = map.openlayersMap.getPixelFromLonLat(lonlat);
|
|
|
572 var radius = this.circle.feature.style.pointRadius;
|
|
|
573 var lw = this.leftDiv.offsetWidth;
|
|
|
574 var rw = this.rightDiv.offsetWidth;
|
|
|
575 this.leftDiv.style.left = (pixel.x - radius - lw - 5) + "px";
|
|
|
576 this.rightDiv.style.left = (pixel.x + radius + 5) + "px";
|
|
|
577 var lh = this.leftDiv.offsetHeight;
|
|
|
578 var rh = this.rightDiv.offsetHeight;
|
|
|
579 var lt = pixel.y - lh / 2;
|
|
|
580 var rt = pixel.y - rh / 2;
|
|
|
581 this.leftDiv.style.top = lt + "px";
|
|
|
582 this.rightDiv.style.top = rt + "px";
|
|
|
583 };
|
|
|
584
|
|
|
585 this.setCanvas = function() {
|
|
|
586 var height = Math.max(this.leftDiv.offsetHeight, this.rightDiv.offsetHeight);
|
|
|
587 var top = Math.min(this.leftDiv.offsetTop, this.rightDiv.offsetTop);
|
|
|
588 var left = this.leftDiv.offsetLeft + this.leftDiv.offsetWidth;
|
|
|
589 this.width = this.rightDiv.offsetLeft - left;
|
|
|
590 this.centerDiv.style.left = left + "px";
|
|
|
591 this.centerDiv.style.top = top + "px";
|
|
|
592 this.centerDiv.style.height = height + "px";
|
|
|
593 this.centerDiv.style.width = this.width + "px";
|
|
|
594
|
|
|
595 this.centerDivOl.style.left = left + "px";
|
|
|
596 this.centerDivOl.style.top = top + "px";
|
|
|
597 this.centerDivOl.style.height = height + "px";
|
|
|
598 this.centerDivOl.style.width = this.width + "px";
|
|
|
599
|
|
|
600 var cv = document.createElement("canvas");
|
|
|
601 this.centerDiv.appendChild(cv);
|
|
|
602 if (!cv.getContext && G_vmlCanvasManager) {
|
|
|
603 cv = G_vmlCanvasManager.initElement(cv);
|
|
|
604 }
|
|
|
605 cv.width = this.width;
|
|
|
606 cv.height = height;
|
|
|
607 ctx = cv.getContext('2d');
|
|
|
608
|
|
|
609 this.cvOl = document.createElement("canvas");
|
|
|
610 this.centerDivOl.appendChild(this.cvOl);
|
|
|
611 if (!this.cvOl.getContext && G_vmlCanvasManager) {
|
|
|
612 this.cvOl = G_vmlCanvasManager.initElement(this.cvOl);
|
|
|
613 }
|
|
|
614 this.cvOl.width = this.width;
|
|
|
615 this.cvOl.height = height + 50;
|
|
|
616 this.ctxOl = this.cvOl.getContext('2d');
|
|
|
617
|
|
|
618 for (var i = 0; i < this.placeLabels[0].length; i++) {
|
|
|
619 this.placeLabels[0][i].opposite = false;
|
|
|
620 }
|
|
|
621 for (var i = 0; i < this.placeLabels[1].length; i++) {
|
|
|
622 this.placeLabels[1][i].opposite = false;
|
|
|
623 }
|
|
|
624 for (var i = 0; i < this.placeLabels[0].length; i++) {
|
|
|
625 for (var j = 0; j < this.placeLabels[1].length; j++) {
|
|
|
626 if (this.placeLabels[0][i].place == this.placeLabels[1][j].place) {
|
|
|
627 this.drawLine(ctx, this.placeLabels[0][i].div, this.placeLabels[1][j].div);
|
|
|
628 this.placeLabels[0][i].opposite = true;
|
|
|
629 this.placeLabels[1][j].opposite = true;
|
|
|
630 }
|
|
|
631 }
|
|
|
632 }
|
|
|
633 }
|
|
|
634
|
|
|
635 this.drawLine = function(ctx, label1, label2) {
|
|
|
636 var x1 = 5;
|
|
|
637 var x2 = this.width - 5;
|
|
|
638 var y1 = label1.offsetTop + label1.offsetHeight / 2;
|
|
|
639 var y2 = label2.offsetTop + label2.offsetHeight / 2;
|
|
|
640 if (this.leftDiv.offsetTop > this.rightDiv.offsetTop) {
|
|
|
641 y1 += this.leftDiv.offsetTop - this.rightDiv.offsetTop;
|
|
|
642 } else {
|
|
|
643 y2 += this.rightDiv.offsetTop - this.leftDiv.offsetTop;
|
|
|
644 }
|
|
|
645 ctx.lineCap = 'round';
|
|
|
646 ctx.lineWidth = 5;
|
|
|
647 ctx.beginPath();
|
|
|
648 ctx.moveTo(x1, y1);
|
|
|
649 ctx.lineTo(x2, y2);
|
|
|
650 ctx.strokeStyle = '#555';
|
|
|
651 ctx.stroke();
|
|
|
652 }
|
|
|
653
|
|
|
654 this.remove = function() {
|
|
|
655 $(this.leftDiv).remove();
|
|
|
656 $(this.rightDiv).remove();
|
|
|
657 $(this.centerDiv).remove();
|
|
|
658 $(this.centerDivOl).remove();
|
|
|
659 };
|
|
|
660
|
|
|
661 };
|
