Fotballklubber i Europa
Illustrasjonene nedenfor er øyeblikksbilder fra april 2013.
JSON
![Liste av klubber teamlist](teamlist.png)
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 map](map.png)
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 table](table.png)
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.
Firefox - GoogleMaps
Det er et problem med Mozilla Firefox og GoogleMaps som av og til fører til at Mozilla henger i en eller annen kommunikasjonsmodus med Google. Flere har rapportert dette problemet uten at jeg har funnet noen generell løsning. I det refererte eksempelet er dette foreløpig løst ved å anbefale en reload. Ikke ideelt, men det virker.
var browser=navigator.userAgent; if(browser.indexOf("Firefox")!=-1) { document.getElementById("FF-message").innerHTML= "If not showing team names, press: ctrl r"; }