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 |
---|
28 | map 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 |
---|
31 | looking. We want to collect information about where postcodes are now by |
---|
32 | finding 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 |
---|
34 | postcode. Why not add your house, your place of work, and those of your |
---|
35 | friends and family, to help us build a free postcode database? |
---|
36 | There is more detail about why we want to do this in |
---|
37 | the <a href="FAQ.html">FAQ</a>.</p> |
---|
38 | |
---|
39 | </div> |
---|
40 | <div class="right-col"> |
---|
41 | <p> |
---|
42 | Click 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://www.geonames.org/">Geonames</a>.</span> |
---|
54 | </div> |
---|
55 | |
---|
56 | <script type="text/javascript"> |
---|
57 | var ROOTURL = "."; |
---|
58 | |
---|
59 | var xOffset = 62; |
---|
60 | |
---|
61 | function 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 |
---|
72 | function 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 | |
---|
95 | function 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, 3)); |
---|
105 | |
---|
106 | YAHOO.util.Event.stopEvent(e); |
---|
107 | } |
---|
108 | |
---|
109 | YAHOO.util.Event.addListener("link", "click", click); |
---|
110 | |
---|
111 | var zooms = new Array(1); |
---|
112 | zooms[1] = 1; |
---|
113 | zooms[2] = 3; |
---|
114 | zooms[3] = 6; |
---|
115 | |
---|
116 | function urlFor(easting, northing, zoom) { |
---|
117 | var x= Math.round(easting / zooms[zoom]); |
---|
118 | var y= Math.round(northing/ zooms[zoom]); |
---|
119 | return ROOTURL + "/tiles/map.html#" + x + "," + y +","+zoom; |
---|
120 | } |
---|
121 | |
---|
122 | </script> |
---|
123 | |
---|
124 | </div> |
---|
125 | |
---|
126 | </body> |
---|
127 | </html> |
---|