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

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

Link to export

File size: 4.0 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></li>
26</ul>
27<p><a href="data/currentlist">Raw postcode data</a></p>
28
29<!--#include virtual="stats.html" -->
30
31</div>
32<div class="mid-col"> 
33
34<p> Have a look round what the country looked like in the 1940s. Click on the
35map to the right to start, you can then scroll around and zoom in.  </p>
36
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
46</div>
47<div class="right-col">
48<p>
49Click on the map to zoom in and get on with it.
50</p>
51<a href="#" id="link">
52<img src="thumbnail.jpg" alt="Click this map to zoom"/>
53</a>
54
55<form onsubmit="return find()" action="">
56<p><label for="where">Place:</label>
57<input id="where" name="where" />
58<input type="submit" name="Zoom To" value="Go" /></p>
59</form>
60      <span class="terms">Functionality by <a href="http://www.geonames.org/">Geonames</a>.</span>
61</div>
62
63<script type="text/javascript">
64var ROOTURL = ".";
65
66var xOffset = 62;
67
68function find() {
69   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
70  aObj = new JSONscriptRequest(request);
71  // Build the script tag
72  aObj.buildScriptTag();
73  // Execute (add) the script tag
74  aObj.addScriptTag();
75  return false;
76}
77
78// this function will be called by our JSON callback
79function getLocation(jData) {
80  if (jData == null) {
81    // There was a problem parsing search results
82    return;
83  }
84
85  var geonames = jData.geonames;
86  if (geonames.length > 0) {
87    var name = geonames[0];
88    var ll = new LatLng(name.lat,name.lng);
89    ll.WGS84ToOSGB36();
90    var en = ll.toOSRef();
91    var easting = Math.round(en.easting/1000);
92    var northing = Math.round(en.northing/1000);
93    location.href = urlFor(easting, northing, 1);
94  }
95  else {
96    alert("Sorry, can't find that location"); 
97  }
98}
99
100
101
102function click(e) {
103       
104  e = YAHOO.util.Event.getEvent(e);
105  var img = YAHOO.util.Event.getTarget(e);
106  var imgPos = YAHOO.util.Dom.getXY(img);
107
108        var x = (xOffset + YAHOO.util.Event.getPageX(e) - imgPos[0]) * 2;
109        var y = (img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1])) * 2;
110
111        location.href=(urlFor(x, y, 3));
112
113        YAHOO.util.Event.stopEvent(e);
114}
115
116YAHOO.util.Event.addListener("link", "click", click);
117
118var zooms = new Array(1);
119zooms[1] = 1;
120zooms[2] = 3;
121zooms[3] = 6;
122
123function urlFor(easting, northing, zoom) {
124  var x= Math.round(easting / zooms[zoom]); 
125  var y= Math.round(northing/ zooms[zoom]); 
126  return ROOTURL + "/tiles/map.html#" +  x + "," + y +","+zoom;
127}
128
129</script>
130
131</div>
132
133  </body>
134</html>
Note: See TracBrowser for help on using the repository browser.