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

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

Tweak html

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