Mercurial > linkmap

comparison linkmap.html @ 0:fb5784aa45e6 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
from monotone. problematic https vs v2 API
author Matt Johnston <matt@ucc.asn.au>
date Sun, 21 Oct 2012 23:03:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:fb5784aa45e6
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
6
7 <title>Link Map</title>
8
9 <style type="text/css"><!--
10 body{font-family: sans-serif; height:99%; margin:0; padding:0;}
11 html{height:99%; margin:0; padding:0;}
12 #error_log {
13 font-family: Courier, "Courier New", monospace, Fixed;
14 border: 3px solid red;
15 padding: 0.5em;
16 margin: 0.5em;
17 display: none;
18 }
19 #map_canvas {
20 height:99%;
21 width: 100%;
22 margin:0;
23 padding:0;
24 }
25
26 #legend {
27 font-size: small;
28 background-color: #fff;
29 opacity: 0.7;
30 text-align: left;
31 padding: 0.5em;
32 border: 1px solid black;
33 }
34
35 #legend div {
36 vertical-align: middle;
37 display: inline-block;
38 margin-right: 1em;
39 }
40
41 .node_label_id {
42 font-size: smaller;
43 }
44 .node_marker_label {
45 font-size: small;
46 font-weight: bold;
47 color: #800;
48 opacity: 0.9;
49 }
50 //-->
51 </style>
52
53 <script>
54 // define some constants for colours etc:
55 LINKED_ICON = 'bluedot.png';
56 UNLINKED_ICON = 'yellowdot.png';
57 ICON_SIZE_W = 18;
58 ICON_SIZE_H = 18;
59
60 LINK_COLOUR_5GHZ = '#080';
61 LINK_COLOUR_2GHZ = '#00f';
62 LINK_COLOUR_VPN = '#777';
63 LINK_OPACITY = 0.7;
64 LINK_WIDTH = 4;
65
66 LEGEND_X_OFFSET = 7;
67 LEGEND_Y_OFFSET = 240;
68
69 CENTRE_COORDS_LAT = -31.9554;
70 CENTRE_COORDS_LNG = 115.85859;
71
72 // Note that these don't really help with privacy - people
73 // can always inspect the raw javascript. Manually alter coordinates
74 // if desired.
75 MAX_ZOOM = 13;
76 MIN_ZOOM = 3;
77 INIT_ZOOM = 10;
78
79 </script>
80
81 <!-- load the nodes and links. -->
82 <script src="freenet_data.js"></script>
83
84 <script>
85
86 var key = {
87 'localhost': 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQeuZtV4Gh5jn5-Mzkw8HaJ-hZUxQ',
88 'matt.ucc.asn.au': 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBTcvFJ22Qq_4Wpg4VhVaFRl5W3cyxRmrAk6RVdmqxBPO7KK8gwSWsrFVg',
89 'www.wafreenet.org': 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBRTyFF_GlE7_llDeWLTuKgydpOCLhQydqjQALO8ZGbbZw5VaoTB-DBcMw',
90 }[window.location.host]
91 if (!key) {
92 key =
93 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBTR5ei7CukQRzAV2g5VZ7MlqVyAPxSs6pg6K2o24gSmaclijIuM-Q9KcA';
94 }
95 document.write([
96 '<script src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=',
97 key,
98 '" type="text/javascript"><\/script>'
99 ].join(''));
100 </script>
101
102 <!-- 3rd party labelled marker code -->
103 <script src="labeled_marker.js"></script>
104
105 <script type="text/javascript">
106
107 // define a few constants after loading the gmaps API
108 ICON_SIZE = new GSize(ICON_SIZE_W, ICON_SIZE_H);
109 CENTRE_COORDS = new GLatLng(CENTRE_COORDS_LAT, CENTRE_COORDS_LNG);
110
111 function add_node(map, nodeid, lat, lng, name, desc, url, is_linked) {
112 var latlng = GLatLng.fromUrlValue('')
113 var latlng = new GLatLng(lat, lng);
114
115 var icon = new GIcon(G_DEFAULT_ICON);
116 icon.shadow = "";
117 if (is_linked) {
118 icon.image = LINKED_ICON;
119 } else {
120 icon.image = UNLINKED_ICON;
121 }
122 var middle = new GPoint(ICON_SIZE.width / 2.0, ICON_SIZE.height / 2.0);
123 icon.iconAnchor = middle;
124 icon.infoWindowAnchor = middle;
125 icon.iconSize = ICON_SIZE;
126
127 var marker_opts = {
128 icon: icon,
129 labelText: '<div class="node_marker_label">' + name + "</div>",
130 labelOffset: new GSize(ICON_SIZE.width/2.0, 0),
131 };
132
133 var marker = new LabeledMarker(latlng, marker_opts);
134
135 var desc_text = '';
136 if (desc) {
137 desc_text = '<br/>' + desc;
138 }
139
140 var name_text = nodeid;
141 if (name) {
142 name_text = name;
143 }
144 if (url) {
145 name_text = '<a href="' + url + '">' + name_text + '</a>';
146 }
147 var myhtml = '<div class="node_label"><b>' + name_text + "</b>" + desc_text + '<br/><div class="node_label_id">' + nodeid + "</div></div>";
148 GEvent.addListener(marker, "click", function() {
149 map.openInfoWindowHtml(latlng, myhtml);
150 });
151 map.addOverlay(marker);
152 }
153
154 function add_link(map, kind, lat1, lng1, lat2, lng2) {
155 var pos1 = new GLatLng(lat1, lng1);
156 var pos2 = new GLatLng(lat2, lng2);
157 var polyOptions = {geodesic:true};
158
159 // line styling defined here.
160 var colour = null;
161 if (kind == '2ghz') {
162 colour = LINK_COLOUR_2GHZ;
163 } else if (kind == '5ghz') {
164 colour = LINK_COLOUR_5GHZ;
165 } else if (kind == 'vpn') {
166 colour = LINK_COLOUR_VPN;
167 }
168 else {
169 throw ("Link kind '" + kind + "' is not known.");
170 }
171
172 var line = new GPolyline([
173 pos1, pos2,
174 ], colour, LINK_WIDTH, LINK_OPACITY, polyOptions);
175 map.addOverlay(line);
176 }
177
178 function make_legend(map, legend_html) {
179 // from
180 // http://code.google.com/apis/maps/documentation/examples/control-custom.html
181 function LegendControl() {
182 }
183
184 LegendControl.prototype = new GControl();
185
186 // Creates a one DIV for each of the buttons and places them in a container
187 // DIV which is returned as our control element. We add the control to
188 // to the map container and return the element for the map class to
189 // position properly.
190 LegendControl.prototype.initialize = function(map) {
191 var legendDiv = document.createElement("div");
192 legendDiv.id = "legend";
193 legendDiv.innerHTML = legend_html;
194
195 var container = document.createElement("div");
196 container.appendChild(legendDiv);
197 map.getContainer().appendChild(container);
198 return container;
199 }
200
201 // By default, the control will appear in the top left corner of the
202 // map with 7 pixels of padding.
203 LegendControl.prototype.getDefaultPosition = function() {
204 return new GControlPosition(G_ANCHOR_TOP_LEFT,
205 new GSize(LEGEND_X_OFFSET, LEGEND_Y_OFFSET));
206 }
207
208 map.addControl(new LegendControl());
209 }
210
211 function limit_zoom(map, minMapScale, maxMapScale) {
212 // get array of map types
213 var mapTypes = map.getMapTypes();
214 // overwrite the getMinimumResolution() and getMaximumResolution() methods
215 // for each map type
216 for (var i=0; i<mapTypes.length; i++) {
217 mapTypes[i].getMinimumResolution = function() {return minMapScale;}
218 mapTypes[i].getMaximumResolution = function() {return maxMapScale;}
219 }
220 }
221
222 function initialize() {
223 if (GBrowserIsCompatible()) {
224 var map = new GMap2(document.getElementById("map_canvas"));
225
226 // turn on the zoom and terrain/sat buttons
227
228 var customUI = map.getDefaultUI();
229 customUI.maptypes.hybrid = false;
230 customUI.controls.scalecontrol = false;
231 map.setUI(customUI);
232
233 map.setMapType(G_PHYSICAL_MAP);
234 map.enableContinuousZoom();
235
236 limit_zoom(map, MIN_ZOOM, MAX_ZOOM);
237
238 // centered kind of on perth city.
239 map.setCenter(CENTRE_COORDS, INIT_ZOOM);
240
241 var legend_html = '<div><img src="' + LINKED_ICON + '"/></div><div>Linked Node</div>'
242 + '<br/><div><img src="' + UNLINKED_ICON + '"/></div><div>Unlinked Node</div>'
243 + '<br/><div style="background-color: ' + LINK_COLOUR_5GHZ + '; width: 3em; height: ' + LINK_WIDTH + 'px"></div><div>5GHz Link</div>'
244 + '<br/><div style="background-color: ' + LINK_COLOUR_2GHZ + '; width: 3em; height: ' + LINK_WIDTH + 'px"></div><div>2GHz Link</div>'
245 + '<br/><div style="background-color: ' + LINK_COLOUR_VPN + '; width: 3em; height: ' + LINK_WIDTH + 'px"></div><div>VPN Link</div>'
246 ;
247 ;
248 make_legend(map, legend_html);
249
250 var linked_nodes = {};
251 for (var i = 0; i < freenet_links.length; i++)
252 {
253 try {
254 var l = freenet_links[i];
255 var kind = l[0];
256 var nodeid1 = l[1];
257 var nodeid2 = l[2];
258
259 var node1 = freenet_nodes[nodeid1];
260 var node2 = freenet_nodes[nodeid2];
261
262 if (node1 == undefined) {
263 throw "Node ID " + nodeid1 + " is not in the node list.";
264 }
265 if (node2 == undefined) {
266 throw "Node ID " + nodeid2 + " is not in the node list.";
267 }
268
269 if (kind != 'vpn') {
270 linked_nodes[nodeid1] = true;
271 linked_nodes[nodeid2] = true;
272 }
273
274 var lat1 = node1[0];
275 var lng1 = node1[1];
276 var lat2 = node2[0];
277 var lng2 = node2[1];
278
279 add_link(map, kind, lat1, lng1, lat2, lng2);
280 } catch (e) {
281 var error_log = document.getElementById("error_log");
282 error_log.innerHTML += "Error adding node link '" +
283 l + "': '" + String(e) + "'<br/>";
284 error_log.style.display = "block";
285 }
286 }
287
288 for (var nodeid in freenet_nodes) {
289 var n = freenet_nodes[nodeid];
290 var lat = n[0];
291 var lng = n[1];
292 var name = n[2];
293 var desc = n[3];
294 var url = n[4];
295 var is_linked = linked_nodes[nodeid];
296 add_node(map, nodeid, lat, lng, name, desc, url, is_linked);
297 }
298 }
299 }
300
301 </script>
302 </head>
303 <body onload="initialize()" onunload="GUnload()">
304 <div id="error_log"></div>
305 <div id="map_canvas"></div>
306 </body>
307 </html>