Google
JSON
HTML
Børre Stenseth
Eksempler >uefa3

UEFA3

Hva

Det er bygget en webside som kombinerer flere komponenter:

  • Google maps, [1]
  • Importerte widgets (iframe) fra SoccerWay [2]
  • Tabulator fra BarelyFitz Designs [3]

Du kan teste løsningen her https://borres.hiof.no/klubber/

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:

_teams.json

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

map
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

table
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.

Referanser
  1. Google Maps API Google developers.google.com/maps/documentation/javascript/ 14-10-204
  1. Soccerway, fotballresultater fra hele verden soccerway.com www.soccerway.com/ 14-03-2014
  1. Tabifier Javascript BarelyFitz Designs www.barelyfitz.com/projects/tabber/ 14-03-2014
Eksempler >uefa3