We get parks and rec, social justice, conservation, that sort of thing and we do everything from GIS print maps to mobile apps and web applications. Mobile and maps seems like a marriage made in heaven, computer in your pocket, GPS, internet, all the time, who could possibly have imagined.

Makes mobile applications seem like a great thing. Phone gap helps to bridge some of the difficulty in developing mobile apps by allowing you to write your applications in HTML and JavaScript. That right there closes a whole lot of knowledge gap required to get started on it. Leaflet, very responsive and everyone's favorite for reasons that a lot of us know.

Some of the considerations when you start making a web-based app inside a mobile framework are for starters, how are you going to get this web stuff inside your phone. Phone gap slash Cordova is what does that, again you get to use jQuery if you're into

that and leaflet and HTML and all those other well documented technologies. But there's a lot of other stuff to consider besides just the good old hello leaflet. You have to worry about switching between pages when people click on buttons. You want to show a panel and hide something else. You need some basic utility classes to put buttons up in the corner and make a nice

looking nav bar and to anchor stuff at the bottom. Ideally you'd be able to even cache these map tiles for offline use because if you've ever cut off your wifi while using a web map and then tried panning, it just doesn't work but if you want a mobile app then you will want it to work assuming that someone bothered to cache the tiles first. You also want other utility functions like platform detection and feature detection and

so forth, thus mobile map starter. This is the distillation of our first three or so mobile applications and just for finding out what was common between all of them in the first eight hours of tedious debugging and really just distilling it into something that we use to start our applications these

days. You've got yourself a nice map, nav bar, buttons and utility classes, settings panel here, switch between base maps, toggle into offline mode, which that's just real exciting. I'll show you that in a minute. And then just some other real standard stuff like that marker on the front. Totally optional but now we can turn it off and on.

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. So the underlying pieces of all this, Cordova, again another name for phone gap, it's essentially

a browser wrapper. So you load your HTML and JavaScript into this app, it bundles the whole thing into your APK or IP file and it essentially is its own contained browser. So again, JavaScript and so forth, just great. You can even in some cases prototype your applications in Chrome.

It's not exactly the same WebKit and the WebView aren't exactly the same like the file API, but a lot of your layout you can prototype even in Chrome, which that's even faster, right? Just hit F5 instead of redeploying to the mobile app. The performance on it is not quite as great as a truly native application.

If you were to write it in Java or C++ or Objective-C rather, you will get something that's a little bit more fluid that can do a few things that the WebView can't. That's just a fact. Still, your development time, hugely improved. You can get a basic application running using mobile map starter in about 10 minutes. No joke, I've really timed it.

On the other hand, doing it in Objective-C, you know, you can spend literally months on development, whereas this will have it in, you know, days to weeks. Now, the build process for Cordova applications is possibly one of the biggest sticking points. It requires this whole slew of utilities. If you want to build on iOS, you have to be running a Mac.

It requires even more utilities. It requires that you keep your libraries up to date. It takes a while to get everything put together. Fortunately, the documentation is better these days, and I myself just finished a blog series on getting the entire setup put into place, so not to shill for myself, but there's some good documentation out there these days.

I'm glad to at least be part of that. So the installation process these days is, you know, not as painful as it was a year ago. Once you have it, your deployment onto your device, you know, using, say, Xcode or just a simple command from the command line, we're looking at 60-ish seconds to have it recompile your app, push it onto the phone, and there it is.

Not too bad. On the other hand, PhoneGap Build, if you don't feel like going to all that trouble for putting together your build environment, is a service offered by Adobe. Basically, you take your CSS and JavaScript, zip stuff up, upload it to their website, they hand you back a bunch of APKs. It's pretty slick.

We ourselves don't really use it, though. We have a couple of issues with it. You know, we have limits on the file size. You don't get to use custom plugins. Perhaps the worst problem is that on Android, there's this problem that if you try to start a second copy of the task, you actually start a new copy, starting over from scratch and losing your state. Don't do that. But for rapid prototyping, it can be just the thing.

So again, you get your hello leaflet, and there's still a lot of challenges you'll need to address. And again, this is why we distilled down those first, you know, 8 to 10 hours into something that we thought you might be interested in. So again, you need your basic layout and framework, nav bars, buttons, and so forth,

dialogue pop-ups, and so forth. This one uses jQuery mobile. Quick, easy, very low barrier to entry there, and actually looks relatively good. The map, of course, leaflet, practically everyone's favorite. All the obvious reasons, you know, really good size change detection, it just plain looks good, it's fairly light and performant.

Then there's other little details such as whether or not to display the marker, whether or not to display accuracy stuff, should you have location tracking handlers like whenever your device sends a location update, should you pan the map? You know, these are the little things which you probably will or won't want, but we already programmed it in here.

Other considerations are bugs that we had to work around. For example, if you try to recenter the map, while the map is not in fact visible, it just doesn't work out too well. So we wrote some wrapper functions for it. Again, you know, pieces of the puzzle that we've already figured out, and that's why, you know, you can change your 8 hours of debugging into,

you know, a simple 10-minute download. If it includes, again, the offline tile caching. This was really complicated and really excellent. Actually, for the given viewport, it'll figure out all the tile URLs that could possibly exist on your remote tile services, downloads them onto the local storage, and then has the ability through that checkbox you saw

to update the leaflet tile to leaflet URL template so as to use them from local storage. Really works totally offline maps after you've cached them. So again, the little details that all come together. So just by downloading this and putting in, you know, the 5 minutes of effort to compile it, what do you get?

In about 5 to 10 minutes of building, you can, I don't know if you'll be able to read this, point is, this is the entire set of commands to bootstrap a new Cordova project, add your basic plugins and platforms, and then deploy it to your Android device.

It really does take, you know, maybe 5 minutes, I'll say 10. And then from there, you just keep hacking, you know. From there, you already have yourself a working map. Start changing words, changing color themes, disable stuff you don't want. So here are a few screenshots from a real world application written on this.

Park Info Mobile, welcome page, onward to the map that's centered on my home, simple search and geocode type of tool, and again, the settings panel and the downloading of tiles for offline use, 10 minutes. Then you just go ahead and get hacking on your own stuff.

You know, up in the very clearly labeled configuration section, you just start changing some certain defaults, your list of base maps, the text on whatever pages, start copying and pasting. It's very copy and paste friendly and has a lot of internal documentation to really walk you through it. Some of the other stuff you might want to do with it, which we've actually done

with it, is say include GeoJSON files. You can do this with a simple script tag. You export your dataset as GeoJSON, include it with a script tag, and it's already in memory. Really slick that way. You can also load it via standard Ajax techniques if you want to always fetch the latest version of the database. We even have hybrid versions of it, which will fetch the remote geodatabase,

save it on file as a JSON file, and then load from that JSON file. So pretty darn flexible here, and that was just, you know, an extra hour of work on top of the 10 minutes of having a hello mobile. So that's about all I had, unfortunately. I didn't expect to run so short.

You can have an app running in about 10 minutes. Yes? Well, I don't have my Mac here, unfortunately. This PC isn't built for it. Well, all right. Well, all right. Oh, my gosh.

Yeah, bring it on over. Is this the Wi-Fi or something? Oh, there we are, 84%. We already have a Cordova app, Cordova environment set up and all? Oh, I once took a Cordova site.

Cordova command not found. Ant not found. Oh, okay. Probably did it on a different computer, sorry. Bummer. That would have been really cool. Anyone else have Cordova?

Okay. All right. Say again? Do you want two questions? Oh, yes, yes. Any other questions, please? That would have been really cool. Hey, Greg, thanks. There's a question in terms of gathering user input from the map. Say, for example, the user wants to locate a position on the map

and perhaps store that, send it to a database. Does it lend itself to that? Oh, absolutely. You need standard Ajax techniques, you know, as you would in a browser. Say, on a click on the map, do an Ajax post, you know. Very standard stuff, you know. Five minutes with the jQuery docs, right?

What's the license that you've used for the code? Completely open. That is to say, the license just says, grab it and go. It's very clear that there's no copyright, no restriction, no... But there's a clear statement about that? Safe worth? There is a clear statement? There should be, because otherwise we cannot use the code safely.

You make a good point. I'll make a note of that and double check the statement of that. Because that's the intent of it, but I'll make sure to state more clearly. Thanks.

Thank you. That's always a little detail that the programming part of me forgets, you know. Anything else? Yeah, I have a question. Just could you put this in the context of some of the alternatives, like Bootstrap, if you know anything about it. And the other thing is whether or not you can apply that after you've already set up a basic website, for example,

that's accessible from your laptop, but you want to optimize it for the mobile. Well, it's not really meant as a mobile website framework as much as the app framework. Bootstrap itself is just a bunch of utility classes and code and will not do things like, say, page transitions. Make this panel disappear and show the search panel instead. Make the search panel disappear, show me the map panel instead.

That would be additional code beyond what Bootstrap does. That said, one of the topic of some upcoming postings later in the month is about whether jQuery mobile is necessarily the best system for it and whether something Bootstrap based might be even leaner and a little more performant. As jQuery mobile does have its, you know, not exactly high performance issues.

Yeah? Also a note, you have to really talk into this mic. It's very quiet. There's another really cool debugging tool for a setup like this called, well, I don't know if it's Wiener or Wiener. He says he doesn't care if it's winery or Wiener.

But I don't think you mentioned that, but it's really handy because when you start up your Cordova application, you can put a little script tag in there and then you can, through a browser, you can view the elements of your HTML, you can mess with the CSS. And it's just really handy for debugging in addition to your Android SDK and everything.

I couldn't live without winery. It's great. In fact, it's actually included in there. You just uncomment and stick in your own URL. It's totally awesome. All right. Well, go ahead and grab yourself a copy and you'd have yourself a mobile app in about 10, 15 minutes.

If you're interested, you know, let me know. I'd be glad to help walk you through some of it.