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

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

Maps for friends

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