Check out the latest version of Routino: svn co http://routino.org/svn/trunk routino
Contents of /trunk/web/www/routino/router.js
Parent Directory
|
Revision Log
Revision 1271 -
(show annotations)
(download)
(as text)
Sat Apr 13 10:04:43 2013 UTC (11 years, 11 months ago) by amb
File MIME type: application/javascript
File size: 47513 byte(s)
Sat Apr 13 10:04:43 2013 UTC (11 years, 11 months ago) by amb
File MIME type: application/javascript
File size: 47513 byte(s)
Fix the Javascript so that it works with OpenLayers version 2.11 again (bug reported by Dirk Eversmann).
1 | // |
2 | // Routino router web page Javascript |
3 | // |
4 | // Part of the Routino routing software. |
5 | // |
6 | // This file Copyright 2008-2013 Andrew M. Bishop |
7 | // |
8 | // This program is free software: you can redistribute it and/or modify |
9 | // it under the terms of the GNU Affero General Public License as published by |
10 | // the Free Software Foundation, either version 3 of the License, or |
11 | // (at your option) any later version. |
12 | // |
13 | // This program is distributed in the hope that it will be useful, |
14 | // but WITHOUT ANY WARRANTY; without even the implied warranty of |
15 | // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
16 | // GNU Affero General Public License for more details. |
17 | // |
18 | // You should have received a copy of the GNU Affero General Public License |
19 | // along with this program. If not, see <http://www.gnu.org/licenses/>. |
20 | // |
21 | |
22 | |
23 | var vismarkers, markers, markersmoved, paramschanged; |
24 | var homelat=null, homelon=null; |
25 | |
26 | |
27 | //////////////////////////////////////////////////////////////////////////////// |
28 | /////////////////////////////// Initialisation ///////////////////////////////// |
29 | //////////////////////////////////////////////////////////////////////////////// |
30 | |
31 | // Make a deep copy of the routino profile. |
32 | |
33 | var routino_default={}; |
34 | for(var l1 in routino) |
35 | if(typeof(routino[l1])!='object') |
36 | routino_default[l1]=routino[l1]; |
37 | else |
38 | { |
39 | routino_default[l1]={}; |
40 | for(var l2 in routino[l1]) |
41 | if(typeof(routino[l1][l2])!='object') |
42 | routino_default[l1][l2]=Number(routino[l1][l2]); |
43 | else |
44 | { |
45 | routino_default[l1][l2]={}; |
46 | for(var l3 in routino[l1][l2]) |
47 | routino_default[l1][l2][l3]=Number(routino[l1][l2][l3]); |
48 | } |
49 | } |
50 | |
51 | // Store the latitude and longitude in the routino variable |
52 | |
53 | routino.point=[]; |
54 | for(var marker=1;marker<=mapprops.maxmarkers;marker++) |
55 | { |
56 | routino.point[marker]={}; |
57 | |
58 | routino.point[marker].lon=""; |
59 | routino.point[marker].lat=""; |
60 | routino.point[marker].search=""; |
61 | routino.point[marker].active=false; |
62 | routino.point[marker].used=false; |
63 | routino.point[marker].home=false; |
64 | } |
65 | |
66 | // Process the URL query string and extract the arguments |
67 | |
68 | var legal={"^lon" : "^[-0-9.]+$", |
69 | "^lat" : "^[-0-9.]+$", |
70 | "^zoom" : "^[0-9]+$", |
71 | |
72 | "^lon[1-9]" : "^[-0-9.]+$", |
73 | "^lat[1-9]" : "^[-0-9.]+$", |
74 | "^search[1-9]" : "^.+$", |
75 | "^transport" : "^[a-z]+$", |
76 | "^highway-[a-z]+" : "^[0-9.]+$", |
77 | "^speed-[a-z]+" : "^[0-9.]+$", |
78 | "^property-[a-z]+" : "^[0-9.]+$", |
79 | "^oneway" : "^(1|0|true|false|on|off)$", |
80 | "^turns" : "^(1|0|true|false|on|off)$", |
81 | "^weight" : "^[0-9.]+$", |
82 | "^height" : "^[0-9.]+$", |
83 | "^width" : "^[0-9.]+$", |
84 | "^length" : "^[0-9.]+$", |
85 | |
86 | "^language" : "^[-a-zA-Z]+$"}; |
87 | |
88 | var args={}; |
89 | |
90 | if(location.search.length>1) |
91 | { |
92 | var query,queries; |
93 | |
94 | query=location.search.replace(/^\?/,""); |
95 | query=query.replace(/;/g,'&'); |
96 | queries=query.split('&'); |
97 | |
98 | for(var i=0;i<queries.length;i++) |
99 | { |
100 | queries[i].match(/^([^=]+)(=(.*))?$/); |
101 | |
102 | k=RegExp.$1; |
103 | v=unescape(RegExp.$3); |
104 | |
105 | for(var l in legal) |
106 | { |
107 | if(k.match(RegExp(l)) && v.match(RegExp(legal[l]))) |
108 | args[k]=v; |
109 | } |
110 | } |
111 | } |
112 | |
113 | |
114 | // |
115 | // Fill in the HTML - add the missing waypoints |
116 | // |
117 | |
118 | function html_init() // called from router.html |
119 | { |
120 | var waypoints=document.getElementById("waypoints"); |
121 | |
122 | var waypoint_html=waypoints.rows[0].innerHTML; |
123 | waypoints.deleteRow(0); |
124 | |
125 | var searchresults_html=waypoints.rows[0].innerHTML; |
126 | waypoints.deleteRow(0); |
127 | |
128 | for(var marker=mapprops.maxmarkers;marker>=1;marker--) |
129 | { |
130 | var searchresults=waypoints.insertRow(0); |
131 | |
132 | searchresults.style.display="none"; |
133 | searchresults.id="searchresults" + marker; |
134 | searchresults.innerHTML=searchresults_html.split('XXX').join(marker); |
135 | |
136 | var waypoint=waypoints.insertRow(0); |
137 | |
138 | waypoint.style.display="none"; |
139 | waypoint.id="waypoint" + marker; |
140 | waypoint.innerHTML=waypoint_html.split('XXX').join(marker); |
141 | } |
142 | } |
143 | |
144 | |
145 | //////////////////////////////////////////////////////////////////////////////// |
146 | //////////////////////////////// Form handling ///////////////////////////////// |
147 | //////////////////////////////////////////////////////////////////////////////// |
148 | |
149 | // |
150 | // Form initialisation - fill in the uninitialised parts |
151 | // |
152 | |
153 | function form_init() // called from router.html |
154 | { |
155 | // Fill in the waypoints |
156 | |
157 | vismarkers=0; |
158 | |
159 | for(var marker=mapprops.maxmarkers;marker>=1;marker--) |
160 | { |
161 | var lon=args["lon" + marker]; |
162 | var lat=args["lat" + marker]; |
163 | var search=args["search" + marker]; |
164 | |
165 | if(lon != undefined && lat != undefined && search != undefined && lon != "" && lat != "" && search != "") |
166 | { |
167 | markerAddForm(marker); |
168 | |
169 | formSetSearch(marker,search); |
170 | formSetCoords(marker,lon,lat); |
171 | |
172 | markerAddMap(marker); |
173 | |
174 | markerSearch(marker); |
175 | |
176 | vismarkers++; |
177 | } |
178 | else if(lon != undefined && lat != undefined && lon != "" && lat != "") |
179 | { |
180 | markerAddForm(marker); |
181 | |
182 | formSetCoords(marker,lon,lat); |
183 | |
184 | markerAddMap(marker); |
185 | |
186 | markerCoords(marker); |
187 | |
188 | vismarkers++; |
189 | } |
190 | else if(search != undefined && search != "") |
191 | { |
192 | markerAddForm(marker); |
193 | |
194 | formSetSearch(marker,search); |
195 | |
196 | markerSearch(marker); |
197 | |
198 | DoSearch(marker); |
199 | |
200 | vismarkers++; |
201 | } |
202 | else if(vismarkers || marker<=2) |
203 | { |
204 | markerAddForm(marker); |
205 | |
206 | vismarkers++; |
207 | } |
208 | |
209 | var searchfield=document.forms["form"].elements["search" + marker]; |
210 | |
211 | if(searchfield.addEventListener) |
212 | searchfield.addEventListener('keyup', searchOnReturnKey, false); |
213 | else if(searchfield.attachEvent) |
214 | searchfield.attachEvent('keyup', searchOnReturnKey); // Internet Explorer |
215 | } |
216 | |
217 | // Update the transport type with the URL settings which updates all HTML forms to defaults. |
218 | |
219 | var transport=routino.transport; |
220 | |
221 | if(args["transport"] != undefined) |
222 | transport=args["transport"]; |
223 | |
224 | formSetTransport(transport); |
225 | |
226 | // Update the HTML with the URL settings |
227 | |
228 | if(args["language"] != undefined) |
229 | formSetLanguage(args["language"]); |
230 | |
231 | for(var key in routino.profile_highway) |
232 | if(args["highway-" + key] != undefined) |
233 | formSetHighway(key,args["highway-" + key]); |
234 | |
235 | for(var key in routino.profile_speed) |
236 | if(args["speed-" + key] != undefined) |
237 | formSetSpeed(key,args["speed-" + key]); |
238 | |
239 | for(var key in routino.profile_property) |
240 | if(args["property-" + key] != undefined) |
241 | formSetProperty(key,args["property-" + key]); |
242 | |
243 | for(var key in routino.restrictions) |
244 | { |
245 | if(key=="oneway" || key=="turns") |
246 | { |
247 | if(args[key] != undefined) |
248 | formSetRestriction(key,args[key]); |
249 | } |
250 | else |
251 | { |
252 | if(args["restrict-" + key] != undefined) |
253 | formSetRestriction(key,args["restrict-" + key]); |
254 | } |
255 | } |
256 | |
257 | // Get the home location cookie and compare to each waypoint |
258 | |
259 | var cookies=document.cookie.split('; '); |
260 | |
261 | for(var cookie=0;cookie<cookies.length;cookie++) |
262 | if(cookies[cookie].substr(0,"Routino-home".length)=="Routino-home") |
263 | { |
264 | var data=cookies[cookie].split(/[=:;]/); |
265 | |
266 | if(data[1]=="lon") homelon=Number(data[2]); |
267 | if(data[3]=="lat") homelat=Number(data[4]); |
268 | } |
269 | |
270 | if(homelon!=null && homelat!=null) |
271 | { |
272 | for(var m=1;m<=vismarkers;m++) |
273 | markerCheckHome(m); |
274 | |
275 | // If the first location is empty and the cookie is set then fill it. |
276 | |
277 | if(!routino.point[1].used) |
278 | markerMoveHome(1); |
279 | } |
280 | } |
281 | |
282 | |
283 | // |
284 | // Function to perform the search if the return key is pressed. |
285 | // (using 'onchange' only triggers once and is confusing when clicking outside the field). |
286 | // |
287 | |
288 | function searchOnReturnKey(ev) |
289 | { |
290 | if(ev.keyCode==13) |
291 | if(this.name.match(/^search([0-9]+)$/)) |
292 | formSetSearch(RegExp.$1); |
293 | |
294 | return(true); |
295 | } |
296 | |
297 | |
298 | // |
299 | // Change of language in the form |
300 | // |
301 | |
302 | function formSetLanguage(value) // called from router.html (with no arguments) |
303 | { |
304 | if(value == undefined) |
305 | { |
306 | for(var lang=0;lang<document.forms["form"].elements["language"].length;lang++) |
307 | if(document.forms["form"].elements["language"][lang].checked) |
308 | routino.language=document.forms["form"].elements["language"][lang].value; |
309 | } |
310 | else |
311 | { |
312 | for(var lang=0;lang<document.forms["form"].elements["language"].length;lang++) |
313 | if(document.forms["form"].elements["language"][lang].value==value) |
314 | document.forms["form"].elements["language"][lang].checked=true; |
315 | else |
316 | document.forms["form"].elements["language"][lang].checked=false; |
317 | |
318 | routino.language=value; |
319 | } |
320 | } |
321 | |
322 | |
323 | // |
324 | // Change of transport in the form |
325 | // |
326 | |
327 | function formSetTransport(value) // called from router.html |
328 | { |
329 | routino.transport=value; |
330 | |
331 | for(var key in routino.transports) |
332 | document.forms["form"].elements["transport"][routino.transports[key]-1].checked=(key==routino.transport); |
333 | |
334 | for(var key in routino.profile_highway) |
335 | document.forms["form"].elements["highway-" + key].value=routino.profile_highway[key][routino.transport]; |
336 | |
337 | for(var key in routino.profile_speed) |
338 | document.forms["form"].elements["speed-" + key].value=routino.profile_speed[key][routino.transport]; |
339 | |
340 | for(var key in routino.profile_property) |
341 | document.forms["form"].elements["property-" + key].value=routino.profile_property[key][routino.transport]; |
342 | |
343 | for(var key in routino.restrictions) |
344 | { |
345 | if(key=="oneway" || key=="turns") |
346 | document.forms["form"].elements["restrict-" + key].checked=routino.profile_restrictions[key][routino.transport]; |
347 | else |
348 | document.forms["form"].elements["restrict-" + key].value=routino.profile_restrictions[key][routino.transport]; |
349 | } |
350 | |
351 | paramschanged=true; |
352 | } |
353 | |
354 | |
355 | // |
356 | // Change of highway in the form |
357 | // |
358 | |
359 | function formSetHighway(type,value) // called from router.html (with one argument) |
360 | { |
361 | if(value == undefined) |
362 | routino.profile_highway[type][routino.transport]=document.forms["form"].elements["highway-" + type].value; |
363 | else |
364 | { |
365 | document.forms["form"].elements["highway-" + type].value=value; |
366 | routino.profile_highway[type][routino.transport]=value; |
367 | } |
368 | |
369 | paramschanged=true; |
370 | } |
371 | |
372 | |
373 | // |
374 | // Change of Speed in the form |
375 | // |
376 | |
377 | function formSetSpeed(type,value) // called from router.html (with one argument) |
378 | { |
379 | if(value == undefined) |
380 | routino.profile_speed[type][routino.transport]=document.forms["form"].elements["speed-" + type].value; |
381 | else |
382 | { |
383 | document.forms["form"].elements["speed-" + type].value=value; |
384 | routino.profile_speed[type][routino.transport]=value; |
385 | } |
386 | |
387 | paramschanged=true; |
388 | } |
389 | |
390 | |
391 | // |
392 | // Change of Property in the form |
393 | // |
394 | |
395 | function formSetProperty(type,value) // called from router.html (with one argument) |
396 | { |
397 | if(value == undefined) |
398 | routino.profile_property[type][routino.transport]=document.forms["form"].elements["property-" + type].value; |
399 | else |
400 | { |
401 | document.forms["form"].elements["property-" + type].value=value; |
402 | routino.profile_property[type][routino.transport]=value; |
403 | } |
404 | |
405 | paramschanged=true; |
406 | } |
407 | |
408 | |
409 | // |
410 | // Change of Restriction rule in the form |
411 | // |
412 | |
413 | function formSetRestriction(type,value) // called from router.html (with one argument) |
414 | { |
415 | if(value == undefined) |
416 | { |
417 | if(type=="oneway" || type=="turns") |
418 | routino.profile_restrictions[type][routino.transport]=document.forms["form"].elements["restrict-" + type].checked; |
419 | else |
420 | routino.profile_restrictions[type][routino.transport]=document.forms["form"].elements["restrict-" + type].value; |
421 | } |
422 | else |
423 | { |
424 | if(type=="oneway" || type=="turns") |
425 | document.forms["form"].elements["restrict-" + type].checked=value; |
426 | else |
427 | document.forms["form"].elements["restrict-" + type].value=value; |
428 | |
429 | routino.profile_restrictions[type][routino.transport]=value; |
430 | } |
431 | |
432 | paramschanged=true; |
433 | } |
434 | |
435 | |
436 | // |
437 | // Set the feature coordinates from the form when the form changes. |
438 | // |
439 | |
440 | function formSetCoords(marker,lon,lat) // called from router.html (with one argument) |
441 | { |
442 | clearSearchResult(marker); |
443 | |
444 | if(lon == undefined && lat == undefined) |
445 | { |
446 | lon=document.forms["form"].elements["lon" + marker].value; |
447 | lat=document.forms["form"].elements["lat" + marker].value; |
448 | } |
449 | |
450 | if(lon == "" && lat == "") |
451 | { |
452 | document.forms["form"].elements["lon" + marker].value=""; |
453 | document.forms["form"].elements["lat" + marker].value=""; |
454 | |
455 | routino.point[marker].lon=""; |
456 | routino.point[marker].lat="" |
457 | } |
458 | else |
459 | { |
460 | if(lon=="") |
461 | { |
462 | var lonlat=map.getCenter().clone(); |
463 | lonlat.transform(epsg900913,epsg4326); |
464 | |
465 | lon=lonlat.lon; |
466 | } |
467 | |
468 | if(lon<-180) lon=-180; |
469 | if(lon>+180) lon=+180; |
470 | |
471 | if(lat=="") |
472 | { |
473 | var lonlat=map.getCenter().clone(); |
474 | lonlat.transform(epsg900913,epsg4326); |
475 | |
476 | lat=lonlat.lat; |
477 | } |
478 | |
479 | if(lat<-90 ) lat=-90 ; |
480 | if(lat>+90 ) lat=+90 ; |
481 | |
482 | var lonlat = new OpenLayers.LonLat(lon,lat); |
483 | lonlat.transform(epsg4326,epsg900913); |
484 | |
485 | markers[marker].move(lonlat); |
486 | |
487 | markersmoved=true; |
488 | |
489 | document.forms["form"].elements["lon" + marker].value=format5f(lon); |
490 | document.forms["form"].elements["lat" + marker].value=format5f(lat); |
491 | |
492 | routino.point[marker].lon=lon; |
493 | routino.point[marker].lat=lat; |
494 | routino.point[marker].used=true; |
495 | |
496 | markerCheckHome(marker); |
497 | } |
498 | } |
499 | |
500 | |
501 | // |
502 | // Set the search field from the form when the form changes. |
503 | // |
504 | |
505 | function formSetSearch(marker,search) // called from event handler linked to router.html (with one argument) |
506 | { |
507 | clearSearchResult(marker); |
508 | |
509 | if(search == undefined) |
510 | { |
511 | routino.point[marker].search=document.forms["form"].elements["search" + marker].value; |
512 | |
513 | DoSearch(marker); |
514 | } |
515 | else |
516 | { |
517 | document.forms["form"].elements["search" + marker].value=search; |
518 | |
519 | routino.point[marker].search=search; |
520 | } |
521 | } |
522 | |
523 | |
524 | // |
525 | // Format a number in printf("%.5f") format. |
526 | // |
527 | |
528 | function format5f(number) |
529 | { |
530 | var newnumber=Math.floor(number*100000+0.5); |
531 | var delta=0; |
532 | |
533 | if(newnumber>=0 && newnumber<100000) delta= 100000; |
534 | if(newnumber<0 && newnumber>-100000) delta=-100000; |
535 | |
536 | var string=String(newnumber+delta); |
537 | |
538 | var intpart =string.substring(0,string.length-5); |
539 | var fracpart=string.substring(string.length-5,string.length); |
540 | |
541 | if(delta>0) intpart="0"; |
542 | if(delta<0) intpart="-0"; |
543 | |
544 | return(intpart + "." + fracpart); |
545 | } |
546 | |
547 | |
548 | // |
549 | // Build a set of URL arguments |
550 | // |
551 | |
552 | function buildURLArguments(lang) |
553 | { |
554 | var url= "transport=" + routino.transport; |
555 | |
556 | for(var marker=1;marker<=vismarkers;marker++) |
557 | if(routino.point[marker].active) |
558 | { |
559 | url=url + ";lon" + marker + "=" + routino.point[marker].lon; |
560 | url=url + ";lat" + marker + "=" + routino.point[marker].lat; |
561 | if(routino.point[marker].search != "") |
562 | url=url + ";search" + marker + "=" + encodeURIComponent(routino.point[marker].search); |
563 | } |
564 | |
565 | for(var key in routino.profile_highway) |
566 | if(routino.profile_highway[key][routino.transport]!=routino_default.profile_highway[key][routino.transport]) |
567 | url=url + ";highway-" + key + "=" + routino.profile_highway[key][routino.transport]; |
568 | |
569 | for(var key in routino.profile_speed) |
570 | if(routino.profile_speed[key][routino.transport]!=routino_default.profile_speed[key][routino.transport]) |
571 | url=url + ";speed-" + key + "=" + routino.profile_speed[key][routino.transport]; |
572 | |
573 | for(var key in routino.profile_property) |
574 | if(routino.profile_property[key][routino.transport]!=routino_default.profile_property[key][routino.transport]) |
575 | url=url + ";property-" + key + "=" + routino.profile_property[key][routino.transport]; |
576 | |
577 | for(var key in routino.restrictions) |
578 | if(routino.profile_restrictions[key][routino.transport]!=routino_default.profile_restrictions[key][routino.transport]) |
579 | url=url + ";" + key + "=" + routino.profile_restrictions[key][routino.transport]; |
580 | |
581 | if(lang && routino.language) |
582 | url=url + ";language=" + routino.language; |
583 | |
584 | return(url); |
585 | } |
586 | |
587 | |
588 | // |
589 | // Build a set of URL arguments for the map location |
590 | // |
591 | |
592 | function buildMapArguments() |
593 | { |
594 | var lonlat = map.getCenter().clone(); |
595 | lonlat.transform(epsg900913,epsg4326); |
596 | |
597 | var zoom = map.getZoom() + map.minZoomLevel; |
598 | |
599 | return "lat=" + format5f(lonlat.lat) + ";lon=" + format5f(lonlat.lon) + ";zoom=" + zoom; |
600 | } |
601 | |
602 | |
603 | // |
604 | // Update a URL |
605 | // |
606 | |
607 | function updateURL(element) // called from router.html |
608 | { |
609 | if(element.id == "permalink_url") |
610 | element.href=location.pathname + "?" + buildURLArguments(true) + ";" + buildMapArguments(); |
611 | |
612 | if(element.id == "visualiser_url") |
613 | element.href="visualiser.html" + "?" + buildMapArguments(); |
614 | |
615 | if(element.id == "edit_url") |
616 | element.href="http://www.openstreetmap.org/edit" + "?" + buildMapArguments(); |
617 | |
618 | if(element.id.match(/^lang_([a-zA-Z-]+)_url$/)) |
619 | element.href="router.html" + "." + RegExp.$1 + "?" + buildURLArguments(false) + ";" + buildMapArguments(); |
620 | } |
621 | |
622 | |
623 | //////////////////////////////////////////////////////////////////////////////// |
624 | ///////////////////////////////// Map handling ///////////////////////////////// |
625 | //////////////////////////////////////////////////////////////////////////////// |
626 | |
627 | var map; |
628 | var layerMap=[], layerVectors, layerGPX; |
629 | var epsg4326, epsg900913; |
630 | |
631 | // |
632 | // Initialise the 'map' object |
633 | // |
634 | |
635 | function map_init() // called from router.html |
636 | { |
637 | lon =args["lon"]; |
638 | lat =args["lat"]; |
639 | zoom=args["zoom"]; |
640 | |
641 | // Map URLs and limits are in mapprops.js. |
642 | |
643 | // |
644 | // Create the map |
645 | // |
646 | |
647 | epsg4326=new OpenLayers.Projection("EPSG:4326"); |
648 | epsg900913=new OpenLayers.Projection("EPSG:900913"); |
649 | |
650 | map = new OpenLayers.Map ("map", |
651 | { |
652 | controls:[ |
653 | new OpenLayers.Control.Navigation(), |
654 | new OpenLayers.Control.PanZoomBar(), |
655 | new OpenLayers.Control.ScaleLine(), |
656 | new OpenLayers.Control.LayerSwitcher() |
657 | ], |
658 | |
659 | projection: epsg900913, |
660 | displayProjection: epsg4326, |
661 | |
662 | minZoomLevel: mapprops.zoomout, |
663 | numZoomLevels: mapprops.zoomin-mapprops.zoomout+1, |
664 | maxResolution: 156543.03390625 / Math.pow(2,mapprops.zoomout), |
665 | |
666 | // These two lines are not needed with OpenLayers 2.12 |
667 | units: "m", |
668 | maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), |
669 | |
670 | restrictedExtent: new OpenLayers.Bounds(mapprops.westedge,mapprops.southedge,mapprops.eastedge,mapprops.northedge).transform(epsg4326,epsg900913) |
671 | }); |
672 | |
673 | // Add map tile layers |
674 | |
675 | for(var l=0;l < mapprops.mapdata.length;l++) |
676 | { |
677 | layerMap[l] = new OpenLayers.Layer.TMS(mapprops.mapdata[l].label, |
678 | mapprops.mapdata[l].tileurl, |
679 | { |
680 | getURL: limitedUrl, |
681 | displayOutsideMaxExtent: true, |
682 | buffer: 1 |
683 | }); |
684 | map.addLayer(layerMap[l]); |
685 | } |
686 | |
687 | // Update the attribution if the layer changes |
688 | |
689 | map.events.register("changelayer",layerMap,change_attribution_event); |
690 | |
691 | function change_attribution_event(event) |
692 | { |
693 | for(var l=0;l < mapprops.mapdata.length;l++) |
694 | if(this[l] == event.layer) |
695 | change_attribution(l); |
696 | } |
697 | |
698 | function change_attribution(l) |
699 | { |
700 | var data_url =mapprops.mapdata[l].attribution.data_url; |
701 | var data_text=mapprops.mapdata[l].attribution.data_text; |
702 | var tile_url =mapprops.mapdata[l].attribution.tile_url; |
703 | var tile_text=mapprops.mapdata[l].attribution.tile_text; |
704 | |
705 | document.getElementById("attribution_data").innerHTML="<a href=\"" + data_url + "\" target=\"data_attribution\">" + data_text + "</a>"; |
706 | document.getElementById("attribution_tile").innerHTML="<a href=\"" + tile_url + "\" target=\"tile_attribution\">" + tile_text + "</a>"; |
707 | } |
708 | |
709 | change_attribution(0); |
710 | |
711 | // Get a URL for the tile (mostly copied from OpenLayers/Layer/XYZ.js). |
712 | |
713 | function limitedUrl(bounds) |
714 | { |
715 | var res = map.getResolution(); |
716 | |
717 | var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); |
718 | var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); |
719 | var z = map.getZoom() + map.minZoomLevel; |
720 | |
721 | var limit = Math.pow(2, z); |
722 | x = ((x % limit) + limit) % limit; |
723 | |
724 | var xyz = {'x': x, 'y': y, 'z': z}; |
725 | var url = this.url; |
726 | |
727 | if (OpenLayers.Util.isArray(url)) |
728 | { |
729 | var s = '' + xyz.x + xyz.y + xyz.z; |
730 | url = this.selectUrl(s, url); |
731 | } |
732 | |
733 | return OpenLayers.String.format(url, xyz); |
734 | } |
735 | |
736 | // Define a GPX layer but don't add it yet |
737 | |
738 | layerGPX={shortest: null, quickest: null}; |
739 | |
740 | gpx_style={shortest: new OpenLayers.Style({},{strokeWidth: 3, strokeColor: "#00FF00"}), |
741 | quickest: new OpenLayers.Style({},{strokeWidth: 3, strokeColor: "#0000FF"})}; |
742 | |
743 | // Add a vectors layer |
744 | |
745 | layerVectors = new OpenLayers.Layer.Vector("Markers"); |
746 | map.addLayer(layerVectors); |
747 | |
748 | // A set of markers |
749 | |
750 | markers={}; |
751 | markersmoved=false; |
752 | paramschanged=false; |
753 | |
754 | for(var marker=1;marker<=mapprops.maxmarkers;marker++) |
755 | { |
756 | markers[marker] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0,0),{}, |
757 | new OpenLayers.Style({},{externalGraphic: 'icons/marker-' + marker + '-red.png', |
758 | fillColor: "white", |
759 | graphicYOffset: -25, |
760 | graphicWidth: 21, |
761 | graphicHeight: 25, |
762 | display: "none"})); |
763 | |
764 | layerVectors.addFeatures([markers[marker]]); |
765 | } |
766 | |
767 | // A function to drag the markers |
768 | |
769 | var drag = new OpenLayers.Control.DragFeature(layerVectors, |
770 | {onDrag: dragMove, |
771 | onComplete: dragComplete }); |
772 | map.addControl(drag); |
773 | drag.activate(); |
774 | |
775 | // Markers to highlight a selected point |
776 | |
777 | for(var highlight in highlights) |
778 | { |
779 | highlights[highlight] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0,0),{}, |
780 | new OpenLayers.Style({},{strokeColor: route_dark_colours[highlight], |
781 | fillColor: "white", |
782 | pointRadius: 10, |
783 | strokeWidth: 4, |
784 | fillOpacity: 0, |
785 | display: "none"})); |
786 | |
787 | layerVectors.addFeatures([highlights[highlight]]); |
788 | } |
789 | |
790 | // A popup for routing results |
791 | |
792 | for(var popup in popups) |
793 | popups[popup] = createPopup(popup); |
794 | |
795 | // Set the map centre to the limited range specified |
796 | |
797 | map.setCenter(map.restrictedExtent.getCenterLonLat(), map.getZoomForExtent(map.restrictedExtent,true)); |
798 | map.maxResolution = map.getResolution(); |
799 | |
800 | // Move the map |
801 | |
802 | if(lon != undefined && lat != undefined && zoom != undefined) |
803 | { |
804 | if(lon<mapprops.westedge) lon=mapprops.westedge; |
805 | if(lon>mapprops.eastedge) lon=mapprops.eastedge; |
806 | |
807 | if(lat<mapprops.southedge) lat=mapprops.southedge; |
808 | if(lat>mapprops.northedge) lat=mapprops.northedge; |
809 | |
810 | if(zoom<mapprops.zoomout) zoom=mapprops.zoomout; |
811 | if(zoom>mapprops.zoomin) zoom=mapprops.zoomin; |
812 | |
813 | var lonlat = new OpenLayers.LonLat(lon,lat); |
814 | lonlat.transform(epsg4326,epsg900913); |
815 | |
816 | map.moveTo(lonlat,zoom-map.minZoomLevel); |
817 | } |
818 | } |
819 | |
820 | |
821 | // |
822 | // OpenLayers.Control.DragFeature callback for a drag occuring. |
823 | // |
824 | |
825 | function dragMove(feature,pixel) |
826 | { |
827 | for(var marker in markers) |
828 | if(feature==markers[marker]) |
829 | dragSetForm(marker); |
830 | } |
831 | |
832 | |
833 | // |
834 | // OpenLayers.Control.DragFeature callback for completing a drag. |
835 | // |
836 | |
837 | function dragComplete(feature,pixel) |
838 | { |
839 | for(var marker in markers) |
840 | if(feature==markers[marker]) |
841 | dragSetForm(marker); |
842 | } |
843 | |
844 | |
845 | // |
846 | // Set the feature coordinates in the form after dragging. |
847 | // |
848 | |
849 | function dragSetForm(marker) |
850 | { |
851 | var lonlat = new OpenLayers.LonLat(markers[marker].geometry.x, markers[marker].geometry.y); |
852 | lonlat.transform(epsg900913,epsg4326); |
853 | |
854 | var lon=format5f(lonlat.lon); |
855 | var lat=format5f(lonlat.lat); |
856 | |
857 | formSetCoords(marker,lon,lat); |
858 | } |
859 | |
860 | |
861 | //////////////////////////////////////////////////////////////////////////////// |
862 | /////////////////////////////// Marker handling //////////////////////////////// |
863 | //////////////////////////////////////////////////////////////////////////////// |
864 | |
865 | |
866 | // |
867 | // Toggle a marker on the map. |
868 | // |
869 | |
870 | function markerToggleMap(marker) // called from router.html |
871 | { |
872 | if(!routino.point[marker].used) |
873 | { |
874 | routino.point[marker].used=true; |
875 | markerCentre(marker); |
876 | markerCoords(marker); |
877 | } |
878 | |
879 | markerAddRemoveMap(marker,!routino.point[marker].active); |
880 | } |
881 | |
882 | |
883 | // |
884 | // Show or hide a marker on the map. |
885 | // |
886 | |
887 | function markerAddRemoveMap(marker,active) |
888 | { |
889 | if(active) |
890 | markerAddMap(marker); |
891 | else |
892 | markerRemoveMap(marker); |
893 | } |
894 | |
895 | |
896 | // |
897 | // Show a marker on the map. |
898 | // |
899 | |
900 | function markerAddMap(marker) |
901 | { |
902 | clearSearchResult(marker); |
903 | |
904 | markers[marker].style.display = ""; |
905 | routino.point[marker].active=true; |
906 | routino.point[marker].used=true; |
907 | |
908 | updateIcon(marker); |
909 | |
910 | markersmoved=true; |
911 | } |
912 | |
913 | |
914 | // |
915 | // Remove a marker from the map. |
916 | // |
917 | |
918 | function markerRemoveMap(marker) |
919 | { |
920 | clearSearchResult(marker); |
921 | |
922 | markers[marker].style.display = "none"; |
923 | routino.point[marker].active=false; |
924 | |
925 | updateIcon(marker); |
926 | |
927 | markersmoved=true; |
928 | } |
929 | |
930 | |
931 | // |
932 | // Display search string for the marker |
933 | // |
934 | |
935 | function markerSearch(marker) // called from router.html |
936 | { |
937 | clearSearchResult(marker); |
938 | |
939 | document.getElementById("coords" + marker).style.display="none"; |
940 | document.getElementById("search" + marker).style.display=""; |
941 | } |
942 | |
943 | |
944 | // |
945 | // Display coordinates for the marker |
946 | // |
947 | |
948 | function markerCoords(marker) // called from router.html |
949 | { |
950 | clearSearchResult(marker); |
951 | |
952 | document.getElementById("search" + marker).style.display="none"; |
953 | document.getElementById("coords" + marker).style.display=""; |
954 | } |
955 | |
956 | |
957 | // |
958 | // Centre the marker on the map |
959 | // |
960 | |
961 | function markerCentre(marker) // called from router.html |
962 | { |
963 | if(!routino.point[marker].used) |
964 | return; |
965 | |
966 | clearSearchResult(marker); |
967 | |
968 | var lonlat=map.getCenter().clone(); |
969 | lonlat.transform(epsg900913,epsg4326); |
970 | |
971 | formSetCoords(marker,lonlat.lon,lonlat.lat); |
972 | } |
973 | |
974 | |
975 | // |
976 | // Centre the map on the marker |
977 | // |
978 | |
979 | function markerRecentre(marker) // called from router.html |
980 | { |
981 | if(!routino.point[marker].used) |
982 | return; |
983 | |
984 | clearSearchResult(marker); |
985 | |
986 | lon=routino.point[marker].lon; |
987 | lat=routino.point[marker].lat; |
988 | |
989 | var lonlat = new OpenLayers.LonLat(lon,lat); |
990 | lonlat.transform(epsg4326,epsg900913); |
991 | |
992 | map.panTo(lonlat); |
993 | } |
994 | |
995 | |
996 | // |
997 | // Clear the current marker. |
998 | // |
999 | |
1000 | function markerRemove(marker) // called from router.html |
1001 | { |
1002 | clearSearchResult(marker); |
1003 | |
1004 | for(var m=marker;m<vismarkers;m++) |
1005 | markerCopy(m,m+1); |
1006 | |
1007 | markerRemoveForm(vismarkers--); |
1008 | |
1009 | if(vismarkers==1) |
1010 | markerAddAfter(1); |
1011 | } |
1012 | |
1013 | |
1014 | // |
1015 | // Add a marker before the current one. |
1016 | // |
1017 | |
1018 | function markerAddBefore(marker) |
1019 | { |
1020 | clearSearchResult(marker); |
1021 | |
1022 | if(vismarkers==mapprops.maxmarkers || marker==1) |
1023 | return false; |
1024 | |
1025 | markerAddForm(++vismarkers); |
1026 | |
1027 | for(var m=vismarkers;m>marker;m--) |
1028 | markerCopy(m,m-1); |
1029 | |
1030 | markerClearForm(marker-1); |
1031 | } |
1032 | |
1033 | |
1034 | // |
1035 | // Add a marker after the current one. |
1036 | // |
1037 | |
1038 | function markerAddAfter(marker) // called from router.html |
1039 | { |
1040 | clearSearchResult(marker); |
1041 | |
1042 | if(vismarkers==mapprops.maxmarkers) |
1043 | return false; |
1044 | |
1045 | markerAddForm(++vismarkers); |
1046 | |
1047 | for(var m=vismarkers;m>(marker+1);m--) |
1048 | markerCopy(m,m-1); |
1049 | |
1050 | markerClearForm(marker+1); |
1051 | } |
1052 | |
1053 | |
1054 | // |
1055 | // Set this marker as the home location. |
1056 | // |
1057 | |
1058 | function markerHome(marker) // called from router.html |
1059 | { |
1060 | if(!routino.point[marker].used) |
1061 | { |
1062 | markerMoveHome(marker); |
1063 | } |
1064 | else |
1065 | { |
1066 | clearSearchResult(marker); |
1067 | |
1068 | markerSetClearHome(marker,!routino.point[marker].home); |
1069 | } |
1070 | } |
1071 | |
1072 | |
1073 | // |
1074 | // Set this marker as the current location. |
1075 | // |
1076 | |
1077 | function markerLocate(marker) // called from router.html |
1078 | { |
1079 | clearSearchResult(marker); |
1080 | |
1081 | if(navigator.geolocation) |
1082 | navigator.geolocation.getCurrentPosition( |
1083 | function(position) { |
1084 | formSetCoords(marker,position.coords.longitude,position.coords.latitude); |
1085 | markerAddMap(marker); |
1086 | }); |
1087 | } |
1088 | |
1089 | |
1090 | // |
1091 | // Update an icon to set colours and home or normal marker. |
1092 | // |
1093 | |
1094 | function updateIcon(marker) |
1095 | { |
1096 | if(routino.point[marker].home) |
1097 | { |
1098 | if(routino.point[marker].active) |
1099 | document.images["waypoint" + marker].src="icons/marker-home-red.png"; |
1100 | else |
1101 | document.images["waypoint" + marker].src="icons/marker-home-grey.png"; |
1102 | |
1103 | markers[marker].style.externalGraphic="icons/marker-home-red.png"; |
1104 | } |
1105 | else |
1106 | { |
1107 | if(routino.point[marker].active) |
1108 | document.images["waypoint" + marker].src="icons/marker-" + marker + "-red.png"; |
1109 | else |
1110 | document.images["waypoint" + marker].src="icons/marker-" + marker + "-grey.png"; |
1111 | |
1112 | markers[marker].style.externalGraphic="icons/marker-" + marker + "-red.png"; |
1113 | } |
1114 | |
1115 | layerVectors.drawFeature(markers[marker]); |
1116 | } |
1117 | |
1118 | |
1119 | // |
1120 | // Move the marker to the home location |
1121 | // |
1122 | |
1123 | function markerMoveHome(marker) |
1124 | { |
1125 | if(homelon==null || homelat==null) |
1126 | return; |
1127 | |
1128 | routino.point[marker].home=true; |
1129 | routino.point[marker].used=true; |
1130 | |
1131 | formSetCoords(marker,homelon,homelat); |
1132 | markerAddMap(marker); |
1133 | } |
1134 | |
1135 | |
1136 | // |
1137 | // Set or clear the home marker icon |
1138 | // |
1139 | |
1140 | function markerSetClearHome(marker,home) |
1141 | { |
1142 | var cookie; |
1143 | var date = new Date(); |
1144 | |
1145 | if(home) |
1146 | { |
1147 | homelat=routino.point[marker].lat; |
1148 | homelon=routino.point[marker].lon; |
1149 | |
1150 | cookie="Routino-home=lon:" + homelon + ":lat:" + homelat; |
1151 | |
1152 | date.setUTCFullYear(date.getUTCFullYear()+5); |
1153 | |
1154 | routino.point[marker].home=true; |
1155 | } |
1156 | else |
1157 | { |
1158 | homelat=null; |
1159 | homelon=null; |
1160 | |
1161 | cookie="Routino-home=unset"; |
1162 | |
1163 | date.setUTCFullYear(date.getUTCFullYear()-1); |
1164 | |
1165 | routino.point[marker].home=false; |
1166 | } |
1167 | |
1168 | document.cookie=cookie + ";expires=" + date.toGMTString(); |
1169 | |
1170 | updateIcon(marker); |
1171 | |
1172 | for(m=1;m<=mapprops.maxmarkers;m++) |
1173 | markerCheckHome(m); |
1174 | } |
1175 | |
1176 | |
1177 | // |
1178 | // Check if a marker is the home marker |
1179 | // |
1180 | |
1181 | function markerCheckHome(marker) |
1182 | { |
1183 | var home=routino.point[marker].home; |
1184 | |
1185 | if(routino.point[marker].lon==homelon && routino.point[marker].lat==homelat) |
1186 | routino.point[marker].home=true; |
1187 | else |
1188 | routino.point[marker].home=false; |
1189 | |
1190 | if(home!=routino.point[marker].home) |
1191 | updateIcon(marker); |
1192 | } |
1193 | |
1194 | |
1195 | // |
1196 | // Move this marker up. |
1197 | // |
1198 | |
1199 | function markerMoveUp(marker) // called from router.html |
1200 | { |
1201 | if(marker==1) |
1202 | { |
1203 | for(var m=1;m<vismarkers;m++) |
1204 | markerSwap(m,m+1); |
1205 | } |
1206 | else |
1207 | markerSwap(marker,marker-1); |
1208 | } |
1209 | |
1210 | |
1211 | // |
1212 | // Move this marker down. |
1213 | // |
1214 | |
1215 | function markerMoveDown(marker) // called from router.html |
1216 | { |
1217 | if(marker==vismarkers) |
1218 | { |
1219 | for(var m=vismarkers;m>1;m--) |
1220 | markerSwap(m,m-1); |
1221 | } |
1222 | else |
1223 | markerSwap(marker,marker+1); |
1224 | } |
1225 | |
1226 | |
1227 | // |
1228 | // Copy a marker from one place to another. |
1229 | // |
1230 | |
1231 | function markerCopy(marker1,marker2) |
1232 | { |
1233 | for(var element in routino.point[marker2]) |
1234 | routino.point[marker1][element]=routino.point[marker2][element]; |
1235 | |
1236 | document.getElementById("search" + marker1).style.display=document.getElementById("search" + marker2).style.display; |
1237 | |
1238 | document.getElementById("coords" + marker1).style.display=document.getElementById("coords" + marker2).style.display; |
1239 | |
1240 | document.forms["form"].elements["search" + marker1].value=document.forms["form"].elements["search" + marker2].value; |
1241 | |
1242 | formSetCoords(marker1,routino.point[marker1].lon,routino.point[marker1].lat); |
1243 | |
1244 | markerAddRemoveMap(marker1,routino.point[marker1].active); |
1245 | } |
1246 | |
1247 | |
1248 | // |
1249 | // Swap a pair of markers. |
1250 | // |
1251 | |
1252 | function markerSwap(marker1,marker2) |
1253 | { |
1254 | for(var element in routino.point[marker2]) |
1255 | { |
1256 | var temp=routino.point[marker1][element]; |
1257 | routino.point[marker1][element]=routino.point[marker2][element]; |
1258 | routino.point[marker2][element]=temp; |
1259 | } |
1260 | |
1261 | var search_display=document.getElementById("search" + marker1).style.display; |
1262 | document.getElementById("search" + marker1).style.display=document.getElementById("search" + marker2).style.display; |
1263 | document.getElementById("search" + marker2).style.display=search_display; |
1264 | |
1265 | var coords_display=document.getElementById("coords" + marker1).style.display; |
1266 | document.getElementById("coords" + marker1).style.display=document.getElementById("coords" + marker2).style.display; |
1267 | document.getElementById("coords" + marker2).style.display=coords_display; |
1268 | |
1269 | var search_value=document.forms["form"].elements["search" + marker1].value; |
1270 | document.forms["form"].elements["search" + marker1].value=document.forms["form"].elements["search" + marker2].value; |
1271 | document.forms["form"].elements["search" + marker2].value=search_value; |
1272 | |
1273 | formSetCoords(marker1,routino.point[marker1].lon,routino.point[marker1].lat); |
1274 | formSetCoords(marker2,routino.point[marker2].lon,routino.point[marker2].lat); |
1275 | |
1276 | markerAddRemoveMap(marker1,routino.point[marker1].active); |
1277 | markerAddRemoveMap(marker2,routino.point[marker2].active); |
1278 | } |
1279 | |
1280 | |
1281 | // |
1282 | // Reverse the markers. |
1283 | // |
1284 | |
1285 | function markersReverse() // called from router.html |
1286 | { |
1287 | for(var marker=1;marker<=vismarkers/2;marker++) |
1288 | markerSwap(marker,vismarkers+1-marker); |
1289 | } |
1290 | |
1291 | |
1292 | // |
1293 | // Close the loop. |
1294 | // |
1295 | |
1296 | function markersLoop() // called from router.html |
1297 | { |
1298 | if(vismarkers==mapprops.maxmarkers) |
1299 | return false; |
1300 | |
1301 | if(routino.point[vismarkers].lon==routino.point[1].lon && routino.point[vismarkers].lat==routino.point[1].lat) |
1302 | return false; |
1303 | |
1304 | if(routino.point[vismarkers].used) |
1305 | markerAddForm(++vismarkers); |
1306 | |
1307 | markerCopy(vismarkers,1); |
1308 | } |
1309 | |
1310 | |
1311 | // |
1312 | // Display the form for a marker |
1313 | // |
1314 | |
1315 | function markerAddForm(marker) |
1316 | { |
1317 | document.getElementById("waypoint" + marker).style.display=""; |
1318 | } |
1319 | |
1320 | |
1321 | // |
1322 | // Hide the form for a marker |
1323 | // |
1324 | |
1325 | function markerRemoveForm(marker) |
1326 | { |
1327 | document.getElementById("waypoint" + marker).style.display="none"; |
1328 | |
1329 | markerClearForm(marker); |
1330 | } |
1331 | |
1332 | |
1333 | // |
1334 | // Clear the form for a marker |
1335 | // |
1336 | |
1337 | function markerClearForm(marker) |
1338 | { |
1339 | markerRemoveMap(marker); |
1340 | markerCoords(marker); |
1341 | |
1342 | formSetCoords(marker,"",""); |
1343 | formSetSearch(marker,""); |
1344 | |
1345 | updateIcon(marker); |
1346 | |
1347 | routino.point[marker].used=false; |
1348 | routino.point[marker].home=false; |
1349 | } |
1350 | |
1351 | |
1352 | //////////////////////////////////////////////////////////////////////////////// |
1353 | //////////////////////////// Route results handling //////////////////////////// |
1354 | //////////////////////////////////////////////////////////////////////////////// |
1355 | |
1356 | var route_light_colours={shortest: "#60C060", quickest: "#6060C0"}; |
1357 | var route_dark_colours ={shortest: "#408040", quickest: "#404080"}; |
1358 | |
1359 | var highlights={shortest: null, quickest: null}; |
1360 | var popups={shortest: null, quickest: null}; |
1361 | var routepoints={shortest: {}, quickest: {}}; |
1362 | var gpx_style={shortest: null, quickest: null}; |
1363 | |
1364 | // |
1365 | // Zoom to a specific item in the route |
1366 | // |
1367 | |
1368 | function zoomTo(type,line) |
1369 | { |
1370 | var lonlat = new OpenLayers.LonLat(routepoints[type][line].lon,routepoints[type][line].lat); |
1371 | lonlat.transform(epsg4326,epsg900913); |
1372 | |
1373 | map.moveTo(lonlat,map.numZoomLevels-2); |
1374 | } |
1375 | |
1376 | |
1377 | // |
1378 | // Highlight a specific item in the route |
1379 | // |
1380 | |
1381 | function highlight(type,line) |
1382 | { |
1383 | if(line==-1) |
1384 | { |
1385 | highlights[type].style.display = "none"; |
1386 | |
1387 | drawPopup(popups[type],null); |
1388 | } |
1389 | else |
1390 | { |
1391 | // Marker |
1392 | |
1393 | var lonlat = new OpenLayers.LonLat(routepoints[type][line].lon,routepoints[type][line].lat); |
1394 | lonlat.transform(epsg4326,epsg900913); |
1395 | |
1396 | highlights[type].move(lonlat); |
1397 | |
1398 | if(highlights[type].style.display = "none") |
1399 | highlights[type].style.display = ""; |
1400 | |
1401 | // Popup |
1402 | |
1403 | drawPopup(popups[type],"<table>" + routepoints[type][line].html + "</table>"); |
1404 | } |
1405 | |
1406 | layerVectors.drawFeature(highlights[type]); |
1407 | } |
1408 | |
1409 | |
1410 | // |
1411 | // Create a popup - not using OpenLayers because want it fixed on screen not fixed on map. |
1412 | // |
1413 | |
1414 | function createPopup(type) |
1415 | { |
1416 | var popup=document.createElement('div'); |
1417 | |
1418 | popup.className = "popup"; |
1419 | |
1420 | popup.innerHTML = "<span></span>"; |
1421 | |
1422 | popup.style.display = "none"; |
1423 | |
1424 | popup.style.position = "fixed"; |
1425 | popup.style.top = "-4000px"; |
1426 | popup.style.left = "-4000px"; |
1427 | popup.style.zIndex = "100"; |
1428 | |
1429 | popup.style.padding = "5px"; |
1430 | |
1431 | popup.style.opacity=0.85; |
1432 | popup.style.backgroundColor=route_light_colours[type]; |
1433 | popup.style.border="4px solid " + route_dark_colours[type]; |
1434 | |
1435 | document.body.appendChild(popup); |
1436 | |
1437 | return(popup); |
1438 | } |
1439 | |
1440 | |
1441 | // |
1442 | // Draw a popup - not using OpenLayers because want it fixed on screen not fixed on map. |
1443 | // |
1444 | |
1445 | function drawPopup(popup,html) |
1446 | { |
1447 | if(html==null) |
1448 | { |
1449 | popup.style.display="none"; |
1450 | return; |
1451 | } |
1452 | |
1453 | if(popup.style.display=="none") |
1454 | { |
1455 | var map_div=document.getElementById("map"); |
1456 | |
1457 | popup.style.left =map_div.offsetParent.offsetLeft+map_div.offsetLeft+60 + "px"; |
1458 | popup.style.top = map_div.offsetTop +30 + "px"; |
1459 | popup.style.width =map_div.clientWidth-100 + "px"; |
1460 | |
1461 | popup.style.display=""; |
1462 | } |
1463 | |
1464 | popup.innerHTML=html; |
1465 | } |
1466 | |
1467 | |
1468 | // |
1469 | // Remove a GPX trace |
1470 | // |
1471 | |
1472 | function removeGPXTrace(type) |
1473 | { |
1474 | map.removeLayer(layerGPX[type]); |
1475 | layerGPX[type].destroy(); |
1476 | layerGPX[type]=null; |
1477 | |
1478 | displayStatus(type,"no_info"); |
1479 | |
1480 | document.getElementById(type + "_links").style.display = "none"; |
1481 | |
1482 | document.getElementById(type + "_route").innerHTML = ""; |
1483 | |
1484 | hideshow_hide(type); |
1485 | } |
1486 | |
1487 | |
1488 | //////////////////////////////////////////////////////////////////////////////// |
1489 | /////////////////////////////// Server handling //////////////////////////////// |
1490 | //////////////////////////////////////////////////////////////////////////////// |
1491 | |
1492 | // |
1493 | // Display data statistics |
1494 | // |
1495 | |
1496 | function displayStatistics() // called from router.html |
1497 | { |
1498 | // Use AJAX to get the statistics |
1499 | |
1500 | OpenLayers.Request.GET({url: "statistics.cgi", success: runStatisticsSuccess}); |
1501 | } |
1502 | |
1503 | |
1504 | // |
1505 | // Success in running data statistics generation. |
1506 | // |
1507 | |
1508 | function runStatisticsSuccess(response) |
1509 | { |
1510 | document.getElementById("statistics_data").innerHTML="<pre>" + response.responseText + "</pre>"; |
1511 | document.getElementById("statistics_link").style.display="none"; |
1512 | } |
1513 | |
1514 | |
1515 | // |
1516 | // Submit form - perform the routing |
1517 | // |
1518 | |
1519 | function findRoute(type) // called from router.html |
1520 | { |
1521 | tab_select("results"); |
1522 | |
1523 | hideshow_hide('help_options'); |
1524 | hideshow_hide('shortest'); |
1525 | hideshow_hide('quickest'); |
1526 | |
1527 | displayStatus("result","running"); |
1528 | |
1529 | var url="router.cgi" + "?" + buildURLArguments(true) + ";type=" + type; |
1530 | |
1531 | // Destroy the existing layer(s) |
1532 | |
1533 | if(markersmoved || paramschanged) |
1534 | { |
1535 | if(layerGPX.shortest!=null) |
1536 | removeGPXTrace("shortest"); |
1537 | if(layerGPX.quickest!=null) |
1538 | removeGPXTrace("quickest"); |
1539 | markersmoved=false; |
1540 | paramschanged=false; |
1541 | } |
1542 | else if(layerGPX[type]!=null) |
1543 | removeGPXTrace(type); |
1544 | |
1545 | // Use AJAX to run the router |
1546 | |
1547 | routing_type=type; |
1548 | |
1549 | OpenLayers.Request.GET({url: url, success: runRouterSuccess, failure: runRouterFailure}); |
1550 | } |
1551 | |
1552 | |
1553 | // |
1554 | // Success in running router. |
1555 | // |
1556 | |
1557 | function runRouterSuccess(response) |
1558 | { |
1559 | var lines=response.responseText.split('\n'); |
1560 | |
1561 | var uuid=lines[0]; |
1562 | var success=lines[1]; |
1563 | |
1564 | var link; |
1565 | |
1566 | // Update the status message |
1567 | |
1568 | if(success=="ERROR") |
1569 | { |
1570 | displayStatus("result","error"); |
1571 | hideshow_show('help_route'); |
1572 | |
1573 | link=document.getElementById("router_log_error"); |
1574 | link.href="results.cgi?uuid=" + uuid + ";type=router;format=log"; |
1575 | |
1576 | return; |
1577 | } |
1578 | else |
1579 | { |
1580 | displayStatus("result","complete"); |
1581 | hideshow_hide('help_route'); |
1582 | |
1583 | link=document.getElementById("router_log_complete"); |
1584 | link.href="results.cgi?uuid=" + uuid + ";type=router;format=log"; |
1585 | } |
1586 | |
1587 | // Update the routing result message |
1588 | |
1589 | link=document.getElementById(routing_type + "_html"); |
1590 | link.href="results.cgi?uuid=" + uuid + ";type=" + routing_type + ";format=html"; |
1591 | |
1592 | link=document.getElementById(routing_type + "_gpx_track"); |
1593 | link.href="results.cgi?uuid=" + uuid + ";type=" + routing_type + ";format=gpx-track"; |
1594 | |
1595 | link=document.getElementById(routing_type + "_gpx_route"); |
1596 | link.href="results.cgi?uuid=" + uuid + ";type=" + routing_type + ";format=gpx-route"; |
1597 | |
1598 | link=document.getElementById(routing_type + "_text_all"); |
1599 | link.href="results.cgi?uuid=" + uuid + ";type=" + routing_type + ";format=text-all"; |
1600 | |
1601 | link=document.getElementById(routing_type + "_text"); |
1602 | link.href="results.cgi?uuid=" + uuid + ";type=" + routing_type + ";format=text"; |
1603 | |
1604 | links=document.getElementById(routing_type + "_links").style.display = ""; |
1605 | |
1606 | // Add a GPX layer |
1607 | |
1608 | var url="results.cgi?uuid=" + uuid + ";type=" + routing_type + ";format=gpx-track"; |
1609 | |
1610 | layerGPX[routing_type] = new OpenLayers.Layer.Vector("GPX (" + routing_type + ")", |
1611 | { |
1612 | protocol: new OpenLayers.Protocol.HTTP({url: url, format: new OpenLayers.Format.GPX()}), |
1613 | strategies: [new OpenLayers.Strategy.Fixed()], |
1614 | style: gpx_style[routing_type], |
1615 | projection: map.displayProjection |
1616 | }); |
1617 | |
1618 | map.addLayer(layerGPX[routing_type]); |
1619 | |
1620 | hideshow_show(routing_type); |
1621 | |
1622 | displayResult(routing_type,uuid); |
1623 | } |
1624 | |
1625 | |
1626 | // |
1627 | // Failure in running router. |
1628 | // |
1629 | |
1630 | function runRouterFailure(response) |
1631 | { |
1632 | displayStatus("result","failed"); |
1633 | } |
1634 | |
1635 | |
1636 | // |
1637 | // Display the status |
1638 | // |
1639 | |
1640 | function displayStatus(type,subtype,content) |
1641 | { |
1642 | var child=document.getElementById(type + "_status").firstChild; |
1643 | |
1644 | do |
1645 | { |
1646 | if(child.id != undefined) |
1647 | child.style.display="none"; |
1648 | |
1649 | child=child.nextSibling; |
1650 | } |
1651 | while(child != undefined); |
1652 | |
1653 | var chosen_status=document.getElementById(type + "_status_" + subtype); |
1654 | |
1655 | chosen_status.style.display=""; |
1656 | |
1657 | if(content != null) |
1658 | chosen_status.innerHTML=content; |
1659 | } |
1660 | |
1661 | |
1662 | // |
1663 | // Display the route |
1664 | // |
1665 | |
1666 | function displayResult(type,uuid) |
1667 | { |
1668 | routing_type = type; |
1669 | |
1670 | // Add the route |
1671 | |
1672 | var url="results.cgi?uuid=" + uuid + ";type=" + routing_type + ";format=html"; |
1673 | |
1674 | // Use AJAX to get the route |
1675 | |
1676 | OpenLayers.Request.GET({url: url, success: getRouteSuccess, failure: getRouteFailure}); |
1677 | } |
1678 | |
1679 | |
1680 | // |
1681 | // Success in getting route. |
1682 | // |
1683 | |
1684 | function getRouteSuccess(response) |
1685 | { |
1686 | var lines=response.responseText.split('\n'); |
1687 | |
1688 | routepoints[routing_type]=[]; |
1689 | |
1690 | var points=routepoints[routing_type]; |
1691 | |
1692 | var table=0; |
1693 | var point=0; |
1694 | var total_table,total_word; |
1695 | |
1696 | for(var line=0;line<lines.length;line++) |
1697 | { |
1698 | var thisline=lines[line]; |
1699 | |
1700 | if(table==0) |
1701 | { |
1702 | if(thisline.match('<table>')) |
1703 | table=1; |
1704 | else |
1705 | continue; |
1706 | } |
1707 | |
1708 | if(thisline.match('</table>')) |
1709 | break; |
1710 | |
1711 | if(thisline.match('<tr class=\'([a-z])\'>')) |
1712 | { |
1713 | var rowtype=RegExp.$1; |
1714 | |
1715 | if(rowtype=='c') |
1716 | { |
1717 | thisline.match('<td class=\'r\'> *([-0-9.]+) *([-0-9.]+)'); |
1718 | points[point]={lat: Number(RegExp.$1), lon: Number(RegExp.$2), html: "", highway: "", distance: "", total: ""}; |
1719 | |
1720 | point++; |
1721 | } |
1722 | else if(rowtype=='n') |
1723 | { |
1724 | points[point-1].html += thisline; |
1725 | } |
1726 | else if(rowtype=='s') |
1727 | { |
1728 | thisline.match('<span class=\'h\'>([^<]+)</span>'); |
1729 | points[point-1].highway = RegExp.$1; |
1730 | |
1731 | thisline.match('<span class=\'d\'>([^<]+)</span>'); |
1732 | points[point-1].distance = RegExp.$1; |
1733 | |
1734 | thisline.match('(<span class=\'j\'>[^<]+</span>)'); |
1735 | points[point-1].total = RegExp.$1; |
1736 | |
1737 | thisline.match('^(.*).<span class=\'j\'>'); |
1738 | |
1739 | points[point-1].html += RegExp.$1; |
1740 | } |
1741 | else if(rowtype=='t') |
1742 | { |
1743 | points[point-1].html += thisline; |
1744 | |
1745 | thisline.match('^(.*<td class=\'r\'>)'); |
1746 | total_table = RegExp.$1; |
1747 | |
1748 | thisline.match('<td class=\'l\'>([^<]+)<'); |
1749 | total_word = RegExp.$1; |
1750 | |
1751 | thisline.match('<span class=\'j\'>([^<]+)</span>'); |
1752 | points[point-1].total = RegExp.$1; |
1753 | } |
1754 | } |
1755 | } |
1756 | |
1757 | displayStatus(routing_type,"info",points[point-1].total.bold()); |
1758 | |
1759 | var result="<table onmouseout='highlight(\"" + routing_type + "\",-1)'>"; |
1760 | |
1761 | for(var p=0;p<point-1;p++) |
1762 | { |
1763 | points[p].html += total_table + points[p].total; |
1764 | |
1765 | result=result + "<tr onclick='zoomTo(\"" + routing_type + "\"," + p + ")'" + |
1766 | " onmouseover='highlight(\"" + routing_type + "\"," + p + ")'>" + |
1767 | "<td class='distance' title='" + points[p].distance + "'>#" + (p+1) + |
1768 | "<td class='highway'>" + points[p].highway; |
1769 | } |
1770 | |
1771 | result=result + "<tr onclick='zoomTo(\"" + routing_type + "\"," + p + ")'" + |
1772 | " onmouseover='highlight(\"" + routing_type + "\"," + p + ")'>" + |
1773 | "<td colspan='2'>" + total_word + " " + points[p].total; |
1774 | |
1775 | result=result + "</table>"; |
1776 | |
1777 | document.getElementById(routing_type + "_route").innerHTML=result; |
1778 | } |
1779 | |
1780 | |
1781 | // |
1782 | // Failure in getting route. |
1783 | // |
1784 | |
1785 | function getRouteFailure(response) |
1786 | { |
1787 | document.getElementById(routing_type + "_route").innerHTML = ""; |
1788 | } |
1789 | |
1790 | |
1791 | // |
1792 | // Perform a search |
1793 | // |
1794 | |
1795 | function DoSearch(marker) |
1796 | { |
1797 | // Use AJAX to get the search result |
1798 | |
1799 | var search=routino.point[marker].search; |
1800 | |
1801 | var bounds=map.getExtent().clone(); |
1802 | bounds.transform(epsg900913,epsg4326); |
1803 | |
1804 | var url="search.cgi?marker=" + marker + |
1805 | ";left=" + format5f(bounds.left) + |
1806 | ";top=" + format5f(bounds.top) + |
1807 | ";right=" + format5f(bounds.right) + |
1808 | ";bottom=" + format5f(bounds.bottom) + |
1809 | ";search=" + encodeURIComponent(search); |
1810 | |
1811 | OpenLayers.Request.GET({url: url, success: runSearchSuccess}); |
1812 | } |
1813 | |
1814 | |
1815 | var searchresults=[]; |
1816 | |
1817 | // |
1818 | // Success in running search. |
1819 | // |
1820 | |
1821 | function runSearchSuccess(response) |
1822 | { |
1823 | var lines=response.responseText.split('\n'); |
1824 | |
1825 | var marker=lines[0]; |
1826 | var cpuinfo=lines[1]; // not used |
1827 | var message=lines[2]; // not used |
1828 | |
1829 | if(message != "") |
1830 | { |
1831 | alert(message); |
1832 | return; |
1833 | } |
1834 | |
1835 | searchresults[marker]=[]; |
1836 | |
1837 | for(var line=3;line<lines.length;line++) |
1838 | { |
1839 | var thisline=lines[line]; |
1840 | |
1841 | if(thisline=="") |
1842 | break; |
1843 | |
1844 | thisline.match('([-.0-9]+) ([-.0-9]+) (.*)'); |
1845 | |
1846 | searchresults[marker][searchresults[marker].length]={lat: Number(RegExp.$1), lon: Number(RegExp.$2), name: RegExp.$3}; |
1847 | } |
1848 | |
1849 | if(searchresults[marker].length==1) |
1850 | { |
1851 | formSetSearch(marker,searchresults[marker][0].name); |
1852 | formSetCoords(marker,searchresults[marker][0].lon,searchresults[marker][0].lat); |
1853 | markerAddMap(marker); |
1854 | } |
1855 | else |
1856 | { |
1857 | var results=document.getElementById("searchresults" + marker); |
1858 | |
1859 | var innerHTML="<td colspan=\"3\">"; |
1860 | |
1861 | for(var n=0;n<searchresults[marker].length;n++) |
1862 | { |
1863 | if(n>0) |
1864 | innerHTML+="<br>"; |
1865 | |
1866 | innerHTML+="<a href=\"#\" onclick=\"choseSearchResult(" + marker + "," + n + ")\">" + |
1867 | searchresults[marker][n].name + |
1868 | "</a>"; |
1869 | } |
1870 | |
1871 | results.innerHTML=innerHTML; |
1872 | |
1873 | results.style.display=""; |
1874 | } |
1875 | } |
1876 | |
1877 | |
1878 | // |
1879 | // Display search results. |
1880 | // |
1881 | |
1882 | function choseSearchResult(marker,n) |
1883 | { |
1884 | if(n>=0) |
1885 | { |
1886 | formSetSearch(marker,searchresults[marker][n].name); |
1887 | formSetCoords(marker,searchresults[marker][n].lon,searchresults[marker][n].lat); |
1888 | markerAddMap(marker); |
1889 | } |
1890 | } |
1891 | |
1892 | |
1893 | // |
1894 | // Clear search results. |
1895 | // |
1896 | |
1897 | function clearSearchResult(marker) |
1898 | { |
1899 | document.getElementById("searchresults" + marker).style.display="none"; |
1900 | } |