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