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

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

New thumbnail, and new JS

File size: 4.0 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">
83// The X offset
84// (The number of pixels that were trimmed from the left of the thumbnail
85//   image, when it was created to start at 0,0 , but after it was halved
86//   in size)
87var xOffset = 38;
88
89function find() {
90   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
91  aObj = new JSONscriptRequest(request);
92  // Build the script tag
93  aObj.buildScriptTag();
94  // Execute (add) the script tag
95  aObj.addScriptTag();
96  return false;
97}
98
99// this function will be called by our JSON callback
100function getLocation(jData) {
101  if (jData == null) {
102    // There was a problem parsing search results
103    return;
104  }
105
106  var geonames = jData.geonames;
107  if (geonames.length > 0) {
108    var name = geonames[0];
109    var ll = new LatLng(name.lat,name.lng);
110    ll.WGS84ToOSGB36();
111    var en = ll.toOSRef();
112    var easting = Math.round(en.easting/1000);
113    var northing = Math.round(en.northing/1000);
114    window.location = "map.html#" + easting + "," + northing + ",1";
115  }
116  else {
117    alert("Sorry, can't find that location"); 
118  }
119}
120
121
122
123function click(e) {
124       
125  e = YAHOO.util.Event.getEvent(e);
126  var img = YAHOO.util.Event.getTarget(e);
127  var imgPos = YAHOO.util.Dom.getXY(img);
128
129        var x = xOffset + YAHOO.util.Event.getPageX(e) - imgPos[0];
130        var y = img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1]);
131
132        var s6x = Math.round(x/3);
133        var s6y = Math.round(y/3);
134
135        window.location=("map.html#" + s6x + "," + s6y + ",3");
136
137        YAHOO.util.Event.stopEvent(e);
138}
139
140  YAHOO.util.Event.addListener("link", "click", click);
141
142</script>
143
144</div>
145
146  </body>
147</html>
Note: See TracBrowser for help on using the repository browser.