|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|
5 <title>Azimuthal Projection</title> |
|
6 <script type="text/javascript" src="../../d3.js"></script> |
|
7 <script type="text/javascript" src="../../d3.geo.js"></script> |
|
8 <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script> |
|
9 <script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script> |
|
10 <link type="text/css" rel="stylesheet" href="azimuthal.css"/> |
|
11 </head> |
|
12 <body> |
|
13 <h3>Azimuthal Projection</h3> |
|
14 <script type="text/javascript" src="azimuthal.js"></script><p> |
|
15 <select id="mode"> |
|
16 <option value="stereographic">stereographic</option> |
|
17 <option value="orthographic">orthographic</option> |
|
18 <option value="equidistant">equidistant</option> |
|
19 <option value="gnomonic">gnomonic</option> |
|
20 <option value="equalarea">equalarea</option> |
|
21 </select> |
|
22 <div id="lon">origin.longitude: <span>0</span></div> |
|
23 <div id="lat">origin.latitude: <span>0</span></div><p> |
|
24 <div id="scale">scale: <span>240</span></div><p> |
|
25 <div id="translate-x">translate.x: <span>480</span></div> |
|
26 <div id="translate-y">translate.y: <span>250</span></div> |
|
27 <script type="text/javascript"> |
|
28 |
|
29 $("#lon").slider({ |
|
30 min: -180, |
|
31 max: 180, |
|
32 step: 1e-1, |
|
33 value: 0, |
|
34 slide: function(event, ui) { |
|
35 var origin = xy.origin(); |
|
36 origin[0] = ui.value; |
|
37 xy.origin(origin); |
|
38 circle.origin(origin); |
|
39 refresh(); |
|
40 } |
|
41 }); |
|
42 |
|
43 $("#lat").slider({ |
|
44 min: -90, |
|
45 max: 90, |
|
46 step: 1e-1, |
|
47 value: 0, |
|
48 slide: function(event, ui) { |
|
49 var origin = xy.origin(); |
|
50 origin[1] = ui.value; |
|
51 xy.origin(origin); |
|
52 circle.origin(origin); |
|
53 refresh(); |
|
54 } |
|
55 }); |
|
56 |
|
57 $("#scale").slider({ |
|
58 min: 0, |
|
59 max: 3000, |
|
60 value: 240, |
|
61 slide: function(event, ui) { |
|
62 xy.scale(ui.value); |
|
63 refresh(); |
|
64 } |
|
65 }); |
|
66 |
|
67 $("#translate-x").slider({ |
|
68 min: -2000, |
|
69 max: 2000, |
|
70 value: 480, |
|
71 slide: function(event, ui) { |
|
72 var translate = xy.translate(); |
|
73 translate[0] = ui.value; |
|
74 xy.translate(translate); |
|
75 refresh(); |
|
76 } |
|
77 }); |
|
78 |
|
79 $("#translate-y").slider({ |
|
80 min: -2000, |
|
81 max: 2000, |
|
82 value: 250, |
|
83 slide: function(event, ui) { |
|
84 var translate = xy.translate(); |
|
85 translate[1] = ui.value; |
|
86 xy.translate(translate); |
|
87 refresh(); |
|
88 } |
|
89 }); |
|
90 |
|
91 $("#mode").change(function() { |
|
92 var mode = $(this).val(); |
|
93 xy.mode(mode); |
|
94 refresh(500); |
|
95 }); |
|
96 |
|
97 </script> |
|
98 </body> |
|
99 </html> |