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

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

Include our stats

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