source: trunk/npemap.org.uk/static/index.html @ 143

Last change on this file since 143 was 143, checked in by David Sheldon, 13 years ago

Tidy up the code a bit.

File size: 3.5 KB
Line 
1<html>
2  <head>
3    <title>New Popular Edition Maps</title>
4    <link rel="stylesheet" type="text/css" href="default.css">
5  </head>
6  <body>
7<script src="tiles/yahoo.js"></script> 
8<script src="tiles/dom.js"></script> 
9<script src="tiles/event.js"></script> 
10<script src="tiles/jsr_class.js"></script> 
11<script src="tiles/jscoord-1.1.1.js"></script> 
12<div id="body">
13<h1>New Popular Mapping<sup>beta</sup></h1>
14
15<div class="left-col"> 
16<ul>
17<li>Want to keep updated? <a href="news/">News</a> <a href="news/index.rss" class="feed">RSS</a></li>
18<li>Questions? <a href="FAQ.html">FAQ</a></li>
19<li>Problems? <a href="reportBug.html">Tell us</a></li>
20<li>Scotland? Northern Ireland? <a href="scotlandAndNI.html">Be informed</a></li>
21<li>Worried about your data? <a href="privacy.html">Privacy policy</a></li>
22<li>Interested in our maps? <a href="tileLicence.html">Licence</a>
23</ul>
24</div>
25<div class="mid-col"> 
26
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 tell us about the postcode of where you are
31looking. We want to collect information about where postcodes are now by
32finding them on old maps.</p>
33<p>All you need to do is click on the the point in the map and fill in the
34postcode. Why not add your house, your place of work, and those of your
35friends and family, to help us build a free postcode database?
36There is more detail about why we want to do this in
37the <a href="FAQ.html">FAQ</a>.</p>
38
39</div>
40<div class="right-col">
41<p>
42Click on the map to zoom in and get on with it.
43</p>
44<a href="#" id="link">
45<img src="thumbnail.jpg" style="border: none" />
46</a>
47
48<form onsubmit="return find()">
49<p><label for="where">Place Name</label>
50<input id="where" name="where" /></p>
51<p><input type="submit" name="Zoom To" /></p>
52</form>
53</div>
54
55<script type="text/javascript">
56var ROOTURL = ".";
57
58var xOffset = 62;
59
60function find() {
61   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
62  aObj = new JSONscriptRequest(request);
63  // Build the script tag
64  aObj.buildScriptTag();
65  // Execute (add) the script tag
66  aObj.addScriptTag();
67  return false;
68}
69
70// this function will be called by our JSON callback
71function getLocation(jData) {
72  if (jData == null) {
73    // There was a problem parsing search results
74    return;
75  }
76
77  var geonames = jData.geonames;
78  if (geonames.length > 0) {
79    var name = geonames[0];
80    var ll = new LatLng(name.lat,name.lng);
81    ll.WGS84ToOSGB36();
82    var en = ll.toOSRef();
83    var easting = Math.round(en.easting/1000);
84    var northing = Math.round(en.northing/1000);
85    window.location = urlFor(easting, northing, 1);
86  }
87  else {
88    alert("Sorry, can't find that location"); 
89  }
90}
91
92
93
94function click(e) {
95       
96  e = YAHOO.util.Event.getEvent(e);
97  var img = YAHOO.util.Event.getTarget(e);
98  var imgPos = YAHOO.util.Dom.getXY(img);
99
100        var x = (xOffset + YAHOO.util.Event.getPageX(e) - imgPos[0]) * 2;
101        var y = (img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1])) * 2;
102
103        window.location=(urlFor(x, y, 1));
104
105        YAHOO.util.Event.stopEvent(e);
106}
107
108YAHOO.util.Event.addListener("link", "click", click);
109
110var zooms = new Array(1);
111zooms[1] = 1;
112zooms[2] = 3;
113zooms[3] = 6;
114
115function urlFor(easting, northing, zoom) {
116  var x= easting / zooms[zoom]; 
117  var y= northing/ zooms[zoom]; 
118  return ROOTURL + "/tiles/map.html#" +  x + "," + y +","+zoom;
119}
120
121</script>
122
123</div>
124
125  </body>
126</html>
Note: See TracBrowser for help on using the repository browser.