El component Mapa
En aquest apartat veureu com afegir un mapa a la vostra app i personalitzar-lo amb components addicionals.
Més concretament es pretén donar resposta a les preguntes següents:
- Com puc afegir un mapa?
- Com puc utilitzar el GPS del mòbil?
- Quins components es poden afegir al mapa?
El Mapa
El component Mapa d'App Inventor es situa durant la fase de disseny de l'app. S'hi poden afegir components addicionals que interactuin amb altres components de l'app. Per exemple, es pot programar l'event clic d'un marcador per modificar propietats d'altres components de l'app.
Situeu un component Mapa en l'app. Seleccioneu la zona del mapa que us interessa:
- Feu zoom endavant o enrera amb la roda del ratolí
- Desplaceu la zona visible arrossegant amb el ratolí
Un cop tingueu la zona seleccionada, feu clic en el botó central de la botonera del mapa. Així confirmeu que la zona del mapa que es mostra quan s'inicia l'app és la que heu seleccionat.
On som?
Per geolocalitzar on sou, necessiteu un altre component d'App Inventor, el LocationSensor. Per mostrar la vostra posició actual en el mapa, heu de deixar marcada la propietat ShowUser del LocationSensor en el tauler de propietats del mapa:
Quan inicieu l'App, en el mapa es mostrarà un marcador especial que indica la vostra posició:
Si no veieu el marcador, pot ser que us trobeu fora de la zona que mostra el mapa (feu un zoom enrere, si cal, fins que el veieu).
Personalitzem el mapa
Podeu situar diversos components addicionals en el mapa. Cadascun té les propietats Title i Description. Aquesta informació es mostra en una finestra emergent (si està marcada la propietat EnableInfoBox). La finestra s'obre quan feu clic en el component, o bé es pot programar per tal que es vegi d'inici:
Marcador
Podeu destacar llocs mitjançant marcadors. Cada marcador es pot personalitzar amb un color, una icona… Amb el component LocationSensor podeu indicar la situació de qualsevol marcador mitjançant una adreça o un nom de lloc. Per exemple:
Línia
LineString és un component per dibuixar una seqüència oberta i contínua de línies. Per afegir un nou punt a la seqüència arrossegueu el punt mig de qualsevol segment fora del segment. Feu clic en un punt per eliminar-lo.
Cercle
El component Cercle mostra un cercle d’un radi concret (en metres) amb el centre en un punt de latitud i longitud determinades.
Rectangle
Els rectangles són polígons determinats pels límits de latitud (nord i sud) i longitud (est i oest). Podeu canviar-ne la mida movent els vèrtexs del rectangle.
Polígon
Els polígons delimiten una zona del mapa. Es poden utilitzar per dibuixar un perímetre, com un campus, una ciutat o un país. Els polígons comencen com a triangles bàsics. Es poden crear nous vèrtexs arrossegant el punt mig d’un costat fora del costat. Feu clic en un vèrtex per eliminar-lo.
Col·leció d'elements
El component FeatureCollection permet incorporar una col·lecció d'elements formada per diversos components addicionals del mapa. Agrupats en una FeatureCollection, podeu capturar events i gestionar propietats dels components individuals de forma més senzilla.
Teniu dues opcions per incorporar una FeatureCollection al mapa:
- Construir-la a partir de components individuals
- Definir-la a partir d'un fitxer geoJSON
La segona opció és interessant, perquè us permet utilitzar recursos disponibles a Internet (de bases de dades obertes, per exemple). El fitxer geoJSON s'ha de penjar com a fitxer Media i assignar-lo a la propietat FeaturesFromGeoJSON de la FeatureColection.
Els fitxers geoJSON amb les coordenades geogràfiques dels elements habitualment contenen informació addicional dels llocs que podeu incloure en la vostra app. L'obtenció d'aquestes dades es fa de la mateixa forma que la d'altres dades obertes en format JSON.
Com a exemple, feu un mapa interactiu de les vegueries de Catalunya. El fitxer geoJSON es troba a
https://analisi.transparenciacatalunya.cat/api/geospatial/7kmv-qzv3?method=export&format=GeoJSON
Podeu veure l'estructura del fitxer amb una eina online com https://jsonformatter.org/, o bé amb el navegador Firefox:
- Baixeu-lo al vostre ordinador
- Canvieu l'extensió del fitxer a *.json
- Obriu el fitxer amb el navegador Firefox
L'objectiu és construir un mapa amb les vegueries quan s'iniciï l'app. Quan es faci clic en una vegueria, s'ha de mostrar el seu nom (la propietat nom_aft destacada en blau).
Observem que el fitxer JSON inclou una llista anomenada features, on cada element correspon a una vegueria. Cada vegueria té una propietat anomenada properties, que inclou la propietat que ens interessa (nom_aft).
El procediment seria el següent:
- Baixar el fitxer geoJSON amb el component Web
- Assignar el fitxer a la FeatureCollection
- Descodificar el fitxer per obtenir el llistat de vegueries
- En un bucle, assignar nom_aft a la propietat Title i marcar la propietat EnableInfoBox a cada polígon
Mantinguem informat l'usuari
Quan es descarrega un fitxer mitjançant el component Web, normalment es triga uns quants segons. Per tal que l'usuari en sigui conscient, és molt recomanable incloure un component Notifier. Es mostraria abans d'iniciar la descàrrega, i s'ocultaria en acabar-la:
