Permalink
osm-maxheight-map/js/map.js
Newer
100644
828 lines (677 sloc)
29 KB
1
2
var map;
3
4
//TODO: create settings instead
5
var _global_showLabel = false;
6
var _global_opacity = 0.7; // value range 0..1
7
var _global_maxheight = 4.0;
8
var _global_maxweight = 7.5;
9
var _global_classicStyle = false;
10
var _global_timeout = 20;
11
12
var _global_server = 'http://dev.overpass-api.de/api_mmd_test_only/';
13
var _global_seg_x = 1;
14
var _global_seg_y = 1;
15
17
var _global_seg_x = undefined;
18
var _global_seg_y = undefined;
21
var _global_date = new Date();
22
23
var epsg4326;
24
var epsg900913;
25
26
function initMap(div_id){
27
28
epsg4326 = new OpenLayers.Projection("EPSG:4326");
29
epsg900913 = new OpenLayers.Projection("EPSG:900913");
30
31
32
(function() {
33
34
var lang = getParam("lang");
35
if (lang != "") {
36
OpenLayers.Lang.setCode(lang);
37
} else {
38
OpenLayers.Lang.setCode("de");
39
if (_global_languages != undefined && _global_languages.length > 0) {
40
OpenLayers.Lang.setCode(_global_languages[0]["code"]);
41
} else {
42
OpenLayers.Lang.setCode("de");
43
}
44
}
45
46
switch (getParam("label")) {
47
48
case "T": _global_showLabel = true; break;
49
case "F": _global_showLabel = false; break;
50
default: _global_showLabel = false;
51
52
}
53
54
switch (getParam("style")) {
55
56
case "point": _global_classicStyle = true; break;
57
case "line": _global_classicStyle = false; break;
58
default: _global_classicStyle = false;
59
}
60
61
var opacity = getParam("opacity"); // value range 0..100
62
if (isNumber(opacity)) {
63
opacity = Math.floor(opacity);
64
if (opacity >= 0 && opacity <= 100)
65
_global_opacity = opacity / 100;
66
}
67
68
var timeout = getParam("timeout"); // override timeout for expensive overpass api calls
69
if (isNumber(timeout)) {
70
timeout = Math.floor(timeout);
71
if (timeout >= 1 && timeout <= 300)
72
_global_timeout = timeout;
73
}
74
75
var server = getParam("server");
76
if (isNumber(server)) {
77
switch (server) {
78
case "1": _global_server = 'https://overpass-api.de/api/'; break;
79
case "2": _global_server = 'https://overpass.osm.rambler.ru/cgi/'; break;
80
case "3": _global_server = 'https://api.openstreetmap.fr/oapi/'; break;
81
case "7": _global_server = 'https://dev.overpass-api.de/api_drolbr/'; break;
82
case "8": _global_server = 'https://dev.overpass-api.de/api_mmd/'; break;
83
case "9": _global_server = 'http://localhost/api/'; break;
88
var dateParam = getParam("date"); // date in format YYYY-MM-DD
89
if (/\d{4}-\d{2}-\d{2}/i.test(dateParam)) {
90
var comp = dateParam.split('-');
91
var _y = parseInt(comp[0], 10);
92
var _m = parseInt(comp[1], 10);
93
var _d = parseInt(comp[2], 10);
94
var date = new Date(_y,_m-1,_d);
95
if (date.getFullYear() == _y &&
96
date.getMonth() + 1 == _m &&
97
date.getDate() == _d) {
98
_global_date = date;
99
}
100
}
101
102
var seg_x = getParam("segx");
103
if (isNumber(seg_x)) {
104
seg_x = Math.floor(seg_x);
105
if (seg_x >= 1 && seg_x <= 8)
106
_global_seg_x = seg_x;
107
}
108
109
var seg_y = getParam("segy");
110
if (isNumber(seg_y)) {
111
seg_y = Math.floor(seg_y);
112
if (seg_y >= 1 && seg_y <= 8)
113
_global_seg_y = seg_y;
116
})();
117
118
$('#mystyle').buttonset();
119
$('#mystyle').find('input')
120
.removeProp('checked')
121
.filter('[value="' + (_global_classicStyle ? 'point' : 'line') + '"]')
122
.prop('checked',true)
123
.end()
124
.end()
125
.buttonset('refresh');
126
127
$('[data-translate-text]').each(function() {
128
$(this).text(OpenLayers.i18n($(this).data('translate-text')));
129
});
130
131
$('[data-translate-title]').each(function() {
132
$(this).prop('title',OpenLayers.i18n($(this).data('translate-title')));
133
});
134
135
$('[data-translate-button]').each(function() {
136
$(this).button( "option", "label", OpenLayers.i18n($(this).data('translate-button')));
137
});
138
139
$('#search').prop('placeholder', OpenLayers.i18n('search'));
142
$( "#datepicker").datepicker("setDate", _global_date);
143
144
OpenLayers.ImgPath = "js/lib/OpenLayers/theme/dark/";
145
146
147
map = new OpenLayers.Map("map", {
148
div: div_id,
149
projection : new OpenLayers.Projection("EPSG:3857"),
150
displayProjection : new OpenLayers.Projection("EPSG:4326"),
151
units : "m",
152
resolutions : [ 156543.03390000001, 78271.516950000005,
153
39135.758475000002, 19567.879237500001, 9783.9396187500006,
154
4891.9698093750003, 2445.9849046875001, 1222.9924523437501,
155
611.49622617187504, 305.74811308593752, 152.87405654296876,
156
76.43702827148438, 38.21851413574219, 19.109257067871095,
157
9.5546285339355475, 4.7773142669677737, 2.3886571334838869,
158
1.1943285667419434, 0.59716428337097172, 0.29858214168548586 ],
159
maxResolution : 156543.0339,
160
maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,
161
20037508.34, 20037508.34),
162
controls : []
163
} );
164
165
// ----------------------------------------------------------------------------
166
// Map layers
167
//----------------------------------------------------------------------------
168
169
var osmLayer = new OpenLayers.Layer.OSM("Mapnik", null, {
175
map.addLayer (new OpenLayers.Layer.XYZ(OpenLayers.i18n("frenchstyle"),
176
[ "https://a.tile.openstreetmap.fr/osmfr/${z}/${x}/${y}.png",
177
"https://b.tile.openstreetmap.fr/osmfr/${z}/${x}/${y}.png",
178
"https://c.tile.openstreetmap.fr/osmfr/${z}/${x}/${y}.png"],
180
attribution: '© Openstreetmap France | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}));
182
183
map.addLayer (new OpenLayers.Layer.XYZ(OpenLayers.i18n("germanstyle"),
184
[ "https://a.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png",
185
"https://b.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png",
186
"https://c.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png",
187
"https://d.tile.openstreetmap.de/tiles/osmde/${z}/${x}/${y}.png"],
189
attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, <a href="https://www.openstreetmap.de/germanstyle.html" target="_blank">About style</a>'}));
193
[ 'https://api.thunderforest.com/cycle/${z}/${x}/${y}.png'],
194
{ transitionEffect : "resize",
195
buffer : 0,
196
numZoomLevels : 18,
197
attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, Tiles courtesy of <a href="https://www.opencyclemap.org/" target="_blank">Andy Allan</a>' }));
198
199
map.addLayer(new OpenLayers.Layer.OSM.Toolserver('Hike & Bike','hikebike'));
200
map.addLayer(new OpenLayers.Layer.OSM.Toolserver('Mapnik B&W','bw-mapnik'));
201
map.addLayer(new OpenLayers.Layer.OSM.Toolserver('Mapnik no labels','osm-no-labels'));
202
203
var geolocate = new OpenLayers.Control.Geolocate({
204
id: 'locate-control',
205
geolocationOptions: {
206
enableHighAccuracy: true,
207
maximumAge: 15000,
208
timeout: 7000
209
}
210
});
211
212
var vector = new OpenLayers.Layer.Vector("Vector Layer", { displayInLayerSwitcher: false });
213
214
var olMaxheightLayer = make_layer(_global_server, '[timeout:5];' +
215
'node(bbox)[maxheight][!waterway][!"waterway:sign"][!"seamark:type"]["obstacle"!="bridge"];out;' +
216
'node(bbox)["maxheight:physical"][!waterway][!"waterway:sign"][!"seamark:type"]["obstacle"!~"bridge"];out;' +
217
'(way(bbox)[maxheight][highway];>;);out;' +
218
'(way(bbox)[maxheight][amenity=parking];>;);out;' +
219
'(way(bbox)["maxheight:physical"][highway];>;);out;',
220
OpenLayers.i18n('maxheight'), getMaxheightStyleMap (), [featureFilterSimplifyLineString], false);
221
222
olMaxheightLayer.setVisibility(false);
223
224
var olCoveredLayer = make_layer(_global_server, '[timeout:5];' +
225
'(way(bbox)["covered"="yes"]["highway"~"^((primary|secondary|tertiary|trunk)(_link)?|service|residential|unclassified)$"][!maxheight][!"maxheight:physical"];>;);out;',
226
OpenLayers.i18n('covered'), getSingleColorStyleMap ('red'), [featureFilterMaxheightIsSetOnNode,featureFilterSimplifyLineString], false);
227
228
olCoveredLayer.setVisibility(false);
229
230
231
var olTunnelLayer = make_layer(_global_server, '[timeout:5];' +
232
'(way(bbox)["tunnel"~"^(yes|building_passage)$"]["highway"~"^((primary|secondary|tertiary|trunk)(_link)?|service|residential|unclassified)$"][!maxheight][!"maxheight:physical"][man_made!~"adit"];>;);out;',
233
OpenLayers.i18n('tunnel'), getSingleColorStyleMap ('red'), [featureFilterMaxheightIsSetOnNode,featureFilterSimplifyLineString], false);
234
235
olTunnelLayer.setVisibility(false);
236
237
var query_railwaylayer = '((way({{bbox}})["bridge"~"^(yes|viaduct)$"][railway];' +
238
'way(around:0)["highway"~"^((primary|secondary|tertiary|trunk)(_link)?|service|residential|unclassified)$"]' +
239
'[!maxheight][!"maxheight:physical"][!tunnel];);>;);';
240
241
var olRailwayLayer = make_large_layer(_global_server, query_railwaylayer,
242
OpenLayers.i18n('railway'), getRailwayStyleMap (), [featureFilterIntersection,featureFilterSimplifyLineString], true, 11);
243
244
olRailwayLayer.setVisibility(false);
245
olRailwayLayer._suppress_setVisibility_during_init = true;
246
247
248
var query_bridgelayer = '((way({{bbox}})[bridge~"^(yes|viaduct)$"][!railway];way(around:0)' +
249
'[highway~"^((primary|secondary|tertiary|trunk)(_link)?|service|residential|unclassified)$"]' +
250
'[!maxheight][!"maxheight:physical"][!tunnel];);>;);';
251
252
var olBridgeLayer = make_large_layer(_global_server, query_bridgelayer,
253
OpenLayers.i18n('waybelowbridge'), getMarkBridgeStyleMap(), [featureFilterIntersection,featureFilterSimplifyLineString], true, 11);
254
255
olBridgeLayer.setVisibility(false);
256
olBridgeLayer._suppress_setVisibility_during_init = true;
257
258
// combined bridge layer merges queries of the two layers olBridgeLayer + olRailwayLayer into one single query (performance)
259
var query_combined_bridgelayer = '((way({{bbox}})[bridge~"^(yes|viaduct)$"];way(around:0)' +
260
'[highway~"^((primary|secondary|tertiary|trunk)(_link)?|service|residential|unclassified)$"]' +
261
'[!maxheight][!"maxheight:physical"][!tunnel];);>;);';
262
263
var olCombinedBridgeLayer = make_large_layer(_global_server, query_combined_bridgelayer,
264
'(combined bridge layer)', getMarkCombinedBridgeStyleMap(), [featureFilterIntersection,featureFilterSimplifyLineString], true, 11);
265
266
olCombinedBridgeLayer.setVisibility(false);
267
olCombinedBridgeLayer.displayInLayerSwitcher = false;
268
olCombinedBridgeLayer._postprocess_setVisibility_during_init = true;
269
270
271
// Ito hgv routing layer clone
272
var olHGVLayer = make_layer(_global_server, '[timeout:5];' +
273
'(way(bbox)[highway][hgv];>;);out;' +
274
'(way(bbox)[highway][hazmat];>;);out;' +
275
'(way(bbox)[highway]["hazmat:forward"];>;);out;' +
276
'(way(bbox)[highway]["hazmat:backward"];>;);out;' +
277
'(way(bbox)[highway]["hazmat:water"];>;);out;',
278
OpenLayers.i18n('ito'), getHGVRoutingStyleMap (), [featureFilterSimplifyLineString], false);
279
olHGVLayer.setVisibility(false);
280
281
// Maxspeed for hgv
282
var olHGVMaxspeedLayer = make_layer(_global_server, '[timeout:5];' +
283
'(way(bbox)[highway]["maxspeed:hgv"];>;);out;',
284
OpenLayers.i18n('maxspeedhgv'), getHGVMaxspeedStyleMap (), [featureFilterSimplifyLineString], false);
285
olHGVMaxspeedLayer.setVisibility(false);
286
287
// Maxweight
288
var olMaxweightLayer = make_layer(_global_server, '[timeout:5];' +
289
'node(bbox)["maxweight"];out;' +
290
'(way(bbox)[highway]["maxweight"];>;);out;' +
291
'(way(bbox)[highway]["maxweight:hgv"];>;);out;' +
292
'(way(bbox)[highway]["maxweightrating"];>;);out;' +
293
'(way(bbox)[highway]["maxweight:forward"];>;);out;' +
294
'(way(bbox)[highway]["maxweight:backward"];>;);out;' +
295
'(way(bbox)[amenity=parking]["maxweight"];>;);out;' +
296
'(way(bbox)[amenity=parking]["maxweight:hgv"];>;);out;' +
297
'(way(bbox)[amenity=parking]["maxweightrating"];>;);out;',
298
OpenLayers.i18n('maxweight'), getMaxweightStyleMap (), [featureFilterSimplifyLineString], false);
299
300
olMaxweightLayer.setVisibility(false);
301
302
// Maxaxleload
303
var olMaxaxleloadLayer = make_layer(_global_server, '[timeout:5];' +
304
'node(bbox)[maxaxleload];out;' +
305
'(way(bbox)[highway][maxaxleload];>;);out;',
306
OpenLayers.i18n('maxaxleload'), getMaxaxleloadStyleMap (), [featureFilterSimplifyLineString], false);
307
308
olMaxaxleloadLayer.setVisibility(false);
309
310
// Maxwidth
311
var olMaxwidthLayer = make_layer(_global_server, '[timeout:5];' +
312
'node(bbox)[maxwidth][!"waterway:sign"][!"seamark:type"]["obstacle"!~"bridge"][!"river:waterway_distance"];out;' +
313
'(way(bbox)[highway][maxwidth];>;);out;' +
314
'(way(bbox)[amenity=parking][maxwidth];>;);out;',
315
OpenLayers.i18n('maxwidth'), getMaxwidthStyleMap (), [featureFilterSimplifyLineString], false);
316
317
olMaxwidthLayer.setVisibility(false);
318
319
// Maxlength
320
var olMaxlengthLayer = make_layer(_global_server, '[timeout:5];' +
321
'node(bbox)[maxlength];out;' +
322
'(way(bbox)[highway][maxlength];>;);out;' +
323
'(way(bbox)[amenity=parking][maxlength];>;);out;',
324
OpenLayers.i18n('maxlength'), getMaxlengthStyleMap (), [featureFilterSimplifyLineString], false);
325
326
olMaxlengthLayer.setVisibility(false);
327
328
// Toll (toll, toll:n3, toll:hgv, barrier=toll_booth)
329
var olTollLayer = make_large_layer(_global_server, '[timeout:5];' +
330
'node(bbox)["barrier"="toll_booth"];out;' +
331
'(way(bbox)["barrier"="toll_booth"];>;);out;' +
332
'(way(bbox)[highway][toll];>;);out;' +
333
'(way(bbox)[highway]["toll:hgv"];>;);out;' +
334
'(way(bbox)[highway]["toll:N3"];>;);out;' +
335
'(way(bbox)[highway]["toll:n3"];>;);out;',
336
OpenLayers.i18n('toll'), getTollStyleMap (), [featureFilterSimplifyLineString], false, 8);
337
338
olTollLayer.setVisibility(false);
339
340
// Add waiting cursor for slow layers
341
342
// Railway
343
olRailwayLayer.events.register("loadstart", map, function() {
344
$('html').addClass('busy');
345
olRailwayLayer._loading = true;
346
});
347
348
olRailwayLayer.events.register("loadend", map, function() {
349
if (!olBridgeLayer.visibility || !olBridgeLayer._loading)
350
$('html').removeClass('busy');
351
olRailwayLayer._loading = false;
352
});
353
354
// Bridge
355
olBridgeLayer.events.register("loadstart", map, function() {
356
$('html').addClass('busy');
357
olBridgeLayer._loading = true;
358
});
359
360
olBridgeLayer.events.register("loadend", map, function() {
361
if (!olRailwayLayer.visibility || !olRailwayLayer._loading)
362
$('html').removeClass('busy');
363
olBridgeLayer._loading = false;
364
});
365
366
367
// Combined Railway + Bridge
368
olCombinedBridgeLayer.events.register("loadstart", map, function() {
369
$('html').addClass('busy');
370
olCombinedBridgeLayer._loading = true;
371
});
372
373
olCombinedBridgeLayer.events.register("loadend", map, function() {
374
$('html').removeClass('busy');
375
olCombinedBridgeLayer._loading = false;
376
});
377
378
// Deactivate all HTTP loading initially (reactivated in changelayer event handler)
379
olRailwayLayer.strategies[0].deactivate();
380
olBridgeLayer.strategies[0].deactivate();
381
olCombinedBridgeLayer.strategies[0].deactivate();
382
383
// Adding layers to map
384
385
map.addLayers([olMaxheightLayer, olMaxwidthLayer, olMaxlengthLayer,
386
olMaxweightLayer, olMaxaxleloadLayer,
387
olHGVMaxspeedLayer,olHGVLayer, olTollLayer,
388
olCoveredLayer,olTunnelLayer,
389
olRailwayLayer,olBridgeLayer,olCombinedBridgeLayer]);
390
391
map.addLayer(vector);
392
393
var olLayerSelect = new OpenLayers.Control.SelectFeature(
394
[olMaxheightLayer,olHGVLayer, olHGVMaxspeedLayer,
395
olMaxweightLayer, olMaxaxleloadLayer,
396
olMaxwidthLayer, olMaxlengthLayer, olTollLayer],
397
{
398
hover : true,
399
overFeature : function( feature ) {
400
var status = [];
401
var k;
402
403
var keys = [ "maxheight", "maxheight:physical", "maxwidth",
404
"maxlength", "maxweight", "maxweight:hgv", "maxweightrating",
405
"maxaxleload", "toll",
407
"toll:n3", "toll:hgv", "maxspeed:hgv", "fee",
408
"hazmat:forward", "hazmat:backward",
409
"maxweight:forward", "maxweight:backward"];
410
411
for (var i = 0; i < keys.length; i++) {
412
k = keys[i];
413
if (!(feature.attributes[k] == undefined))
414
status.push(k + "=" + feature.attributes[k]);
415
}
416
417
var t = status.join(", ");
418
setStatusText2 (t);
419
},
420
outFeature : function (feature) { setStatusText2 ( '' ); }
421
}
422
);
423
424
var permalink = new OpenLayers.Control.PermalinkCustom('permlink');
425
426
map.addControls([new OpenLayers.Control.Navigation(),
427
// new OpenLayers.Control.PanZoomBar({panIcons: false}),
428
new OpenLayers.Control.Zoom(),
429
new OpenLayers.Control.LayerSwitcher({
430
div: document.getElementById("layerswitcher"),
431
roundedCorner: false
432
}),
433
permalink,
434
geolocate,
435
new OpenLayers.Control.Attribution({div: document.getElementById("attribution")}),
436
new OpenLayers.Control.ScaleLine({
437
div: document.getElementById('scaleline'),
438
geodesic: true,
439
bottomInUnits: ""
440
}),
441
new OpenLayers.Control.MousePosition({
442
div: document.getElementById("mousepos"),
443
numDigits: 4
444
}),
445
new OpenLayers.Control.KeyboardDefaults(),
446
olLayerSelect]);
447
448
olLayerSelect.activate();
449
450
451
map.events.register("movestart", map, function(evt) {
452
// kill running overpass api query for two slow layers
453
if ((olRailwayLayer.visibility && olRailwayLayer._loading) ||
454
(olBridgeLayer.visibility && olBridgeLayer._loading) ||
455
(olCombinedBridgeLayer.visibility && olCombinedBridgeLayer._loading)) {
456
killMyQueries([olRailwayLayer, olBridgeLayer, olCombinedBridgeLayer]);
457
olRailwayLayer.removeAllFeatures({silent: false});
458
olBridgeLayer.removeAllFeatures({silent: false});
459
olCombinedBridgeLayer.removeAllFeatures({silent: false});
460
}
461
map.updateStatusLine();
462
});
463
464
465
map.events.register("zoomend", map, function(evt) {
466
//avoid non-discrete zoom level (looks ugly)
467
if (Math.round(map.zoom) != map.zoom)
468
map.zoomTo(Math.round(map.zoom));
469
/*
470
// kill running overpass api query for two slow layers
471
if ((olRailwayLayer.visibility && olRailwayLayer._loading) ||
472
(olBridgeLayer.visibility && olBridgeLayer._loading) ||
473
(olCombinedBridgeLayer.visibility && olCombinedBridgeLayer._loading)) {
474
killMyQueries([olRailwayLayer, olBridgeLayer, olCombinedBridgeLayer]);
475
olRailwayLayer.removeAllFeatures({silent: false});
476
olBridgeLayer.removeAllFeatures({silent: false});
477
olCombinedBridgeLayer.removeAllFeatures({silent: false});
478
}
479
map.updateStatusLine();
480
*/
481
});
482
483
map.events.register("changelayer", map, function(evt) {
484
map.updateStatusLine();
485
updateLocation();
486
map.baseLayer.setOpacity(_global_opacity);
487
488
if (olMaxweightLayer.visibility ||
489
olMaxheightLayer.visibility) {
490
$('#simulationwidget').show("blind",300);
491
} else {
492
$('#simulationwidget').hide("blind",300);
493
}
494
495
$("#export_gpx").button( olRailwayLayer.visibility ||
496
olBridgeLayer.visibility ||
497
olCombinedBridgeLayer.visibility ||
498
olCoveredLayer.visibility ||
499
olTunnelLayer.visibility
500
? "enable" : "disable");
501
502
if (olRailwayLayer.visibility && olBridgeLayer.visibility) {
503
olCombinedBridgeLayer.setVisibility(true);
504
olRailwayLayer.removeAllFeatures({silent: false});
505
olBridgeLayer.removeAllFeatures({silent: false});
506
olRailwayLayer.strategies[0].deactivate();
507
olBridgeLayer.strategies[0].deactivate();
508
olCombinedBridgeLayer.strategies[0].activate();
509
}
510
else {
511
olCombinedBridgeLayer.setVisibility(false);
512
olCombinedBridgeLayer.removeAllFeatures({silent: false});
513
olRailwayLayer.strategies[0].activate();
514
olBridgeLayer.strategies[0].activate();
515
olCombinedBridgeLayer.strategies[0].deactivate();
516
}
517
518
});
519
520
map.events.register("moveend", map, function() {
521
updateLocation();
522
});
523
524
map.events.register("touchend", map, function() {
525
updateLocation();
526
});
527
528
map.addControl (new OpenLayers.Control.Maplink(
529
"josm",
530
"http://127.0.0.1:8111/load_and_zoom",
531
{label:"JOSM", target: "hiddenIframe", format: "trbl", id: "josm" }
532
));
533
534
map.addControl (new OpenLayers.Control.Maplink(
535
"ideditor",
537
{target: "_blank" }
538
));
539
540
var smartPopup = new SmartPopup(map);
541
var smartPopupLayers = [olMaxheightLayer, olMaxwidthLayer, olMaxlengthLayer,
542
olMaxweightLayer, olMaxaxleloadLayer,
543
olHGVLayer,olHGVMaxspeedLayer, olTollLayer,
544
olCoveredLayer,olTunnelLayer,
545
olRailwayLayer, olBridgeLayer, olCombinedBridgeLayer];
546
547
for (var i=0; i<smartPopupLayers.length; i++)
548
smartPopup.addLayer(smartPopupLayers[i]);
549
550
var labelSwitch = new OpenLayers.Control ({
551
552
id: 'labelSwitch',
553
554
div: document.getElementById('labelSwitch'),
555
556
allowSelection: true,
557
558
draw:function(){
559
560
OpenLayers.Control.prototype.draw.apply(this,arguments);
561
if(!this.element){
562
563
this.element = $('<div/>')
564
.html(OpenLayers.i18n("showlabel"))
565
.prop('title',OpenLayers.i18n("showlabeltitle"))
566
.addClass('labelSwitch blue')
567
.button()
568
.click(function(evt) {
569
_global_showLabel = !_global_showLabel;
570
permalink.updateLink();
571
var visibleLayers = window.map.getLayersBy("visibility", true);
572
for (var i = 0; i < visibleLayers.length; i++) {
573
var v = visibleLayers[i];
574
if (v.features!=undefined)
575
v.redraw(); // TODO: find something better to avoid reloading data
576
}
577
});
578
579
this.element.control=this;
580
this.div.appendChild(this.element[0]);
581
582
}
583
return this.div;
584
}
585
});
586
587
map.addControl (labelSwitch);
588
589
590
if (!map.getCenter()) {
591
592
var cookietext = readCookie('_osm_location');
593
if (cookietext) {
594
var cb = cookietext.split('|');
595
var centre = lonLatToMercator( new OpenLayers.LonLat(cb[0], cb[1]));
596
var zoom = cb[2];
597
var layers = cb[3];
598
layers = layers.substring(0,20); // support old cookie format
599
map.setCenter(centre, zoom);
600
setMapLayers(layers);
601
602
603
} else {
604
var bounds_sample = undefined;
605
var scenario = Math.floor(Math.random()*4);
606
607
// Empty screens are boring, pick one out of 4 demo scenarios
608
switch (scenario) {
609
610
case 0:
611
bounds_sample = new OpenLayers.Bounds( -1.9153118133544922,52.46680857125433,-1.8573760986328125,52.47656969731401); // Birmingham
612
break;
613
case 1:
614
bounds_sample = new OpenLayers.Bounds( 13.365211486816406,52.49333767181167,13.481082916259766,52.53282722492755); // Berlin
615
break;
616
case 2:
617
bounds_sample = new OpenLayers.Bounds( 7.053565979003906,50.71108024481508,7.169437408447266,50.75215134593283); // Bonn
618
break;
619
case 3:
620
bounds_sample = new OpenLayers.Bounds( 6.946878433227539,50.922000764325134,6.986875534057617,50.94244824596977); // Köln
621
break;
622
}
623
624
map.zoomToExtent(bounds_sample.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()));
625
626
switch (scenario) {
627
case 0:
628
olCombinedBridgeLayer.visibility = true;
629
break;
630
case 1:
631
olMaxheightLayer.setVisibility(true);
632
break;
633
case 2:
634
olMaxheightLayer.setVisibility(true);
635
break;
636
case 3:
637
olCombinedBridgeLayer.visibility = true;
638
break;
639
}
640
641
642
// Jump to geolocation if available
643
/*
644
if (navigator.geolocation) {
645
window.navigator.geolocation.getCurrentPosition(function(pos) {
646
var lonLat = new OpenLayers.LonLat(pos.coords.longitude, pos.coords.latitude)
647
.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
648
map.setCenter(lonLat, 14);
649
});
650
}
651
*/
652
}
653
}
654
655
if (olCombinedBridgeLayer.visibility == true) {
656
olRailwayLayer.visibility = true; // hack: avoid changelayer event
657
olBridgeLayer.visibility = true;
658
olCombinedBridgeLayer.visibility = false;
659
olCombinedBridgeLayer.setVisibility(true);
660
}
661
662
map.baseLayer.setOpacity(_global_opacity);
663
$('#maxheight_value').text((_global_maxheight).toFixed(2) + " m");
664
$('#maxweight_value').text((_global_maxweight).toFixed(1) + " t");
665
666
$("#slider").slider({
667
min : 0,
668
max : 1,
669
step : 0.01,
670
range: "min",
671
value: _global_opacity,
672
slide: function(event, ui) {
673
var value = Math.floor(0.8 * 255 + (1-ui.value) * 255 * 0.2);
674
var hex = value.toString(16);
675
if (hex.length == 1)
676
hex = "0" + hex;
677
$("#slider .ui-slider-range").css('background', '#'+hex+hex+hex);
678
},
679
change : function(event, ui) {
680
_global_opacity = ui.value;
681
permalink.updateLink();
682
map.baseLayer.setOpacity(ui.value);
683
}
684
});
685
686
$("#slider_maxheight").slider({
687
min : 1,
688
max : 4,
689
step : 0.05,
690
value: _global_maxheight,
691
slide: function(event, ui) {
692
$('#maxheight_value').text((ui.value).toFixed(2) + " m");
693
},
694
change : function(event, ui) {
695
_global_maxheight = ui.value;
696
$('#maxheight_value').text((ui.value).toFixed(2) + " m");
697
// permalink.updateLink();
698
olMaxheightLayer.redraw();
699
}
700
});
701
702
$("#slider_maxweight").slider({
703
min : 1,
704
max : 30,
705
step : 0.1,
706
value: _global_maxweight,
707
slide: function(event, ui) {
708
$('#maxweight_value').text((ui.value).toFixed(1) + " t");
709
},
710
change : function(event, ui) {
711
_global_maxweight = ui.value;
712
$('#maxweight_value').text((ui.value).toFixed(1) + " t");
713
// permalink.updateLink();
714
olMaxweightLayer.redraw();
715
}
716
});
717
718
geolocate.events.register("locationfailed", this, function(e) {
719
vector.removeAllFeatures();
720
geolocate.deactivate();
721
$('#track').prop('checked', false);
722
$('#track').button("refresh");
723
jqAlert(e.error.message, function() { /* do nothing */});
724
return;
725
});
726
727
geolocate.events.register("locationuncapable", this, function(e) {
728
vector.removeAllFeatures();
729
geolocate.deactivate();
730
$('#track').prop('checked', false);
731
$('#track').button("refresh");
732
jqAlert(e.error.message, function() { /* do nothing */});
733
return;
734
});
735
736
geolocate.events.register("locationupdated", this, function(e) {
737
var circlestyle = {
738
fillOpacity: 0.1,
739
fillColor: '#000',
740
strokeColor: '#f00',
741
strokeOpacity: 0.6
742
};
743
744
var crossstyle = {
745
graphicName : 'cross',
746
strokeColor : '#f00',
747
strokeWidth : 1,
748
fillOpacity : 0,
749
pointRadius : 10
750
};
751
752
vector.removeAllFeatures();
753
vector.addFeatures([
754
new OpenLayers.Feature.Vector(e.point, {}, crossstyle),
755
new OpenLayers.Feature.Vector(OpenLayers.Geometry.Polygon
756
.createRegularPolygon(new OpenLayers.Geometry.Point(
757
e.point.x, e.point.y),
758
e.position.coords.accuracy / 2, 50, 0), {},
759
circlestyle) ]);
760
map.zoomToExtent(vector.getDataExtent());
761
});
762
763
$('#locate').on('click', function(event) {
764
vector.removeAllFeatures();
765
geolocate.deactivate();
766
$('#track').prop('checked', false);
767
$('#track').button("refresh");
768
geolocate.watch = false;
769
firstGeolocation = true;
770
geolocate.activate();
771
});
772
773
$('#track').on('click', function(event) {
774
vector.removeAllFeatures();
775
geolocate.deactivate();
776
if (this.checked) {
777
geolocate.watch = true;
778
firstGeolocation = true;
779
geolocate.activate();
780
}
781
});
782
783
$('#export_gpx').on('click', function(event) {
784
exportGPX([olCoveredLayer, olTunnelLayer], [olRailwayLayer, olBridgeLayer, olCombinedBridgeLayer]);
785
});
786
787
$('#track').prop('checked', false);
788
789
$('#mystyle').find('input').change(function(e) {
790
switch ($(this).val()) {
791
case "line":
792
_global_classicStyle = false;
793
olRailwayLayer.strategies[1].deactivate();
794
olBridgeLayer.strategies[1].deactivate();
795
olCombinedBridgeLayer.strategies[1].deactivate();
796
break;
797
case "point":
798
_global_classicStyle = true;
799
olRailwayLayer.strategies[1].activate();
800
olBridgeLayer.strategies[1].activate();
801
olCombinedBridgeLayer.strategies[1].activate();
802
break;
803
}
804
805
$('#mystyle').find('input')
806
.removeProp('checked')
807
.filter('[value="' + (_global_classicStyle ? 'point' : 'line') + '"]')
808
.prop('checked',true)
809
.end()
810
.end()
811
.buttonset('refresh');
812
813
permalink.updateLink();
814
815
olRailwayLayer.refresh({force:true});
816
olBridgeLayer.refresh({force:true});
817
olCombinedBridgeLayer.refresh({force:true});
818
map.updateSize();
819
820
});
821
822
}
823
824
//var query_bridgelayer = '[timeout:' + _global_timeout + '];' +
825
//'((way(bbox)["bridge"~"^(yes|viaduct)$"]["railway"!~"."];way(around:0)["highway"~"^((primary|secondary|tertiary|trunk)(_link)?|service|residential|unclassified)$"][maxheight!~"."]["maxheight:physical"!~"."]["tunnel"!~"."]);>;);out;'
826
827
//var query_railwaylayer = '[timeout:' + _global_timeout + '];' +
828
//'((way(bbox)["bridge"~"^(yes|viaduct)$"][railway];way(around:0)["highway"~"^((primary|secondary|tertiary|trunk)(_link)?|service|residential|unclassified)$"][maxheight!~"."]["maxheight:physical"!~"."]["tunnel"!~"."]);>;);out;'