| 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | <title>New Popular Edition - Map GPX Tracer</title> |
|---|
| 4 | <style type="text/css"> |
|---|
| 5 | .left-col { |
|---|
| 6 | width: 40%; |
|---|
| 7 | margin: 5%; |
|---|
| 8 | float: left; |
|---|
| 9 | } |
|---|
| 10 | .right-col { |
|---|
| 11 | width: 40%; |
|---|
| 12 | margin: 5%; |
|---|
| 13 | float: right; |
|---|
| 14 | } |
|---|
| 15 | </style> |
|---|
| 16 | </head> |
|---|
| 17 | <body> |
|---|
| 18 | <script src="js/yahoo.js"></script> |
|---|
| 19 | <script src="js/dom.js"></script> |
|---|
| 20 | <script src="js/event.js"></script> |
|---|
| 21 | <script src="js/jsr_class.js"></script> |
|---|
| 22 | <script src="js/jscoord-1.1.1.js"></script> |
|---|
| 23 | <div id="body"> |
|---|
| 24 | <h1>New Popular Mapping - Map GPX Tracer<sup>beta</sup></h1> |
|---|
| 25 | |
|---|
| 26 | <div class="left-col"> |
|---|
| 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 switch into another mode to trace a GPX |
|---|
| 31 | trace from the map. You can then take this GPX trace, and import it into |
|---|
| 32 | other systems (such as <a href="http://openstreetmap.org/">OpenStreetMap</a> |
|---|
| 33 | or Google Earth).</p> |
|---|
| 34 | |
|---|
| 35 | <p>Why not trace out the course of an old railway, and see its route on |
|---|
| 36 | google earth? How about tracing the old outskirts of your town, and see how |
|---|
| 37 | it has grown?</p> |
|---|
| 38 | |
|---|
| 39 | <p>As our scans of the old maps aren't perfectly aligned, you should calibrate |
|---|
| 40 | the tracing program before you start tracing your GPX trace. See the |
|---|
| 41 | tracing page for details on how to do this.</p> |
|---|
| 42 | |
|---|
| 43 | <p><b>Note:</b> doesn't yet support IE for tracing, only for map viewing. |
|---|
| 44 | Please use Mozilla / Firefox / Opera in until this is fixed.</p> |
|---|
| 45 | |
|---|
| 46 | <br /> |
|---|
| 47 | |
|---|
| 48 | <p>This is a sister project of |
|---|
| 49 | <a href="http://npemap.org.uk/">http://npemap.org.uk/</a>. Please see the |
|---|
| 50 | <a href="http://npemap.org.uk/tileLicence.html">Licence Page</a> on what you |
|---|
| 51 | can and can't do with the tiles, and traces you make from them.</p> |
|---|
| 52 | |
|---|
| 53 | </div> |
|---|
| 54 | <div class="right-col"> |
|---|
| 55 | <p> |
|---|
| 56 | Click on the map to zoom in and get on with it. |
|---|
| 57 | </p> |
|---|
| 58 | <a href="#" id="link"> |
|---|
| 59 | <img src="thumbnail.jpg" style="border: none" /> |
|---|
| 60 | </a> |
|---|
| 61 | |
|---|
| 62 | <form onsubmit="return find()"> |
|---|
| 63 | <p><label for="where">Place Name</label> |
|---|
| 64 | <input id="where" name="where" /></p> |
|---|
| 65 | <p><input type="submit" name="Zoom To" /></p> |
|---|
| 66 | </form> |
|---|
| 67 | </div> |
|---|
| 68 | |
|---|
| 69 | <script type="text/javascript"> |
|---|
| 70 | var xOffset = 62; |
|---|
| 71 | |
|---|
| 72 | function find() { |
|---|
| 73 | request = 'http://ws.geonames.org/searchJSON?name=' + encodeURIComponent(document.getElementById('where').value) + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT'; |
|---|
| 74 | aObj = new JSONscriptRequest(request); |
|---|
| 75 | // Build the script tag |
|---|
| 76 | aObj.buildScriptTag(); |
|---|
| 77 | // Execute (add) the script tag |
|---|
| 78 | aObj.addScriptTag(); |
|---|
| 79 | return false; |
|---|
| 80 | } |
|---|
| 81 | |
|---|
| 82 | // this function will be called by our JSON callback |
|---|
| 83 | function getLocation(jData) { |
|---|
| 84 | if (jData == null) { |
|---|
| 85 | // There was a problem parsing search results |
|---|
| 86 | return; |
|---|
| 87 | } |
|---|
| 88 | |
|---|
| 89 | var geonames = jData.geonames; |
|---|
| 90 | if (geonames.length > 0) { |
|---|
| 91 | var name = geonames[0]; |
|---|
| 92 | var ll = new LatLng(name.lat,name.lng); |
|---|
| 93 | ll.WGS84ToOSGB36(); |
|---|
| 94 | var en = ll.toOSRef(); |
|---|
| 95 | var easting = Math.round(en.easting/1000); |
|---|
| 96 | var northing = Math.round(en.northing/1000); |
|---|
| 97 | window.location = "map.html#" + easting + "," + northing + ",1"; |
|---|
| 98 | } |
|---|
| 99 | else { |
|---|
| 100 | alert("Sorry, can't find that location"); |
|---|
| 101 | } |
|---|
| 102 | } |
|---|
| 103 | |
|---|
| 104 | |
|---|
| 105 | |
|---|
| 106 | function click(e) { |
|---|
| 107 | |
|---|
| 108 | e = YAHOO.util.Event.getEvent(e); |
|---|
| 109 | var img = YAHOO.util.Event.getTarget(e); |
|---|
| 110 | var imgPos = YAHOO.util.Dom.getXY(img); |
|---|
| 111 | |
|---|
| 112 | var x = xOffset + YAHOO.util.Event.getPageX(e) - imgPos[0]; |
|---|
| 113 | var y = img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1]); |
|---|
| 114 | |
|---|
| 115 | var s6x = Math.round(x/3); |
|---|
| 116 | var s6y = Math.round(y/3); |
|---|
| 117 | |
|---|
| 118 | window.location=("map.html#" + s6x + "," + s6y + ",3"); |
|---|
| 119 | |
|---|
| 120 | YAHOO.util.Event.stopEvent(e); |
|---|
| 121 | } |
|---|
| 122 | |
|---|
| 123 | YAHOO.util.Event.addListener("link", "click", click); |
|---|
| 124 | |
|---|
| 125 | </script> |
|---|
| 126 | |
|---|
| 127 | </div> |
|---|
| 128 | |
|---|
| 129 | </body> |
|---|
| 130 | </html> |
|---|
