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

Last change on this file since 144 was 144, checked in by David Sheldon, 13 years ago

Search now on the map page too, and added credit for Geonames.

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