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

Last change on this file since 288 was 288, checked in by Dominic Hargreaves, 13 years ago

Make a start at some consistent styling.

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