Check out the latest version of Routino: svn co http://routino.org/svn/trunk routino
Contents of /trunk/web/www/routino/visualiser.leaflet.js
Parent Directory
|
Revision Log
Revision 1560 -
(show annotations)
(download)
(as text)
Wed Apr 30 18:39:35 2014 UTC (10 years, 10 months ago) by amb
File MIME type: application/javascript
File size: 30456 byte(s)
Wed Apr 30 18:39:35 2014 UTC (10 years, 10 months ago) by amb
File MIME type: application/javascript
File size: 30456 byte(s)
Update the visualiser web page to allow displaying the "cyclebothways" highway type and the "roundabout" highway type. Also "cyclebothways" is no longer a property so removed from that part of the visualiser.
1 | // |
2 | // Routino data visualiser web page Javascript |
3 | // |
4 | // Part of the Routino routing software. |
5 | // |
6 | // This file Copyright 2008-2014 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 | // |
24 | // Data types |
25 | // |
26 | |
27 | var data_types=[ |
28 | "junctions", |
29 | "super", |
30 | "waytype", |
31 | "highway", |
32 | "transport", |
33 | "barrier", |
34 | "turns", |
35 | "speed", |
36 | "weight", |
37 | "height", |
38 | "width", |
39 | "length", |
40 | "property", |
41 | "errorlogs" |
42 | ]; |
43 | |
44 | |
45 | //////////////////////////////////////////////////////////////////////////////// |
46 | /////////////////////////////// Initialisation ///////////////////////////////// |
47 | //////////////////////////////////////////////////////////////////////////////// |
48 | |
49 | // Process the URL query string and extract the arguments |
50 | |
51 | var legal={"^lon" : "^[-0-9.]+$", |
52 | "^lat" : "^[-0-9.]+$", |
53 | "^zoom" : "^[0-9]+$"}; |
54 | |
55 | var args={}; |
56 | |
57 | if(location.search.length>1) |
58 | { |
59 | var query,queries; |
60 | |
61 | query=location.search.replace(/^\?/,""); |
62 | query=query.replace(/;/g,"&"); |
63 | queries=query.split("&"); |
64 | |
65 | for(var i=0;i<queries.length;i++) |
66 | { |
67 | queries[i].match(/^([^=]+)(=(.*))?$/); |
68 | |
69 | var k=RegExp.$1; |
70 | var v=decodeURIComponent(RegExp.$3); |
71 | |
72 | for(var l in legal) |
73 | { |
74 | if(k.match(RegExp(l)) && v.match(RegExp(legal[l]))) |
75 | args[k]=v; |
76 | } |
77 | } |
78 | } |
79 | |
80 | |
81 | //////////////////////////////////////////////////////////////////////////////// |
82 | ///////////////////////////////// Map handling ///////////////////////////////// |
83 | //////////////////////////////////////////////////////////////////////////////// |
84 | |
85 | var map; |
86 | var layerMap=[], layerHighlights, layerVectors, layerBoxes; |
87 | var box; |
88 | |
89 | // |
90 | // Initialise the 'map' object |
91 | // |
92 | |
93 | function map_init() // called from visualiser.html |
94 | { |
95 | // Create the map (Map URLs and limits are in mapprops.js) |
96 | |
97 | map = L.map("map", |
98 | { |
99 | attributionControl: false, |
100 | zoomControl: false, |
101 | |
102 | minZoom: mapprops.zoomout, |
103 | maxZoom: mapprops.zoomin, |
104 | |
105 | maxBounds: L.latLngBounds(L.latLng(mapprops.southedge,mapprops.westedge),L.latLng(mapprops.northedge,mapprops.eastedge)) |
106 | }); |
107 | |
108 | // Add map tile layers |
109 | |
110 | var baselayers={}; |
111 | |
112 | for(var l=0; l<mapprops.mapdata.length; l++) |
113 | { |
114 | var urls=mapprops.mapdata[l].tiles.url.replace(/\${/g,"{"); |
115 | |
116 | if(mapprops.mapdata[l].tiles.subdomains===undefined) |
117 | layerMap[l] = L.tileLayer(urls); |
118 | else |
119 | layerMap[l] = L.tileLayer(urls, {subdomains: mapprops.mapdata[l].tiles.subdomains}); |
120 | |
121 | baselayers[mapprops.mapdata[l].label]=layerMap[l]; |
122 | |
123 | if(l===0) |
124 | map.addLayer(layerMap[l]); |
125 | } |
126 | |
127 | // Add the controls |
128 | |
129 | map.addControl(L.control.zoom()); |
130 | map.addControl(L.control.scale()); |
131 | map.addControl(L.control.layers(baselayers)); |
132 | |
133 | // Update the attribution if the layer changes |
134 | |
135 | function change_attribution_event(event) |
136 | { |
137 | for(var l=0; l<mapprops.mapdata.length; l++) |
138 | if(layerMap[l] == event.layer) |
139 | change_attribution(l); |
140 | } |
141 | |
142 | map.on("baselayerchange",change_attribution_event); |
143 | |
144 | function change_attribution(l) |
145 | { |
146 | var data_url =mapprops.mapdata[l].attribution.data_url; |
147 | var data_text=mapprops.mapdata[l].attribution.data_text; |
148 | var tile_url =mapprops.mapdata[l].attribution.tile_url; |
149 | var tile_text=mapprops.mapdata[l].attribution.tile_text; |
150 | |
151 | document.getElementById("attribution_data").innerHTML="<a href=\"" + data_url + "\" target=\"data_attribution\">" + data_text + "</a>"; |
152 | document.getElementById("attribution_tile").innerHTML="<a href=\"" + tile_url + "\" target=\"tile_attribution\">" + tile_text + "</a>"; |
153 | } |
154 | |
155 | change_attribution(0); |
156 | |
157 | // Add two vectors layers (one for highlights that display behind the vectors) |
158 | |
159 | layerVectors = L.layerGroup(); |
160 | map.addLayer(layerVectors); |
161 | |
162 | layerHighlights = L.layerGroup(); |
163 | map.addLayer(layerHighlights); |
164 | |
165 | // Handle popup |
166 | |
167 | createPopup(); |
168 | |
169 | // Add a boxes layer |
170 | |
171 | layerBoxes = L.rectangle(map.options.maxBounds,{stroke: false, color: "#f00", weight: 1, opacity: 1.0, |
172 | fill: false}); |
173 | |
174 | map.addLayer(layerBoxes); |
175 | |
176 | box=false; |
177 | |
178 | // Move the map |
179 | |
180 | map.on("moveend", updateURLs); |
181 | |
182 | var lon =args["lon"]; |
183 | var lat =args["lat"]; |
184 | var zoom=args["zoom"]; |
185 | |
186 | if(lon !== undefined && lat !== undefined && zoom !== undefined) |
187 | { |
188 | if(lon<mapprops.westedge) lon=mapprops.westedge; |
189 | if(lon>mapprops.eastedge) lon=mapprops.eastedge; |
190 | |
191 | if(lat<mapprops.southedge) lat=mapprops.southedge; |
192 | if(lat>mapprops.northedge) lat=mapprops.northedge; |
193 | |
194 | if(zoom<mapprops.zoomout) zoom=mapprops.zoomout; |
195 | if(zoom>mapprops.zoomin) zoom=mapprops.zoomin; |
196 | |
197 | map.setView(L.latLng(lat,lon),zoom); |
198 | } |
199 | else |
200 | map.fitBounds(map.options.maxBounds); |
201 | |
202 | // Unhide editing URL if variable set |
203 | |
204 | if(mapprops.editurl !== undefined && mapprops.editurl !== "") |
205 | { |
206 | var edit_url=document.getElementById("edit_url"); |
207 | |
208 | edit_url.style.display=""; |
209 | edit_url.href=mapprops.editurl; |
210 | } |
211 | |
212 | updateURLs(); |
213 | } |
214 | |
215 | |
216 | // |
217 | // Format a number in printf("%.5f") format. |
218 | // |
219 | |
220 | function format5f(number) |
221 | { |
222 | var newnumber=Math.floor(number*100000+0.5); |
223 | var delta=0; |
224 | |
225 | if(newnumber>=0 && newnumber<100000) delta= 100000; |
226 | if(newnumber<0 && newnumber>-100000) delta=-100000; |
227 | |
228 | var string=String(newnumber+delta); |
229 | |
230 | var intpart =string.substring(0,string.length-5); |
231 | var fracpart=string.substring(string.length-5,string.length); |
232 | |
233 | if(delta>0) intpart="0"; |
234 | if(delta<0) intpart="-0"; |
235 | |
236 | return(intpart + "." + fracpart); |
237 | } |
238 | |
239 | |
240 | // |
241 | // Build a set of URL arguments for the map location |
242 | // |
243 | |
244 | function buildMapArguments() |
245 | { |
246 | var lonlat = map.getCenter(); |
247 | |
248 | var zoom = map.getZoom(); |
249 | |
250 | return "lat=" + format5f(lonlat.lat) + ";lon=" + format5f(lonlat.lng) + ";zoom=" + zoom; |
251 | } |
252 | |
253 | |
254 | // |
255 | // Update the URLs |
256 | // |
257 | |
258 | function updateURLs() |
259 | { |
260 | var mapargs=buildMapArguments(); |
261 | |
262 | var links=document.getElementsByTagName("a"); |
263 | |
264 | for(var i=0; i<links.length; i++) |
265 | { |
266 | var element=links[i]; |
267 | |
268 | if(element.id == "permalink_url") |
269 | element.href=location.pathname + "?" + mapargs; |
270 | |
271 | if(element.id == "router_url") |
272 | element.href="router.html" + "?" + mapargs; |
273 | |
274 | if(element.id == "edit_url") |
275 | element.href=mapprops.editurl + "?" + mapargs; |
276 | |
277 | if(element.id.match(/^lang_([a-zA-Z-]+)_url$/)) |
278 | element.href="visualiser.html" + "." + RegExp.$1 + "?" + mapargs; |
279 | } |
280 | } |
281 | |
282 | |
283 | //////////////////////////////////////////////////////////////////////////////// |
284 | ///////////////////////// Popup and selection handling ///////////////////////// |
285 | //////////////////////////////////////////////////////////////////////////////// |
286 | |
287 | var popup=null; |
288 | |
289 | // |
290 | // Create a popup - independent of map because want it fixed on screen not fixed on map. |
291 | // |
292 | |
293 | function createPopup() |
294 | { |
295 | popup=document.createElement("div"); |
296 | |
297 | popup.className = "popup"; |
298 | |
299 | popup.innerHTML = "<span></span>"; |
300 | |
301 | popup.style.display = "none"; |
302 | |
303 | popup.style.position = "fixed"; |
304 | popup.style.top = "-4000px"; |
305 | popup.style.left = "-4000px"; |
306 | popup.style.zIndex = "100"; |
307 | |
308 | popup.style.padding = "5px"; |
309 | |
310 | popup.style.opacity=0.85; |
311 | popup.style.backgroundColor="#C0C0C0"; |
312 | popup.style.border="4px solid #404040"; |
313 | |
314 | document.body.appendChild(popup); |
315 | } |
316 | |
317 | |
318 | // |
319 | // Draw a popup - independent of map because want it fixed on screen not fixed on map. |
320 | // |
321 | |
322 | function drawPopup(html) |
323 | { |
324 | if(html===null) |
325 | { |
326 | popup.style.display="none"; |
327 | return; |
328 | } |
329 | |
330 | if(popup.style.display=="none") |
331 | { |
332 | var map_div=document.getElementById("map"); |
333 | |
334 | popup.style.left =map_div.offsetParent.offsetLeft+map_div.offsetLeft+60 + "px"; |
335 | popup.style.top = map_div.offsetTop +30 + "px"; |
336 | popup.style.width =map_div.clientWidth-120 + "px"; |
337 | |
338 | popup.style.display=""; |
339 | } |
340 | |
341 | var close="<span style='float: right; cursor: pointer;' onclick='drawPopup(null)'>X</span>"; |
342 | |
343 | popup.innerHTML=close+html; |
344 | } |
345 | |
346 | |
347 | // |
348 | // Select a circleMarker feature |
349 | // |
350 | |
351 | function selectCircleMarkerFeature(feature,dump,event) |
352 | { |
353 | if(dump) |
354 | ajaxGET("visualiser.cgi?dump=" + dump, runDumpSuccess); |
355 | |
356 | layerHighlights.clearLayers(); |
357 | |
358 | var highlight = L.circleMarker(feature.getLatLng(),{radius: 2*feature.getRadius(), fill: true, fillColor: "#F0F000", fillOpacity: 1.0, |
359 | stroke: false}); |
360 | |
361 | layerHighlights.addLayer(highlight); |
362 | |
363 | highlight.bringToBack(); |
364 | } |
365 | |
366 | |
367 | // |
368 | // Select a Polyline feature |
369 | // |
370 | |
371 | function selectPolylineFeature(feature,dump,event) |
372 | { |
373 | if(dump) |
374 | ajaxGET("visualiser.cgi?dump=" + dump, runDumpSuccess); |
375 | |
376 | layerHighlights.clearLayers(); |
377 | |
378 | var highlight = L.polyline(feature.getLatLngs(),{weight: 8, stroke: true, color: "#F0F000", opacity: 1.0, |
379 | fill: false}); |
380 | |
381 | layerHighlights.addLayer(highlight); |
382 | |
383 | highlight.bringToBack(); |
384 | } |
385 | |
386 | |
387 | // |
388 | // Select a Polygon feature |
389 | // |
390 | |
391 | function selectPolygonFeature(feature,dump,event) |
392 | { |
393 | if(dump) |
394 | ajaxGET("visualiser.cgi?dump=" + dump, runDumpSuccess); |
395 | |
396 | layerHighlights.clearLayers(); |
397 | |
398 | var highlight = L.polygon(feature.getLatLngs(),{weight: 8, stroke: true, color: "#F0F000", opacity: 1.0, |
399 | fill: false}); |
400 | |
401 | layerHighlights.addLayer(highlight); |
402 | |
403 | highlight.bringToBack(); |
404 | } |
405 | |
406 | |
407 | // |
408 | // Un-select a feature |
409 | // |
410 | |
411 | function unselectFeature(feature) |
412 | { |
413 | layerHighlights.clearLayers(); |
414 | |
415 | drawPopup(null); |
416 | } |
417 | |
418 | |
419 | // |
420 | // Display the dump data |
421 | // |
422 | |
423 | function runDumpSuccess(response) |
424 | { |
425 | var string=response.responseText; |
426 | |
427 | if(mapprops.editurl !== undefined && mapprops.editurl !== "") |
428 | { |
429 | var types=["node", "way", "relation"]; |
430 | var Types=["Node", "Way", "Relation"]; |
431 | |
432 | for(var t in types) |
433 | { |
434 | var Type=Types[t]; |
435 | var type=types[t]; |
436 | |
437 | var regexp=RegExp(Type + " [0-9]+"); |
438 | |
439 | var match; |
440 | |
441 | while((match=string.match(regexp)) !== null) |
442 | { |
443 | match=String(match); |
444 | |
445 | var id=match.slice(1+type.length,match.length); |
446 | |
447 | string=string.replace(regexp,Type + " <a href='" + mapprops.browseurl + "/" + type + "/" + id + "' target='" + type + id + "'>" + id + "</a>"); |
448 | } |
449 | } |
450 | } |
451 | |
452 | drawPopup(string.split("\n").join("<br>")); |
453 | } |
454 | |
455 | |
456 | //////////////////////////////////////////////////////////////////////////////// |
457 | /////////////////////////////// Server handling //////////////////////////////// |
458 | //////////////////////////////////////////////////////////////////////////////// |
459 | |
460 | // |
461 | // Define an AJAX request object |
462 | // |
463 | |
464 | function ajaxGET(url,success,failure,state) |
465 | { |
466 | var ajaxRequest=new XMLHttpRequest(); |
467 | |
468 | function ajaxGOT(options) { |
469 | if(this.readyState==4) |
470 | if(this.status==200) |
471 | { if(typeof(options.success)=="function") options.success(this,options.state); } |
472 | else |
473 | { if(typeof(options.failure)=="function") options.failure(this,options.state); } |
474 | } |
475 | |
476 | ajaxRequest.onreadystatechange = function(){ ajaxGOT.call(ajaxRequest,{success: success, failure: failure, state: state}); }; |
477 | ajaxRequest.open("GET", url, true); |
478 | ajaxRequest.send(null); |
479 | } |
480 | |
481 | |
482 | // |
483 | // Display the status |
484 | // |
485 | |
486 | function displayStatus(type,subtype,content) |
487 | { |
488 | var child=document.getElementById("result_status").firstChild; |
489 | |
490 | do |
491 | { |
492 | if(child.id !== undefined) |
493 | child.style.display="none"; |
494 | |
495 | child=child.nextSibling; |
496 | } |
497 | while(child !== null); |
498 | |
499 | var chosen_status=document.getElementById("result_status_" + type); |
500 | |
501 | chosen_status.style.display=""; |
502 | |
503 | if(subtype !== undefined) |
504 | { |
505 | var format_status=document.getElementById("result_status_" + subtype).innerHTML; |
506 | |
507 | chosen_status.innerHTML=format_status.replace("#",String(content)); |
508 | } |
509 | } |
510 | |
511 | |
512 | // |
513 | // Display data statistics |
514 | // |
515 | |
516 | function displayStatistics() |
517 | { |
518 | // Use AJAX to get the statistics |
519 | |
520 | ajaxGET("statistics.cgi", runStatisticsSuccess); |
521 | } |
522 | |
523 | |
524 | // |
525 | // Success in running data statistics generation. |
526 | // |
527 | |
528 | function runStatisticsSuccess(response) |
529 | { |
530 | document.getElementById("statistics_data").innerHTML="<pre>" + response.responseText + "</pre>"; |
531 | document.getElementById("statistics_link").style.display="none"; |
532 | } |
533 | |
534 | |
535 | // |
536 | // Get the requested data |
537 | // |
538 | |
539 | function displayData(datatype) // called from visualiser.html |
540 | { |
541 | for(var data in data_types) |
542 | hideshow_hide(data_types[data]); |
543 | |
544 | if(datatype !== "") |
545 | hideshow_show(datatype); |
546 | |
547 | // Delete the old data |
548 | |
549 | unselectFeature(); |
550 | |
551 | layerVectors.clearLayers(); |
552 | layerHighlights.clearLayers(); |
553 | |
554 | layerBoxes.setStyle({stroke:false}); |
555 | box=false; |
556 | |
557 | // Print the status |
558 | |
559 | displayStatus("no_data"); |
560 | |
561 | // Return if just here to clear the data |
562 | |
563 | if(datatype === "") |
564 | return; |
565 | |
566 | // Get the new data |
567 | |
568 | var mapbounds=map.getBounds(); |
569 | |
570 | var url="visualiser.cgi"; |
571 | |
572 | url=url + "?lonmin=" + format5f(mapbounds.getWest()); |
573 | url=url + ";latmin=" + format5f(mapbounds.getSouth()); |
574 | url=url + ";lonmax=" + format5f(mapbounds.getEast()); |
575 | url=url + ";latmax=" + format5f(mapbounds.getNorth()); |
576 | url=url + ";data=" + datatype; |
577 | |
578 | // Use AJAX to get the data |
579 | |
580 | switch(datatype) |
581 | { |
582 | case "junctions": |
583 | ajaxGET(url, runJunctionsSuccess, runFailure); |
584 | break; |
585 | case "super": |
586 | ajaxGET(url, runSuperSuccess, runFailure); |
587 | break; |
588 | case "waytype": |
589 | var waytype; |
590 | var waytypes=document.forms["waytypes"].elements["waytype"]; |
591 | for(var h in waytypes) |
592 | if(waytypes[h].checked) |
593 | waytype=waytypes[h].value; |
594 | url+="-" + waytype; |
595 | ajaxGET(url, runWaytypeSuccess, runFailure); |
596 | break; |
597 | case "highway": |
598 | var highway; |
599 | var highways=document.forms["highways"].elements["highway"]; |
600 | for(var h in highways) |
601 | if(highways[h].checked) |
602 | highway=highways[h].value; |
603 | url+="-" + highway; |
604 | ajaxGET(url, runHighwaySuccess, runFailure); |
605 | break; |
606 | case "transport": |
607 | var transport; |
608 | var transports=document.forms["transports"].elements["transport"]; |
609 | for(var t in transports) |
610 | if(transports[t].checked) |
611 | transport=transports[t].value; |
612 | url+="-" + transport; |
613 | ajaxGET(url, runTransportSuccess, runFailure); |
614 | break; |
615 | case "barrier": |
616 | var transport; |
617 | var transports=document.forms["barriers"].elements["barrier"]; |
618 | for(var t in transports) |
619 | if(transports[t].checked) |
620 | transport=transports[t].value; |
621 | url+="-" + transport; |
622 | ajaxGET(url, runBarrierSuccess, runFailure); |
623 | break; |
624 | case "turns": |
625 | ajaxGET(url, runTurnsSuccess, runFailure); |
626 | break; |
627 | case "speed": |
628 | case "weight": |
629 | case "height": |
630 | case "width": |
631 | case "length": |
632 | ajaxGET(url, runLimitSuccess, runFailure); |
633 | break; |
634 | case "property": |
635 | var property; |
636 | var properties=document.forms["properties"].elements["property"]; |
637 | for(var p in properties) |
638 | if(properties[p].checked) |
639 | property=properties[p].value; |
640 | url+="-" + property; |
641 | ajaxGET(url, runPropertySuccess, runFailure); |
642 | break; |
643 | case "errorlogs": |
644 | ajaxGET(url, runErrorlogSuccess, runFailure); |
645 | break; |
646 | } |
647 | } |
648 | |
649 | |
650 | // |
651 | // Success in getting the junctions. |
652 | // |
653 | |
654 | function runJunctionsSuccess(response) |
655 | { |
656 | var lines=response.responseText.split("\n"); |
657 | |
658 | var junction_colours={ |
659 | 0: "#FFFFFF", |
660 | 1: "#FF0000", |
661 | 2: "#FFFF00", |
662 | 3: "#00FF00", |
663 | 4: "#8B4513", |
664 | 5: "#00BFFF", |
665 | 6: "#FF69B4", |
666 | 7: "#000000", |
667 | 8: "#000000", |
668 | 9: "#000000" |
669 | }; |
670 | |
671 | for(var line=0;line<lines.length;line++) |
672 | { |
673 | var words=lines[line].split(" "); |
674 | |
675 | if(line === 0) |
676 | { |
677 | var lat1=words[0]; |
678 | var lon1=words[1]; |
679 | var lat2=words[2]; |
680 | var lon2=words[3]; |
681 | |
682 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
683 | |
684 | layerBoxes.setBounds(bounds); |
685 | |
686 | layerBoxes.setStyle({stroke: true}); |
687 | box=true; |
688 | } |
689 | else if(words[0] !== "") |
690 | { |
691 | var dump=words[0]; |
692 | var lat=words[1]; |
693 | var lon=words[2]; |
694 | var count=words[3]; |
695 | |
696 | var lonlat = L.latLng(lat,lon); |
697 | |
698 | var feature = L.circleMarker(lonlat,{radius: 2, fill: true, fillColor: junction_colours[count], fillOpacity: 1.0, |
699 | stroke: false}); |
700 | |
701 | feature.on("click", (function(f,d) { return function(evt) { selectCircleMarkerFeature(f,d,evt); }; }(feature,dump))); |
702 | |
703 | layerVectors.addLayer(feature); |
704 | } |
705 | } |
706 | |
707 | displayStatus("data","junctions",lines.length-2); |
708 | } |
709 | |
710 | |
711 | // |
712 | // Success in getting the super-node and super-segments |
713 | // |
714 | |
715 | function runSuperSuccess(response) |
716 | { |
717 | var lines=response.responseText.split("\n"); |
718 | |
719 | var nodelonlat; |
720 | |
721 | for(var line=0;line<lines.length;line++) |
722 | { |
723 | var words=lines[line].split(" "); |
724 | |
725 | if(line === 0) |
726 | { |
727 | var lat1=words[0]; |
728 | var lon1=words[1]; |
729 | var lat2=words[2]; |
730 | var lon2=words[3]; |
731 | |
732 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
733 | |
734 | layerBoxes.setBounds(bounds); |
735 | |
736 | layerBoxes.setStyle({stroke: true}); |
737 | box=true; |
738 | } |
739 | else if(words[0] !== "") |
740 | { |
741 | var dump=words[0]; |
742 | var lat=words[1]; |
743 | var lon=words[2]; |
744 | |
745 | var lonlat = L.latLng(lat,lon); |
746 | |
747 | if(dump.charAt(0) == "n") |
748 | { |
749 | nodelonlat=lonlat; |
750 | |
751 | var feature = L.circleMarker(lonlat,{radius: 4, fill: true, fillColor: "#FF0000", fillOpacity: 1.0, |
752 | stroke: false}); |
753 | |
754 | feature.on("click", (function(f,d) { return function(evt) { selectCircleMarkerFeature(f,d,evt); }; }(feature,dump))); |
755 | |
756 | layerVectors.addLayer(feature); |
757 | } |
758 | else |
759 | { |
760 | var feature = L.polyline([nodelonlat,lonlat],{weight: 2, stroke: true, color: "#FF0000", opacity: 1.0, |
761 | fill: false}); |
762 | |
763 | feature.on("click", (function(f,d) { return function(evt) { selectPolylineFeature(f,d,evt); }; }(feature,dump))); |
764 | |
765 | layerVectors.addLayer(feature); |
766 | } |
767 | } |
768 | } |
769 | |
770 | displayStatus("data","super",lines.length-2); |
771 | } |
772 | |
773 | |
774 | // |
775 | // Success in getting the waytype data |
776 | // |
777 | |
778 | function runWaytypeSuccess(response) |
779 | { |
780 | var hex={0: "00", 1: "11", 2: "22", 3: "33", 4: "44", 5: "55", 6: "66", 7: "77", |
781 | 8: "88", 9: "99", 10: "AA", 11: "BB", 12: "CC", 13: "DD", 14: "EE", 15: "FF"}; |
782 | |
783 | var lines=response.responseText.split("\n"); |
784 | |
785 | for(var line=0;line<lines.length;line++) |
786 | { |
787 | var words=lines[line].split(" "); |
788 | |
789 | if(line === 0) |
790 | { |
791 | var lat1=words[0]; |
792 | var lon1=words[1]; |
793 | var lat2=words[2]; |
794 | var lon2=words[3]; |
795 | |
796 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
797 | |
798 | layerBoxes.setBounds(bounds); |
799 | |
800 | layerBoxes.setStyle({stroke: true}); |
801 | box=true; |
802 | } |
803 | else if(words[0] !== "") |
804 | { |
805 | var dump=words[0]; |
806 | var lat1=words[1]; |
807 | var lon1=words[2]; |
808 | var lat2=words[3]; |
809 | var lon2=words[4]; |
810 | |
811 | var lonlat1 = L.latLng(lat1,lon1); |
812 | var lonlat2 = L.latLng(lat2,lon2); |
813 | |
814 | var point1 = map.options.crs.latLngToPoint(lonlat1,15); |
815 | var point2 = map.options.crs.latLngToPoint(lonlat2,15); |
816 | |
817 | var dy = point2.y-point1.y; |
818 | var dx = point2.x-point1.x; |
819 | var dist = Math.sqrt(dx*dx+dy*dy)/2; |
820 | var ang = Math.atan2(-dy,dx); |
821 | |
822 | var point3 = L.point(point1.x-dy/dist,point1.y+dx/dist); |
823 | var point4 = L.point(point1.x+dy/dist,point1.y-dx/dist); |
824 | |
825 | var lonlat3 = map.options.crs.pointToLatLng(point3,15); |
826 | var lonlat4 = map.options.crs.pointToLatLng(point4,15); |
827 | |
828 | var r=Math.round(7.5+7.9*Math.cos(ang)); |
829 | var g=Math.round(7.5+7.9*Math.cos(ang+2.0943951)); |
830 | var b=Math.round(7.5+7.9*Math.cos(ang-2.0943951)); |
831 | var colour = "#" + hex[r] + hex[g] + hex[b]; |
832 | |
833 | var feature = L.polygon([lonlat2,lonlat3,lonlat4],{weight: 2, stroke: true, color: colour, opacity: 1.0, |
834 | fill: false}); |
835 | |
836 | feature.on("click", (function(f,d) { return function(evt) { selectPolygonFeature(f,d,evt); }; }(feature,dump))); |
837 | |
838 | layerVectors.addLayer(feature); |
839 | } |
840 | } |
841 | |
842 | displayStatus("data","waytype",lines.length-2); |
843 | } |
844 | |
845 | |
846 | // |
847 | // Success in getting the highway data |
848 | // |
849 | |
850 | function runHighwaySuccess(response) |
851 | { |
852 | var lines=response.responseText.split("\n"); |
853 | |
854 | for(var line=0;line<lines.length;line++) |
855 | { |
856 | var words=lines[line].split(" "); |
857 | |
858 | if(line === 0) |
859 | { |
860 | var lat1=words[0]; |
861 | var lon1=words[1]; |
862 | var lat2=words[2]; |
863 | var lon2=words[3]; |
864 | |
865 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
866 | |
867 | layerBoxes.setBounds(bounds); |
868 | |
869 | layerBoxes.setStyle({stroke: true}); |
870 | box=true; |
871 | } |
872 | else if(words[0] !== "") |
873 | { |
874 | var dump=words[0]; |
875 | var lat1=words[1]; |
876 | var lon1=words[2]; |
877 | var lat2=words[3]; |
878 | var lon2=words[4]; |
879 | |
880 | var lonlat1 = L.latLng(lat1,lon1); |
881 | var lonlat2 = L.latLng(lat2,lon2); |
882 | |
883 | var feature = L.polyline([lonlat1,lonlat2],{weight: 2, stroke: true, color: "#FF0000", opacity: 1.0, |
884 | fill: false}); |
885 | |
886 | feature.on("click", (function(f,d) { return function(evt) { selectPolylineFeature(f,d,evt); }; }(feature,dump))); |
887 | |
888 | layerVectors.addLayer(feature); |
889 | } |
890 | } |
891 | |
892 | displayStatus("data","highway",lines.length-2); |
893 | } |
894 | |
895 | |
896 | // |
897 | // Success in getting the transport data |
898 | // |
899 | |
900 | function runTransportSuccess(response) |
901 | { |
902 | var lines=response.responseText.split("\n"); |
903 | |
904 | for(var line=0;line<lines.length;line++) |
905 | { |
906 | var words=lines[line].split(" "); |
907 | |
908 | if(line === 0) |
909 | { |
910 | var lat1=words[0]; |
911 | var lon1=words[1]; |
912 | var lat2=words[2]; |
913 | var lon2=words[3]; |
914 | |
915 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
916 | |
917 | layerBoxes.setBounds(bounds); |
918 | |
919 | layerBoxes.setStyle({stroke: true}); |
920 | box=true; |
921 | } |
922 | else if(words[0] !== "") |
923 | { |
924 | var dump=words[0]; |
925 | var lat1=words[1]; |
926 | var lon1=words[2]; |
927 | var lat2=words[3]; |
928 | var lon2=words[4]; |
929 | |
930 | var lonlat1 = L.latLng(lat1,lon1); |
931 | var lonlat2 = L.latLng(lat2,lon2); |
932 | |
933 | var feature = L.polyline([lonlat1,lonlat2],{weight: 2, stroke: true, color: "#FF0000", opacity: 1.0, |
934 | fill: false}); |
935 | |
936 | feature.on("click", (function(f,d) { return function(evt) { selectPolylineFeature(f,d,evt); }; }(feature,dump))); |
937 | |
938 | layerVectors.addLayer(feature); |
939 | } |
940 | } |
941 | |
942 | displayStatus("data","transport",lines.length-2); |
943 | } |
944 | |
945 | |
946 | // |
947 | // Success in getting the barrier data |
948 | // |
949 | |
950 | function runBarrierSuccess(response) |
951 | { |
952 | var lines=response.responseText.split("\n"); |
953 | |
954 | for(var line=0;line<lines.length;line++) |
955 | { |
956 | var words=lines[line].split(" "); |
957 | |
958 | if(line === 0) |
959 | { |
960 | var lat1=words[0]; |
961 | var lon1=words[1]; |
962 | var lat2=words[2]; |
963 | var lon2=words[3]; |
964 | |
965 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
966 | |
967 | layerBoxes.setBounds(bounds); |
968 | |
969 | layerBoxes.setStyle({stroke: true}); |
970 | box=true; |
971 | } |
972 | else if(words[0] !== "") |
973 | { |
974 | var dump=words[0]; |
975 | var lat=words[1]; |
976 | var lon=words[2]; |
977 | |
978 | var lonlat = L.latLng(lat,lon); |
979 | |
980 | var feature = L.circleMarker(lonlat,{radius: 2, fill: true, fillColor: "#FF0000", fillOpacity: 1.0, |
981 | stroke: false}); |
982 | |
983 | feature.on("click", (function(f,d) { return function(evt) { selectCircleMarkerFeature(f,d,evt); }; }(feature,dump))); |
984 | |
985 | layerVectors.addLayer(feature); |
986 | } |
987 | } |
988 | |
989 | displayStatus("data","barrier",lines.length-2); |
990 | } |
991 | |
992 | |
993 | // |
994 | // Success in getting the turn restrictions data |
995 | // |
996 | |
997 | function runTurnsSuccess(response) |
998 | { |
999 | var lines=response.responseText.split("\n"); |
1000 | |
1001 | for(var line=0;line<lines.length;line++) |
1002 | { |
1003 | var words=lines[line].split(" "); |
1004 | |
1005 | if(line === 0) |
1006 | { |
1007 | var lat1=words[0]; |
1008 | var lon1=words[1]; |
1009 | var lat2=words[2]; |
1010 | var lon2=words[3]; |
1011 | |
1012 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
1013 | |
1014 | layerBoxes.setBounds(bounds); |
1015 | |
1016 | layerBoxes.setStyle({stroke: true}); |
1017 | box=true; |
1018 | } |
1019 | else if(words[0] !== "") |
1020 | { |
1021 | var dump=words[0]; |
1022 | var lat1=words[1]; |
1023 | var lon1=words[2]; |
1024 | var lat2=words[3]; |
1025 | var lon2=words[4]; |
1026 | var lat3=words[5]; |
1027 | var lon3=words[6]; |
1028 | |
1029 | var lonlat1 = L.latLng(lat1,lon1); |
1030 | var lonlat2 = L.latLng(lat2,lon2); |
1031 | var lonlat3 = L.latLng(lat3,lon3); |
1032 | |
1033 | var feature = L.polygon([lonlat1,lonlat2,lonlat3],{weight: 2, stroke: true, color: "#FF0000", opacity: 1.0, |
1034 | fill: false}); |
1035 | |
1036 | feature.on("click", (function(f,d) { return function(evt) { selectPolygonFeature(f,d,evt); }; }(feature,dump))); |
1037 | |
1038 | layerVectors.addLayer(feature); |
1039 | } |
1040 | } |
1041 | |
1042 | displayStatus("data","turns",lines.length-2); |
1043 | } |
1044 | |
1045 | |
1046 | // |
1047 | // Success in getting the speed/weight/height/width/length limits |
1048 | // |
1049 | |
1050 | function runLimitSuccess(response) |
1051 | { |
1052 | var lines=response.responseText.split("\n"); |
1053 | |
1054 | var nodelonlat; |
1055 | |
1056 | for(var line=0;line<lines.length;line++) |
1057 | { |
1058 | var words=lines[line].split(" "); |
1059 | |
1060 | if(line === 0) |
1061 | { |
1062 | var lat1=words[0]; |
1063 | var lon1=words[1]; |
1064 | var lat2=words[2]; |
1065 | var lon2=words[3]; |
1066 | |
1067 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
1068 | |
1069 | layerBoxes.setBounds(bounds); |
1070 | |
1071 | layerBoxes.setStyle({stroke: true}); |
1072 | box=true; |
1073 | } |
1074 | else if(words[0] !== "") |
1075 | { |
1076 | var dump=words[0]; |
1077 | var lat=words[1]; |
1078 | var lon=words[2]; |
1079 | var number=words[3]; |
1080 | |
1081 | var lonlat = L.latLng(lat,lon); |
1082 | |
1083 | if(number === undefined) |
1084 | { |
1085 | nodelonlat=lonlat; |
1086 | |
1087 | var feature = L.circleMarker(lonlat,{radius: 3, fill: true, fillColor: "#FF0000", fillOpacity: 1.0, |
1088 | stroke: false}); |
1089 | |
1090 | feature.on("click", (function(f,d) { return function(evt) { selectCircleMarkerFeature(f,d,evt); }; }(feature,dump))); |
1091 | |
1092 | layerVectors.addLayer(feature); |
1093 | } |
1094 | else |
1095 | { |
1096 | var lonlat = L.latLng(lat,lon); |
1097 | |
1098 | var feature = L.polyline([nodelonlat,lonlat],{weight: 2, stroke: true, color: "#FF0000", opacity: 1.0, |
1099 | fill: false}); |
1100 | |
1101 | feature.on("click", (function(f,d) { return function(evt) { selectPolylineFeature(f,d,evt); }; }(feature,dump))); |
1102 | |
1103 | layerVectors.addLayer(feature); |
1104 | |
1105 | var point1 = map.options.crs.latLngToPoint(nodelonlat,15); |
1106 | var point2 = map.options.crs.latLngToPoint(lonlat ,15); |
1107 | |
1108 | var dy = point2.y-point1.y; |
1109 | var dx = point2.x-point1.x; |
1110 | var dist = Math.sqrt(dx*dx+dy*dy)/24; |
1111 | |
1112 | var point = L.point(point1.x+dx/dist,point1.y+dy/dist); |
1113 | |
1114 | feature=L.marker(map.options.crs.pointToLatLng(point,15), {clickable: false, |
1115 | icon: L.icon({iconUrl: "icons/limit-" + number + ".png", |
1116 | iconSize: L.point(19,19), |
1117 | iconAnchor: L.point(9,10)})}); |
1118 | |
1119 | layerVectors.addLayer(feature); |
1120 | } |
1121 | } |
1122 | } |
1123 | |
1124 | displayStatus("data","limit",lines.length-2); |
1125 | } |
1126 | |
1127 | |
1128 | // |
1129 | // Success in getting the property data |
1130 | // |
1131 | |
1132 | function runPropertySuccess(response) |
1133 | { |
1134 | var lines=response.responseText.split("\n"); |
1135 | |
1136 | for(var line=0;line<lines.length;line++) |
1137 | { |
1138 | var words=lines[line].split(" "); |
1139 | |
1140 | if(line === 0) |
1141 | { |
1142 | var lat1=words[0]; |
1143 | var lon1=words[1]; |
1144 | var lat2=words[2]; |
1145 | var lon2=words[3]; |
1146 | |
1147 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
1148 | |
1149 | layerBoxes.setBounds(bounds); |
1150 | |
1151 | layerBoxes.setStyle({stroke: true}); |
1152 | box=true; |
1153 | } |
1154 | else if(words[0] !== "") |
1155 | { |
1156 | var dump=words[0]; |
1157 | var lat1=words[1]; |
1158 | var lon1=words[2]; |
1159 | var lat2=words[3]; |
1160 | var lon2=words[4]; |
1161 | |
1162 | var lonlat1 = L.latLng(lat1,lon1); |
1163 | var lonlat2 = L.latLng(lat2,lon2); |
1164 | |
1165 | var feature = L.polyline([lonlat1,lonlat2],{weight: 2, stroke: true, color: "#FF0000", opacity: 1.0, |
1166 | fill: false}); |
1167 | |
1168 | feature.on("click", (function(f,d) { return function(evt) { selectPolylineFeature(f,d,evt); }; }(feature,dump))); |
1169 | |
1170 | layerVectors.addLayer(feature); |
1171 | } |
1172 | } |
1173 | |
1174 | displayStatus("data","property",lines.length-2); |
1175 | } |
1176 | |
1177 | |
1178 | // |
1179 | // Success in getting the error log data |
1180 | // |
1181 | |
1182 | function runErrorlogSuccess(response) |
1183 | { |
1184 | var lines=response.responseText.split("\n"); |
1185 | |
1186 | for(var line=0;line<lines.length;line++) |
1187 | { |
1188 | var words=lines[line].split(" "); |
1189 | |
1190 | if(line === 0) |
1191 | { |
1192 | var lat1=words[0]; |
1193 | var lon1=words[1]; |
1194 | var lat2=words[2]; |
1195 | var lon2=words[3]; |
1196 | |
1197 | var bounds = L.latLngBounds(L.latLng(lat1,lon1),L.latLng(lat2,lon2)); |
1198 | |
1199 | layerBoxes.setBounds(bounds); |
1200 | |
1201 | layerBoxes.setStyle({stroke: true}); |
1202 | box=true; |
1203 | } |
1204 | else if(words[0] !== "") |
1205 | { |
1206 | var dump=words[0]; |
1207 | var lat=words[1]; |
1208 | var lon=words[2]; |
1209 | |
1210 | var lonlat = L.latLng(lat,lon); |
1211 | |
1212 | var feature = L.circleMarker(lonlat,{radius: 3, fill: true, fillColor: "#FF0000", fillOpacity: 1.0, |
1213 | stroke: false}); |
1214 | |
1215 | feature.on("click", (function(f,d) { return function(evt) { selectCircleMarkerFeature(f,d,evt); }; }(feature,dump))); |
1216 | |
1217 | layerVectors.addLayer(feature); |
1218 | } |
1219 | } |
1220 | |
1221 | displayStatus("data","errorlogs",lines.length-2); |
1222 | } |
1223 | |
1224 | |
1225 | // |
1226 | // Failure in getting data. |
1227 | // |
1228 | |
1229 | function runFailure(response) |
1230 | { |
1231 | displayStatus("failed"); |
1232 | } |