forked from paulsimon/proj4js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·171 lines (157 loc) · 5.33 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Proj4js</title>
<style type="text/css">
@import url(test/base.css);
#descSource, #descDest {
font-style: italic;
color: #999;
}
#xySource, #xyDest {
width: 100%;
}
</style>
<script src="http://localhost:9810/compile?id=proj4js&mode=ADVANCED"></script>
<script src="lib/defs/EPSG27200.js"></script>
<script src="lib/defs/EPSG4272.js"></script>
<script src="lib/defs/EPSG54009.js"></script>
<script src="lib/defs/EPSG42304.js"></script>
<script src="lib/defs/EPSG25833.js"></script>
<script src="lib/defs/EPSG27563.js"></script>
<script src="lib/defs/EPSG4139.js"></script>
<script src="lib/defs/EPSG4302.js"></script>
<script src="lib/defs/EPSG31285.js"></script>
<script src="lib/defs/EPSG900913.js"></script>
<script type="text/javascript">
var projHash = {};
function initProj4js() {
var crsSource = document.getElementById('crsSource');
var crsDest = document.getElementById('crsDest');
var optIndex = 0;
for (var def in Proj4js.defs) {
projHash[def] = new Proj4js.Proj(def); //create a Proj for each definition
var label = def+" - "+ (projHash[def].title ? projHash[def].title : '');
var opt = new Option(label, def);
crsSource.options[optIndex]= opt;
var opt = new Option(label, def);
crsDest.options[optIndex]= opt;
++optIndex;
} // for
updateCrs('Source');
updateCrs('Dest');
}
function updateCrs(id) {
var crs = document.getElementById('crs'+id);
if (crs.value) {
var proj = projHash[crs.value];
var str = 'projection: ' + proj.projName + ' - datum: ' + proj.datumName;
var desc = document.getElementById('desc'+id);
desc.innerHTML = str;
var units = document.getElementById('units'+id);
units.innerHTML = proj.units;
}
}
function transform() {
var crsSource = document.getElementById('crsSource');
var projSource = null;
if (crsSource.value) {
projSource = projHash[crsSource.value];
} else {
alert("Select a source coordinate system");
return;
}
var crsDest = document.getElementById('crsDest');
var projDest = null;
if (crsDest.value) {
projDest = projHash[crsDest.value];
} else {
alert("Select a destination coordinate system");
return;
}
var pointInput = document.getElementById('xySource');
if (pointInput.value) {
var pointSource = new Proj4js.Point(pointInput.value);
Proj4js.transform(projSource, projDest, pointSource);
document.getElementById('xyDest').value = pointSource.toShortString();
} else {
alert("Enter source coordinates");
return;
}
}
</script>
</head>
<body onload="initProj4js()">
<div id="header">
<h1>Proj4js Home Page</h1>
</div>
<div id="navbar">
<a href="http://trac.osgeo.org/proj4js">Proj4js Wiki/Trac</a> |
<a href="http://wiki.osgeo.org/wiki/MetaCRS">OSGeo MetaCRS</a> |
<a href="http://spatialreference.org/">spatialreference.org</a> |
<a href="http://openlayers.org/">OpenLayers</a> |
</div>
<h1>Welcome to Proj4js</h1>
<p>
This is a JavaScript library that provides methods for coordinate
transformations between map projections and longitude/latitude,
including datum transformations, in a web client.
</p>
<p>
To use the Proj4js, you first create a source and destination Proj4js.Proj
objects, passing in a projection code (e.g. EPSG:4326).
You can then use the Proj4js.transform() method, passing in map XY as a point
object and the source and destination projection objects,
and it returns the point coordinate in the destination projection.
</p>
<form>
<table>
<tbody>
<tr>
<th colspan="3">source</th>
<th></th>
<th colspan="3">dest</th>
</tr>
<tr>
<td>CRS:</td>
<td colspan="2">
<select name="crsSource" id="crsSource" onchange="updateCrs('Source')">
<option value selected="selected">Select a CRS</option>
</select>
</td>
<td></td>
<td>CRS:</td>
<td colspan="2">
<select name="crsDest" id="crsDest" onchange="updateCrs('Dest')">
<option value selected="selected">Select a CRS</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" id="descSource">Projection - datum</td>
<td></td>
<td></td>
<td colspan="2" id="descDest">Projection - datum</td>
</tr>
<tr>
<td>x,y</td>
<td><input name="xySource" id="xySource" type="text"/></td>
<td id="unitsSource">units</td>
<td><input type="button" value="--> transform -->" onclick="transform();"/></td>
<td>x,y</td>
<td><input name="xyDest" id="xyDest" type="text"></td>
<td id="unitsDest">units</td>
</tr>
<tr>
<td colspan="7" align="center"><input type="reset" value="reset"/></td>
</tr>
</tbody>
</table>
</form>
<p>
For more information on Proj4js and to report bugs, please visit the
<a href="http://trac.osgeo.org/proj4js">Proj4js Trac and Wiki</a> at OSGeo.
</p>
</body>
</html>