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

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

Move the search to the middle column, and tweak the background colour of the intro so it stands out more

File size: 4.4 KB
Line 
1<!--#set var="title" value="New Popular Edition Maps" -->
2<!--#set var="link" value="/" -->
3<!--#include virtual="inc/header.shtml" -->
4<script src="tiles/yahoo.js" type="text/javascript"></script> 
5<script src="tiles/dom.js" type="text/javascript"></script> 
6<script src="tiles/event.js" type="text/javascript"></script> 
7<script src="tiles/jsr_class.js" type="text/javascript"></script> 
8<script src="tiles/jscoord-1.1.1.js" type="text/javascript"></script> 
9<script src="tiles/prototype.js" type="text/javascript"></script>
10<script src="find.js" type="text/javascript"></script> 
11
12<div id="body">
13
14<div class="left-col"> 
15<ul>
16<li>Want to keep updated? <a href="news/">News</a> <a href="news/index.rss" class="feed">RSS</a></li>
17<li>Questions? <a href="FAQ.html">FAQ</a></li>
18<li>Problems? <a href="reportBug.html">Tell us</a></li>
19<li>Scotland? Northern Ireland? <a href="scotlandAndNI.html">Be informed</a></li>
20<li>Worried about your data? <a href="privacy.html">Privacy policy</a></li>
21<li>Interested in our maps? <a href="tileLicence.html">Licence</a></li>
22</ul>
23
24<ul>
25<li><a href="data/">Download postcode data</a></li>
26<li><a href="postcodeine/">Show postcodes on map</a></li>
27<li><a href="http://technology.guardian.co.uk/weekly/story/0,,1936557,00.html">Read about us in the Guardian!</a></li>
28</ul>
29
30<h3>Postcode statistics (<a href="stats/">more</a>)</h3>
31
32<!--#include virtual="stats/summary.html" -->
33
34<a href="http://digg.com/general_sciences/New_Popular_Edition_Maps">
35<img src="images/80x15-digg-badge-2.gif" width="80" height="15" alt="Digg!" 
36  border="0" />
37</a>
38
39</div>
40<div class="mid-col"> 
41
42<div id="introbox">
43  Have a look around, and see what the country looked like in the 1940s.
44  Click on the map to the right to start, you can then scroll around
45  and zoom in.
46</div>
47
48<div id="searchbox">
49
50<form onsubmit="return find()" action="">
51<p>
52<script type="text/javascript">
53document.write(' <label for="where">You can search our maps by place name, and by postcode:</label><br/><input id="where" name="where" /> <input type="submit" name="Zoom To" value="Go" />');
54</script>
55</p>
56
57<div id="geonames_results_window">
58  <div class="close"><a href="javascript:hideGeonamesPopup()" title="close">X</a></div>
59  <div id="geonames_results"></div>
60</div>
61<span class="terms">Place functionality by <a href="http://www.geonames.org/">Geonames</a>.</span>
62</form>
63</div>
64
65<br />
66
67<div id="postcodeinfobox">
68<p> Whilst looking around, you can tell us about the postcode of where you are
69looking. We want to collect information about where postcodes are now by
70finding them on old maps.</p>
71<p>All you need to do is click on the the point in the map and fill in the
72postcode. Why not add your house, your place of work, and those of your
73friends and family, to help us build a free postcode database?
74There is more detail about why we want to do this in
75the <a href="FAQ.html">FAQ</a>.</p>
76</div>
77
78</div>
79<div class="right-col">
80
81<script type="text/javascript">
82document.write(' <a href="#" id="link"> <img src="thumbnail.jpg" alt="Click this map to zoom"/> </a>');
83</script>
84<noscript>
85This site requires javascript
86</noscript>
87
88</div>
89
90
91<script type="text/javascript">
92var ROOTURL = ".";
93
94// The X offset
95// (The number of pixels that were trimmed from the left of the thumbnail
96//   image, when it was created to start at 0,0 , but after it was halved
97//   in size)
98var xOffset = 38;
99
100function gotoLocation(easting, northing, zoom) {
101    location.href = urlFor(easting, northing, zoom);
102}
103
104
105function click(e) {
106       
107  e = YAHOO.util.Event.getEvent(e);
108  var img = YAHOO.util.Event.getTarget(e);
109  var imgPos = YAHOO.util.Dom.getXY(img);
110
111        var x = (xOffset + YAHOO.util.Event.getPageX(e) - imgPos[0]) * 2;
112        var y = (img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1])) * 2;
113
114        location.href=(urlFor(x, y, 3));
115
116        YAHOO.util.Event.stopEvent(e);
117}
118
119YAHOO.util.Event.addListener("link", "click", click);
120
121var zooms = new Array(1);
122zooms[1] = 1;
123zooms[2] = 3;
124zooms[3] = 6;
125
126function urlFor(easting, northing, zoom) {
127  var x= Math.round(easting / zooms[zoom]); 
128  var y= Math.round(northing/ zooms[zoom]); 
129  return ROOTURL + "/tiles/map.html#" +  x + "," + y +","+zoom;
130}
131
132</script>
133
134</div>
135<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
136</script>
137<script type="text/javascript">
138_uacct = "UA-732621-2";
139if (typeof urchinTracker == 'function') urchinTracker();
140</script>
141<!--#include virtual="inc/footer.shtml" -->
Note: See TracBrowser for help on using the repository browser.