Bay Area Bike Share - Data Challenge

I've put together an entry for the Bay Area Bike Share Data Challenge.  The challenge involved a fun data set containing individual trips and bike availability data.

It's an iOS app, because that's what I do.  Even better, it's a script in the WhirlyViz app.

Popular Trips

The Entry

My entry to the competition is the app.  More specifically, it's the Bay Area Bike Share Stats visualization within WhirlyViz.

First, go install WhirlyViz.  It's fine, I can wait.

Next, find the "Bay Area Bike Share Stats" entry.

There's instructions in the upper left.  But just go ahead and tap on things.  No one reads the instructions.

The Video

Don't have an iPad or iPhone?  It's cool, I won't tell anyone.  You can just watch the video.

The Technology

The display part here is WhirlyViz, my geospatial data display engine based on the WhirlyGlobe-Maply library.  Since moving to Javascript for the configuration files, I've put together some interesting examples.  The BABS visualization is the most complicated thus far.

I'm really liking how much control I have with the Javascript support.  I can start to tell a story with the data and point out things along the way.  I'm parsing a couple varieties of JSON from different sources, but it's all pretty seamless to the user.

The back end technology is PostgreSQL running on an Amazon ec2 instance with a simple node.js front end.  This is the first time I've bothered to stand up something like that and it was interesting.  It makes me appreciate the commercial services and what they do.

Bonus Visualization

It turns out several cities use the same format for their bike availability feed.  Look for the "City BikeShares" entry in WhirlyViz.

WhirlyViz: MapLarge Precipitation

I was turned on to MapLarge by a new client and I have to say I like what they do.  

Full disclosure:  I like what most people do.

More blue, more rain.

MapLarge

MapLarge makes a GIS platform to support those web maps all the cool kids are doing.  You feed in a bunch of data, make some queries and it gives you back tiled images.

The blue is food coloring.  2011 was a strange time.

There are a few services that do this sort of thing, I believe.  What I’ve noticed with theirs is that it’s wicked fast.  Not a bad way to distinguish yourself.

WhirlyViz Example

With the new WhirlyViz 1.3 I’ve got Javascript under the hood running things.  This makes it really easy to hook up services like MapLarge.  Their tile service is a tad different from anything else I’ve encountered, but it’s not a problem with custom scripting.

The demo is hooked up to their precipitation database.  You can query average precipitation organized by state, zip code, or county.  At the map level you can see the general trends, and tap to get a specific data value.

The precipitation demo is in the latest WhirlyViz, so scroll on down and take a look.

WhirlyViz: GeoTrellis Transit

With WhirlyViz 1.3 we have a lot more flexibility in how we talk to back end services.  I'm having a blast wiring up all sorts of interesting geospatial engines.  Today's is the GeoTrellis Transit API from Azavea.

You can outrun the zombie outbreak on a bike.

GeoTrellis Transit

You should go check out their web page, but I’ll give you the quick version.  GeoTrellis Transit provides an API for answering questions about a travelshed.  You can use it to figure out how far a commuter could get using standard modes of transportation from point A to a variety of points’ B.

Can't beat rail for getting around.

Presumably you’d use this for urban planning, decision making and such.  Seems useful and it's fun to play with in a wonky sort of way.

WhirlyViz Demo

The GeoTrellis example is right up top in WhirlyViz 1.3.  Feel free to install that and give it a go.  Tap and hold to move the travelshed’s center.

Like all the of the newer examples, the WhirlyViz configuration is controlled by Javascript.  It was fairly simple to talk to the WMS server they provide, even not explicitly using the WMS functionality in WhirlyGlobe-Maply.  Constructing the rest of the parameter string was a cinch.

MapBox Vector Tiles

I am delighted to announce support for MapBox Vector Tiles.

Vectors, vectors everywhere!

Maply 2.3 supports MapBox Vector Tiles natively.  You'll see this in the develop branch in the next couple of weeks.

Gaia GPS 9.0

The folks who make Gaia GPS have been busily switching to Maply for their display.  It's great to have them test out the map focused features and they've been steadily contributing back.

Contours!

And how they've been contributing!  Jesse Crocker put the MapBox Vector support together crazy fast.  It shares a bit of DNA with the Maply Vector Tile loader, but it's definitely it's own thing.

So can you use it?  Sure, but there are details...

MapBox Pricing

We seem to have outrun MapBox's pricing scheme on this one.  The Gaia GPS folks are in contact with MapBox so it's all copacetic, but before the app goes into production they'll be having discussions.

What that means to you, my users, is that you too need to sort it out with MapBox before you ship.  Don't be that guy.  No one likes that guy.

Odds & Ends

There's plenty more work to do here.  Jesse put together the styles Gaia GPS cares about, not the ones you care about.  That topo style is awesome, but it's not ideal for driving or walking in a city or whatever your app may do.

This one is just gratuitous

If only there were some way to get us to... oh wait!  We're contractors!  That's right, you can pay us to add Maply features or even write your app.

Jesse and I will be at State Of The Map in DC this weekend.  Drop on by the Maply table and we'll be happy to show this off.

Maply Vector Maps: Networking

I've been working on tiled vector maps for quite some time.  When we last checked in, I'd described how offline vector maps work in the new toolkit.

If this were Colorado, that would be a pot dispensary.

Well now they work over the network.

Vector Map Demo

The latest WhirlyViz supports vector maps... because of course it does.  Just install that, and select the the Sao Paulo, Brazil example.

And you're off!  That's a small sample of a larger Brazilian database I use for testing.  You can see the whole thing at State Of the Map this weekend if you're so inclined.

Implementation

This update is already checked in to the develop branch on github.  To add your own tiled vector map, all you have to do is something like this.

Adding a remote vector tile db is a multi-stage process.  Rather than making you do that, you just pass in a block to wire up the vector tiles object once it's safely created.  Trust me, it's better this way.

Next Up

I thought this was the big vector map announcement.  Turns out I was wrong.  More on that soon.  I also have a few other announcements in the queue before SOTM-US this weekend.

WhirlyViz 1.3 - Javascript Update

WhirlyViz is a geospatial visualization engine for mobile devices.  It's based on my WhirlyGlobe-Maply open source library.  With it, you can whip together a pretty data visualization for an iPad or iPhone.

I license the engine to clients, but the WhirlyViz app is free and the best demonstration of the engine itself.

Javascript

WhirlyViz is eminently configurable.  That's kind of the point, but I wasn't entirely satisfied with what we had in 1.2.  Now I know why.  With version 1.3 we've switched to Javascript.

Apple added support for JavaScriptCore in ios7.  They put together a fairly nice bridge between Objective-C and Javascript to go with it.  This gives you a clean, empty Javascript interpreter to use in your app.

That's just what I did.  WhirlyViz configuration files are now Javascript.  Whenever a user taps on something, or a remote vector tile needs to be loaded, or even when the visualization starts up you're running a Javascript function.

This example talks to a WMS server.

It's incredibly flexible and as long as it's not in the main rendering loop (good grief no!) still very fast.  There are other advantages too.

Everything Speaks JSON

These days every remote web service speaks JSON.  [Except for the ones that don't].  Using Javascript makes it much easier to decode a random JSON return value and do something visual with it.

SF Bay Area Bike Share

For example, several public bike share companies provide JSON feeds with up-to-the-minute station availability.  They have spatial data, but not as GeoJSON.  That's kind of annoying, but now easily fixed.

• We fetch the appropriate feed in the script
• Parse the JSON return and iterate through the records
• Pull out location data and anything we might want to display
• Convert the data to GeoJSON and hand it back to WhirlyViz

WhirlyViz still knows nothing about the JSON feeds from the bike share companies, it's just displaying GeoJSON with some styling info.  The script has all the smarts and, best of all, it wasn't all that much code.

Running Your Own Script

WhirlyViz has its own URL scheme for displaying data.  Refer back to this post for details.

Now you can run your own Javascript configuration file too.  Just specify it like so.

The script argument tells WhirlyViz we're running a script and the js argument tells it where to go get it.  Of course, then you have to write one of these and the documentation is... lacking.

Wrapup

You can see some of the new examples in the latest WhirlyViz update.  I'm now talking to two new geospatial data services which will get their own blog posts.

I'm very happy with this approach and I'll be writing up the Javascript functions shortly.  You can kind of figure it out from the examples, but documentation is important.

In the mean time, if you have a neat visualization you'd like to see on mobile, hit me up and we'll talk.