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

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

Make more IE friendly

File size: 3.8 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<p><b>Note:</b> doesn't yet support IE for tracing, only for map viewing.
55Please use Mozilla / Firefox / Opera in until this is fixed.</p>
56
57<br />
58
59<p>This is a sister project of
60<a href="http://npemap.org.uk/">http://npemap.org.uk/</a>. Please see the
61<a href="http://npemap.org.uk/tileLicence.html">Licence Page</a> on what you
62can and can't do with the tiles, and traces you make from them.</p>
63
64</div>
65<div class="right-col" id="right-col">
66<p>
67Click on the map to zoom in and get on with it.
68</p>
69<a href="#" id="link">
70<img src="thumbnail.jpg" style="border: none" />
71</a>
72
73<form onsubmit="return find()">
74<p><label for="where">Place Name</label>
75<input id="where" name="where" /></p>
76<p><input type="submit" name="Zoom To" /></p>
77</form>
78</div>
79
80<script type="text/javascript">
81var xOffset = 62;
82
83function find() {
84   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
85  aObj = new JSONscriptRequest(request);
86  // Build the script tag
87  aObj.buildScriptTag();
88  // Execute (add) the script tag
89  aObj.addScriptTag();
90  return false;
91}
92
93// this function will be called by our JSON callback
94function getLocation(jData) {
95  if (jData == null) {
96    // There was a problem parsing search results
97    return;
98  }
99
100  var geonames = jData.geonames;
101  if (geonames.length > 0) {
102    var name = geonames[0];
103    var ll = new LatLng(name.lat,name.lng);
104    ll.WGS84ToOSGB36();
105    var en = ll.toOSRef();
106    var easting = Math.round(en.easting/1000);
107    var northing = Math.round(en.northing/1000);
108    window.location = "map.html#" + easting + "," + northing + ",1";
109  }
110  else {
111    alert("Sorry, can't find that location"); 
112  }
113}
114
115
116
117function click(e) {
118       
119  e = YAHOO.util.Event.getEvent(e);
120  var img = YAHOO.util.Event.getTarget(e);
121  var imgPos = YAHOO.util.Dom.getXY(img);
122
123        var x = xOffset + YAHOO.util.Event.getPageX(e) - imgPos[0];
124        var y = img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1]);
125
126        var s6x = Math.round(x/3);
127        var s6y = Math.round(y/3);
128
129        window.location=("map.html#" + s6x + "," + s6y + ",3");
130
131        YAHOO.util.Event.stopEvent(e);
132}
133
134  YAHOO.util.Event.addListener("link", "click", click);
135
136</script>
137
138</div>
139
140  </body>
141</html>
Note: See TracBrowser for help on using the repository browser.