Fotballklubber i Europa

Illustrasjonene nedenfor er øyeblikksbilder fra april 2013.

JSON

Liste av klubber

Data om klubber og arenaer er samlet sammen fra klubbenes og arenaenes hjemmesider og fra Wikipedia. Det er en overkommelig jobb å samle/skrape dette i CSV-filer og så produsere JSON-filer.

Utdrag fra en JSON-fil som viser klubber i SpanskPrimera division:

var teamsES1={"tlist":[
{"ID" : "ES0001","Name": "Barcelona FC",
"Level":"1",
"Logo":"ES0001.png",
"Wiki":"http://en.wikipedia.org/wiki/Barcelona_FC"},
{"ID" : "ES0002","Name": "Club Atlético de Madrid",
"Level":"1",
"Logo":"ES0002.png",
"Wiki":"http://en.wikipedia.org/wiki/Club_Atl%C3%A9tico_de_Madrid"},
...]};

Tilsvarende som viser arenaer i Spansk Primera division:

var arenasES1={"alist":[
{"Name" : "Camp Nou",
"Lat":"41.3808333", "Lng":"2.12277777",
"Teamlist":"ES0001",
"Wiki":"http://en.wikipedia.org/wiki/Camp_nou",
"Capacity":"99000"},
{"Name" : "Vicente Calderón Stadium",
"Lat":"40.4017194","Lng":"-3.7206055",
"Teamlist":"ES0002",
"Wiki":"http://en.wikipedia.org/wiki/Vicente_Calder%C3%B3n_Stadium",
"Capacity":"55000"},
...
]};

Alle data som beskriver lag og arenaer lastes opp når websiden lastes. JSON-dataene inkluderes som i <script> - tagger. Det er altså ikke behov for serves-access når websiden første er lastet. I øyeblikket er de to øverste nivåene i Norge, Sverige, Danmark, England, Nederland, Frankrike, Tyskland, Spania og Portugal tatt med.

Kart

Kart med fotballarenaer

Kartet er basert på Googles Map API. Javascript kode som viser kart (utdrag):

// make markers for arenas
function makeMarker(arena,map){
    var lat=parseFloat(arena.Lat);
    var lng=parseFloat(arena.Lng);
    latmin=Math.min(latmin,lat);
    latmax=Math.max(latmax,lat);
    lngmin=Math.min(lngmin,lng);
    lngmax=Math.max(lngmax,lng);
    
    var latlng=new google.maps.LatLng(lat,lng);
    mrk=new google.maps.Marker({
              position:  latlng,
              map: map,
              visible:true, 
              title:arena.Name,
            });    
    google.maps.event.addListener(mrk, 'click', function(event) {
        curArena=arena;
        hiliteArena();
        hiliteTeamsFromArenaSelection();
    });
    return mrk;
}
// Viser fram et kart avgrenset av arenaene
function visKart()
{
    Markerlist=[];
    resetBounds();
    // plasser kartet i elementet med ID: map_canvas
    map = new google.maps.Map(document.getElementById("map_canvas"),{
        mapTypeId: google.maps.MapTypeId.HYBRID
    });
    for(ix=0;ix<arenaData.length;ix++){
        Markerlist.push(makeMarker(arenaData[ix],map));
    }
    mbounds=new google.maps.LatLngBounds(new google.maps.LatLng(latmin,lngmin),
                                         new google.maps.LatLng(latmax,lngmax));
    map.fitBounds(mbounds);       
}

Widgets

Tabell

Siden inneholder også den oppdaterte tabellen for den valgte ligaen. Denne komponenten leveres av SoccerWay [2] som har en masse data om fotball i hele verden. De tilbyr widgets som viser oppdaterte tabeller. En slik inkluderes på siden med en enkel iframe.

<iframe 
src="http://widgets.soccerway.com/widget/free...." 
width="350" height="500" scrolling="no" 
frameborder="0" marginwidth="0" marginheight="0">
</iframe>

En rekke spesifikasjoner er erstattet med ..... Soccerway har et verktøy der du kan spesifisere en rekke ting når du setter opp importformatet, vilken liga du vil ha, farger etc.

var browser=navigator.userAgent;
if(browser.indexOf("Firefox")!=-1)
{
	document.getElementById("FF-message").innerHTML=
		"If not showing team names, press: ctrl r";
}