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

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

Display details

  • Property svn:eol-style set to native
File size: 2.5 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<title>Open Space Tutorial - Example 1</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   
18    var osMap;
19        var markers;
20        var url = "/cgi/get-postcodes.fcgi";
21        var grid = "osgb";
22
23        var successHandler = function(o){
24          eval(o.responseText);
25        }
26
27        var failHander = function(o) {
28          // Don't do anything
29          $('spinner').innerHTML = '<p class="error">Problem showing existing data.</p>';
30        }
31   
32        function drawExisting() {
33                var bounds = osMap.calculateBounds();
34                var params = "mineasting=" + bounds.left + "&maxeasting="  + bounds.right + "&minnorthing=" + bounds.bottom + "&maxnorthing=" + bounds.top + "&grid=" + grid;
35                $('spinner').innerHTML = '<p>Fetching postcodes, please wait</p>';
36
37                var myAjax = new Ajax.Request(url, {
38                        method: 'get',
39                        parameters: params,
40                        onComplete: successHandler,
41                        onFailure: failHander
42                });
43        }
44   
45    function init()
46    {
47        osMap = new OpenSpace.Map('map');
48        osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8);
49       
50                markers = new OpenLayers.Layer.Markers("Markers");
51        osMap.addLayer(markers);
52       
53                drawExisting();
54    }
55
56        function addMarker(postcode, easting, northing, others ) {
57                var id = others[0];
58                var source = others[1];
59                var source_name = ((source == 0 || source == 2) ? 'this site' : '<a href="http://www.freethepostcode.org/">freethepostcode.org</a>');
60
61        var pos = new OpenSpace.MapPoint(easting, northing);
62                var content = "<div><b>Postcode:</b> " + postcode + "<br /><b>Location:</b> " + easting + ", " + northing + "<br /><b>Source:</b> " + source_name + "<br /><b>ID:</b> " + id + "</div>";
63
64        var marker = osMap.createMarker(pos, null, content);
65        markers.addMarker(marker);               
66        }
67
68        function completeMarkers() {
69                $('spinner').innerHTML = "&nbsp;";
70        }
71
72    // -->
73</script>
74
75<h1>Displaying a marker on a map</h1>
76
77<div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
78
79<div id="spinner" />
80
81</body>
82</html>
Note: See TracBrowser for help on using the repository browser.