source: trunk/gpx.npemap.org.uk/index.html @ 185

Last change on this file since 185 was 185, checked in by Nick Burch, 13 years ago

Setting up

File size: 3.5 KB
Line 
1<html>
2  <head>
3    <title>New Popular Edition - Map GPX Tracer</title>
4    <style type="text/css">
5                .left-col {
6                        width: 40%;
7                        margin: 5%;
8                        float: left;
9                }
10                .right-col {
11                        width: 40%;
12                        margin: 5%;
13                        float: right;
14                }
15        </style>
16  </head>
17  <body>
18<script src="js/yahoo.js"></script> 
19<script src="js/dom.js"></script> 
20<script src="js/event.js"></script> 
21<script src="js/jsr_class.js"></script> 
22<script src="js/jscoord-1.1.1.js"></script> 
23<div id="body">
24<h1>New Popular Mapping - Map GPX Tracer<sup>beta</sup></h1>
25
26<div class="left-col"> 
27<p>Have a look round what the country looked like in the 1940s. Click on the
28map to the right to start, you can then scroll around and zoom in.  </p>
29
30<p>Whilst looking around, you can switch into another mode to trace a GPX
31trace from the map. You can then take this GPX trace, and import it into
32other systems (such as <a href="http://openstreetmap.org/">OpenStreetMap</a>
33or Google Earth).</p>
34
35<p>Why not trace out the course of an old railway, and see its route on
36google earth? How about tracing the old outskirts of your town, and see how
37it has grown?</p>
38
39<p>As our scans of the old maps aren't perfectly aligned, you should calibrate
40the tracing program before you start tracing your GPX trace. See the
41tracing page for details on how to do this.</p>
42
43<p><b>Note:</b> doesn't yet support IE for tracing, only for map viewing.
44Please use Mozilla / Firefox / Opera in until this is fixed.</p>
45
46<br />
47
48<p>This is a sister project of
49<a href="http://npemap.org.uk/">http://npemap.org.uk/</a>. Please see the
50<a href="http://npemap.org.uk/tileLicence.html">Licence Page</a> on what you
51can and can't do with the tiles, and traces you make from them.</p>
52
53</div>
54<div class="right-col">
55<p>
56Click on the map to zoom in and get on with it.
57</p>
58<a href="#" id="link">
59<img src="thumbnail.jpg" style="border: none" />
60</a>
61
62<form onsubmit="return find()">
63<p><label for="where">Place Name</label>
64<input id="where" name="where" /></p>
65<p><input type="submit" name="Zoom To" /></p>
66</form>
67</div>
68
69<script type="text/javascript">
70var xOffset = 62;
71
72function find() {
73   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
74  aObj = new JSONscriptRequest(request);
75  // Build the script tag
76  aObj.buildScriptTag();
77  // Execute (add) the script tag
78  aObj.addScriptTag();
79  return false;
80}
81
82// this function will be called by our JSON callback
83function getLocation(jData) {
84  if (jData == null) {
85    // There was a problem parsing search results
86    return;
87  }
88
89  var geonames = jData.geonames;
90  if (geonames.length > 0) {
91    var name = geonames[0];
92    var ll = new LatLng(name.lat,name.lng);
93    ll.WGS84ToOSGB36();
94    var en = ll.toOSRef();
95    var easting = Math.round(en.easting/1000);
96    var northing = Math.round(en.northing/1000);
97    window.location = "map.html#" + easting + "," + northing + ",1";
98  }
99  else {
100    alert("Sorry, can't find that location"); 
101  }
102}
103
104
105
106function click(e) {
107       
108  e = YAHOO.util.Event.getEvent(e);
109  var img = YAHOO.util.Event.getTarget(e);
110  var imgPos = YAHOO.util.Dom.getXY(img);
111
112        var x = xOffset + YAHOO.util.Event.getPageX(e) - imgPos[0];
113        var y = img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1]);
114
115        var s6x = Math.round(x/3);
116        var s6y = Math.round(y/3);
117
118        window.location=("map.html#" + s6x + "," + s6y + ",3");
119
120        YAHOO.util.Event.stopEvent(e);
121}
122
123  YAHOO.util.Event.addListener("link", "click", click);
124
125</script>
126
127</div>
128
129  </body>
130</html>
Note: See TracBrowser for help on using the repository browser.