Webbappar med OpenLayers och jquery

Transkript

1 Webbappar med OpenLayers och jquery Johan Lahti GIT-utvecklare Malmö stad ULI Uppsala, 3 oktober 2011

2 smap ( Samarbete sedan maj 2009 Kartramverk byggt på OpenLayers och jquery Gemensam server med GeoServer och PostGIS Totalt ca 15 personer 2 projektsamordnare 3 utvecklare 2 serveransvariga Kartadministratörer m fl

3 smap-produkter Malmö stadsatlas (årets karta 2011) Kristianstadskartan med flera Helsingborgs adresskarta Skånekartan Lunds stadskarta

4 smap-mobile

5 Bakgrund Malmö stads byggnadsnämnd har skaffat ipadar för att hantera sina handlingar Ökat intresse: anställda medborgare

6 Problem Mycket resurser att utveckla för alla plattformar. Helt nya språk. Hög ingångströskel. Flera språk. Objective-C Java

7 Olika typer av appar Nativa appar ( native apps ) Plattformens utvecklingsverktyg (API) Appcelerator

8 Appcelerator 10 ggr kortare utvecklingstid JavaScript Objective-C Java

9 Skapa en karta med AppCelerator 1. Skapa ett fönster var win1 = Titanium.UI.createWindow({ title: En karta', backgroundcolor: '#fff }); 2. Skapa en kartvy var mapview = Titanium.Map.createView({ maptype: Titanium.Map.STANDARD_TYPE, region: { latitude: 55.60, longitude: 13.0, latitudedelta: 0.05, longitudedelta: 0.05 }, annotations: [] }); 4. Kompilera Objective-C Java JavaScript 3. Lägg till kartvyn win1.add( mapview );

10 Nativ app med AppCelerator Data och attribut från WFS-tjänst

11 För- och nackdelar med AppCelerator (+) Nativa appar, snabbt! (+) Kort utvecklingstid (x 10) (+) Flera plattformar (+) Tillgång till det nativa API:et (kamera m m) (-) Inga polygoner (-) Endast vektordata (-) Begränsad kartfunktionalitet (-) Inget stöd för WMS-tjänster (endast GMaps)

12 Andra nackdelar med nativa appar Hård kontroll av Apple lång kontrollprocess Uppdatering Registrera sig som användare Endast Googles bakgrundskartor i Apples API

13 Olika typer av appar Nativa appar Plattformens utvecklingsverktyg (API) Appcelerator Webbappar

14 Webbappar

15 Webbsida <-> Webbapp

16 Varför webbappar? I Malmö stads policy förordas webbappar för att de: Stödjer flera plattformar samtidigt Är billigare att utveckla Fler fördelar: Versionsuppdatering Ej begränsad av telefonens API Länka från dokument, e-post, hemsida Visa på karta Bättre integrerad med kommunens övriga information Kommunens egna bakgrundskarta

17 Webbappar: Malmös peka -app

18 Webbappar: Glosförhör lahtitude.com/vocables/

19 Fler webbappar

20 Webbappskartor

21 HTML5 Ny standard för att presentera data på webben (under utveckling och färdigt först ca 2022) Mobila webbläsare har gått några steg i förväg Nya taggar: <video> <audio> <canvas> Avancerade formulär: <input type= > Platsbestämning ( geolocation ) Offlinedatabas (istället för kakor) Offline application cache (webbapplikationer offline)

22 Programmeringsspråkens utveckling Högre nivå / enklare 00-tal 10-tal Webbapplikationer 90-tal JavaScript, PHP 80-tal Python 50-tal 60-tal 70-tal C C++ Java 40-tal Assemblyspråk Lägre nivå / svårare Maskinkod/hålkort: Nollor och ettor

23 jquery mobile (beta) Ett bibliotek för JavaScript som imiterar telefonens nativa gränssnitt (GUI) Stödjer över 20 olika mobila webbläsare

24 OpenLayers JavaScript-bibliotek för att göra webbkartor Öppen källkod Stöd för flera datakällor och format Stöd för pekskärmar!

25 Metataggar m.m. <meta name="viewport" content="width=device-width, user-scalable=no, initialscale=1, maximum-scale=1;"> Stäng av möjlighet till skalning <meta name="apple-mobile-web-app-capable" content="yes" /> Möjliggör installation på ios-plattformar <link rel="apple-touch-icon" href= some/image/path/image.png /> Appens ikon för skrivbordet <link rel="apple-touch-startup-image" href="some/image/path/image.png /> Uppstartsbild

26 smap-mobile Uppstart Bakgrundskarta Med datalager Markera i kartan Mejla karta Sök adress Min position

27 Webbapp för ULI-besökare kartor.smap.se/mobile

28 Skapa produkter i smap-mobile config_malmo.js config_lund.js config_hborg.js config_krstad.js smap - mobile config_felanmalan.js config_skane.js config_gatukontoret.js

29 Ansluta till produkt config=configs/config_malmo.js config_malmo.js

30 Config-filen i smap-mobile Väljer ut: Verktyg och deras konfigurering Lager Kartans projektion och utbredning smap - mobile

31 Slutsats

32 Fördelar med webbappar Kortare utvecklingstid och lägre ingångströskel Stöd för flera plattformar (tekniken är dock ung) WMS-tjänster, egna bakgrundskartor (+polygoner) Länka till karta Snabbt att skapa nya kartor på beställning Uppdatering

33 Nackdelar med webbappar Långsamma (än så länge ) Fungerar inte alls på långsammare telefoner Kommer inte åt telefonens funktionalitet (API) Ingen åtkomst från AppStore/Android Market Offline (men det finns lösningar)

34 Slutsats För kartor fungerar det tillräckligt bra på snabbare enheter En teknik som har framtiden framför sig. Åtminstone för mindre krävande appar.

35 Slutsats: Fördelar med webbappar Oberoende av AppStore och Android Market Ingen kontrollprocess, inget utvecklarkonto, versionsuppdatering Ej begränsad av telefonens API (t ex editeringsverktyg) Plattformsoberoende, fungerar även i webbläsare Kortare utvecklingstid Samma tjänster som för webbkartorna WMS, WFS, Tilecache (Geoserver, PostGIS) Egna bakgrundskartor! Länka från dokument, e-post, hemsida Kan massproduceras

36 Fördelar med webbappar Inget utvecklarkonto Behöver inte godkännas av Apple Versionsuppdatering Ej begränsad av telefonens API (funktionalitet) JavaScript, HTML och CSS Kartstandarder WMS, WFS Fungerar i webbläsaren också Nå kartan från hemsidan via länk (t ex från hemsida eller mejl)

37 Lyssna även på 11.30

38 Länkar Webbapp för ULI: kartor.smap.se/mobile/ Malmös webbapp: kartor.smap.se/mobile/?config=configs/config_malmo.js smap-samarbetets hemsida: Bok: Building iphone Apps with HTML, CSS, and JavaScript (Jonathan Stark)

39 Konsult!!