Logo TIB AV-Portal Logo TIB AV-Portal

A jumpstart for your mobile map app

Video in TIB AV-Portal: A jumpstart for your mobile map app

Formal Metadata

A jumpstart for your mobile map app
Title of Series
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
Would you like to get started programming mobile mapping applications? There's a lot to keep in mind: a responsive layout, a mapping framework, positioning of controls and buttons, offline caching of tiles, and finally compiling it all into a mobile app.This presentation walks you through some problems and solutions, culminating in MobileMapStarter. Techniques discussed include jQuery Mobile, Leaflet, and PhoneGap/Cordova.
Keywords mobile cordova phonegap leaflet
Mobile app Texture mapping Computer animation Cartesian coordinate system Template (C++)
Web page Mobile app Functional (mathematics) Java applet Multiplication sign Execution unit Letterpress printing Neuroinformatik Web 2.0 Conservation law Software framework Utility software Computing platform Social class Scripting language Texture mapping Matching (graph theory) Mapping Tesselation Cartesian coordinate system Web application Radical (chemistry) Cache (computing) Word Computer animation Software Quicksort
Mobile app Texture mapping Logic Set (mathematics) Utility software Cartesian coordinate system Navigation Social class Asynchronous Transfer Mode
Texture mapping Computer animation Internetworking Tesselation Connected space
Point (geometry) Rapid Prototyping Building Machine code Service (economics) Computer file Java applet Multiplication sign Set (mathematics) Web browser Mereology 2 (number) Web 2.0 Napster Prototype Profil (magazine) Utility software Damping Endliche Modelltheorie Series (mathematics) Plug-in (computing) Task (computing) Scripting language Software developer Bit Cartesian coordinate system Compiler Graphical user interface Process (computing) Computer animation Integrated development environment Personal digital assistant Blog Website Right angle Object (grammar) Chord (peer-to-peer) Library (computing)
Trail Functional (mathematics) Texture mapping Vapor barrier Service (economics) Open source Tesselation Wrapper (data mining) View (database) Ultraviolet photoelectron spectroscopy Data storage device Planning Software bug Uniform resource locator Mathematics Computer animation Cuboid Software framework Remote procedure call Figurate number Local ring
Point (geometry) Web page Building Texture mapping Real number Projective plane Set (mathematics) Cartesian coordinate system Graph coloring Entire function Field (computer science) Word Computer animation Plug-in (computing) Computing platform
Type theory Set (mathematics)
Scripting language Web page Default (computer science) Standard deviation Texture mapping Computer file Structural load Sheaf (mathematics) Electronic mailing list Database Revision control Computer animation Semiconductor memory Configuration space
Area Building Computer animation Summierbarkeit God
Meeting/Interview Term (mathematics) Personal digital assistant Cellular automaton Decision theory Weight output Mass Computer programming
Point (geometry) Standard deviation Goodness of fit Texture mapping Meeting/Interview State of matter Paradox Statement (computer science) Database Web browser Stability theory
Laptop Web page Context awareness Group action Mobile app Texture mapping Code Exterior algebra Bootstrap aggregating Meeting/Interview Website Utility software Software framework Social class
Meeting/Interview Query language Shared memory
Addition Android (robot) Meeting/Interview Code Office suite Web browser Cartesian coordinate system Element (mathematics)
I have here represent uh mobile map started effectively an application template for writing mobile applications using leaflet and for use with scored slash from death and so i'm scrag-end and work with 3
and 4 network where a nonprofit that helps other nonprofits with that yeah support so we get parks and radical social justice conservation that sort of thing you we do everything GIS print maps to mobile apps and web applications and so
mobile and maps it seems like a marriage made in heaven now computer your pocket GPS all all the time that the bustling matches they makes mobile applications of seem like a great thing iPhone gap helps to bridge that some of the difficulty in developing mobile apps by allowing you to write your applications in HTML Java script so buried there disclose a whole lot of knowledge gap required to get started on it and leaflet well very responsive and utterance they refer reasons and a lot of stuff mn so some of the considerations we start making it a web based on his web-based apps inside a mobile framework are well for starters how are you going to get this web stuff inside from from gaps last word of those what was that again you get to use japery if you're into that and leaflet and HTML and all those other well-documented technologies but yeah there's a lot of the stuff to considered besides just the goal hello leaflet and you have to worry about say switching between pages and people will click on buttons emotional panel and hide something else I need some basic utility classes to put buttons up in the corner and make a nice looking now warrant and anchor suffer the ball ideally believing caches map tiles for offline units because the ever cut off your wife I will using web mapping and tried banning it doesn't work that if you want a mobile app then you will want to work assuming this 1 bothered to catch the tiles 1st you also what other utility functions like a platform detection feature detection and so forth thus mobile starter and this is the distillation of our
1st of 3 or so mobile applications centers for finding out what was common between all of them in the 1st year of 8 hours of tedious debugging and really just a silicon into something that we use our applications these days ago yourself a nice map nav ga buttons utility classes and settings panel here
switch between base maps toggle and offline mode which lets us real exciting logic that it and then to some other real standard stuff like know that marker on the front totally optional that now you can turn it off and on and the actual
capability to download these map tiles and then trigger the map to be able to use them when you lose your Internet connection with so
the underlying pieces of all us Our Cordova over again another name for phone gap is
essentially a browser Sila durational of script and this happened models the whole thing into your APK or a high profile and essentially is its own contained browser so again script and so forth just great with and you can even in some cases prototype applications in chrome it's not exactly the same WebKit and on the web you are exactly the same like the File API bloodier layout and prototype even Chrome agility faster right the set of 5 is the real point of mobile the performance on it is not quite as great as it truly mobile and truly native application if you're right in Java or C + + or objectives rather yeah you will get something that's a little bit more fluid that can do a few things of the when you can't as just a fact still in development time hugely improved being in a basic application running using mobile Napster in about 10 minutes no joke every time on the other hand doing Objective you know you spend literally months on development whereas the sold out in days or weeks now the build process for chord of applications as I possibly 1 of the biggest sticking points requires this whole slew of utilities if you wanna build OSE have we running a Mac and or is even more utilities where is he your libraries up to date it takes a while to get everything put together and fortunately the documentations better these days and I myself this a blog series on getting the entire set up but in the place so not to show for myself but there's some good documentation out there these days and I believe the part of the installation process these days is not as painful as it was a year ago you have year deployment on your device here using say x coded as simple command from the command line were looking at 60 a seconds every compiler out on the phone and and not too bad on the other hand phone gap building if you don't feel like going to all that trouble for putting together a build environment is a service offered by Adobe and basically take your CSS and JavaScript zip stuff uploaded to the website they knew back a bunch a few case it's pretty slick and we ourselves don't really is 0 we have a couple of issues with that you know it limits on the file size you get to use custom plug-ins some and perhaps the worst problems that on and radio this problem if you to try to start a 2nd copy the task they actually start a new copy starting over from scratch disease don't do that but for rapid prototyping can be just the thing the
so again you get your hello leaflet and there's a lot of Shalom's you'll need to address and again this is why we distill down this 1st 8 to 10 hours in something that we thought might be interesting and so again EDU basic layout and
framework now bars buttons and so forth dialog pop ups and so forth this 1 uses japery mobile quick easy very low barrier to entry there and actually looks relatively get and map of course leaflet practically everyone's favorite of all obvious reasons really good size the size change detection Adjust plane looks good is fairly light performed this other little details such as whether or not to display the marker whether optiSLang accuracy stuff I should you have location tracking anglers like whenever ear device sensor location updates should you can the map and these little things which you probably will will want that very programmed in here and other considerations are bugs we had a work for example if you try to re center the map while the map is not in fact visible it just doesn't work out too well so that's a wrapper functions for and again you know pieces of the puzzle we've already figured out and that's why you are being changes to 8 hours of debugging into a simple 10 down and the it includes again the offline tell cash this was really complicated and really excellent actually for the given view portal figure out all the tire liberals could possibly exist on a remote tiles services downloads among the local storage and then has the ability to check boxes are to update the leaflet titled leaflets URL template so this use from local storage really works totally offline maps after you catch up z again little details lock and
again so just by downloading this and putting in the other 5 minutes of effort to compile at what
you get a we in about 5 or 10 minutes of building you can of the field will read us but at that point is this is the entire set of commands to bootstrap a new Cordoba project at your basic plug-ins and platforms and then deployed to render advice it really does take care maybe 5 small signal and then from there he just he packing in from the already working maps changing word changing color themes disable stuff you know what to do so here are a few
screenshots from real world applications have written on this pocket for mobile welcome page should onwards the map that
centered on my home simple certain
geocode type a tool and and
again the settings panel the and the
downloading of files for offline use 10 minutes but then is going get back on your
own self 11 the very clearly labeled configurations section user changing some certain default list of base maps had text on whatever pages start copying and pasting it's very copy and paste friendly has a lot of internal documentation really walking through a house of the other stuff you might wanna do with that which we had actually done with that is say include G adjacent files into this with a simple script at expiry dataset is due dates and include with the script tag and it's already in memory released like that way you know also look at the standard AJAX techniques if you always fetch the latest version of the database we would have a hybrid versions of a little fetch the remote database saved on file as Jason file and then load from adjacent files pretty flexible urinalysis you know an extra hour of work on top of the 10 minutes to having hello mobile happened
so that's about all I had unfortunately had been expect to run so short I never happen in about 10 minutes the I yes and on my backyard Fortunately since this species and build for already you all right 8
0 my god hatch and they have written over the I it would like to in 66 per cent of the sum of the areas of the world and so on your
importance to the program for example I want to to idea where it would have do this the I'm going to and and it's not found the cell and have I the the thing
I the say about we have any other questions weights the the great thanks the of the question in terms of gathering user input from the mass of the example if you want the other case a decision on the matter and perhaps told us and
the databases of the news of today all select is standard AJAX techniques sale as you would a browser sail on a click on the map to an AJAX posted very standard stuff in 5 minutes of that a paradox right the yeah with the license that you you
grew up completely open as a stabilizer says graviton go it's very clear there's no I do the copyright no restriction on use of your statement holds so forth there is a clear statement there should be because otherwise we cannot use the called the you make a good point I'll make a note of that and double the statement that because that's the intent of that knowledge to state more clearly and the it the idea as I was a little detailed
programming Burmese forget to anything else the i've question that is could you put this in the context of some
of the alternatives like bootstrap book and if if you know have and the other thing is whether or not you can apply that at puberty set up a basic website for example but I I that that will you know from your laptop but you want optimized for mobile we can what I really meant as a uh mobile website framework as much as the app framework a bootstrap itself is just a bunch of utility classes encountered and will not the things like say page transitions did make this panel disappearance of the search panel instead at the search panel disappears map once said that the additional code beyond what bootstrap as that
said 0 1 topic of in some upcoming postings later in the month is about whether japery mobile is necessarily the best system for whether
something bootstrap-based might even leaner a little more performant as a query mobile does have its and not not exactly high-performance shares the that would also note you have to do to really talking to this mike it's very quiet there's
really cool debugging tool for us so but this called walk office Wiener Weiner it the says he doesn't care if it's winery we have but I don't think you mention that is really handy because we knew on start up you're you're code of application you can pull prepare then you can throw browser of you can view the elements of originality can most CSS and just really handy for odd blogging in addition to your Android only far I could live without
why it's great that it's actually included in just uncommon sticking are all but that is totally awesome a uh well known very soft copy and you have yourself mobile app in about 10 15 minutes here just said you know let me know because I don't walk through some of that