Mobile Development With OpenLayers, Sencha Touch And PhoneGap
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 95 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/15560 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Place | Nottingham |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSS4G Nottingham 201360 / 95
17
25
29
31
32
34
48
50
56
58
68
69
70
82
89
91
00:00
Information managementPresentation of a groupContext awarenessMobile appLibrary catalogAuthenticationLevel (video gaming)Overlay-NetzAndroid (robot)Ultraviolet photoelectron spectroscopyFormal languageSelectivity (electronic)Connected spaceContext awarenessCartesian coordinate systemPoint (geometry)Projective planeAndroid (robot)MappingView (database)outputLevel (video gaming)Combinational logicInternetworkingOverlay-NetzUniform resource locatorTouch typingMobile appLine (geometry)PolygonTouchscreenExistenceSpeech synthesisInternet forumMultiplication signMetropolitan area networkBoss CorporationTelecommunicationProof theoryLibrary catalogField (computer science)State of matterLogic gateWhiteboardClient (computing)Computer animation
03:52
Physical systemHierarchyWritingNavigationReading (process)Computer-generated imageryReal numberSimulationService (economics)Dependent and independent variablesoutputBenchmarkComputer fileDatabaseLocal ringDirectory serviceHeat transferApplication service providerLine (geometry)Chi-squared distributionVarianceSystem callSocial classProxy serverLevel (video gaming)Computer networkStructural loadComputer-aided designComplex (psychology)Mathematical singularityTessellationSoftwareBenchmarkDirectory serviceComputer fileArithmetic progressionSystem callINTEGRALFile systemSuite (music)CASE <Informatik>CodeElectronic visual displayPhysical systemMereologyLevel (video gaming)Data storage deviceCartesian coordinate systemMultiplication signHeat transferView (database)Flow separationBitProxy serverSoftware developerCodeLine (geometry)Matching (graph theory)Computer configurationPoint (geometry)DatabaseSocial classComputer animation
09:57
Level (video gaming)Proxy serverComputer networkStructural loadMetropolitan area networkEmailSoftware testingMobile appOverlay-NetzAndroid (robot)World Wide Web ConsortiumDynamical systemExecution unitView (database)ArchitectureWeb browserEvent horizonDigital rights managementComputing platformRevision controlTape driveGroup actionDifferent (Kate Ryan album)Extension (kinesiology)Multiplication signHypermediaQuicksortLevel (video gaming)Cartesian coordinate systemDigital rights managementGame controllerBuildingEndliche ModelltheorieTouch typingPoint (geometry)View (database)Stack (abstract data type)User interfaceComputer architectureEvent horizonComputer animation
13:19
Single-precision floating-point formatComputer animation
13:43
Value-added networkView (database)Computer fileGraphical user interfaceWindowBookmark (World Wide Web)Metropolitan area networkMIDIWide area networkMobile appTouch typingPhysical systemMUDForceSoftwareMultiplication signWhiteboardDialectComputer animation
14:12
Value-added network5 (number)Data warehouseOracleGeometryServer (computing)Hacker (term)Library (computing)Bridging (networking)Cartesian coordinate systemOffice suiteBitPosition operatorSoftware developerPhysical systemTransportation theory (mathematics)Order (biology)Line (geometry)Database transactionInformationOpen setLevel (video gaming)Table (information)Web pageTouchscreenData warehouseMobile appTouch typingComputer animation
16:20
Open setTouch typingMobile WebAndroid (robot)Coma BerenicesGraphics tabletWeightCAN busStandard errorDifferent (Kate Ryan album)Level (video gaming)Drag (physics)Computer-generated imageryQueue (abstract data type)Personal area networkElectronic visual displayVector spaceVolumenvisualisierungCodeGeometryControl flowCausalityNP-hardMereologyMobile appScripting languageEstimationCNNMUDTouchscreenWeb browserEstimatorCartesian coordinate systemMultiplication signGoodness of fitAndroid (robot)CausalityMereologySelectivity (electronic)CodeInternetworkingSoftware design patternSkeleton (computer programming)Point (geometry)CircleRight angleVolumenvisualisierungDivision (mathematics)CASE <Informatik>Slide ruleBitMobile appScripting languagePatch (Unix)Medical imagingTouch typingVector spaceUniform resource locatorRevision controlTablet computerStack (abstract data type)TesselationSoftware developerPersonal area networkRekursiv aufzählbare MengeGraphical user interfaceSubject indexingLevel (video gaming)Library (computing)INTEGRALOffice suiteProfil (magazine)BuildingWrapper (data mining)Electronic visual displayType theoryConfiguration spaceProjective planeTessellationGroup actionUsabilityMassFactory (trading post)Software maintenanceOpen setLogic gateNetwork topologyWhiteboardDifferent (Kate Ryan album)Matching (graph theory)MathematicsWindowInteractive televisionFreewareAreaTouchscreenAuthorizationBranch (computer science)Computer fileSheaf (mathematics)Metropolitan area networkComputer animation
23:08
Computer iconBranch (computer science)Division (mathematics)International Date LineDisk read-and-write headLine (geometry)Scripting languageStrategy gameVector spaceKinetische GastheorieAxonometric projectionInclusion mapCodeBuildingComputer fileSubject indexingMobile appScripting languageProfil (magazine)Descriptive statisticsSheaf (mathematics)Computer animation
24:02
Coma BerenicesProjective planeTouch typingComputer fileMultiplicationNumberQuicksortMultiplication signCartesian coordinate systemOrder (biology)Android (robot)Open setDistanceAutomationClient (computing)Computing platformoutputLevel (video gaming)Local ringBitSelf-organizationData storage deviceComputer animation
Transcript: English(auto-generated)
00:05
So, hello everybody. I will talk about a project I worked on for Luxembourg. I will talk about the combination between Oplineers, Sencha Touch and PhoneGap.
00:25
So here's the context of the project. We needed mobile applications with offline support, considering that there was already
00:41
a desktop application existing. So here's how the desktop application looks. You see that there are a lot of features. It's a data portal with a lot of layers. User can choose what he wants to display on the map.
01:05
And we have a catalogue, you can choose layers, you can change the opacity of the layer and so on. We also have the possibility to authenticate, and users can create their own maps.
01:26
They can add points, lines or polygons and style everything. So here's the context of the project. The project and the customer, the Luxembourg, asked us to develop a mobile application
01:48
with the following features. They wanted a navigable and queryable map with best layers, and also a lot of
02:01
overlay layers. They also wanted to have location search for users to know where they are on the map. And they wanted also offline support, so that users, when they go on the field, they can still show the maps on their mobile, even if the internet or connectivity is bad.
02:29
We also need language support, because there are many, there are different languages spoken in Luxembourg, and they wanted us to be able to support devices on Android or iOS.
02:47
They also wanted to be able to share data and to be able to add points with pictures on the map. First, what we did is we have done mockups so that we are sure that we will be able
03:08
to put all those features in a single application. So it took a long time, but it was really worth. Here we have only half of the different screens we mocked up.
03:25
Here are some mockups about the different views. So you can see that you have the map on the first, and then the layers, overlay layers selection with a search field, because we have a lot of layers.
03:42
And the last one shows how we imagined the offline download. So the main part of the application was the offline support, and for that we had to choose
04:04
how to store the tiles on the mobile. So there were many options, several options. The first one was local storage using HTML5, but it's really too limited.
04:22
Usually to 5MB, which represents about 40 tiles, so it doesn't suit the needs. And then it was obvious that we needed something at a lower level, so we needed to use PhoneGap
04:46
to be able to access the file system. And then we had to choose if we wanted to store the tiles as files or in a database.
05:01
So we tried to compare the two different options, and we tried to do benchmarks, but it was not easy to do, because we had to choose the size of the image itself.
05:21
We had to do benchmarks between the different devices, which is also difficult. And it was difficult also to determine how much the network latency is responsible for
05:42
the performance. But in the end, it looked that storing tiles as files was better than using a database. And even more, at the time we did the development, in PhoneGap, if we wanted to
06:06
use a database, we needed a plugin. This is not the case anymore, so maybe we should reconsider that point. So we chose to store the data as files directly.
06:22
And here's how we have to do it in PhoneGap. So we request a file system, and then we have a callback. We then have to create the directory in which we want to store the tiles, and then we have a new callback.
06:44
It's a bit painful, but when it's done, it works well. Here's how we download the file. So we use what is called a file transfer. And we call the download method on this object.
07:05
I'm sorry for those who don't know JavaScript. And then here we also have a callback in which we can do things like update the counter to know if the download is complete.
07:24
Here's how the file names look like. And here's a screenshot of the final view in which we can see the download progress.
07:50
So I will show you now how we did the integration with OpenLayers. Here's the code. We relied on the already existing class, which is XYZ.
08:09
And we extended. And we are using a specific method here which can do asynchronous calls.
08:20
Because of the system of PhoneGap using a lot of callbacks, we had to use this kind of thing. So here's how we access the data, the tiles, when we want to show them on the map. You first download the tiles, and then you use this kind of layer to show it on OpenLayers.
08:52
About performance, it was a big issue. And we have two different things to consider. First, the performance of the display.
09:07
When you want to pan a map on a mobile phone, you cannot have many, many layers. You can have many, many layers.
09:22
If you have more than five or six layers, panning the map is really painful. So we tried to have as less layers as possible. And we used MapProxy to merge layers on the fly.
09:42
Both when you are online or offline. There's a lot of flies missing, I don't know why. I wanted to show... I was not up to date.
10:28
You have here a base layer and two other layers. And when we download them to show them offline, we are calling MapProxy to merge tiles, so that we don't have to download too much tiles.
10:44
And also to have panning, which is good. Now I want to talk about the advantages and disadvantages of using the OpenLayers,
11:04
Sencha Touch and PhoneGap stack. About Sencha Touch ST here, it has, I think, a nice looking theme, like buttons, views, and so on.
11:22
It's a nice point for Sencha Touch. Developing user interface can be fast when you know Sencha Touch well. And it also has a strong model view controller architecture.
11:42
Also, OpenLayers is, I think, powerful and extensible. The asynchronous layers was easy to do with OpenLayers. But Sencha Touch is intrusive about event management, and we had much trouble with it.
12:04
Also, Sencha Touch has obvious transition performance issues. It supports not every buzzer. It's kind of changing, but it's still limited.
12:22
PhoneGap is great to build different applications for different kinds of devices, but it's not straightforward. You have to do a lot of work so that it works well. And also, when you use this stack, it's difficult to debug because of the different devices.
12:48
And because it might be slow in the different simulators. So, these are general considerations.
13:07
If you want a demo, maybe after Bart says what he wants. So, thanks very much Pierre.
13:23
While Bart is setting up, I have to introduce Bart even. So, these are actually two talks within a single session, and we take the questions at the end of the next speaker. Most of you will know the next speaker. It's my fellow countryman Bart van der Eynde.
13:44
Bart is very knowledgeable on open geospatial. I would say his knowledge is boundless. He used to work in the Netherlands with the OpenGEO group, then he moved to OpenGEO, now called Boundless.
14:04
He involved also lots of his time in OSGEO, and he's now also a member of the board. So, Bart is working a lot with all these JavaScript libraries and also in mobile.
14:22
He will learn us what he has done. So, take it away Bart. Yeah, so I want to talk a little bit about mobile application development with OpenLayers and Sencha Touch. We didn't use PhoneGap, so my name is Bart and I'm from Boundless.
14:45
So, the application I had to build was called an enforcement application. It's developed for the city of San Francisco, for the Municipal Transportation Agency. And it uses a system of parking sensors in the streets and a big Oracle data warehouse that gets all the sensor information.
15:10
And then we put GeoServer on top of that with WMS. And we also had to do transactions to the underlying tables. And the purpose of the application is to assist the parking citation officer to find places where people didn't pay their parking tickets.
15:31
So, it's a bit of a dodgy application to develop. So, here you can see the application.
15:40
It's just one page. It's pretty simple in that way. So, people select actually a feature on the map where they want to inspect if the owner of the vehicle didn't pay. But of course there could also be a disabled person who parked there.
16:02
So, then on the right side of the screen they can update the status, you know. Like somebody had some kind of other permit, so it's okay. And then we will update the underlying database so that they don't go and visit that position again.
16:21
So, the technology we used was OpenLayers 2, something after the 2.12 release. We used Sensor Touch version 2. We did use Mark's GeoX mobile library. We started development on Android 3.2, which later got an upgrade to 4.03, which was quite a bit of an improvement.
16:48
The Android 3 was quite frustrating to develop against. Since we didn't use PhoneGap and they didn't want the parking citation officer to have unlimited access to internet,
17:01
so we had to put a wrapper around the application so that they could easily turn off internet access in the browser and just give the application internet access. And the good thing was we only had to develop for one device, the Motorola X-iBoard 8-inch tablet.
17:24
So, I'm sharing some of my experiences. I thought it was, you know, when I did my first estimate for this mobile application, I was using my experience in desktop to do estimation, and I underestimated quite a bit.
17:40
So, be careful when you do that. The disadvantage is we couldn't use Chrome or a decent browser, so we had to work with the Android stock browser, and it is very buggy, so be careful.
18:00
And also, debugging can be really more difficult than on the desktop, especially for the Android stock browser. For Chrome and Safari, it's not so bad, but for the stock browser, it takes a lot of time. And one other thing we did in this application is don't develop applications like you do on the desktop,
18:22
you know, with a lot of windows, but make a different workflow, a different interaction, which is easier to use. So, the main issues we had when developing the map part of this application was we had a lot of trouble getting the feature selection to be good.
18:45
So, sometimes people had to touch like three or four times to get the feature to be selected on Canvas. So, that was quite an issue, and we tried actually like three or four different solutions for the feature selection. And another thing is because we had like three layers in the application,
19:03
the direct performance was also very problematic in the beginning when we started. So, we had to do some patches to open layers to get it to be more performant. So, I said the feature selection was problematic, so the solutions we actually tried was
19:20
we started with Canvas, but it was too buggy on the Android 3 browser. So, then we tried to put like an invisible circle around the points and have a larger hit canvas, but the issue there is that you get overlapping features and you don't always get the right one in that case.
19:44
We also tried to experiment with a marker renderer, so simple divs in the map. The feature selection was quite good, but the dragging performance was not so good. So, in the end, my colleague Andreas Hotchevar, he came up with a concept which he called the headless renderer.
20:03
So, I'm going to talk a bit about that in the next slide. And another thing which Andreas developed was in open layers there's something called a tile manager, and it's used for queuing tiles when they are loaded and also to reuse image stacks which are already in the browser.
20:22
So, that gives a bit of better performance. So, the headless renderer, what we do is we use a WMS layer to render the points. We do get the vector data in through WMS, but we don't display them in the canvas layer. So, we just get the data, and using the data when somebody touches on the screen,
20:44
we find the nearest point in the data, and on that location we will draw one feature in the canvas renderer. So, this was actually for the device because the Motorola is also, I think, one of the worst devices to work on.
21:00
So, that's part of this problem, but in this case we had the best touch selection and also being able to have a decent panning performance. Sencha Touch. We found out that Android is not so well supported, especially old Android versions.
21:21
Android 4 was no issue, but they basically say don't try it on Android 2 or 3 because we won't support it. Sencha Command is actually a type of SDK to make a skeleton application. In the project I had to upgrade Sencha a few times, and if it breaks it's really hard to identify the issue
21:44
because you just get a stack trace and you can try things, but it's very hard to find the cause of the stack trace. I did like the MVC part of Sencha Touch to organize the application code. We also found out that the geolocation in Sencha Touch is also very buggy,
22:02
so we didn't get it to work properly, and I think it's broken in the release we had of Sencha Touch, so we had to use the OpenLayers geolocation code. We used a singleton design pattern to store the configuration for the application, and actually I'm not sure if I would use it again. I'm undecided.
22:26
If you want to integrate OpenLayers in Sencha Touch, Sencha Touch applications, they have an app.json file, which has a resources section, and there you add the OpenLayer script tag. And you also need to add a script tag in the index HTML page.
22:44
And of course you will never use the full build of OpenLayers on mobile, so make sure you make a build profile of OpenLayers with only the things you need. And I want to show quickly the...
23:09
So this is the app.json file, where you have the resources section, and there you put the build file of OpenLayers.
23:21
And the index HTML file has then the script tag to OpenLayers, because we couldn't really get it to integrate with the microloader from Sencha Touch, because your code needs to be structured in certain ways, so that's not really feasible.
23:42
And this is the OpenLayers build profile which we used, which only includes a few classes. Any questions? Well, thanks Bart.
24:00
Thanks for sharing this and also being very honest about what you're struggling with. We now have time for questions to the two speakers. Pierre Giraud and Bart van der Heijngen. You mentioned you might not use Sencha Touch again.
24:21
What would you use? Do you have an idea of what you would use in your next project? That's a very good question. I started a new project with jQuery. jQuery mobile? Yeah, jQuery mobile. And it's not easy, so it's difficult to choose. Yeah, I don't think there's any answer.
24:42
Both have advantages, but both have also disadvantages. You also mentioned the fact that PhoneGap was a bit tricky to use on multiple platforms. It strikes me that that's what it's there for, isn't it? We did a makefile to ensure that we do both for Android or iOS.
25:06
What we found is that PhoneGap is made to build one application for one platform. If you want to do it for many platforms, it's not easy. We wrote a makefile to do both, but it's not straightforward with PhoneGap.
25:28
One quick question. Isn't there a birds-of-a-feather session on this subject? I know there is one on GeoX. On the mobile? But also on mobile, or is it just for the...
25:40
I don't know about it. Okay, now I thought it was a question to you. Organize it. Well, if there's interest, I mean, it's a big issue. I'm sorry, this gentleman over there was first. Did you consider other storage methods than local storage for HTML5?
26:01
For, like, IndexedDB? What do you mean? IndexedDB is like another technology for storing and... We didn't. No. Because I tried it, I should have learned to outrun it. You could also expand it from five megabytes up to, I think, 50.
26:20
Okay. Maybe it was not enough for our case, I think. Oh, okay, maybe more than 50. Bartosz, just wondering why you went through the pain,
26:41
and it is pain, of doing a multi-platform map when you were only sporting one platform. What do you mean a multi-platform map? So you were using Sencha Touch, which is great, but one of the advantages is you could use it on iPhone, you could use it on anything, but you were only targeting an Android device, so what made you choose that over a native Android app?
27:02
I think it was a requirement from the client to do HTML5. Did you agree with that? In hindsight, probably not. You've shown us quite a lot of the JavaScript.
27:23
I guess these projects are not open-source projects. Actually, the project I worked on will be open-sourced. I asked the customer, and it will be open-sourced in the next days or weeks. Great, thanks. Same for my application also.
27:44
So we have still time for one question. Is there one question there?