source: trunk/openspace.npemap.org.uk/index.html @ 618

Last change on this file since 618 was 618, checked in by Nick Burch, 12 years ago

Start on bad postcode reporting stuff

  • Property svn:eol-style set to native
File size: 5.1 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<title>NPEMap browsing via OS OpenSpace</title>
4<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=413F829AAE11F96EE0405F0AF060395F"></script>
5
6<script src="yahoo.js" type="text/javascript"></script>
7<script src="dom.js" type="text/javascript"></script>
8<script src="event.js" type="text/javascript"></script>
9<script src="jsr_class.js" type="text/javascript"></script>
10<script src="jscoord-1.1.1.js" type="text/javascript"></script>
11<script src="prototype.js" type="text/javascript"></script>
12</head>
13<body onload="init()">
14
15<script type="text/javascript">
16<!--
17
18var osMap;
19var markers;
20//var url = "/local-cgi/get-postcodes.fcgi";
21var url = "/real-cgi/get-postcodes.fcgi";
22var grid = "osgb";
23
24var sources = new Array(1);
25sources[0] = 'this site';
26sources[1] = '<a href="http://www.freethepostcode.org/">freethepostcode.org</a>';
27sources[2] = '<a href="http://www.npemap.org.uk">npemap</a>';
28
29var successHandler = function(o){
30  eval(o.responseText);
31}
32
33var failHander = function(o) {
34  // Don't do anything
35  $('spinner').innerHTML = '<p class="error">Problem showing existing data.</p>';
36}
37
38function drawExisting() {
39        // Clear all our makers
40        for(var marker in osMap.markers) {
41                markers.removeMarker(marker);
42                alert(marker);
43        }
44        markers.clearMarkers();
45
46        // Update the link
47        var en = osMap.getCenter();
48        var easting = Math.round(en.lon/1000);
49        var northing = Math.round(en.lat/1000);
50        $('npe-link').href = "http://www.npemap.org.uk/tiles/map.html#" + easting + "," + northing + ",1";
51
52        // Only fetch postcode markers at zoom levels 8+
53        if(osMap.zoom < 8) {
54                return;
55        }
56
57        var bounds = osMap.calculateBounds();
58        var params = "mineasting=" + bounds.left + "&maxeasting="  + bounds.right + "&minnorthing=" + bounds.bottom + "&maxnorthing=" + bounds.top + "&grid=" + grid;
59        $('spinner').innerHTML = '<p>Fetching postcodes, please wait</p>';
60
61        var myAjax = new Ajax.Request(url, {
62                method: 'get',
63                parameters: params,
64                onComplete: successHandler,
65                onFailure: failHander
66        });
67}
68
69function addNew(e) {
70        var en = 
71                osMap.getLonLatFromViewPortPx( osMap.events.getMousePosition(e) );
72        var easting = en.lon;
73        var northing = en.lat;
74        alert("e=" + easting + " n=" + northing);
75}
76
77function init()
78{
79        osMap = new OpenSpace.Map('map');
80        osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8);
81       
82        markers = new OpenLayers.Layer.Markers("Markers");
83        osMap.addLayer(markers);
84
85        osMap.events.register("moveend", osMap, drawExisting);
86        osMap.events.register("zoomend", osMap, drawExisting);
87        osMap.events.register("click", osMap, addNew);
88       
89        drawExisting();
90}
91
92function addMarker(postcode, easting, northing, others ) {
93        var id = others[0];
94        var source = others[1];
95
96        var pos = new OpenSpace.MapPoint(easting, northing);
97        var content = "<div>" +
98                "<b>Postcode:</b> " + postcode + "<br />" +
99                "<b>Location:</b> " + easting + ", " + northing + "<br />" +
100                "<b>Source:</b> " + sources[source] + "<br />" +
101                "<b>ID:</b> " + id +  "<br /><br />" +
102                "<a href='#' id='bad-"+id+"'>Problem?</a>" +
103        "</div>";
104
105        var marker = osMap.createMarker(pos, null, content);
106        markers.addMarker(marker);               
107}
108
109function completeMarkers() {
110        $('spinner').innerHTML = "&nbsp;";
111}
112
113// -->
114</script>
115
116<h1 style="text-align: center; width: 100%; background-color: #DDFF9b;">NPEMap browsing via OS OpenSpace</h1>
117
118<div id="info" style="width: 20%; float: right; background-color: #F0FFD2; border: 1px solid #DDFF9b; padding: 10px; ">
119 This site allows you to browse the
120 <a href="http://www.npemap.org.uk/">NPEMap</a> free postcode dataset,
121 using
122 <a href="http://openspace.ordnancesurvey.co.uk/">OpenSpace</a> maps.
123 <br />
124 <br />
125 If you happen to spot any problems with any of our postcodes, please click
126  on the marker and enter a problem report to let us know.
127 <br />
128 <br />
129 Owing to the terms of the OpenSpace licence, it is not possible to submit
130  new postcodes using these maps. Please use the
131  <a id="npe-link" href="http://www.npemap.org.uk/">main NPEMap site</a>
132  to add additional postcodes.
133</div>
134
135<div id="map" style="width: 75%; height: 80%; border: 1px solid black;"></div>
136
137<div id="notice" style="width: 75%; border: 1px solid black; font-size: 8px; font-family: sans-serif;">
138 Reproduced by
139 <a href="http://openspace.ordnancesurvey.co.uk/openspace/developeragreement.html">permission</a>
140 of Ordnance Survey on behalf of HMSO. &copy;
141 Crown copyright and database right 2007. All rights reserved.
142</div>
143
144<div id="spinner" />
145
146<div class="report_form" id="report_form" style="display:none">
147<form method="post" action="../../cgi/bad-postcode.fcgi" id="bad_form">
148        <input type="hidden" name="postcode" id="postcode_id_detail" />
149        <input type="hidden" name="grid" id="grid2" />
150        <label for="reason"><span title="Why you think it is incorrect">Problem:</span></label>
151
152        <input type="text" name="reason" id="reason" size="45"/><br/>
153        <label for="reason_email"><span title="So we can let you know what we're doing about it.">email</span></label>
154        <input type="text" name="email" id="reason_email" size="30"/>
155        <input alt="submit" src="../images/btn_submit.png" type="image" />
156</form>
157</div>
158
159</body>
160</html>
Note: See TracBrowser for help on using the repository browser.