<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Azimuthal Projection</title>
<script type="text/javascript" src="../../d3.js"></script>
<script type="text/javascript" src="../../d3.geo.js"></script>
<script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="azimuthal.css"/>
</head>
<body>
<h3>Azimuthal Projection</h3>
<script type="text/javascript" src="azimuthal.js"></script><p>
<select id="mode">
<option value="stereographic">stereographic</option>
<option value="orthographic">orthographic</option>
<option value="equidistant">equidistant</option>
<option value="gnomonic">gnomonic</option>
<option value="equalarea">equalarea</option>
</select>
<div id="lon">origin.longitude: <span>0</span></div>
<div id="lat">origin.latitude: <span>0</span></div><p>
<div id="scale">scale: <span>240</span></div><p>
<div id="translate-x">translate.x: <span>480</span></div>
<div id="translate-y">translate.y: <span>250</span></div>
<script type="text/javascript">
$("#lon").slider({
min: -180,
max: 180,
step: 1e-1,
value: 0,
slide: function(event, ui) {
var origin = xy.origin();
origin[0] = ui.value;
xy.origin(origin);
circle.origin(origin);
refresh();
}
});
$("#lat").slider({
min: -90,
max: 90,
step: 1e-1,
value: 0,
slide: function(event, ui) {
var origin = xy.origin();
origin[1] = ui.value;
xy.origin(origin);
circle.origin(origin);
refresh();
}
});
$("#scale").slider({
min: 0,
max: 3000,
value: 240,
slide: function(event, ui) {
xy.scale(ui.value);
refresh();
}
});
$("#translate-x").slider({
min: -2000,
max: 2000,
value: 480,
slide: function(event, ui) {
var translate = xy.translate();
translate[0] = ui.value;
xy.translate(translate);
refresh();
}
});
$("#translate-y").slider({
min: -2000,
max: 2000,
value: 250,
slide: function(event, ui) {
var translate = xy.translate();
translate[1] = ui.value;
xy.translate(translate);
refresh();
}
});
$("#mode").change(function() {
var mode = $(this).val();
xy.mode(mode);
refresh(500);
});
</script>
</body>
</html>