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

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

Form to zoom to a town name. Uses geonames.

File size: 3.3 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 Name</label>
50<input id="where" name="where" /></p>
51<p><input type="submit" name="Zoom To" /></p>
52</form>
53</div>
54
55<script type="text/javascript">
56var xOffset = 62;
57
58function find() {
59   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
60  aObj = new JSONscriptRequest(request);
61  // Build the script tag
62  aObj.buildScriptTag();
63  // Execute (add) the script tag
64  aObj.addScriptTag();
65  return false;
66}
67
68// this function will be called by our JSON callback
69function getLocation(jData) {
70  if (jData == null) {
71    // There was a problem parsing search results
72    return;
73  }
74
75  var geonames = jData.geonames;
76  if (geonames.length > 0) {
77    var name = geonames[0];
78    var ll = new LatLng(name.lat,name.lng);
79    ll.WGS84ToOSGB36();
80    var en = ll.toOSRef();
81    var easting = Math.round(en.easting/1000);
82    var northing = Math.round(en.northing/1000);
83    window.location = "tiles/map.html#" + easting + "," + northing + ",1";
84  }
85  else {
86    alert("Sorry, can't find that location"); 
87  }
88}
89
90
91
92function click(e) {
93       
94  e = YAHOO.util.Event.getEvent(e);
95  var img = YAHOO.util.Event.getTarget(e);
96        var x = xOffset + YAHOO.util.Event.getPageX(e) - img.offsetLeft;
97        var y = img.height-(YAHOO.util.Event.getPageY(e) - img.offsetTop);
98
99        var s6x = Math.round(x/3);
100        var s6y = Math.round(y/3);
101
102        window.location=("tiles/map.html#" + s6x + "," + s6y + ",3");
103
104        YAHOO.util.Event.stopEvent(e);
105}
106
107  YAHOO.util.Event.addListener("link", "click", click);
108
109</script>
110
111</div>
112
113  </body>
114</html>
Note: See TracBrowser for help on using the repository browser.