webbappar med openlayers - geoforum sverige · utveckling och färdigt först ca 2022) ... • ej...
TRANSCRIPT
Webbappar med OpenLayers och jQuery
Johan Lahti GIT-utvecklare
Malmö stad
ULI Uppsala, 3 oktober 2011
sMap (www.smap.se) • 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
sMap-produkter Malmö stadsatlas (årets karta 2011) Kristianstadskartan
Helsingborgs adresskarta Skånekartan Lunds stadskarta
med flera…
sMap-mobile
Bakgrund
• Malmö stads byggnadsnämnd har skaffat iPadar för att hantera sina handlingar
• Ökat intresse:
– anställda
– medborgare
Problem
• Mycket resurser att utveckla för alla plattformar. Helt nya språk. Hög ingångströskel. Flera språk.
Objective-C
Java
Olika typer av appar
• Nativa appar (”native apps”)
– Plattformens utvecklingsverktyg (API)
– Appcelerator
Appcelerator
• 10 ggr kortare utvecklingstid JavaScript
Objective-C Java
Skapa en karta med AppCelerator
var win1 = Titanium.UI.createWindow({ title: ’En karta', backgroundColor: '#fff’ });
1. Skapa ett fönster
var mapView = Titanium.Map.createView({ mapType: Titanium.Map.STANDARD_TYPE, region: { latitude: 55.60, longitude: 13.0, latitudeDelta: 0.05, longitudeDelta: 0.05 }, annotations: [] });
2. Skapa en kartvy
3. Lägg till kartvyn
win1.add( mapView );
JavaScript
Objective-C Java
4. Kompilera
Nativ app med AppCelerator
Data och attribut från WFS-tjänst
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)
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
Olika typer av appar
• Nativa appar
– Plattformens utvecklingsverktyg (API)
– Appcelerator
• Webbappar
Webbappar
Webbsida <-> Webbapp
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 • Bättre integrerad med kommunens övriga information
– Kommunens egna bakgrundskarta
Visa på karta
Webbappar: Glosförhör
lahtitude.com/vocables/
Webbappskartor
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=’email’>
• Platsbestämning (”geolocation”)
• Offlinedatabas (istället för kakor)
• ”Offline application cache” (webbapplikationer offline)
Programmeringsspråkens utveckling Högre nivå / enklare
Lägre nivå / svårare
50-tal
Assemblyspråk
70-tal
80-tal
90-tal
C
Maskinkod/hålkort: Nollor och ettor
Java
Python
JavaScript, PHP
C++
40-tal
60-tal
00-tal
10-tal
Webbapplikationer
jQuery mobile (beta)
• Ett bibliotek för JavaScript som imiterar telefonens nativa gränssnitt (GUI)
• Stödjer över 20 olika mobila webbläsare
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!
Metataggar m.m.
• <meta name="viewport" content="width=device-width, user-scalable=no, initial-
scale=1, maximum-scale=1;">
• <meta name="apple-mobile-web-app-capable" content="yes" />
• <link rel="apple-touch-icon" href=“some/image/path/image.png“ />
• <link rel="apple-touch-startup-image" href="some/image/path/image.png“ />
Stäng av möjlighet till skalning
Möjliggör installation på iOS-plattformar
Appens ikon för skrivbordet
Uppstartsbild
sMap-mobile
• Uppstart • Bakgrundskarta • Med datalager • Markera i kartan • Mejla karta • Sök adress • Min position
sMap -mobile
config_malmo.js config_lund.js
config_krstad.js
config_skane.js
config_gatukontoret.js
config_felanmalan.js
config_hborg.js
Skapa produkter i sMap-mobile
Ansluta till produkt
• http://kartor.smap.se/mobile/? config=configs/config_malmo.js
config_malmo.js
Config-filen i sMap-mobile
• Väljer ut:
– Verktyg och deras konfigurering
– Lager
– Kartans projektion och utbredning
sMap -mobile
Slutsats
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
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)
http://www.apple.com/webapps/
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.
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
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)
• Lyssna även på… 11.30
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: www.smap.se
• Bok: Building iPhone Apps with HTML, CSS, and JavaScript (Jonathan Stark)
www.malmo.se/karta !
Konsult!