-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
233 lines (233 loc) · 11.6 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Geographical Coordinate Converter</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<noscript>
You must enable JavaScript to use this application.
</noscript>
<div class="container-fluid">
<div class="mx-1 pb-3 bg-light">
<h1>Geographical Coordinate Converter</h2>
<div class="alert alert-warning mx-5" role="alert">
<span class="warning">Important</span>: See
the <a href="#disclaimer" target="_self">license and disclaimer</a>
before using. <a href="#instructions" target="_self">Instructions</a>
are <a href="#instructions" target="_self">below</a>.
</div>
<form name="form" class="css-form" novalidate onsubmit="return false;">
<div>
<div class="my-2">
<label for="input-coord-format">Display position format</label>
<select id="input-coord-format" name="coordFormat">
<option value="%d°%M′%S″%c">DMS+</option>
<option value="%d°%M′%c">DM+</option>
<option value="%d°%c">D+</option>
<option value="%i%d">D</option>
<option value="%p%d">±D</option>
<option value="plus+code">OLC plus+code</option>
<option value="osgb36">OS GB 1936 (BNG)</option>
<option value="%dd%M'%S"%c">Proj4</option>
<option value="%c%D° %M">QLandkarte GT</option>
<option value="%c%d°%M′%S″">+DMS</option>
<option value="%c%d°%M′">+DM</option>
<option value="%c%d°">+D</option>
<option value="%d° %M′ %S″ %c">D M S +</option>
<option value="%d° %M′ %c">D M +</option>
<option value="%d° %c">D +</option>
<option value="%c %d° %M′ %S″">+ D M S</option>
<option value="%c %d° %M′">+ D M</option>
<option value="%c %d°">+ D</option>
<option value="%d %m %s%c">Plain DMS+</option>
<option value="%d %m%c">Plain DM+</option>
<option value="%d%c">Plain D+</option>
<option value="%c%d %m %s">Plain +DMS</option>
<option value="%c%d %m">Plain +DM</option>
<option value="%c%d">Plain +D</option>
<option value="IrishGrid">Irish Grid</option>
<option value="ITM">Irish Transverse Mercator</option>
</select>
</div>
<div id="position-style-div" class="my-2" style="display: block;">
<label for="position-separator">Position ordering and separator</label>
<select id="position-separator" name="positionFormat">
<option value="lat-lng">lat lng</option>
<option value="lat,lng" selected="">lat,lng</option>
<option value="lng-lat">lng lat (Proj4 reversed)</option>
<option value="lng,lat">lng,lat (Reversed)</option>
</select>
</div>
<div class="my-2">
<label for="input-position">Location text</label>
<input id="input-position" name="position" type="text" size="30" value="" required="">
</div>
<div id="position-invalid" class="my-2 alert alert-warning" role="alert" style="display: none">
Invalid latitude/longitude. Also note that latitudes range
between -90 and 90 degrees. Longitudes range be between -180
and 180 degrees.
</div>
<div class="my-2"><p><!-- <b>Location converted to </b>--><span id="position-text"></span></p></div>
<div id='div-whereami'>
<div id="geolocation-denied" class="d-none" role="alert">
Browser denied access to location.
</div>
<button id="btn-whereami" type="button" class="btn btn-primary">Use my current location</button>
</div>
</div>
</form>
<p id="warning" class="alert alert-danger my-3 mx-5">
It is your responsibility to confirm the correctness of the converted
values. Do not use these values without checking them against other
reliable means, e.g. examining a map that uses the output format and
visually confirming the location is as expected. See also
the <a href="#disclaimer" target="_self">disclaimer</a>.
</p>
<div id="div-ext-links" class="d-none">
<h3>Links to external map providers</h3>
<p>
Clicking the links below will display the above location using the
selected service provider.
</p>
<ul>
<li><a id='osm-link' href="#" target="_blank">OpenStreetMap</a> <span class="extlink">⧉</span></li>
<li><a id='google-link' href="#" target="_blank">Google Map</a> <span class="extlink">⧉</span></li>
</ul>
</div>
<div>
<h2 id="instructions">Instructions</h2>
<p>
This application interprets the text you enter in the <code>Location
text</code> field and displays a converted version of the interpreted
location according to the options you have selected from the <code>Display
location format</code> and <code>Location ordering and separator</code>
option lists. The latter option is only shown if relevant to the selected
location format.
</p>
<p>
Many common formats are recognised. To try a simple example, enter
numeric only values, separated by a comma, e.g. <code>51.3,-2.3</code> for
<code>N51.3° W2.3°.</code>
</p>
<p>
By experimenting with the different <code>Display location
format</code> options, you will see some of the formats that are also
accepted as input.
</p>
<p>
The degree symbol (°), single and double quotes and variants of
these can be used to represent degrees, minutes and seconds. You can use
the lower-case letter 'd' to represent degrees. Upper-case <code>N, S,
W & E</code> can be used to indicate North, South, West and East. A
negative value denotes South for latitude and West for longitude.
</p>
<p>
Generally, latitude is expected to precede longitude. The exception
is where the value is specifically formatted as the
<a href="https://en.wikipedia.org/wiki/PROJ.4" target="_blank">proj.4</a> <span class="extlink">⧉</span> format. Where
longitude preceeds latitude, a lower-case letter 'd', single quote and
double quote are used to represent degrees, minutes and seconds.
E.g. <code>2d17'40.2"E 48d51'29.7"N</code>.
</p>
<p>
Examples:
</p>
<ul>
<li>48°51'29.7"N 2°17'40.2"E</li>
<li>48°51.495'N 2°17.67'E</li>
<li>48.85825°N 2.2945°E</li>
</ul>
<p>
To confirm correct interpretation of the input text, it is advisable
to select the <code>Display location format</code> option that you
believe matches your input text format and confirm that the output
value exactly matches that input location text.
</p>
<h3>OLC plus+code option</h3>
<p>
This option generates an Open Location Code also known as a Plus Code.
See the <a href="https://en.wikipedia.org/wiki/Open_Location_Code"
target="blank">Open Location
Code</a> <span class="extlink">⧉</span> article for more
information about <a href="http://openlocationcode.com">Open Location
Codes</a> <span class="extlink">⧉</span> and visit
the <a href="http://plus.codes/">Plus Code demonstration
site</a> <span class="extlink">⧉</span> to try them out.
</p>
<p>
The source code for this application can be cloned with:<br/><br/>
<code>git clone git://www.fdsd.co.uk/coordinate-converter.git</code>
</p>
</div>
<div>
<h2 id="privacy">Privacy</h2>
<p class="small">
This application is implemented using the JavaScript environment which
runs entirely within your browser. None of the values you enter as
locations are transmitted elsewhere nor stored by this application.
It is something I developed for my own use and am simply happy to
share it for public use. I hope you find it useful too.
</p>
<p class="small">
The application generates links providing a convenient way to display
maps using some external map service providers. When you click on
those links, the currently interpreted location will be included in
the URL passed to those sites.
</p>
</div>
<div>
<h2>Software Used to Implement this Application</h2>
<h3>Bootstrap</h3>
<p>A popular HTML, CSS and JavaScript framework for developing
responsive, mobile first projects on the web.</p>
<p><a href="https://github.com/twbs/bootstrap/blob/main/LICENSE">MIT
license</a></p>
<h3>Open Location Code (Plus Codes)</h3>
<p>Open Location Code is a library to generate short codes, called
"plus codes", that can be used as digital addresses where street
addresses don't exist.</p>
<p><a href="https://github.com/google/open-location-code/blob/main/LICENSE">Apache-2.0
license</a></p>
<h3>Proj4js</h3>
<p>A JavaScript library to transform coordinates from one coordinate
system to another, including datum transformations.</p>
<p><a href="https://github.com/proj4js/proj4js/blob/master/LICENSE.md">Proj4js
License</a></p>
</div>
<div>
<h2 id="disclaimer">License including disclaimer</h2>
<p class="small">
Coordinate Converter</br>
© 2016-2023 Frank Dean
</p>
<p class="small">
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or any
later version.
</p>
<p class="small">
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See
the <a href="/LICENSE.txt">GNU General Public License</a> for more
details.
</p>
</div>
</div>
</div>
<div id="footer" class="sticky-bottom px-2 py-2 text-bg-secondary">
<div id="version" class="small">
Coordinate converter: v<span>2.0.12</span>
</div>
</div>
<script type="module" src="/index.js"></script>
<!--
<script type="module"
src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-->
</body>
</html>