| 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> |
|---|
