| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|---|
| 5 | <title>Polar Stereographic 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 | <div id="lon">origin.longitude: <span>0</span></div> |
|---|
| 16 | <div id="lat">origin.latitude: <span>0</span></div><p> |
|---|
| 17 | <div id="scale">scale: <span>240</span></div><p> |
|---|
| 18 | <div id="translate-x">translate.x: <span>480</span></div> |
|---|
| 19 | <div id="translate-y">translate.y: <span>250</span></div> |
|---|
| 20 | <script type="text/javascript"> |
|---|
| 21 | |
|---|
| 22 | $("#lon").slider({ |
|---|
| 23 | min: -180, |
|---|
| 24 | max: 180, |
|---|
| 25 | step: 1e-1, |
|---|
| 26 | value: 0, |
|---|
| 27 | slide: function(event, ui) { |
|---|
| 28 | var origin = xy.origin(); |
|---|
| 29 | origin[0] = ui.value; |
|---|
| 30 | xy.origin(origin); |
|---|
| 31 | refresh(); |
|---|
| 32 | } |
|---|
| 33 | }); |
|---|
| 34 | |
|---|
| 35 | $("#lat").slider({ |
|---|
| 36 | min: -90, |
|---|
| 37 | max: 90, |
|---|
| 38 | step: 1e-1, |
|---|
| 39 | value: 0, |
|---|
| 40 | slide: function(event, ui) { |
|---|
| 41 | var origin = xy.origin(); |
|---|
| 42 | origin[1] = ui.value; |
|---|
| 43 | xy.origin(origin); |
|---|
| 44 | refresh(); |
|---|
| 45 | } |
|---|
| 46 | }); |
|---|
| 47 | |
|---|
| 48 | $("#scale").slider({ |
|---|
| 49 | min: 0, |
|---|
| 50 | max: 3000, |
|---|
| 51 | value: 240, |
|---|
| 52 | slide: function(event, ui) { |
|---|
| 53 | xy.scale(ui.value); |
|---|
| 54 | refresh(); |
|---|
| 55 | } |
|---|
| 56 | }); |
|---|
| 57 | |
|---|
| 58 | $("#translate-x").slider({ |
|---|
| 59 | min: -2000, |
|---|
| 60 | max: 2000, |
|---|
| 61 | value: 480, |
|---|
| 62 | slide: function(event, ui) { |
|---|
| 63 | var translate = xy.translate(); |
|---|
| 64 | translate[0] = ui.value; |
|---|
| 65 | xy.translate(translate); |
|---|
| 66 | refresh(); |
|---|
| 67 | } |
|---|
| 68 | }); |
|---|
| 69 | |
|---|
| 70 | $("#translate-y").slider({ |
|---|
| 71 | min: -2000, |
|---|
| 72 | max: 2000, |
|---|
| 73 | value: 250, |
|---|
| 74 | slide: function(event, ui) { |
|---|
| 75 | var translate = xy.translate(); |
|---|
| 76 | translate[1] = ui.value; |
|---|
| 77 | xy.translate(translate); |
|---|
| 78 | refresh(); |
|---|
| 79 | } |
|---|
| 80 | }); |
|---|
| 81 | |
|---|
| 82 | </script> |
|---|
| 83 | </body> |
|---|
| 84 | </html> |
|---|
