Google maps
De dataene vi skal bruke er i json-format og de er referert i modulen
[2]
, og
har adresse:
https://borres.hiof.no/wep/data/geografi/land.json.
Fila ser slik ut:
land.json
Vi bruker GoogleMaps [3] . Merk at for å bruke Google Maps må du skaffe deg en ID som gjelder for et domene.
Dette lar seg løse på mange måter. Jeg har valgt en enkel løsning der alle dataene, JSON-fila, lastes opp når siden lastes. Det vi si at vi skal kunne velge nye land uten å hente data fra tjeneren hver gang. Jeg bruker jQuery/AJAX til å hente data.
Javascriptbiblioteket til Google som er nødvendig for å sette opp kartet gjøres tilgjengelig med følgende script-element på siden:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<my google key>&sensor=true"> </script>
Javascriptet
Javascriptet leser lista over land og plasserer en option for hvert land i listeboksen.
// array of countries, as from the JSON data
var countries;
//------------------
// when we select a country
function showmap()
{
// unpack data from selected country
var index=document.form1.ListBox1.value;
// console.log(index);
// capital,population,areaInSqKm,west,north,east,south
document.getElementById('capital').innerHTML=
countries[index].capital;
document.getElementById('population').innerHTML=
countries[index].population;
document.getElementById('areaInSqKm').innerHTML=
countries[index].areaInSqKm;
document.getElementById('countryName').innerHTML=
countries[index].countryName;
var W=countries[index].west;
var N=countries[index].north;
var E=countries[index].east;
var S=countries[index].south;
// make map in the div with ID="map_canvas"
map = new google.maps.Map(document.getElementById("map_canvas"),{
mapTypeId: google.maps.MapTypeId.HYBRID
});
// limit the area shown to country box
// implicitely produces zoom
mbounds=new google.maps.LatLngBounds(new google.maps.LatLng(S,W),
new google.maps.LatLng(N,E));
map.fitBounds(mbounds);
}
//------------------------------
// on page load, load data with jQuery / AJAX
function init(){
$.ajax({
url:'https://borres.hiof.no/wep/data/geografi/land.json',
success:function(data)
{
// get the JSON-list
countries=data.geonames;
// sort alphabetically
sortCountries();
//when debugging:console.log(countries[1].countryName);
// set up selection box with an option for each country
var list=document.getElementById("ListBox1");
var S="";
for(var ix=0;ix < countries.length;ix++){
S+="<option value="+ix+">"+
countries[ix].countryName+
"</option>\n";
}
list.innerHTML=S;
// select Norway as a starter
document.form1.ListBox1.selectedIndex=156;
showmap();
},
error:function(data)
{
// we failed , tell it
var elt=document.getElementById("all");
elt.innerHTML="Fikk ikke tak i data";
}
});
}
//---------------------------
// sort alphabetically on countryName
function sortCountries(){
countries.sort(
function(a, b){
if (a.countryName < b.countryName)
return -1;
return 1;
}
);
}
Eller du kan se et eksempel der google-maps, ammen med noen andre komponenter, er brukt til vise plasseruing av noen fotballklubber i Europa
