Mashupit, avoin data, kartat, kaaviot - Pääteohjaus 8

Google Maps API
Google Charts
RSS-feedin sisällyttäminen omalle sivulle
- web2py-versio
HTML-dokumentin osan sisällyttäminen omalle sivulle
Lisätietoa

Käytetään muiden tekemiä XML-dokumentteja ja WWW-sivuja tiedonlähteenä, kokeillaan karttapalveluja ja piirretään kaavioita. Kts. minidom-luento ja Introduction to the Google Maps API.

Google Maps API

Kokeillaan Googlen tarjoamaa karttarajapintaa (V3). Seuraavat tehtävät onnistuvat suoraan Getting Started -tutoriaalin ja Google maps API-dokumentaation avulla.

malliratkaisu

Hae itsellesi oma Google Maps API-key (Browser key). Avainta luodessasi muista määritellä hyväksytyiksi osoitteiksi (HTTP Referrers) vain http://users.jyu.fi/~omatunnus-alkuiset osoitteet

Luo uusi HTML5-dokumentti. Liitä dokumenttisi head-osaan seuraava script-elementti:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

Sijoita dokumenttiisi div-elementti karttaa varten:

<div id="map" style="width:100%; height:640px"></div>

Linkitä dokumenttiisi oma javascript-tiedosto google maps -tiedoston jälkeen ja määrittele window.onloadiin seuraava ohjelmakoodi:

    // Jyväskylän koordinaatit
    var latlng = new google.maps.LatLng(62.24, 25.75);
   // asetetaan kartan asetukset ja keskipisteeksi Jyväskylä
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

Kokeile näkyykö kartta.
Lisää karttaan navigointikontrolleri, zoomausvalinta ja karttatyyppivalinta.
Lisää kartalle marker-kuvake. Kokeile.
Tee lisäämästäsi markerista raahattava (draggable).
Kokeile löytääkö Google käyttämäsi koneen sijainnin. kts. Using geolocation. Keskitä kartta sijaintisi mukaan.
Lisää sivulle input-kenttä johon voit syöttää katuosoitteen. Kokeile geokoodata osoite ja keskittää kartta tähän osoitteeseen. Kokeile tehdä myös päinvastainen eli reverse geocoding. Sijoita löydetty osoite input-kenttään. Tee geokoodattavan paikan etsintä markerin avulla lisäämällä markeriin käsittelijä, joka suorittaa reverse geokoodauksen aina kun markeria on siirretty:
```
  google.maps.event.addListener(marker, 'dragend', function() {
    // tähän reverse geokoodaus
  });
```
Tutustu myös Google Static Maps APIn ominaisuuksiin. Lisää karttasivullesi dynaamisen kartan alapuolelle staattinen kartta Jyväskylästä. Huomaa, että sinun pitää myös aktivoida Google Static Maps API googlen developer konsolista.

Google Charts

Google Charts on rajapinta jota voi käyttää ilman javascriptiä (vrt. static maps API) mutta myös interaktiivisten kaavioiden tekeminen javascriptin avulla on mahdollista.

Lisää karttasivullesi muutama kaavio Google Chartsin avulla:

<img src="http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" alt="testikaavio" />

Lue Getting Started With Charts Overview. Kokeile erilaisia kaaviotyyppejä.
Yritä tehdä sivullesi dynaaminen kaavio Quick Start-ohjeen avulla.
Lisää sivullesi viivakaavio. Voit kokeilla myös muita kaaviotyyppejä.

RSS-feedin sisällyttäminen omalle sivulle

Tutustu ensin minidom-luentoon.

Aloita uusi CGI-ohjelma. Pyritään hakemaan ja parsimaan A List Apart RSS-feedi ja sisällyttämään siitä tärkeimmät osat omalle sivulle. Katso malliohjelman tuloste, joka on tehty hesarin rss-syötteestä.
Käsiteltävä RSS-feed löytyy osoitteesta: http://feeds.feedburner.com/alistapart/main?format=xml. Tutki sivun lähdekoodia niin pääset jyvälle RSS-tiedoston rakenteesta.
Haetaan RSS-dokumentti CGI-ohjelmalla käyttäen Pythonin xml.dom.minidom ja urllib-kirjastoja. Voit halutessasi opetella käyttämään myös ElementTree XML API-rajapintaa.

Tee ensin pelkästään komentoriviltä toimiva versio.

from xml.dom.minidom import parse
import urllib
doc = parse( urllib.urlopen("tähän sivun osoite"))
print doc.toxml('UTF-8')

Kokeile tulostuuko komentoriviltä ajettaessa sivun sisältö

Kaivellaan dokumentista yksittäisiä osia. Haetaan ensimmäiseksi yleistietoja:

# dokumentissa tarvittavat nimiavaruudet
dc_ns = "http://purl.org/dc/elements/1.1/"
synd_ns = "http://purl.org/rss/1.0/modules/syndication/"
admin_ns = "http://webns.net/mvcb/"
rdf_ns = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
content_ns = "http://purl.org/rss/1.0/modules/content/"
atom_ns = "http://www.w3.org/2005/Atom"

title = doc.getElementsByTagName("title")
link = doc.getElementsByTagName("link")

Hae edellä tehtyyn tapaan (title ja link) myös description, dc:rights ja dc:language -elementit ja tulosta kaikkien hakemiesi elementtien tekstisisältö.
Joudut käyttämään nimiavaruuksia seuraavalla tavalla:
```
	rights = doc.getElementsByTagNameNS(dc_ns, "rights")
```
Muista kokeilla komentorivillä, että ohjelma toimii.
Kun tulostat elementtejä niin muista tulostaa elementtien tekstisisältö. textContent-ominaisuus ei toimi minidomissa joten joudut kokeilemaan:
```
title.firstChild.nodeValue
```
Jotkut teksteistä ovat CDATA-merkinnän sisällä ja se hieman hankaloittaa niiden käsittelyä. Tämän voi tehdä esim. seuraavasti:
```
    td = doc.createElement("td")
    title = node.getElementsByTagName("title").item(0)
    if title.firstChild.nodeName == "#cdata-section":
      td.appendChild( doc.createTextNode( title.firstChild.data) );
    else:
      td.appendChild( doc.createTextNode( title.firstChild.nodeValue) );
```
Tee nyt sovelluksestasi web-sovellus ja luo RSS-feedin sisällöstä järkevä html-dokumentti. Muista tulostaa myös content-type-otsake! Käytä joko jinja-templatea tai luo minidomin avulla uusi dokumentti johon ymppäät RSS-syötteestä lukemasi tiedot kauniisti taulukkomuotoon. Jos DOM-rajapinta ei ole kunnolla muistissa niin katso mallia luentoesimerkistä.
Lisää pääotsikosta linkki RSS-feedistä saatuun osoitteeseen (link-elementti). Lisää myös muiden RSS-feedistä kaivamiesi elementtien sisältö sivullesi esim. tekstikappaleina.
Hae RSS-feedistä kaikki item-elementit. Käy nämä kaikki läpi silmukassa ja luo sivullesi linkkilista (ul), jossa yksi lista-alkio (li) muodostuu kunkin item-elementin sisältämästä title- ja link-elementistä. Vinkkejä silmukassa tehtäviin toimenpiteisiin löytyy luentoesimerkistä. Katso myös mallikuva (Eri rss-feedistä mutta sama ulkoasu).

web2py-versio

from xml.dom.minidom import parse
    import urllib
	doc = parse( urllib.urlopen("tähän sivun osoite"))
    return dict(data=doc.toxml('UTF-8'))

Muista luoda myös toimiva näkymä (view). Valmiiksi xml-muotoisen datan voit näkymässä tulostaa näin:

{{=XML(data)}}

Kaivellaan dokumentista yksittäisiä osia. Haetaan ensimmäiseksi yleistietoja:

# dokumentissa tarvittavat nimiavaruudet
	dc_ns = "http://purl.org/dc/elements/1.1/"
	synd_ns = "http://purl.org/rss/1.0/modules/syndication/"
	admin_ns = "http://webns.net/mvcb/"
	rdf_ns = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	content_ns = "http://purl.org/rss/1.0/modules/content/"
	atom_ns = "http://www.w3.org/2005/Atom"

	title = doc.getElementsByTagName("title");
	link = doc.getElementsByTagName("link");

Hae edellä tehtyyn tapaan myös description, dc:rights ja dc:language -elementit ja tulosta sivullesi kaikkien hakemiesi elementtien tekstisisältö.
Joudut käyttämään nimiavaruuksia seuraavalla tavalla:
```
	rights = doc.getElementsByTagNameNS(dc_ns, "rights")
```
Lisää edellä tehtyyn tapaan pääotsikosta linkki RSS-feedistä saatuun osoitteeseen (link-elementti). Lisää myös muiden RSS-feedistä kaivamiesi elementtien sisältö sivullesi esim. tekstikappaleina.
Hae RSS-feedistä kaikki item-elementit. Käy nämä kaikki läpi silmukassa ja luo sivullesi linkkilista (ul), jossa yksi lista-alkio (li) muodostuu kunkin item-elementin sisältämästä title- ja link-elementistä. Vinkkejä silmukassa tehtäviin toimenpiteisiin löytyy luentoesimerkistä. Katso myös mallikuva (Eri rss-feedistä mutta sama ulkoasu).

HTML-dokumentin osan sisällyttäminen omalle sivulle

HTML-dokumentin parsiminen tapahtuu Pythonissa aivan samalla tavalla kuin edellä parsittiin RSS-dokumenttia (XML-dokumenttia). Luo uusi Python-tiedosto ja hae siihen tiedot Digitodayn pääsivulta:
Kokeile validoida sivu. Huomaat, että sivu ei ole täysin validia XHTML:ää, joten sivun lataus XML:nä ei toimisi. Kokeile miten minidom reagoi rikkinäiseen dokumenttiin.
Koska sivu ei ole täysin hyvin muodostettu (well-formed), sivu täytyy joko käsitellä erillisellä tagsoupia tajuavalla html-parserilla (tagsoup...) kuten BeautifulSoup tai siistiä jotenkin ehjäksi. Siistiminen onnistuu HTML tidyn avulla. Tidya ei löydy suoraan valmiina kirjastona users.jyu.fistä mutta epävalidi sivu voidaan ajaa WWW:ssä sijaitsevan Tidy your HTML -palvelun kautta ja tämän jälkeen voidaan parsia korjattua versiota tähän tapaan:
```
	url = "http://www.jyu.fi/it";
	url = "http://cgi.w3.org/cgi-bin/tidy?docAddr=http%3A%2F%2Fwww.jyu.fi%2Fit&forceXML=on"
```
Poimi seuraavaksi digitodayn etusivulta kymmenen uusinta uutista (otsikot). Joudut tutkimaan sivun rakennetta tarkkaan jotta saat juuri halutut asiat poimittua.
Tulosta lopuksi luomasi sivu, jotta voit tarkastella sitä selaimessa.

Lisätietoa

Voit kokeilla myös OpenLayers 3-karttarajapintaa. kts. esimerkkejä.

Tutustu Ilmatieteen laitoksen avoimeen dataan

Käyttäjien kommentit