diff options
author | Dan McGee <dan@archlinux.org> | 2012-05-02 11:21:32 -0500 |
---|---|---|
committer | Dan McGee <dan@archlinux.org> | 2012-09-30 13:11:08 -0500 |
commit | ab1c264ca1bec9b12f655583af0fa284c98e0e89 (patch) | |
tree | e07e7cfc8f6fea2d18ec63aaca3dd81423a52c8d | |
parent | 7253c0d2af2c043a71a6981dfc8dda955f9c9221 (diff) | |
download | archweb-ab1c264ca1bec9b12f655583af0fa284c98e0e89.tar.gz archweb-ab1c264ca1bec9b12f655583af0fa284c98e0e89.zip |
WIP: add mirror map template
-rw-r--r-- | templates/mirrors/map.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/templates/mirrors/map.html b/templates/mirrors/map.html new file mode 100644 index 00000000..38740a37 --- /dev/null +++ b/templates/mirrors/map.html @@ -0,0 +1,69 @@ +{% extends "base.html" %} +{% load url from future %} + +{% block title %}Arch Linux - Mirror Map{% endblock %} + +{% block content %} +<div id="mirror-map" class="box"> + <h2>Mirror Locations</h2> + + <div id="map_canvas" style="width:100%; height:550px"></div> +</div> + +<script type="text/javascript" + src="//maps.googleapis.com/maps/api/js?key=AIzaSyBv6vW8vPNVXTfLW7qBupSsLSuJye0MKBU&sensor=false"> +</script> +{% load cdn %}{% jquery %} +<script type="text/javascript"> + $(document).ready(function() { + var myOptions = { + center: new google.maps.LatLng(42.100324,-80.134581), + zoom: 2, + mapTypeControl: false, + scaleControl: true, + streetViewControl: false, + mapTypeId: google.maps.MapTypeId.TERRAIN + }; + var map = new google.maps.Map(document.getElementById("map_canvas"), + myOptions); + var red_dot = new google.maps.MarkerImage( + '/static/gmaps/red-dot.png', + new google.maps.Size(32, 32), + new google.maps.Point(0, 0), + new google.maps.Point(16, 32)); + var blue_dot = new google.maps.MarkerImage( + '/static/gmaps/blue-dot.png', + new google.maps.Size(32, 32), + new google.maps.Point(0, 0), + new google.maps.Point(16, 32)); + var shadow = new google.maps.MarkerImage( + '/static/gmaps/msmarker.shadow.png', + new google.maps.Size(59, 32), + new google.maps.Point(0, 0), + new google.maps.Point(16, 32)); + + $.get("{% url 'visualize-mirror_locations' %}", function(data) { + $.each(data.mirrors, function(idx, val) { + var image = red_dot; + var zindex = 1; + if (val.tier == 0 || val.tier == 1) { + image = blue_dot; + zindex = 2; + } + var position = new google.maps.LatLng( + val.latitude + ((Math.random() - 0.5) * 0.03), + val.longitude + ((Math.random() - 0.5) * 0.03)); + var marker = new google.maps.Marker({ + position: position, + title: val.name, + //clickable: false, + icon: image, + zIndex: zindex, + shadow: shadow, + map: map + }); + }); + }); + }); +</script> +{% endblock %} |