source: trunk/gpx.npemap.org.uk/tracer.html @ 207

Last change on this file since 207 was 207, checked in by Nick Burch, 14 years ago

Remove spaces, so IE is happy

File size: 11.0 KB
Line 
1<html>
2<head>
3        <title>New Popular Edition - GPX Tracer</title>
4        <style type="text/css">
5                body {
6                        background-color: #dddddd;
7                }
8                div#images {
9                        border: 0;
10                        margin: 0;
11                        padding: 0;
12                        width: 760px;
13                        float: left;
14                }
15                div.tilerow {
16                        border: 0;
17                        margin: 0;
18                        padding: 0;
19                }
20                img.tile {
21                        width: 250px;
22                        height: 250px;
23                        border: 0;
24                        margin: 0;
25                }
26                td {
27                        text-align: center;
28                }
29                #calibration {
30                        color: #990000;
31                }
32        </style>
33
34        <!-- Include the Yahoo libraries -->
35        <script src="js/yahoo.js"></script> 
36        <script src="js/dom.js"></script> 
37        <script src="js/connection.js"></script>
38        <script src="js/event.js"></script> 
39</head>
40<body id="body">
41
42<div id="images">
43        <div id="row1" class="tilerow"><img src="empty-tile.png" class="tile" id="row1-img1" /><img src="empty-tile.png" class="tile" id="row1-img2" /><img src="empty-tile.png" class="tile" id="row1-img3" /></div>
44        <div id="row2" class="tilerow"><img src="empty-tile.png" class="tile" id="row2-img1" /><img src="empty-tile.png" class="tile" id="row2-img2" /><img src="empty-tile.png" class="tile" id="row2-img3" /></div>
45        <div id="row3" class="tilerow"><img src="empty-tile.png" class="tile" id="row3-img1" /><img src="empty-tile.png" class="tile" id="row3-img2" /><img src="empty-tile.png" class="tile" id="row3-img3" /></div>
46</div>
47
48<div style="float: right">
49        <div style="height: 100px">&nbsp;</div>
50        <div id="controls">
51                <table>
52                        <tr><td colspan="3" style="align: center">
53                                <a href="" id="north">north</a>
54                        </td></tr>
55                        <tr><td>
56                                <a href="" id="west">west</a>
57                        </td><td /><td>
58                                <a href="" id="east">east</a>
59                        </td></tr>
60                        <tr><td colspan="3" style="align: center">
61                                <a href="" id="south">south</a>
62                        </td></tr>
63                        <tr><td colspan="3" style="align: center">
64                                <br /><br />
65                                <a href="" id="browse">browse map</a>
66                        </td></tr>
67                </table>
68        </div>
69        <div id="actions">
70                <br /><br />
71                <a href="javascript:request_calibrate()">calibrate</a>
72                <br />
73                <a href="#help">(calibration help)</a>
74                <br /><br />
75                <a href="javascript:request_gpx()">generate GPX</a>
76                <br /><br />
77                <a href="/">home</a>
78        </div>
79        <div id="calibration">
80                <br /><br />
81                <span id="calibrateE"></span>
82                <br />
83                <span id="calibrateN"></span>
84        </div>
85</div>
86
87<br style="clear: both" />
88<br /><br />
89
90<div id="help">
91        To correct orthorectification issues, select calibrate above, then
92        click on a 4-way tile join (cross). Repeat for each of the 4 joins.
93        <img src="good-join.jpg" alt="example of a 4 way join" />
94        <br /><br />
95        When in calibration mode, the screen background will go green to alert
96        you. After you click, the calibration error will be (re)calculated and
97        shown, and the background will return to grey. You will need to click
98        the calibration button again before entering the next tile join.
99        <br />
100        It is not advisable to try to calibrate across map sheet joins, as
101        different sheets tend to have different errors.
102        <img src="bad-join.jpg" alt="example of a cross-sheet join" />
103</div>
104
105<br /><br />
106
107<div id="gpxdiv" style="width: 100%">
108        <a name="gpx"></a>
109        <textarea name="gpxbox" id="gpxbox" style="width: 100%; height: 250"></textarea>
110        <input type="button" value="Generate GPX" onclick="do_gpx()" />
111</div>
112
113
114<script type="text/javascript" src="js/jscoord-1.1.1.js"></script>
115<script type="text/javascript">
116var ia = document.getElementById("images");
117
118// Calculation stuff
119var eastings = new Array();
120var northings = new Array();
121var pointPosX = new Array();
122var pointPosY = new Array();
123
124// Our calibration
125var errorEasting = 0;
126var errorNorthing = 0;
127var errorsEasting = new Array();
128var errorsNorthing = new Array();
129var clickIsCalibration = false;
130
131// Calibration functions
132function request_calibrate() {
133        clickIsCalibration = true;
134        document.getElementById("body").style.backgroundColor = "#77ff77";
135}
136function do_calibrate(x, y, clickX, clickY) {
137        clickIsCalibration = false;
138        document.getElementById("body").style.backgroundColor = "";
139
140        // What corner are we near?
141        if(x > 0.5) { x = x - 1.0; }
142        if(y > 0.5) { y = y - 1.0; }
143
144        // We have calculated where the corner is on the map
145        // We need to apply the same value to all edits
146        var errNum = errorsEasting.length;
147        errorsEasting[errNum] = x;
148        errorsNorthing[errNum] = y;
149
150        // Compute new average
151        errorEasting = 0;
152        errorNorthing = 0;
153        for(var i=0; i<errorsEasting.length; i=i+1) {
154                errorEasting = errorEasting + errorsEasting[i];
155                errorNorthing = errorNorthing + errorsNorthing[i];
156        }
157        errorEasting = Math.round(errorEasting / errorsEasting.length * 1000);
158        errorNorthing = Math.round(errorNorthing / errorsNorthing.length * 1000);
159
160        // Draw other cross
161        var cross = new Image();
162        cross.src = "7x7-red-cross.png";
163        ia.appendChild(cross);
164        cross.style.position = "absolute";
165        cross.style.top = clickY - 3; 
166        cross.style.left = clickX - 3;
167
168        // Tell them about it
169        var csE = document.getElementById("calibrateE");
170        while(csE.hasChildNodes()) {
171                csE.removeChild( csE.firstChild );
172        }
173        csE.appendChild( document.createTextNode("Easting is out by " + errorEasting + "m" ) );
174
175        var csN = document.getElementById("calibrateN");
176        while(csN.hasChildNodes()) {
177                csN.removeChild( csN.firstChild );
178        }
179        csN.appendChild( document.createTextNode("Northing is out by " + errorNorthing + "m" ) );
180}
181
182function request_gpx() {
183        // Zoom to the box
184        document.location.href="#gpx";
185
186        // Do the build
187        do_gpx();
188}
189
190function do_gpx() {
191        var gpxArea = document.getElementById("gpxbox");
192
193        var now = new Date();
194        function pad(val) {
195                if(val < 10) { return "0" + val; }
196                return val;
197        }
198        var nowDate = now.getFullYear() + "-" + pad(now.getMonth()+1) + "-" + 
199                                        pad(now.getDate()) + "T" + pad(now.getHours()) + ":" +
200                                        pad(now.getMinutes()) + ":" + pad(now.getSeconds()) + "Z";
201
202        var gpx =
203                        '<?xml version="1.0"?>\n' +
204                        '<gpx\n' +
205                        'version="1.0"\n' +
206                        'creator="NPE to GPX Converter - http://nick.torchboxapps.com/new/"\n' +
207                        'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\n' +
208                        'xmlns="http://www.topografix.com/GPX/1/0"\n' +
209                        'xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/\n' +
210                        'GPX/1/0/gpx.xsd">\n' +
211                        '<time>' + nowDate + '</time>\n' +
212                        '<trk><trkseg>\n';
213        var gpxEnd = '</trkseg></trk>\n</gpx>\n';
214        var gpxData = '';
215        for(var i=0; i<eastings.length; i++) {
216                easting = eastings[i];
217                northing = northings[i];
218
219                if(easting == -1 && northing == -1) {
220                        // Deleted point, skip
221                        continue;
222                }
223
224                // Apply calibration
225                easting = easting - errorEasting;
226                northing = northing - errorNorthing;
227                //alert(easting + " " + northing);
228
229                // Convert
230                var en = new OSRef(easting,northing);
231                var latlong = en.toLatLng();
232                latlong.OSGB36ToWGS84();
233
234                lat = latlong.lat;
235                lng = latlong.lng;
236
237                gpxData = gpxData + 
238                        '<trkpt lat="' + lat + '" lon="' + lng + '">\n' +
239                        ' <time>1950-01-01T00:00:00Z</time>\n' +
240                        ' <fix>3d</fix>\n' +
241                        ' <sat>0</sat>\n' +
242                        ' <hdop>0.00</hdop>\n' +
243                        '</trkpt>';
244        }
245       
246
247        gpxArea.value = gpx + gpxData + gpxEnd;
248        return true;
249}
250
251function removePoint(pointNum) {
252        var img = document.getElementById("point_" + pointNum);
253        var pNode = img.parentNode;
254        pNode.removeChild(img);
255
256        eastings[pointNum] = -1;
257        northings[pointNum] = -1;
258        pointPosX[pointNum] = -1;
259        pointPosY[pointNum] = -1;
260
261        return false;
262}
263
264function click(e) {
265        // Ask the yahoo library to avoid browser nastyness for us
266        e = YAHOO.util.Event.getEvent(e);
267
268        var img = img = YAHOO.util.Event.getTarget(e);
269        var link = img.parentNode;
270        var page = link.parentNode;
271
272        // Note - this won't work in things like IE
273        //  Oh well, like we care...
274        var drawX = YAHOO.util.Event.getPageX(e);
275        var drawY = YAHOO.util.Event.getPageY(e);
276
277        var imgPos = YAHOO.util.Dom.getXY(img);
278        var x = drawX - imgPos[0];
279        var y = drawY - imgPos[1];
280        //alert(x + " " + y);
281
282        // OK, compute and add the point
283        //  x is from left hand edge, which is what we want
284        var facX = x / img.offsetWidth;
285        //  y is from top edge, which isn't what we want
286        var facY = 1 - y / img.offsetHeight;
287
288        if(clickIsCalibration) {
289                do_calibrate(facX, facY, drawX, drawY);
290                return false;
291        }
292
293        // Tiles are eee/nnn.jpg
294        var tile = img.src.substring( img.src.lastIndexOf("/") - 3 );
295        var baseEasting = tile.substring(0, tile.indexOf("/"));
296        var baseNorthing = tile.substring(tile.indexOf("/") + 1, tile.indexOf("."));
297
298        var easting = Math.round( (baseEasting * 1000) + (facX * 1000) );
299        var northing = Math.round( (baseNorthing * 1000) + (facY * 1000) );
300        //alert(easting + " " + northing);
301
302        // Save where it is
303        var pointNum = eastings.length;
304        eastings[pointNum] = easting;
305        northings[pointNum] = northing;
306        pointPosX[pointNum] = drawX;
307        pointPosY[pointNum] = drawY;
308
309        // Draw the X
310        var cross = new Image();
311        cross.src = "5x5-cross.png";
312        cross.id = "point_" + pointNum;
313        cross.onclick = function(e) { removePoint(pointNum) };
314        ia.appendChild(cross);
315
316        cross.style.position = "absolute";
317        cross.style.top = drawY - 2; 
318        cross.style.left = drawX - 2;
319
320        // Don't do anything else
321        return false;
322}
323
324function setup(map_easting,map_northing,zoom) {
325        // Pre-load the cross images
326        var cross = new Image();
327        cross.src = "5x5-cross.png";
328        cross.style.display = "none";
329        document.getElementById("body").appendChild(cross);
330        var cross2 = new Image();
331        cross2.src = "7x7-red-cross.png";
332        cross2.style.display = "none";
333        document.getElementById("body").appendChild(cross2);
334
335        var tile_base = "http://npe-tiles.torchboxapps.com/scaled1/";
336
337        // Set the images
338        for(var i=-1; i<=1; i=i+1) {
339                for(var j=-1; j<=1; j=j+1) {
340                        var img_id = "row" + (2-i) + "-img" + (j+2);
341                        var img = document.getElementById(img_id);
342
343                        var img_easting = map_easting + j;
344                        var img_northing = map_northing + i;
345
346                        // Get to nnn format
347                        if(img_easting < 100) {
348                                if(img_easting < 10) {
349                                        img_easting = "00" + img_easting;
350                                } else {
351                                        img_easting = "0" + img_easting;
352                                }
353                        }
354                        if(img_northing < 100) {
355                                if(img_northing < 10) {
356                                        img_northing = "00" + img_northing;
357                                } else {
358                                        img_northing = "0" + img_northing;
359                                }
360                        }
361
362                        img.src = tile_base + img_easting + "/" + img_northing + ".jpg";
363
364                        // Attach click handler
365                        img.onclick = click;
366                }
367        }
368
369
370        // Setup our nsew links
371        function navLink(dir,e,n) {
372                var a = document.getElementById(dir);
373                a.href = "?" + e + "," + n;
374        }
375        navLink("north", map_easting, (map_northing+1));
376        navLink("south", map_easting, (map_northing-1));
377        navLink("east",  (map_easting+1), map_northing);
378        navLink("west",  (map_easting-1), map_northing);
379
380        document.getElementById("browse").href = "map.html#" + map_easting + "," + map_northing + ",1";
381}
382
383// What url did they request?
384var map_easting = 449;
385var map_northing = 210;
386if(location.href.indexOf("?") > 0) {
387        var coords = location.href.substring( location.href.indexOf("?") + 1 );
388        if(coords.indexOf("#") > 0) {
389                coords = coords.substring( 0, coords.indexOf("#") );
390        }
391
392        map_easting = coords.substring( 0, coords.indexOf(",") );
393        map_northing = coords.substring( coords.indexOf(",") + 1 );
394
395        // handle zoom in url
396        if(map_northing.indexOf(",") > 0) {
397                map_northing = map_northing.substring( 0, map_northing.indexOf(",") );
398        }
399
400        // make into numbers
401        map_easting = map_easting / 1;
402        map_northing = map_northing / 1;
403}
404
405setup(map_easting,map_northing,1);
406</script>
407
408</body>
409</html>
Note: See TracBrowser for help on using the repository browser.