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

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

Don't show the map if you don't have JS enabled.

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