GoogleStuff >GoogleMaps

Land i verden

Hva

Kart (Google Maps) over alle land i verden

I denne modulen skal vi lage en enkel vevside som lar oss finne fram noe informasjon om land i verden. Utgangspunktet er data fra geonames [1] . De XML-dataene vi skal bruke er referert på modulen Noen datasett , og har adresse: http://www.it.hiof.no/~borres/commondata/geonames/land.xml. XML-fila ser slik ut: land.xml

Vi bruker GoogleMaps [2] . Merk at for å bruke Google Maps må du skaffe deg en ID som gjelder for et domene, se Javascript API v3 [3] .

Dette lar seg løse på mange måter. Vi kan lage en helt enkel vevside som oppdateres ettersom vi gjør valg, eller vi kan lage en side som er AJAX-basert, dvs. den henter bare de dataene vi trenger. Vi skal imidlertid gjøre det ennå enklere: Vi lager en HTML-side som er selvforsynt. Det vi si at vi skal kunne velge nye land uten å hente data fra tjeneren.

index.html http://www.it.hiof.no/~borres/dw/verden/index.html

Det er to komponenter som skal lages:

Et Pythonscript som henter nødvendige data og pakker dem pent sammen til en HTML-side, der kartdata er lagret direkte i en select-tag.
Et javascript som tar seg av dialogen med brukeren, og som altså er selvforsynt med de data som er pakket på vevsiden

Python scriptet

Scriptet er ganske enkelt. Det henter XML-fila, bygger et DOM-tre og lager en listeboks. Denne plasseres inn på et vevsideskjelett som så skrives tilbake. Listeboksen bygges opp slik at den inneholder alle de data vi trenger for å tegne nytt kart. Noen linjer i boksen:

    
<select name="ListBox1" size="4" onchange="javascript:showmap();return false;"
	id="ListBox1" style="height:500px;width:150px;">           
	...
<option value="Sofia,7148785,110910.0,22.371166,44.21764,28.612167,41.242084,Bulgaria">Bulgaria</option>
<option value="Manama,738004,665.0,50.45414,26.282583,50.664471,25.796862,Bahrain">Bahrain</option>
<option value="Bujumbura,9863117,27830.0,28.993061,-2.310123,30.847729,-4.465713,Burundi">Burundi</option>
	...
</select>

Dataene som ligger som value er i tur og orden:
capital, population, areaInSqKm, west, north, east, south, countryName.
Dette tilsvarer elementer til hvert country-element i vår kildefil, land.xml. Box-dataene er hjørner i det rektangelet som omgir landet.

Pythonscriptet er i sin helhet slik:

#! /usr/bin/python
import xml.dom.minidom
import urllib
import sys,codecs
"""
Loading countries from geonames and
preparing a complete webpag
"""
"""
a line in the listbox:
capital,population,areaInSqKm,
bBoxWest,bBoxNorth,bBoxEast,bBoxSouth,
countryName and countryName
"""
selectLine=u'<option value="%s,%s,%s,%s,%s,%s,%s,%s">%s</option>'
htmlPage=u"""
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Velkommen</title>Du store verden</title>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYp59xvIU-gQTA-Hgz0mtgvWP4t8jrLQo&sensor=true">
    </script>
    <script type="text/javascript"  src="maps.js"> </script>
</head>
<body onload="init()">
<h1>Du store verden</h1>
<table cellpadding="0px" cellspacing="10px" border="0px">
    <tr>
    <td valign="top">
        <form id="form1" name="form1" action="#">
        <select name="ListBox1" size="4" onchange="javascript:showmap();return false;"
                id="ListBox1" style="height:500px;width:150px;">
            %s
        </select>
        </form>   
    </td>
    <td valign="top">
        <div id="countryName" style="font-size:16px;font-weight:bold">
            ?
        </div>
        <div>
            <span style="width:100px;">Hovedstad:</span>
            <span id="capital"style="margin-left:10px;font-weight:bold">
            ?
            </span>
        </div>
        <div>
            <span style="width:100px;">Innbyggere:</span>
            <span id="population" style="margin-left:10px;font-weight:bold">
            ?
            </span>
        </div>
        <div>
            <span style="width:100px;">Areal (km2):</span>
            <span id="areaInSqKm" style="margin-left:10px;font-weight:bold">
            ?
            </span>
        </div>       
        <div id="map_canvas" 
             style="width: 400px; height: 400px;border:solid; margin-top:10px">
        </div>    
    </td>
    </tr>
</table>
</body>
</html>
"""

#-----------------------
# helper to collect all text in a node
def getText(nodelist):
    rc = ''
    for node in nodelist:
        if node.nodeType == node.TEXT_NODE:
            t=node.data
            rc += t
    return rc
#----------------------------------------
# load data from anywhere
def loadData(address):
    try:
        # as an url, possibly with scheme file:
        f=urllib.urlopen(address)
        res=f.read()
        f.close()
        return (res)
    except:
         # try as a strait filename (absolute or relative)
         try:
            file=open(address,'r')
            res=file.read()
            file.close()
            return (res)
         except:
            return None
#----------------------------------------
# store a text file
def storeTextFile(filename,txt):
    try:
        file=open(filename,'w')
        file=codecs.open(filename,'w','utf-8')
        file.write(txt)
        file.close()
    except:
        print 'Trouble writing to: '+filename
#----------------------------------------
# establish dom
def establishDom(T):
    dom=None
    try:
        dom = xml.dom.minidom.parse(T)
        return dom
    except:
        return None

#------------------------------------
# make listbox
def makeListBox(dom):
    clist=dom.getElementsByTagName("country")
    res=''
    for c in clist:
        capital=getText(c.getElementsByTagName("capital")[0].childNodes)
        population=getText(c.getElementsByTagName("population")[0].childNodes)
        areaInSqKm=getText(c.getElementsByTagName("areaInSqKm")[0].childNodes)
        bBoxWest=getText(c.getElementsByTagName("west")[0].childNodes)
        bBoxNorth=getText(c.getElementsByTagName("north")[0].childNodes)
        bBoxEast=getText(c.getElementsByTagName("east")[0].childNodes)
        bBoxSouth=getText(c.getElementsByTagName("south")[0].childNodes)
        countryName=getText(c.getElementsByTagName("countryName")[0].childNodes)
        res+=u'\n'+selectLine%(capital,population,areaInSqKm,
                              bBoxWest,bBoxNorth,bBoxEast,bBoxSouth,
                              countryName,countryName)       
    return res
#-------------------------------------
# doit
T=loadData("http://www.ia.hiof.no/~borres/commondata/geonames/land.xml")
#print T
dom=None
try:
    dom=xml.dom.minidom.parseString(T)
    L=makeListBox(dom)
    T=htmlPage%L
    storeTextFile("index.html",T)
except:
    print "cannot do it"

Javascriptbiblioteket til Google 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 de dataene som er pakket ned i listeboksen, plasserer dem i dertil angitte elementer, og bruker spesielt box-datene til å sette opp data for å tegne kart.

function showmap()
{
  // unpack data from selected country
  var T=document.form1.ListBox1.value;
  // split to access values
  var params=T.split(',')
  // capital,population,areaInSqKm,west,north,east,south
  var capital=params[0];
  var population=params[1];
  var areaInSqKm=params[2];
  var countryName=params[7];
  
  document.getElementById('capital').innerHTML=capital;
  document.getElementById('population').innerHTML=population;
  document.getElementById('areaInSqKm').innerHTML=areaInSqKm;
  document.getElementById('countryName').innerHTML=countryName;
      
  var W=params[3];
  var N=params[4];      
  var E=params[5];
  var S=params[6];
  
  // 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
function init(){
  // select Norway
  document.form1.ListBox1.selectedIndex=166;
  showmap();
}

Europa

Du kan også se påen enklere versjon som er bygget over samme lest:
europa.html http://www.it.hiof.no/~borres/dw/verden/europa.html

Eller du kan se eksempelet Klubber i Europa

Referanser

Geonames GeoNames www.geonames.org/ 14-03-2010

Google Maps API Google code.google.com/apis/maps/index.html 14-03-2010

Google Maps Javascript API v3 Google https://developers.google.com/maps/documentation/javascript/tutorial 28-12-2012

Koden er sitert i teksten

Vedlikehold

B. Stenseth, revidert 2012

( Velkommen ) GoogleStuff >GoogleMaps ( GoogleChart )