Category: Apps

Meet Chicago’s newest street view fleet: bikes

March 2, 2015 / / 0 Comments
Bicycle holds an iPhone to take street view-style images

This position gives the smartphone an unimpeded view of the street but prevents the user from manipulating it.

I first used the Mapillary app on iPhone last fall, in August, and I uploaded one photo, of my arm, which I can’t delete from the website. I uploaded a couple more photos from a street in Roscoe Village in November.

This week, though, I uploaded 500 photos from a three mile journey on California and Milwaukee Avenues in Chicago – streets that no one else had photographed for the Mapillary street view service.

Mapillary is an open source (sort of) street view service, originally developed in Sweden, which allows the public to contribute photos taken with their smartphone app.

What’s “sort of” about Mapillary being open source is that it appears that the company owns the photos once you upload them. People are free to use the photos to edit OpenStreetMap, or publish elsewhere – for personal use only – with attribution that adheres to Creative Commons 4.0. People who want to use the photos in a commercial application must subscribe to a pay service.

Mounting an iPhone to a bicycle

I took the jump from contributing nothing to uploading a whole lot because I bought an iPhone mount for my bicycle. After months of research – okay, chalk it up to my being lazy and it being really cold outside – I settled on the DgRock Universal Bicycle Mount from Amazon for $9. I was perplexed that there was a gap in choices between this decent $9 product and the next group, hovering around $30-40.

After three days of use, I’m satisfied, despite limitations that are present in all mounts I surveyed. The DgRock mount is solid, barely moves even as the bike bounces along Chicago’s pothole-ridden streets, and securely holds the iPhone with a strong, spring-loaded grip. It’s universal in two ways: it holds nearly any smartphone (it probably can’t hold one with a screen 5″ or larger) and it attaches to most bicycle handlebars.

The first day I used the DgRock mount Mapillary complained with a red icon that it couldn’t get a proper fix on its location and therefore it wouldn’t start photographing. Fine, I was in downtown Chicago where connecting to GPS satellites can be hard. I figured the wifi positioning system that all smartphones and tablets use would suffice.

There are problems with the mount, but I think these apply to all bicycle smartphone mounts: When the phone is in position to take photos, meaning its horizontal and level to the ground, you can’t see the screen. That’s because the screen, mounted on the handlebars, is much lower than your eyes and faces vertically, instead of angled towards your face. The only way around this, I believe, is to either get an upright bicycle (like my WorkCycles Fr8) or an adjustable lens (I can’t find any).

Smartphone mount holding an iPhone on a bicycle

This position allows the user to manipulate the smartphone but you cannot take street view-style images.

The possible position angles of the smartphone when held by the mount was my main concern as I was shopping on Amazon: The mount need to have the flexibility to position the smartphone so its rear camera could be level with the ground. Smartphone mounts, though, are made to put the device in a position to be used and viewed frequently by the bicycle rider – it was unclear if many of the other smartphone mounts could accommodate the street view angles requirement.

The DgRock has no issue moving the iPhone into the right position, as you can see in the photos from my journey (or scroll to the end). Its issue, though, is that you have to put the smartphone in “backwards” so that the claw covers up part of the screen. I call it an issue but it doesn’t disturb the mount’s primary purpose when using Mapillary – the phone still has a clear view of the street.

Even with an upright bike like mine, though, it’s difficult to see the screen. I believe that Mapillary can actually design its app to help overcome this physical limitation.

Using Mapillary

The Mapillary app has improved greatly since the first version. It allows you to delete bad or undesired photos before uploading, and it has a simpler interface to go from opening the app to making your own street view. There are a couple changes I think would improve the user experience and lead to more contributions.

I would like to be able to turn off the screen while using Mapillary to save battery life. I think that the screen could fade to black and a small white dot or halo appears frequently to remind you that it’s working. I’d also like it to chime when iOS throws the “low storage” warning. Otherwise I may be riding along, thinking Mapillary is capturing the street, when iOS had actually run out of storage 10 minutes ago.

Android versus iOS: my Chicago Bike Laws experience

November 21, 2013 / / 14 Comments
Chicago Bike Laws: dooring info

Screenshot of Chicago Bike Laws, highlighting the dooring law.

For all this talk that more people use Android, and Android has the biggest and still-growing chunk of the smartphone market (in the United States and the world), I’m not seeing that reflected in how many downloads there are of my two apps.

Chicago Bike Laws is a free app that has been available for Android (download) since November 4 and on iOS (download) since November 9, a 5-day difference. Yet the iOS version has had more installations (58) since then while people have downloaded the Android version 32 times (but 5 people removed it).

What gives? The app is exactly the same for both platforms.

Are Chicago bicyclists more likely to have iPhones? I don’t do any platform-specific promotion so you can count that out.

(The experience I’ve had with Chicago Bike Guide activity is different because the Android version came online over a year later and has always been a paid app – Android apps cannot switch between free and paid while iOS apps can. By the way, the Chicago Bike Guide is free for iOS right now and half-off for Android. The comparison is that the adoption rate is much slower for the Android version.)

Update on my work this summer: Chicago Bike Guide now on Android

October 8, 2013 / / 0 Comments

Yesterday I released the first version of my app for the Android operating system. The Chicago Bike Guide (born the Chicago Offline Bike Map) had been available for iOS since April 2012 and the most frequent question I heard was, “When will you have an Android version?” At first I was probably joking when I said it was coming soon as I had no interest in it. But things change: more people kept asking, I was slowly learning how to publish an app for Android, I bought a tablet myself on which to test it, and Android eclipsing iOS as the most dominant mobile OS had some effect.

I use PhoneGap software to compile the Chicago Bike Guide for iOS. My app is actually an HTML5 compliant website using jQueryMobile and PhoneGap allows this website to interact with some of the hardware on the iPhone (like the GPS components) and software (native notification buttons). PhoneGap compiles for Android and other operating systems, but my experience using the Android emulator put a damper on my progress.

I would install Google’s software development kit (SDK), including Eclipse, and load the app (er, website) into the emulator and it would be terribly slow. It didn’t emulate the Android experience very well. I did this twice; I don’t remember making any additional progress the second time but I probably made different progress, slightly expanding my understanding of how to make Android apps.

PhoneGap 3.0.0 came around, and its use requires focusing on the command line to build apps. In prior versions, for iOS, you would add “helper software” to Xcode but now it creates the Xcode project for you. It was easier to use this time around, as the process in this version was simpler to understand, use, and the documentation had improved. I felt it was time to try again to make an Android version so I “made the plunge” and bought the Asus MeMO Pad HD 7″ tablet from my local Micro Center.

At first I used the tablet to test my app (website) as a website, loading it over the network from my Mac’s web server. After fixing a lot of the display bugs I moved into native app testing. One command, “cordova build android”, and an APK I can email to my tablet appears 30 seconds later. This is one of the few areas where Android has iOS beat in terms of testing.

The iOS development environment requires so much setting up with developer profiles, team profiles, and other gunk I forget the names of. With Android, you simply email the ChicagoBikeGuide-debug.apk file to your device and open it in the Gmail app. Voilá.

After getting this far I stopped progress on developing for Android as I wanted to issue a new version for iOS with features and bug fixes I’d been working on since the last release in July (version 0.8.2). With that out of the way last week, and the new version waiting for Apple’s review, I worked on the Android version on Sunday and finished it today.

Did you catch that? I uploaded version 0.8.3 for iOS on October 3 and it’s been in review since then while in less than 24 hours I set up my Google Play Developer Console ($25 per year), merchant account, store listing, and started selling the Android version.

N.B. Google Play doesn’t allow you to switch the app between free and not free like the iTunes App Store does, so I cannot release it for free during a short promotional period like I did for the iOS platform.

After a sufficient period (a few days, perhaps) of no reports of it crashing, I will promote the Android version heavily.

New iOS app offers most advanced Divvy route directions

August 28, 2013 / / 0 Comments
Chicago Bike Route for iOS

Walking directions from my house to the Divvy station at the CTA California Blue Line station, and then from there to the Divvy station at LaSalle/Illinois Streets. Lastly, there’s walking directions to some arbitrary N LaSalle Street address.

Adam Gluck and Andrew Beinstein showed up at OpenGov Hack Night on July 16, 2013, to show off the technical concept of their forthcoming app for iOS devices. I looped them into the Divvy app-making progress I and others were undertaking (documented on a shared Google Doc).

They said they would make their app was going quite different from all of the eight apps for using Divvy that have since launched before theirs: it would offer directions for walking to the nearest Divvy station with available bikes, directions to the Divvy station nearest their destination with open docks, and then walking directions from that end station to their destination.

Chicago Bike Route launched Friday last week. Currently only three of the eight iOS apps released before Chicago Bike Route have routing. CBR takes directions to a new level by giving you directions from where you are to where you want to go, and not necessarily from a specific Divvy station (like my Chicago Bike Guide does). Instead, CBR gives you complete directions between origin and destination and smartly picks the nearest Divvy station with available bikes. Now, I believe most often this will just be the nearest Divvy station, period, as it’s relatively rare for a station to lack bicycles.

The app uses Google Directions and for every trip makes a maximum of three calls to their API; counts against the app’s free quota from Google. The first call gets walking directions from the origin to the nearest Divvy station with available bikes, and the second call gets bicycling directions to the Divvy station with available docks nearest the destination, and the third call (assuming the destination isn’t that Divvy station) gets walking directions from the end Divvy station to your destination. The next step, I believe, is to have the app use a prediction model to accurately choose the end Divvy station. A lot can happen at that Divvy station in the 30 minutes (or whatever) it takes to get there. It may not have open docks when you arrive.

Two other suggestions I have: an improvement to the autocomplete destination function because it didn’t recognize “Chicago city hall” or its address, “121 N LaSalle Street”; and adding a “locate me” button. Additionally I’d like them to add some basic resources to advise users on where they can get more information about Divvy or bicycling in Chicago.

Adam and Andrew are going to publish a “dock surfing” function in the app that will incorporate multiple segments on Divvy to make a trip longer than the free 30 minute period. This would probably mean a fourth call to the Google Directions API. I emailed Adam and Andrew to learn more about the app development.

Video of Beinstein and Gluck presenting their app to Hack Night. Created by Christopher Whitaker for Smart Chicago Collaborative.

Why did you make Chicago Bike Route?

We made the app because we wanted to make something civic related. We thought that Divvy was an exciting new civic program coming into existence, and we kept seeing it all over the place. It also solves a real problem in public transportation that we notice and hear about a lot living in Hyde Park called the “last mile problem.” We also had the data in our hands from having attended civic hack night at 1871 when Divvy came and we thought “let’s make a native Divvy app!” And that’s what we did. We also released a framework for interacting with the Divvy API natively for developers who don’t want to get their hands dirty playing around with the iOS frameworks.

What makes your app stand out from the pack?

I think the routing but also the simplicity of design of the app.  We wanted it to be something you could just open up and use and was like all the other mapping utilities that one has on their phone (Google Maps, Apple Maps). And that’s what we did. You open it, enter an address, and you get routed to that address. Something that people could use to get up and running with Divvy with basically no familiarity with the system.

What features are you planning for the future?

Bike surfing! Seriously though. We think that it would be a really useful feature for some people, and also help reduce the cost of using the bikes. It would be useful for the regular riders where the $2 additional charge could really add up but also if you are someone who is not part of the program and are just taking the bike out for a joy ride. It can actually get kind of expensive, since every half hour after the first hour in a half is an additional $8, rather than $4.50 for members. You would also be less familiar with the bike stations under that situation. We also need to integrate with Chicago public transportation. But, we also want to keep with the simplicity, and create a user experience with basically no learning curve, and we are a little cautious to throw something in that could complicate things.

How I created a map of Illinois Amtrak routes in TileMill in less than 30 minutes

October 22, 2012 / / 2 Comments

This interactive map was created for a Grid Chicago article to show the cities and Amtrak routes mentioned. Click and drag it around or hover your mouse on the red train station markers. 

Want to create a map like that and publish it on your own website? It’s easy. I’ll show you how to do it in less than 30 minutes. First, download the following files:

All shapefiles are from the United States Department of Transportation, Bureau of Transportation Statistics’s National Transportation Atlas 2012 edition except for Illinois places, which comes from the Census Bureau’s TIGER project.

At the end of this tutorial, you’ll have a good introduction on how to find geographic data, build a map with TileMill, style the map, and publish it for the public. Your map will not look like mine as this tutorial doesn’t describe how to add labels or use the hover/info feature.

Tutorial to make Amtrak Illinois map

  1. Unzip the four ZIP files you downloaded and move their contents into a folder, like /Documents/GIS/Amtrak Illinois/shapefiles. This is your project folder.
  2. Install TileMill and open it.
  3. Set up a project. In the Projects pane, click “New Project”. In the filename field, title it “amtrak_illinois”. Ensure that the checkbox next to “Default data” is checked – this shows a world map and helps you get your bearings (but it’s not absolutely necessary).
  4. Get familiar with TileMill’s layout. Your new project will open with the map on the left side and your Carto style code on the right side. There are four buttons aligning the left edge of your map. From top to bottom they are: Templates, Font list, Carto guide, and Layers.
  5. Add a layer. We’re going to add the four shapefile layers you downloaded. Click the “Layers” button and then click “Add layer”. In the ID field, type in “amtrak_routes”. For Datasource, browse to your project folder and find “amtrak.shp” – this file has the Amtrak route lines. Then click “Done”. Click “Save & Style”.
  6. Style that layer. When you click “Save & Style” after adding a layer, your attention will be called to the Carto style code on the right side of TileMill. A section of code with the “amtrak_routes” #selector will have been inserted with some default colors and styles. If you know CSS, you will be familiar with how to change the Amtrak routes line styles. Change the “line-color” to “#000”. After “line-color”, add a new line and insert “line-opacity: 0.5;”. This will add some transparency to the line. Press the “Save” button above the code.
  7. Add remaining layers. Repeat Step 5 and add 3 more layers: “amtrk_sta.shp” (ID field: “amtrak_stations”), “state.shp” (ID field: “states”), and “tl_2012_17_place.shp” (ID field: “illinois_cities”).
  8. Hide bus stations. The Amtrak stations layer shows bus and ferry stations as part of Amtrak’s Thruway connections. You probably don’t want to show these. In your Carto style code, rename the #selector from “#amtrak_stations” to “#amtrak_stations[STNTYPE=’RAIL’]”. That makes the following style code only apply to stations with the “rail” type. Since there’s no style definition for things that aren’t of that type, they won’t appear.

Screenshot of my map.

Prepare your map for uploading

TileMill has many exporting options. You can save it as MBTiles and publish the map for free using MapBox (TileMill’s parent), or you can export it as image files (but it won’t be interactive), or you can display the map using the Leaflet JavaScript map library (which I use for the Chicago Bike Map app). This tutorial will explain how to export MBTiles and upload to MapBox, the server I’m using to display the map at the top of this page.

  1. Change project settings. To upload to MapBox, you’ll have to export your project as MBTiles, a proprietary format. Click the “Export” button above your Carto style code and click “MBTiles”. You’ll be asked to provide a name, description, attribution, and version. Input appropriate text for all but version.
  2. Adjust the zoom levels. Adjust the number of zoom levels you want (the more you have the longer it takes to export and upload your project, and you might exceed MapBox’s free 50 MB account limit). My map has zoom levels 8-11.
  3. Adjust the bounds. You’ll then want to draw your bounds: how much of the map’s geographic extents you want to export. Zoom to a level where you can see the entire state of Illinois in your map. Hold down the Shift key and drag a box around the state, plus a buffer (so viewers don’t fall of your map when they pan to the edges).
  4. Export your map. Click Export and watch the progress! On a four-year-old MacBook it took less than one minute to export the project.
  5. Bring the export to your project folder. When export finishes, click the “Save” button and browse to your project folder. Click the file browser’s save button.
  6. Upload to MapBox. Login to MapBox’s website and click “Upload Layer”. Browse to your project folder, select the .mbtiles folder, and click “Upload file”. Upon a successful upload, your map will display.
  7. Embed it in your website. Click the “Share” button in the upper left corner of your map and copy the embed code. Paste this into the HTML source code of a webpage (or in a WordPress post) and save that (I’m not going to provide instructions on how to do that).

Now you know how to find geographic data, build a custom map using the TileMill application, begin to understand how to style it, and embed your map for the public on a website or blog.

N.B. I was originally going to use QGIS to build a map and then publish a static image before I realized that TileMill + MapBox (the website) can build a map but publish an interactive feature instead of a static image. I’m happy I went that route. However, I did use QGIS to verify the data and even create a new shapefile of just a few of the key train stations on the Lincoln Service (the centerpiece of my Grid Chicago article).