rra/Border-Check
1
0
Fork 0
mirror of https://github.com/rscmbbng/Border-Check.git synced 2024-12-27 14:21:55 +01:00
Code Issues Projects Releases Wiki Activity

pointers on map are now clustered per country

Browse Source
This commit is contained in:
rscmbbng 2013-09-24 15:17:38 +02:00
parent 2d4d97c195
commit 91b3fb74c2
2 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/index.py
View File

@ -47,6 +47,8 @@ for counter in range(1, last_hop+1):
timestamp_list.append(float(timestamp)) timestamp_list.append(float(timestamp))
country_code_list.append(country_code.encode('utf-8')) country_code_list.append(country_code.encode('utf-8'))
unique_country_code_list = set(country_code_list)
x = open('testmap.html','w') x = open('testmap.html','w')
# HTML + JS container # HTML + JS container
output = """ output = """
@ -61,7 +63,7 @@ output = """
<script src="js/rlayer-modified.min.js"></script> <script src="js/rlayer-modified.min.js"></script>
<script src="js/raphael.js"></script> <script src="js/raphael.js"></script>
<script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bc2.js"></script> <script src="js/bc.js"></script>
<script src="js/favicon.js"></script> <script src="js/favicon.js"></script>
<script src="js/cluster/leaflet.markercluster.js"></script> <script src="js/cluster/leaflet.markercluster.js"></script>
@ -90,6 +92,7 @@ output = """
server_name_list = """+str(server_name_list)+""" server_name_list = """+str(server_name_list)+"""
timestamp_list = """+str(timestamp_list)+""" timestamp_list = """+str(timestamp_list)+"""
country_code_list = """+str(country_code_list)+""" country_code_list = """+str(country_code_list)+"""
unique_country_code_list = """+str(list(unique_country_code_list))+"""
</script> </script>
</html> </html>
""" """

52
web/js/bc.js
View File

@ -26,30 +26,51 @@ window.onload = function () {
//function chain for drawing the markers and lines on the map. //function chain for drawing the markers and lines on the map.
delay = (400+timestamp_list[index]) delay = (500+timestamp_list[index]) //sets the animationspeed
clusterGroup = new L.MarkerClusterGroup();
AddStep(latlong[index], latlong[index+1], index) clusterGroups = {} //contains all country specific clusters
makeClusterGroups(country_code_list, index) //initialize first cluster
AddStep(latlong[index], latlong[index+1], index) // initialize the animation
function AddMarkerCluster(marker, index){ function makeClusterGroups(country_code_list, index){
clusterGroup.addLayer(marker) for (var i = 0; i < unique_country_code_list.length; i++){
if (unique_country_code_list[i] == country_code_list[index]){
if (clusterGroups[unique_country_code_list[i]]){
//checks if a cluster for the country already exists
return
}
else
//if not make it.
clusterGroups[unique_country_code_list[i]] = new L.MarkerClusterGroup();
}
}
} }
//console.log(clusterGroups)
function AddMarkerCluster(marker, index){
clusterGroups[country_code_list[index]].addLayer(marker)
map.addLayer(clusterGroups[country_code_list[index]])
}
function AddMarker(src, index){ function AddMarker(src, index){
var marker = L.marker([src[0], src[1]]) makeClusterGroups(country_code_list, index)
var popup = L.Popup({ var marker = L.marker([src[0], src[1]])
var popup = L.Popup({
maxHeight: 50}) maxHeight: 50})
var popupcontent = "<p>Hop no:"+hop_list[index]+"<br /><div id='metadata' $(this).hide()><button id='but'>show metadata</button><div id='metadata-content'>Server name:<br />"+server_name_list[index]+"<br />Network owner:<br />"+asn_list[index]+"</div></div>" var popupcontent = "<p>Hop no:"+hop_list[index]+"<br /><div id='metadata' $(this).hide()><button id='but'>show metadata</button><div id='metadata-content'>Server name:<br />"+server_name_list[index]+"<br />Network owner:<br />"+asn_list[index]+"</div></div>"
marker.bindPopup(popupcontent) marker.bindPopup(popupcontent)
//marker.addTo(map).openPopup() AddMarkerCluster(marker, index)
$('#metadata-content').hide()
AddMarkerCluster(marker)
map.addLayer(clusterGroup)
} }
function AddStep(src, dest, index){ function AddStep(src, dest, index){
var b = new R.BezierAnim([src, dest], {}) var b = new R.BezierAnim([src, dest], {})
map.addLayer(b) map.addLayer(b)
AddMarker(src, index) AddMarker(src, index)
//console.log('AddStepp'+index)
processStep(index) processStep(index)
//console.log(delay) //console.log(delay)
} }
@ -61,7 +82,9 @@ window.onload = function () {
changeFavicon('js/world/'+country_code_list[index]+'.png') changeFavicon('js/world/'+country_code_list[index]+'.png')
window.setTimeout(function () { window.setTimeout(function () {
AddStep(latlong[index], latlong[index+1], index) AddStep(latlong[index], latlong[index+1], index)
//console.log('processStep')
}, delay);} }, delay);}
else else
if (index < counter_max-1){ if (index < counter_max-1){
//console.log('hop#', hop_list[index]) //console.log('hop#', hop_list[index])
@ -75,11 +98,10 @@ window.onload = function () {
changeFavicon('js/world/'+country_code_list[index]+'.png') changeFavicon('js/world/'+country_code_list[index]+'.png')
//console.log('fin') //console.log('fin')
//map.fitBounds([bounds]) //map.fitBounds([bounds])
} }
index = index + 1 index = index + 1
delay = (400 + timestamp_list[index]) delay = (500 + timestamp_list[index])
} }
$('.leaflet-marker-icon').bind('click', function(){ $('.leaflet-marker-icon').bind('click', function(){
console.log('clickkkk') console.log('clickkkk')