Apps amb component GEO

APPS MARKET FORUM APPS AMB COMPONENT GEO

Objectius del taller

1. Conèixer les opcions tecnològiques existents per fer una aplicació GEO per a
mòbils.
2. Conèixer les opcions de cartografia disponibles com a mapa base de les app
GEO.
3. Posar en pràctica una aplicació GEO a partir d'algunes de les opcions
plantejades.

© SIGTE 2012


Eines i recursos disponibles per a crear mapes en
dispositius mòbils
LLIBRERIES NATIVES
Fluïdesa i bon rendiment de les aplicacions.
Específiques per cada plataforma.
Possibilitats d'accedir a totes les funcionalitats del terminal (Càmera, pantalla, GPS,...).
Corba d'aprenentatge.
Distribució a través dels “markets” de cada plataforma.
Possibilitats de treballar “offline”.

© SIGTE 2012


Google Maps API
https://developers.google.com/maps/mobile-apps

Versió per dispositius Android, IOS, Web.
Cartografia base proporcionada per Google.

Llicència:
Es pot cobrar pels programes fets per Android si aquests es distribueixen a través de
Google Play.
Els límits d'ús [1] no són aplicables a les aplicacions natives per Android i/o Iphone.

© SIGTE 2012


Els "Google Maps API Web Services", per exemple el "Geocoding", si tenen límits d'ús.
Hi han unes pautes d'ús:
- No amagar els logotips de Google i ni dels proveïdors.
- No es pot fer ús de “cache” d'imatges.
- ,...
API key [2]

[1] https://developers.google.com/maps/faq?hl=ca#usagelimits
[2] http://code.google.com/intl/ca/android/add-ons/google-apis/maps-api-signup.html

© SIGTE 2012


ArcGIS Runtime SDKs for Smartphones and Tablets (Esri)
http://www.esri.com/software/arcgis/smartphones/develop.html

Dispositius Android, IOS, Windows Phone.
Disposa de molts recursos de cartografia com a mapa base.
Es poden afegir mapes fets a ArcGis Online.
Funcionalitats avançades:
- Filtres.
- Edició d'elements.
- Navegació “offline”.

© SIGTE 2012


Llicència:
http://resources.arcgis.com/node/agreement/android-sdk

"ArcGIS Web SDKs (Flex, Silverlight, JavaScript) and ArcGIS Mobile SDKs (iOS,
Android, Windows Phone 7) are available for no fee for application development.
Deployment fees are required for commercial application deployment."
http://events.esri.com/uc/QandA/index.cfm?
fuseaction=answer&conferenceId=DD02CFE7-1422-2418-
7F271831F47A7A31&questionId=3884

© SIGTE 2012


MapQuest
http://developer.mapquest.com/web/products/featured/android-maps-api

Versió per dispositius Android, IOS.
Cartografia pròpia en base a OpenStreetmap
API complementada amb serveis:
- Routing
- Geocoding (Resolució d'adreces).
- Overlays (Elements sobreposats).
- Dades d'OpenStreetMap.

© SIGTE 2012


Exemples:
http://developer.mapquest.com/web/products/featured/android-maps-api/documentation

Llicència:
"'drop in' replacements for the native Google mapping APIs." Es pot cobrar pels
programes.
"MapQuest key is used, licensed data and services will be used"
No hi ha limit d'ús per "OSM tiles and other Open Services", si termes d'ús[3].
Mapa base OpenStreetMap
Geocoding mitjançant "Nominatim".

© SIGTE 2012


Licensed Data vs. Open Data[4]

[3]http://developer-stage.mapquest.com/web/tools/getting-started/terms-overview
[4] http://developer.mapquest.com/web/tools/getting-started/platform/licensed-vs-open

© SIGTE 2012


Osmdroid
http://code.google.com/p/osmdroid/

Concebuda com una llibreria per interactuar amb dades d'OpenStreetMap.
Llicència:
Software lliure - LGPL
Ens obliga a llicenciar la nostra aplicació com a LGPL

© SIGTE 2012


LLIBRERIES JAVASCRIPT PER ENTORNS WEB

Múltiple plataforma.
Molts Frameworks Javascript (Jquery Mobile, Sencha Touch,...)
HTML5 i CSS3.
Possibilitat d'utilitzar llibreries habituals, i possibilitats de reutilització de codi
d'aplicacions existents.
Opció a crear aplicació híbrida (PhoneGap,...).

© SIGTE 2012


Limitacions:
No van tant fluides com les aplicacions natives.
En funció del sistema mòbil hi ha limitacions del navegador que no es poden superar
(Multitouch, versió HTML,...).
Les limitacions que té el navegador. No es pot accedir a les funcionalitats del terminal
mòbil (Càmera, pantalla, GPS...).
No es pot controlar el consum dels processos que generen.
Per la localització es fa ús de la funcionalitat “Geolocation” de HTML5, però no pots
interactuar amb els proveïdors de localització.
Requereixen estar sempre connectats.

© SIGTE 2012


Google Maps Javascript API v3
https://developers.google.com/maps/documentation/javascript/

Molt popular.
Senzilla amb una corba d'aprenentatge baixa.
Bona documentació i exemples.
Difícil d'extendre o afegir funcionalitats.
La cartografia base és de Google, tot i que s'en poden afegir d'altres.
Visualment ben acabada.

© SIGTE 2012


Llicència:
Codi propietari
Límits d'ús.[5]
Les condicions d'ús han anat canviant.

[5] https://developers.google.com/maps/faq?hl=ca#usagelimits

© SIGTE 2012


OpenLayers
http://openlayers.org

Molt completa, amb moltes més funcionalitats (el més complet).
De fàcil afegir funcionalitats.
Permet incorporar tot tipus de fonts de dades.
El suport per a dispositius mòbils s'ha incorporat amb la llibreria ja molt madura.
Pesa bastant 891.42KB, i 325KB la versió per a mòbils.

© SIGTE 2012


Llicència:
Codi lliure, BSD.

Exemples:
http://openlayers.org/dev/examples/

Documentació:
http://dev.openlayers.org/releases/OpenLayers-2.11/doc/apidocs/files/OpenLayers-
js.html

© SIGTE 2012


Leaflet
http://leaflet.cloudmade.com/
Llibreria molt nova. Pensada per entorns d'escriptori i mòbils.
Utilitza HTML5 i CSS3 per moltes de les seves funcionalitats.
Les funcionalitats s'implementen de forma senzilla i fàcil.
La llibreria es pot extendre molt fàcilment.
Pesa molt poc. 81KB
Visualment més ben acabada que OpenLayers.
Per visualitzar cartografia de Google s'ha d'implementar apart.

© SIGTE 2012


Llicència:
Codi lliure.

Exemples:
http://leaflet.cloudmade.com/examples.html

Documentació
http://leaflet.cloudmade.com/reference.html

© SIGTE 2012


CARTOGRAFIA

Mapa que fem servir de base.
Cal tenir present la llicencia i els límits d'ús.

Moltes opcions:
Àmbit mundial:
GoogleMaps (Topogràfic, fotografia aèria,...).
OpenStreet Maps (Topogràfic).
Bing Maps (Topogràfic, fotografia aèria,...).

© SIGTE 2012


MapQuest (Topogràfic, fotografia aèria,...).
...

Àmbit nacional:
PNOA (Instituto Geográfico Nacional)
Institut Cartogràfic de Catalunya (ICC)
...

© SIGTE 2012


GoogleMaps

Diferents mapes:
- Fotografia aèria.
- Mapa de carrers.
- Mapa terreny.
- Hibrid entre Fotografia aèria i mapa de carrers.

Cal tenir present la llicencia i els límits d'ús.
- Cal fer servir la seva api.

© SIGTE 2012


- No es poden amagar els logotips i avisos de Google ni dels seu proveïdors.
- Límits d'ús.
- Per aplicacions comercials cal tenir una llicència “Premium“. (Excepció
aplicacions que es distribueixin a "Google Play").
- Risc del canvi de llicència.
- No es poden guardar les imatges en "cache".

Llicència “Premium”, molt costosa: "The prices start at $10,000 per year" + cost per
cada x visitants.
Els proveïdors de Google solen ser proveïdors de cartografia.

© SIGTE 2012


OpenStreetMap

"...pensat per crear i proporcionar dades geogràfiques de manera lliure, com per
exemple mapes de carrers i carreteres, a tothom qui ho desitgi."

Projecte col·laboratiu amb una gran comunitat:
- D'usuaris.
- Col·laboradors.
- Desenvolupadors
- Integradors.

© SIGTE 2012


Una App GEO pas a pas

Farem una aplicació on visualitzarem al damunt d'un mapa llegendes de la ciutat de
Girona.
Entorn web, treballarem amb HTML, CSS, Javascript.
Llibreries Javascript: JQuery Mobile i Leaflet.

© SIGTE 2012


JQuery Mobile
Framework Javascript per desenvolupar aplicacions mòbils amb dos objectius:
- Ser solució vàlida per un nombre màxim de navegadors (diferents graus de
compatibilitats).
- Amb menys codi fer més coses.
Podríem dir jQuery Mobile actua com un plugin per jQuery. (Fet sobre l'arquitectura de
jQueryUI).

Un conjunt d'eines que simplifiquen el procés de crear pàgines per a mòbils, tant en el
codi HTML, la maquetació amb CSS i la creació d'efectes amb Javascript.

© SIGTE 2012


CSS?
Ens proporciona eines per la organització dels elements HTML i l'estilització d'aquests.
Incorpora varis temes, amb la possibilitat de crear el nostre propi tema.
Desenvolupat per treballar amb HTML5.
Preparat per treballar amb les característiques dels dispositius tàctils. Exemple: “Events”
Touch, OrientationChange,..

Lloc web:
http://jquerymobile.com/

© SIGTE 2012


Documentació i exemples:
http://jquerymobile.com/demos/1.1.0/

Elements que veurem:
Pàgina / Estructura múltiple pàgina.
http://jquerymobile.com/test/docs/pages/
Botons / Botó simple.
http://jquerymobile.com/test/docs/buttons/index.html
Llistats / Llistat simple.
http://jquerymobile.com/test/docs/lists/index.html

© SIGTE 2012


Leaflet
Llibreria per incorporar mapes en un aplicació web.
Pensada per entorns d'escriptori i mòbils.
Utilitza HTML5 i CSS3 per moltes de les seves funcionalitats.

Fonts de dades:
Ràster.
Vectorial.

© SIGTE 2012


Elements que veurem:
Crear 1 mapa.
Afegir la capa base.
Afegir elements vectorials.
Afegir “markers”.

Exemples:
http://leaflet.cloudmade.com/examples.html

Documentació
http://leaflet.cloudmade.com/reference.html

© SIGTE 2012


LLEGENDES DE GIRONA
Dades:
Mapa base: OpenStreetMap
Dades a representar: Llegendes de la ciutat de Girona
Extretes amb modificacions de http://ca.wikiloc.com/wikiloc/view.do?id=1291848
Funcionalitats de l’aplicació:
Mapa ( Ruta i Punts d'interès ).
Descripció de la llegenda.
Esquema:
pagina-mapa
pagina-contingut-llegenda

© SIGTE 2012

Apps amb component GEO

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Apps amb component GEO

Similar to Apps amb component GEO (20)

More from Servei de SIG i Teledetecció (SIGTE), Universitat de Girona

More from Servei de SIG i Teledetecció (SIGTE), Universitat de Girona (10)

Apps amb component GEO