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

Last change on this file since 229 was 229, checked in by David Sheldon, 14 years ago

Make the front page look better too.

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