Mercurial > linkmap

<!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&amp;v=2&amp;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>
author	Matt Johnston <matt@ucc.asn.au>
date	Sun, 21 Oct 2012 23:03:51 +0800
parents
children