source: trunk/gpx.npemap.org.uk/favourite_postcode.xml @ 664

Last change on this file since 664 was 664, checked in by Nick Burch, 11 years ago

Links to main site

  • Property svn:eol-style set to native
File size: 4.8 KB
Line 
1<?xml version="1.0" encoding="UTF-8" ?> 
2<Module>
3  <ModulePrefs title="Favourite Postcodes" > 
4    <Require feature="opensocial-0.7"/>
5  </ModulePrefs>
6<Content type="html">
7<![CDATA[
8<style>
9        div#content_div {
10                overflow: auto;
11                height: 100%;
12                width: 95%;
13        }
14        div#yourmap {
15                display:inline;
16        }
17        div#pickpc {
18                display:inline;
19        }
20        input#text {
21                width: 8em;
22        }
23
24        ul {
25                vertical-align: middle;
26        }
27        li {
28                vertical-align: middle;
29        }
30
31        img {
32                vertical-align: middle;
33        }
34</style>
35
36<script type="text/javascript" src="http://www.mattkruse.com/javascript/datadumper/datadumper.js"></script>
37<script type="text/javascript"> 
38  gadgets.util.registerOnLoadHandler(startApp);
39  var geocoder = "http://www.npemap.org.uk/cgi/geocoder.fcgi?format=js&postcode=";
40  var mainSite = "http://www.npemap.org.uk/tiles/map.html#";
41  var persistentTag = "favourite_postcode";
42
43  function startApp() {
44        findPC();
45        findFriends();
46  }
47
48  function findFriends() {
49        var req = opensocial.newDataRequest();
50        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS), 'viewerFriends');
51        req.add(req.newFetchPersonAppDataRequest("VIEWER_FRIENDS", [persistentTag]), "pc");
52        req.send(loadedFriends);
53  }
54  function loadedFriends(data) {
55        var html = "<ul>";
56
57        var fd = data.get("pc").getData();
58        var postcodes = {};
59
60        var friends = data.get("viewerFriends").getData();
61        friends.each(function(person) {
62                var postcodeText = "(not set)";
63                var mapDiv = " <span id='" + person.getId() + "'></span>";
64
65                var theirData = fd[person.getId()]
66                if(theirData && theirData[persistentTag]) {
67                        postcode = theirData[persistentTag];
68                        postcodes[person.getId()] = postcode;
69                        postcodeText = " - " + postcode;
70                }
71                html += "<li>" +
72                        person.getDisplayName() + " " + postcodeText + mapDiv +
73                        "</li>";
74        });
75        html += "</ul>";
76
77        // Put the HTML live
78        document.getElementById("friends").innerHTML = html;
79
80        // Find their maps
81        for(var user in postcodes) {
82                fetchMapForPostcode(user, postcodes[user], false);
83        }
84  }
85
86  function findPC() {
87        var req = opensocial.newDataRequest();
88        req.add(req.newFetchPersonAppDataRequest("VIEWER", [persistentTag]), "pc");
89        req.send(gotPC);
90  }
91  function gotPC(data) {
92        if(data.hadError()) {
93                alert(data.getError());
94        } else {
95                var pc = data.get("pc").getData();
96                for (var k in pc) {
97                        var postcode = pc[k][persistentTag];
98                        if(postcode) {
99                                startShowMap(postcode);
100                        }
101                }
102        }
103  }
104
105  function pickPC() {
106        var pc = document.getElementById("pc").value;
107
108        var req = opensocial.newDataRequest();
109        req.add(req.newUpdatePersonAppDataRequest("VIEWER",persistentTag, pc));
110        req.send(checkOK);
111  }
112  function checkOK(data) {
113        if(data.hadError()) {
114                if(data.getError != null) {
115                        alert("Error - " + data.getError());
116                } else if(data.getErrorMessage != null) {
117                        alert("Error - " + data.getErrorMessage());
118                } else {
119                        alert("Unknown error!");
120                        DumperAlert(data);
121                }
122        } else {
123                alert("Updated your favourite postcode!");
124                findPC();
125        }
126  }
127
128  function startShowMap(postcode) {
129        document.getElementById("pc").value = postcode;
130
131        fetchMapForPostcode("yourmap", postcode, true);
132  }
133  function fetchMapForPostcode(parentId, postcode, fullsize) {
134        // Ditch any spaces
135        postcode = postcode.replace(" ","");
136
137        // Find the details
138        var url = geocoder + postcode;
139        var params = {};
140        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
141        gadgets.io.makeRequest(url,
142                function(obj) {
143                        doShowMap(parentId, postcode, fullsize, obj);
144                }, params
145        );
146  }
147
148  function doShowMap(parentId, searchPC, fullsize, obj) {
149        // Zap old
150        var map = document.getElementById(parentId);
151        while(map.hasChildNodes()) {
152                map.removeChild(map.firstChild);
153        }
154
155        var json = obj.data;
156//      if(obj.errors) {
157//              alert(obj.errors);
158//              alert(obj.text);
159//      }
160        if(json) {
161                var tile_e = '000' + Math.floor(json["e"]/1000);
162                var tile_n = '000' + Math.floor(json["n"]/1000);
163                tile_e = tile_e.substring(tile_e.length-3);
164                tile_n = tile_n.substring(tile_n.length-3);
165                var tile = "http://tile.npemap.org.uk/osgb/scaled1/" + tile_e + "/" + tile_n + ".jpg";
166
167                var js = "";
168                if(! fullsize) {
169                        js = " width='62' height='62' onmouseover='makeBig(this)' onmouseout='makeNormal(this)' ";
170                }
171
172                map.innerHTML = "<a href='" + mainSite + tile_e + "," +
173                        tile_n + ",1'><img src='" + tile + "' alt='Map of " +
174                        json["pc"] + "' " + js + " /></a>";
175        } else {
176                map.innerHTML = "No map found for postcode " + searchPC + ", sorry";
177        }
178  }
179  function makeBig(obj) {
180        obj.width = 125;
181        obj.height = 125;
182  }
183  function makeNormal(obj) {
184        obj.width = 62;
185        obj.height = 62;
186  }
187</script>
188<div id="content_div">
189 <div id="you">
190        <div id="yourmap"></div>
191        <div id="pickpc">
192                <label for="pc">Favourite Postcode:</label>
193                <input type="text" id="pc" />
194                <input type="button" value="Change" onclick="pickPC()" />
195        </div>
196 </div>
197 <br />
198 <div>Your friends:</div>
199 <div id="friends"></div>
200</div>
201]]> 
202</Content>
203</Module>
Note: See TracBrowser for help on using the repository browser.