UEFA3

Prøv den også på mobiltelefonen.

Illustrasjonene nedenfor er øyeblikksbilder fra februar 2015.

JSON

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 XML-filer og så produsere JSON-filer.

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

var ESdata={"ligalist":[{"name+":"Primera"},{"name":"Segunda"}],
"teamlist":[
{
"id":"ES0022",
"name":"Almería",
"level":"1",
"aliases":"UD Almería",
"homepage":"http://www.udalmeriasad.com/",
"wiki":"http://en.wikipedia.org/wiki/UD_Almer%C3%ADa",
"logo":"https://borres.hiof.no/resources/fotballogos/ES0022.png",
"arenaname":"Estadio de los Juegos Mediterráneos",
"arenawiki":"http://en.wikipedia.org/wiki/Estadio_de_los_Juegos_Mediterr%C3%A1neos",
"capasity":"22000",
"lng":"-2.4352778",
"lat":"36.84",
"data":"?",
"comments":"?"
},
..
]};

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="https://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.