Skip to content

mirrorlist template using OSM instead of Google Maps #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
poempelfox wants to merge 4 commits into from
Closed

mirrorlist template using OSM instead of Google Maps #72

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bbc3b66
mirrorlist template using OSM instead of Google Maps
poempelfox Jan 28, 2018
8350aeb
add blue line from user position to selected mirror
poempelfox Feb 3, 2018
9054fbc
fix copyright displayed in the corner of the map (this was copied fro…
poempelfox Feb 3, 2018
d6d9e0d
show at most 19 mirror positions (old GM version showed at most 10), …
poempelfox Feb 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 202 additions & 0 deletions templates/mirrorlist-osm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
{{define "title"}}Mirrorlist {{.FileInfo.Path}}{{end}}
{{define "headline"}}{{.FileInfo.Path}}{{end}}

{{define "head"}}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['mirror','probability'],
{{range $i, $v := .MirrorList}}{{if $v.Weight}}['{{$v.ID}}', {{$v.Weight}}],{{end}}{{end}}
]);

// Set chart options
var options = {
title: 'Load distribution',
width: 600,
height: 320,
chartArea: {'width': '90%', 'height': '90%'},
sliceVisibilityThreshold: .01,
is3D: true
};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js"></script>
<style>
.numberboxinmapblue {
background:blue; color:white; border:none;
text-align:center;
font-size: 11px;
min-height: 16px; min-width: 16px;
}
.numberboxinmapblue:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0; height: 0;
border: 4px solid transparent;
border-top-color: blue;
border-bottom: 0;
margin-left: -4px; margin-bottom: -4px;
}
.numberboxinmapgreen {
background:green; color:white; border:none;
text-align:center;
font-size: 11px;
min-height: 16px; min-width: 16px;
}
.numberboxinmapgreen:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0; height: 0;
border: 4px solid transparent;
border-top-color: green;
border-bottom: 0;
margin-left: -4px; margin-bottom: -4px;
}
</style>
{{end}}

{{define "body"}}

<div style="display: flex; flex-wrap: wrap;">
<div style="flex-basis: 250px; flex-grow: 1; margin: 8px;">
<h3>Client</h3>
<div>You are connecting with IP address <i>{{.IP}}</i>, which belongs to autonomous system <i>{{.ClientInfo.ASName}} (ASN{{.ClientInfo.ASNum}})</i>.<br />
{{if .ClientInfo.GeoIPRecord}}We believe you are {{if .ClientInfo.City}}near <i>{{.ClientInfo.City}}</i> in {{else}}somewhere in {{end}}<i>{{.ClientInfo.CountryName}}</i> and have selected mirrors based on this.{{else}}We were not able to use your IP to approximate your location, so have chosen the mirrors at random.{{end}}</div>
</div>

<div style="flex-basis: 325px; flex-grow: 1; margin: 8px;">
<h3>File</h3>
<div>The file <b>{{.FileInfo.Path}}</b> has a size of {{sizeof .FileInfo.Size}} ({{.FileInfo.Size}} bytes) and was last modified on {{dateutc .FileInfo.ModTime}}.</div>
<div>
<br/>Known hashes:
<table class="alt">
<tr><td>MD5</td><td style="font-family: monospace; word-break: break-all;">{{if .FileInfo.Md5}}{{.FileInfo.Md5}}{{else}}N/A{{end}}</td></tr>
<tr><td>SHA1</td><td style="font-family: monospace; word-break: break-all;">{{if .FileInfo.Sha1}}{{.FileInfo.Sha1}}{{else}}N/A{{end}}</td></tr>
<tr><td>SHA256</td><td style="font-family: monospace; word-break: break-all;">{{if .FileInfo.Sha256}}{{.FileInfo.Sha256}}{{else}}N/A{{end}}</td></tr>
</table>
</div>
<br/>
</div>
</div>

<div style="display: flex; flex-wrap: wrap; justify-content: space-around;">
<div id="map" style="width:600; height:320;"></div>
<div id="chart_div" style="width:600; height:320;"></div>
</div>

<script>
var map = L.map('map').setView([20,37], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>, map rendering <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);

var mapdata = {
"mirrors" : [
{{range $i, $v := .MirrorList}}
{{if lt $i 19 }}
{
"lat" : {{$v.Latitude}},
"lon" : {{$v.Longitude}},
"nr" : {{add $i 1}},
"color" : {{if $v.Weight}}"green"{{else}}"blue"{{end}}
},
{{end}}
{{end}}
],
"clientpos" : {
{{if .ClientInfo.GeoIPRecord}}
"lat" : {{.ClientInfo.Latitude}},
"lon" : {{.ClientInfo.Longitude}}
{{else}}
"lat" : 0.0,
"lon" : 0.0
{{end}}
}
};
var latlngbounds = new L.latLngBounds(); // For calculating the boundaries we zoom to on map load
if ((mapdata.clientpos.lat != 0.0) || (mapdata.clientpos.lon != 0.0)) {
var nxtmarker = new L.marker([mapdata.clientpos.lat, mapdata.clientpos.lon]);
nxtmarker.addTo(map);
latlngbounds.extend([mapdata.clientpos.lat, mapdata.clientpos.lon]);
if (mapdata.mirrors.length > 0) {
var polyline = L.polyline( [
[ mapdata.clientpos.lat, mapdata.clientpos.lon ],
[ mapdata.mirrors[0].lat, mapdata.mirrors[0].lon ]
],
{color: 'blue', opacity: 0.6});
polyline.addTo(map);
// No need to update the bounds - that happens when the mirrors dot is added below.
}
}
var showaftercutoff = 3; // How many mirrors without weight to use for calculating bounds
for (i in mapdata.mirrors) {
var myIcon = L.divIcon({
className: 'numberboxinmap' + mapdata.mirrors[i].color,
html: "" + mapdata.mirrors[i].nr,
iconSize: null,
iconAnchor: [8, 20]
});
var nxtmarker = new L.marker([mapdata.mirrors[i].lat, mapdata.mirrors[i].lon], {icon: myIcon});
nxtmarker.addTo(map);
if (mapdata.mirrors[i].color != "green") {
showaftercutoff--;
}
if (showaftercutoff > 0) {
latlngbounds.extend([mapdata.mirrors[i].lat, mapdata.mirrors[i].lon]);
}
}
latlngbounds.pad(1);
map.fitBounds(latlngbounds);

</script>

<div>
<br/>
<h3>Mirrors</h3>

{{if .Fallback}}<p style="color:red">Warning: file not served by any mirror, fallbacks to the rescue.</p>{{end}}

{{if .MirrorList}}
<table border="0" cellpadding="2" class="alt" style="width: 95%; text-align:left;">
<thead><tr>
<th style="width: 3%;">Rank</th><th style="width: 20%;">Mirror Name</th><th style="text-align: right;">URL</th><th style="text-align: center; width: 10%;">Country</th><th style="text-align: center;">Continent</th><th style="text-align: right;">Distance</th><th style="text-align: center;">Selection</th>
</tr></thead>
<tbody>
{{range $i, $v := .MirrorList}}
<tr{{if not $v.Weight}} style="color: grey;"{{end}}>
<td style="text-align: right;">{{add $i 1}}.</td><td>{{if $v.SponsorName}}{{$v.SponsorName}}{{else}}{{$v.ID}}{{end}}</td><td style="text-align: right;"><a href="{{concaturl $v.HttpURL $.FileInfo.Path}}">{{$v.HttpURL}}</a></td><td style="text-align: center;">{{$v.CountryCodes}}</td><td style="text-align: center;">{{$v.ContinentCode}}</td><td style="text-align: right;">{{printf "%.0f" $v.Distance}} Km</td><td style="text-align: center;">{{if $v.Weight}}{{if ge $v.Weight 1.0}}{{printf "%.0f" $v.Weight}}{{else}}<1{{end}}%{{else}}n/a{{end}}</td>
</tr>
{{end}}
</tbody>
</table>
{{else}}
<i>No mirrors for this file</i>
{{end}}

{{if .ExcludedList}}
<h3>Excluded Mirrors</h3>
<table border="0" cellpadding="2" class="alt" style="width: 95%; text-align:left;">
<thead><tr><th style="width: 23%;">Mirror Name</th><th style="text-align: right;">URL</th><th style="text-align: center; width: 10%;">Country</th><th style="text-align: center;">Continent</th><th style="text-align: right;">Distance</th><th style="text-align: center; width: 20%;">Exclude Reason</th></tr></thead>
<tbody>
{{range $i, $v := .ExcludedList}}
<tr>
<td>{{if $v.SponsorName}}{{$v.SponsorName}}{{else}}{{$v.ID}}{{end}}<td style="text-align: right;"><a href="{{$v.HttpURL}}">{{$v.HttpURL}}</a></td><td style="text-align: center;">{{$v.CountryCodes}}</td><td style="text-align: center;">{{$v.ContinentCode}}</td><td style="text-align:right;">{{printf "%.0f" $v.Distance}} Km</td><td style="text-align: center;">{{$v.ExcludeReason}}</td>
</tr>
{{end}}
</tbody>
</table>
{{end}}
</div>
{{end}}