Mercurial > linkmap
diff linkmap.html @ 0:fb5784aa45e6 default tip
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/linkmap.html Sun Oct 21 23:03:51 2012 +0800 @@ -0,0 +1,307 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"/> + + <title>Link Map</title> + + <style type="text/css"><!-- + body{font-family: sans-serif; height:99%; margin:0; padding:0;} + html{height:99%; margin:0; padding:0;} + #error_log { + font-family: Courier, "Courier New", monospace, Fixed; + border: 3px solid red; + padding: 0.5em; + margin: 0.5em; + display: none; + } + #map_canvas { + height:99%; + width: 100%; + margin:0; + padding:0; + } + + #legend { + font-size: small; + background-color: #fff; + opacity: 0.7; + text-align: left; + padding: 0.5em; + border: 1px solid black; + } + + #legend div { + vertical-align: middle; + display: inline-block; + margin-right: 1em; + } + + .node_label_id { + font-size: smaller; + } + .node_marker_label { + font-size: small; + font-weight: bold; + color: #800; + opacity: 0.9; + } + //--> + </style> + + <script> + // define some constants for colours etc: + LINKED_ICON = 'bluedot.png'; + UNLINKED_ICON = 'yellowdot.png'; + ICON_SIZE_W = 18; + ICON_SIZE_H = 18; + + LINK_COLOUR_5GHZ = '#080'; + LINK_COLOUR_2GHZ = '#00f'; + LINK_COLOUR_VPN = '#777'; + LINK_OPACITY = 0.7; + LINK_WIDTH = 4; + + LEGEND_X_OFFSET = 7; + LEGEND_Y_OFFSET = 240; + + CENTRE_COORDS_LAT = -31.9554; + CENTRE_COORDS_LNG = 115.85859; + + // Note that these don't really help with privacy - people + // can always inspect the raw javascript. Manually alter coordinates + // if desired. + MAX_ZOOM = 13; + MIN_ZOOM = 3; + INIT_ZOOM = 10; + + </script> + + <!-- load the nodes and links. --> + <script src="freenet_data.js"></script> + + <script> + + var key = { + 'localhost': 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQeuZtV4Gh5jn5-Mzkw8HaJ-hZUxQ', + 'matt.ucc.asn.au': 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBTcvFJ22Qq_4Wpg4VhVaFRl5W3cyxRmrAk6RVdmqxBPO7KK8gwSWsrFVg', + 'www.wafreenet.org': 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBRTyFF_GlE7_llDeWLTuKgydpOCLhQydqjQALO8ZGbbZw5VaoTB-DBcMw', + }[window.location.host] + if (!key) { + key = + 'ABQIAAAAN6v4BE-QSU4eUIUlNyDwJBTR5ei7CukQRzAV2g5VZ7MlqVyAPxSs6pg6K2o24gSmaclijIuM-Q9KcA'; + } + document.write([ + '<script src="https://maps.google.com/maps?file=api&v=2&key=', + key, + '" type="text/javascript"><\/script>' + ].join('')); + </script> + + <!-- 3rd party labelled marker code --> + <script src="labeled_marker.js"></script> + + <script type="text/javascript"> + + // define a few constants after loading the gmaps API + ICON_SIZE = new GSize(ICON_SIZE_W, ICON_SIZE_H); + CENTRE_COORDS = new GLatLng(CENTRE_COORDS_LAT, CENTRE_COORDS_LNG); + + function add_node(map, nodeid, lat, lng, name, desc, url, is_linked) { + var latlng = GLatLng.fromUrlValue('') + var latlng = new GLatLng(lat, lng); + + var icon = new GIcon(G_DEFAULT_ICON); + icon.shadow = ""; + if (is_linked) { + icon.image = LINKED_ICON; + } else { + icon.image = UNLINKED_ICON; + } + var middle = new GPoint(ICON_SIZE.width / 2.0, ICON_SIZE.height / 2.0); + icon.iconAnchor = middle; + icon.infoWindowAnchor = middle; + icon.iconSize = ICON_SIZE; + + var marker_opts = { + icon: icon, + labelText: '<div class="node_marker_label">' + name + "</div>", + labelOffset: new GSize(ICON_SIZE.width/2.0, 0), + }; + + var marker = new LabeledMarker(latlng, marker_opts); + + var desc_text = ''; + if (desc) { + desc_text = '<br/>' + desc; + } + + var name_text = nodeid; + if (name) { + name_text = name; + } + if (url) { + name_text = '<a href="' + url + '">' + name_text + '</a>'; + } + var myhtml = '<div class="node_label"><b>' + name_text + "</b>" + desc_text + '<br/><div class="node_label_id">' + nodeid + "</div></div>"; + GEvent.addListener(marker, "click", function() { + map.openInfoWindowHtml(latlng, myhtml); + }); + map.addOverlay(marker); + } + + function add_link(map, kind, lat1, lng1, lat2, lng2) { + var pos1 = new GLatLng(lat1, lng1); + var pos2 = new GLatLng(lat2, lng2); + var polyOptions = {geodesic:true}; + + // line styling defined here. + var colour = null; + if (kind == '2ghz') { + colour = LINK_COLOUR_2GHZ; + } else if (kind == '5ghz') { + colour = LINK_COLOUR_5GHZ; + } else if (kind == 'vpn') { + colour = LINK_COLOUR_VPN; + } + else { + throw ("Link kind '" + kind + "' is not known."); + } + + var line = new GPolyline([ + pos1, pos2, + ], colour, LINK_WIDTH, LINK_OPACITY, polyOptions); + map.addOverlay(line); + } + + function make_legend(map, legend_html) { + // from + // http://code.google.com/apis/maps/documentation/examples/control-custom.html + function LegendControl() { + } + + LegendControl.prototype = new GControl(); + + // Creates a one DIV for each of the buttons and places them in a container + // DIV which is returned as our control element. We add the control to + // to the map container and return the element for the map class to + // position properly. + LegendControl.prototype.initialize = function(map) { + var legendDiv = document.createElement("div"); + legendDiv.id = "legend"; + legendDiv.innerHTML = legend_html; + + var container = document.createElement("div"); + container.appendChild(legendDiv); + map.getContainer().appendChild(container); + return container; + } + + // By default, the control will appear in the top left corner of the + // map with 7 pixels of padding. + LegendControl.prototype.getDefaultPosition = function() { + return new GControlPosition(G_ANCHOR_TOP_LEFT, + new GSize(LEGEND_X_OFFSET, LEGEND_Y_OFFSET)); + } + + map.addControl(new LegendControl()); + } + + function limit_zoom(map, minMapScale, maxMapScale) { + // get array of map types + var mapTypes = map.getMapTypes(); + // overwrite the getMinimumResolution() and getMaximumResolution() methods + // for each map type + for (var i=0; i<mapTypes.length; i++) { + mapTypes[i].getMinimumResolution = function() {return minMapScale;} + mapTypes[i].getMaximumResolution = function() {return maxMapScale;} + } + } + + function initialize() { + if (GBrowserIsCompatible()) { + var map = new GMap2(document.getElementById("map_canvas")); + + // turn on the zoom and terrain/sat buttons + + var customUI = map.getDefaultUI(); + customUI.maptypes.hybrid = false; + customUI.controls.scalecontrol = false; + map.setUI(customUI); + + map.setMapType(G_PHYSICAL_MAP); + map.enableContinuousZoom(); + + limit_zoom(map, MIN_ZOOM, MAX_ZOOM); + + // centered kind of on perth city. + map.setCenter(CENTRE_COORDS, INIT_ZOOM); + + var legend_html = '<div><img src="' + LINKED_ICON + '"/></div><div>Linked Node</div>' + + '<br/><div><img src="' + UNLINKED_ICON + '"/></div><div>Unlinked Node</div>' + + '<br/><div style="background-color: ' + LINK_COLOUR_5GHZ + '; width: 3em; height: ' + LINK_WIDTH + 'px"></div><div>5GHz Link</div>' + + '<br/><div style="background-color: ' + LINK_COLOUR_2GHZ + '; width: 3em; height: ' + LINK_WIDTH + 'px"></div><div>2GHz Link</div>' + + '<br/><div style="background-color: ' + LINK_COLOUR_VPN + '; width: 3em; height: ' + LINK_WIDTH + 'px"></div><div>VPN Link</div>' + ; +; + make_legend(map, legend_html); + + var linked_nodes = {}; + for (var i = 0; i < freenet_links.length; i++) + { + try { + var l = freenet_links[i]; + var kind = l[0]; + var nodeid1 = l[1]; + var nodeid2 = l[2]; + + var node1 = freenet_nodes[nodeid1]; + var node2 = freenet_nodes[nodeid2]; + + if (node1 == undefined) { + throw "Node ID " + nodeid1 + " is not in the node list."; + } + if (node2 == undefined) { + throw "Node ID " + nodeid2 + " is not in the node list."; + } + + if (kind != 'vpn') { + linked_nodes[nodeid1] = true; + linked_nodes[nodeid2] = true; + } + + var lat1 = node1[0]; + var lng1 = node1[1]; + var lat2 = node2[0]; + var lng2 = node2[1]; + + add_link(map, kind, lat1, lng1, lat2, lng2); + } catch (e) { + var error_log = document.getElementById("error_log"); + error_log.innerHTML += "Error adding node link '" + + l + "': '" + String(e) + "'<br/>"; + error_log.style.display = "block"; + } + } + + for (var nodeid in freenet_nodes) { + var n = freenet_nodes[nodeid]; + var lat = n[0]; + var lng = n[1]; + var name = n[2]; + var desc = n[3]; + var url = n[4]; + var is_linked = linked_nodes[nodeid]; + add_node(map, nodeid, lat, lng, name, desc, url, is_linked); + } + } + } + + </script> + </head> + <body onload="initialize()" onunload="GUnload()"> + <div id="error_log"></div> + <div id="map_canvas"></div> + </body> +</html>