Joan: /* Feina per l'alumne */

2019-04-30T14:01:13Z

Feina per l'alumne

Pàgina nova

=Referències=
Documentació d'OpenStreetMap:
*https://wiki.openstreetmap.org/wiki/Main_Page
Nominatim:
*https://wiki.openstreetmap.org/wiki/Nominatim

=Desenvolupament=
Hem vist a classe la teoria bàsica sobre com pintar un mapa amb OSM.

Hem vist també com tenim el servei ''Nominatim'', amb una API que ens permet geolocalitzar una ciutat, direcció postal, codi postal, etc.

L'alumne farà els dos projectes següents.
==1. Rutes GPS==
'''Solució del professor''': rutes GPS ([[Fitxer:Rutes gps.zip]])

Disposem d'un fitxer XML (GPX, etc) que conté una ruta de ''waypoints''. L'hem descarretat de la pàgina ''wikiloc'' o d'altres webs. També pots generar aquesta ruta amb el GPS del teu mòbil i una aplicació com ara Oruxmaps.

L'objectiu és fer una aplicació mínima que pugui pintar sobre el mapa aquesta ruta, amb la ruta centrada en el mapa i el nivell de zoom adequat.

Amb una crida AJAX pots cridar el fitxer XML que conté els waypoints.

Un cop de nou en el client has de pintar la ruta. En l'exemple vist a classe ho hem fet de dues maneres
#OSM ja contempla la possibilitat de pintar la ruta a partir del fitxer de waypoints. (exemples ''rutes_gps2.html'' i ''rutes_gps3.html'').
#si recuperem tots els punts del track, els podem unir amb una polilínia tal com s'ha fet en l'exemple, que utilitza la llibreria ''leaflet'' (fitxers ''rutes_gps_leaflet.html'', que és l'exemple ''hola món''; i exemple ''rutes_gps_leaflet2.html'').
Tria la capa de visualització que més bé s'adeqüi (per exemple, Cyclemap, amb relleu).

'''Leaflet''': an open-source JavaScript library for mobile-friendly interactive maps
*https://leafletjs.com/

'''NOTA''': s'ha utilitzat la llibreria Leaflet per fer les polilínies perquè és la manera més ràpida i natural de fer polilínies. Totes els exemples cercats sobre pintar ''polilínies'' sobre OSM portaven cap a ''Leaflet''.

===Feina per l'alumne===
Has de descarregar una ruta d'una web de tracks, o millor generar-la tu mateix (per exemple, la ruta de casa a l'escola).

Genera el mapa de la ruta a partir de les dues maneres vistes a classe.

Utilitza la Fetch API en comptes de l'objecte nadiu ''XMLHttpRequest()''.

En els exemples, veuràs que el posicionament és manual (centre del mapa i nivell de zoom). Com pots veure en el següent exercici (capitals d'Europa), existeix l'objecte ''OpenLayers.Bounds'' que serveix per extendre el mapa per tal de que s'ajusti a tota l'extensió que es necessita, i es recentri. Fés servir aquest objecte i així no cal que pensis quina és la posició inicial del mapa (i el nivell de zoom).
*http://dev.openlayers.org/docs/files/OpenLayers/BaseTypes/Bounds-js.html

==2. API de Nominatim==
'''solució del professor''': capitals europees ([[Fitxer:Capitals europees.zip]]).

versions de la solució:
<pre>
capitals1.html:
1a versió, amb fetch API
només agafem el primer valor, Tirana (Albània)
ja pintem el mapa, centrat a Tirana

capitals2.html:
amb XMLHttpRequest()
Tirana, Andorra, Yerevan
de moment no pintem el mapa

capitals3.html
amb XMLHttpRequest()
pintem el mapa per a Tirana, Andorra, Yerevan
amb OpenLayers.Bounds ampliem l'extensió del mapa de manera que hi càpiguen els tres markers, i el centre del mapa està ben posicionat.
https://nominatim.openstreetmap.org/search?city=' + cap[0] + '&format=json

capitals4.html
amb XMLHttpRequest()
ja podem recórrer amb un bucle totes les ciutat europees, i el mapa queda ben posicionat amb el zoom correcte gràcies a OpenLayers.Bounds
cerco per city i per country perquè hi havia tres ciutats mal resoltes
https://nominatim.openstreetmap.org/search?city=' + cap[0] + '&country=' + cap[1] + '&format=json

capitals5.html
amb XMLHttpRequest()
canvio la icona, i afegeixo un popup amb enllaços a la viquipèdia de la capital i del país

capitals6.html
La mateixa solució que capitals5.html, però amb la fetch API
Canviem la forma del popup, i afegim un style al popup
</pre>

Se't proporciona un fitxer de JSON amb les capitals europees (sense geolocalitzar). En el projecte de capitals europees (fitxers ''capitals1.html'' fins a ''capitals5.html'') set't proporciona un fitxer de JSON (veure annexe), i hem de situar sobre el mapa totes aquestes ciutats. Per fer-ho, hauràs de cridar a la API de Nominatim, que resol el nom de la ciutat amb la seva posició geogràfica (longitud i latitud).

Ho fem de la següent manera:
*https://nominatim.openstreetmap.org/search?city=Paris&format=json
o millor:
*https://nominatim.openstreetmap.org/search?city=Paris&country=France&format=json
doncs com es pot veure, hi ha tres capitals europees que es resolen malament (la ciutat que cerquem no és la que se li dóna més importància, i per tant no apareix la primera).

L'objectiu: sobre cada ciutat dibuixar un marker, i un popup amb el nom de la ciutat i del país, i un enllaç a la wikipèdia.

===Feina per l'alumne===

Basant-te en el codi de les capitals europees, vist a classe, el projecte que hauràs de resoldre serà el següent:

L'API de nominatim també pot resoldre codis postals. Per ex:
*https://nominatim.openstreetmap.org/search?country=España&postalcode=08042&format=json
<pre>
...
"lat": "41.4463500499975",
"lon": "2.17404502192422",
"display_name": "les Roquetes, Catalunya, 08042, Espanya",
"class": "place",
"type": "postcode",
"importance": 0.335
</pre>
'''NOTA''': no cal ficar el filtre de ''city=Barcelona''.

Veiem com se'ns proporciona la informació geogràfica, i també el nom del barri (en aquest cas Les Roquetes).

Els codis postals de Barcelona són del 08001 fins el 08042. Fixa't, si ho converteixes a número, podem fer un bucle que recorri tots els CP.

Per tant, ja pots imaginar el que se't demana. Recórrer tots els CP de Barcelona, i posicionar-los sobre el mapa, indicant el número de CP i el barri a què pertanyen. El punt de partida és evidentment l'exemple de les capitals europees.

Com a millora, se't demana que utilitzis la Fetch API en comptes de l'objecte nadiu ''XMLHttpRequest()''.
Sabent que els codis postals de Barcelona

=Entrega=
Els alumnes entregaran al Google Classroom tots els fitxers generats (fitxers html). Entrega també una captura de la pantalla on es pugui veure el funcionament correcte de l'exercici. S'empaquetaran tots aquests fitxers i es pujaran al Google Classroom dins del termini d'entrega de la pràctica.
=Annexe=
Llista de països i capitals en format JSON:
<pre>
{
"countries": [
{"country": "Albania", "capital": "Tirana"},
{"country": "Andorra", "capital": "Andorra la Vella"},
{"country": "Armenia", "capital": "Yerevan"},
{"country": "Austria", "capital": "Vienna"},
{"country": "Azerbaijan", "capital": "Baku"},
{"country": "Belarus", "capital": "Minsk"},
{"country": "Belgium", "capital": "Brussels"},
{"country": "Bosnia and Herzegovina", "capital": "Sarajevo"},
{"country": "Bulgaria", "capital": "Sofia"},
{"country": "Croatia", "capital": "Zagreb"},
{"country": "Cyprus", "capital": "Nicosia"},
{"country": "Czech Republic", "capital": "Prague"},
{"country": "Denmark", "capital": "Copenhagen"},
{"country": "Estonia", "capital": "Tallinn"},
{"country": "Finland", "capital": "Helsinki"},
{"country": "France", "capital": "Paris"},
{"country": "Georgia", "capital": "Tbilisi"},
{"country": "Germany", "capital": "Berlin"},
{"country": "Greece", "capital": "Athens"},
{"country": "Hungary", "capital": "Budapest"},
{"country": "Iceland", "capital": "Reykjavik"},
{"country": "Ireland", "capital": "Dublin"},
{"country": "Italy", "capital": "Rome"},
{"country": "Kosovo", "capital": "Pristina"},
{"country": "Latvia", "capital": "Riga"},
{"country": "Lithuania", "capital": "Vilnius"},
{"country": "Macedonia", "capital": "Skopje"},
{"country": "Malta", "capital": "Valletta"},
{"country": "Netherlands", "capital": "Amsterdam"},
{"country": "Norway", "capital": "Oslo"},
{"country": "Poland", "capital": "Warsaw"},
{"country": "Portugal", "capital": "Lisbon"},
{"country": "Romania", "capital": "Bucharest"},
{"country": "Russia", "capital": "Moscow"},
{"country": "Serbia", "capital": "Belgrade"},
{"country": "Slovakia", "capital": "Bratislava"},
{"country": "Slovenia", "capital": "Ljubljana"},
{"country": "Spain", "capital": "Madrid"},
{"country": "Sweden", "capital": "Stockholm"},
{"country": "Switzerland", "capital": "Bern"},
{"country": "Turkey", "capital": "Ankara"},
{"country": "Ukraine", "capital": "Kyiv"},
{"country": "United Kingdom", "capital": "London"}
]
}
</pre>

{{Autor}}, abril 2019
[[Categoria: INS Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Pràctica OSM (Open Street Maps) - Historial de revisió

Joan: /* Feina per l'alumne */