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

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

Tweak a few bits

  • Property svn:eol-style set to native
File size: 3.0 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                // Clear all our makers
34                markers.clearMarkers();
35
36                // Only display at zoom levels 8+
37                if(osMap.zoom < 8) {
38                        return;
39                }
40
41                var bounds = osMap.calculateBounds();
42                var params = "mineasting=" + bounds.left + "&maxeasting="  + bounds.right + "&minnorthing=" + bounds.bottom + "&maxnorthing=" + bounds.top + "&grid=" + grid;
43                $('spinner').innerHTML = '<p>Fetching postcodes, please wait</p>';
44
45                var myAjax = new Ajax.Request(url, {
46                        method: 'get',
47                        parameters: params,
48                        onComplete: successHandler,
49                        onFailure: failHander
50                });
51        }
52
53        function addNew(e) {
54                var en = 
55                        osMap.getLonLatFromViewPortPx( osMap.events.getMousePosition(e) );
56                var easting = en.lon;
57                var northing = en.lat;
58                alert("e=" + easting + " n=" + northing);
59        }
60   
61    function init()
62    {
63        osMap = new OpenSpace.Map('map');
64        osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8);
65       
66                markers = new OpenLayers.Layer.Markers("Markers");
67        osMap.addLayer(markers);
68
69                osMap.events.register("moveend", osMap, drawExisting);
70                osMap.events.register("zoomend", osMap, drawExisting);
71                osMap.events.register("click", osMap, addNew);
72       
73                drawExisting();
74    }
75
76        function addMarker(postcode, easting, northing, others ) {
77                var id = others[0];
78                var source = others[1];
79                var source_name = ((source == 0 || source == 2) ? 'this site' : '<a href="http://www.freethepostcode.org/">freethepostcode.org</a>');
80
81        var pos = new OpenSpace.MapPoint(easting, northing);
82                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>";
83
84        var marker = osMap.createMarker(pos, null, content);
85        markers.addMarker(marker);               
86        }
87
88        function completeMarkers() {
89                $('spinner').innerHTML = "&nbsp;";
90        }
91
92    // -->
93</script>
94
95<h1>Displaying a marker on a map</h1>
96
97<div id="map" style="width: 800px; height: 500px; border: 1px solid black;"></div>
98
99<div id="spinner" />
100
101</body>
102</html>
Note: See TracBrowser for help on using the repository browser.