-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
80 lines (70 loc) · 3.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language=javascript src=raphael-min.js></script>
<script type="text/javascript" language=javascript src=rawdata3.js></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Better Bus Maps</title>
</head>
<body onload="init()">
<div style="z-index:500">
<button onclick="downloadSVG()">Open SVG file ready to save<br/>(wait until projection is finished)</button><br/>
<p style="display:inline">Projection Progress : </p>
<p style="display:inline" id="currentroute">Current Route</p>
<p style="display:inline">/</p>
<p style="display:inline" id="allroutes">Total Route</p>
</div>
<div id="simulatorholder" style="margin:auto">
</div>
</body>
<script type="text/javascript" language="javascript">
function downloadSVG(){
alert("This feature will come as soon as I implement the technique at http://blog.amazeelabs.com/en/import-svg-file-raphaeljs-modify-it-and-save-it-image-part-2");
}
</script>
<script type="text/javascript" language="javascript">
// Creates Raphael canvas to draw into. The area covers the full available width and the points are scaled to fit.
var paperWidth = screen.width-30;
var xrange = maxlong-minlong;
var yrange = maxlat-minlat;
var verticalScale = 1.65;// This is a correction because the earth is a sphere. 1 Degree of longitude is not the same length as 1 Degree of latitude.
var paperHeight = screen.width*Math.abs(verticalScale*yrange/xrange);
var paper = new Raphael("simulatorholder", paperWidth, paperHeight);
// Scale makes text and line width bigger or smaller
var scale = 1;
function init() {
drawnbusstoplabels = [];
document.getElementById("allroutes").innerHTML = xcoordslist.length;
for (var route = 0; route < xcoordslist.length; route++) {
// forces a redraw every 100 routes.
//if (route%100 == 1) {
// alert(route+1);
//}
document.getElementById("currentroute").innerHTML = route+1;
if (xcoordslist[route].length >1 ){
projectpoints(xcoordslist[route], ycoordslist[route], labelslist[route], codeslist[route], colourlist[route], areaslist[route], routes[route]);
}
}
}
// project points and draw them
function projectpoints(xcoords, ycoords, labels, codes, colour, areas, route) {
for (i = 0; i <= xcoords.length - 1; i++) {
// alert("slow"); //in Chrome this forces a refresh after each point is drawn, making a nice video.
// plot the busstops
var xpos = (xcoords[i]-minlong)*Math.abs(paperWidth/xrange);
var ypos = (maxlat-ycoords[i])*Math.abs(paperHeight/yrange);
var xposnext = (xcoords[i+1]-minlong)*Math.abs(paperWidth/xrange);
var yposnext = (maxlat-ycoords[i+1])*Math.abs(paperHeight/yrange);
paper.circle(xpos, ypos, 1 * scale).attr({ "fill": "white" }).data({ "busstopcode": codes[i] });
// draw paths to join the points
pathstring = "M" + xpos + " " + ypos + "L" + xposnext + " " + yposnext;
paper.path(pathstring).attr({ "stroke": colour, "opacity": 0.5, "stroke-width": 1 * scale, "height": 1 });
// plot the busstops labels
if (i == xcoords.length - 1 && !drawnbusstoplabels[areas[i]]) { // we only needs labels at the end points and in areas where a label doesn't already exist.
paper.text(xpos, ypos, route + " to " + areas[i]).attr({ "text-anchor": "middle", "font-size": 1 * scale, "font-weight": "bold" }).toFront();
drawnbusstoplabels[areas[i]] = true;
}
}
}
</script>
</html>