Pràctica OSM (Open Street Maps)

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Referències

Documentació d'OpenStreetMap:

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

  1. OSM ja contempla la possibilitat de pintar la ruta a partir del fitxer de waypoints. (exemples rutes_gps2.html i rutes_gps3.html).
  2. 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

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).

2. API de Nominatim

solució del professor: capitals europees (Fitxer:Capitals europees.zip).

versions de la solució:

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

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:

o millor:

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:

...
"lat": "41.4463500499975",
"lon": "2.17404502192422",
"display_name": "les Roquetes, Catalunya, 08042, Espanya",
"class": "place",
"type": "postcode",
"importance": 0.335

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:

{
    "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"}
    ]
}

creat per Joan Quintana Compte, abril 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines