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

APPS MARKET FORUM APPS AMB COMPONENT GEO

Eines i recursos disponibles per a crear mapes en dispositius mòbilsLLIBRERIES 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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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 = DD 02 CFE 7-1422-2418- 7 F 271831 F 47 A 7 A 31& questionId =3884

© SIGTE 2012

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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.

Bona documentació i exemples.

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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.

Bona documentació i exemples.

Pesa molt poc. 81KB

Visualment més ben acabada que OpenLayers.

Per visualitzar cartografia de Google s'ha d'implementar apart.

© SIGTE 2012

APPS MARKET FORUM APPS AMB COMPONENT GEO

Llicència:

Codi lliure.

Exemples:

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

Documentació

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

© SIGTE 2012

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

...

Àmbit nacional:

PNOA (Instituto Geográfico Nacional)

Institut Cartogràfic de Catalunya (ICC)

...

© SIGTE 2012

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

- 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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

Només mapa topogràfic.

Opció a escollir diferents proveïdors.

- Cloudmade

- MapQuest.

- Servidor propi.

© SIGTE 2012

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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.htmlLlistats / Llistat simple.

http://jquerymobile.com/test/docs/lists/index.html

© SIGTE 2012

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

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

APPS MARKET FORUM APPS AMB COMPONENT GEO

LLEGENDES DE GIRONADades:

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