Launching Citymapper Directions from Apps and the Web
- 9 years ago
Many Londoners (and now New Yorkers!) have come to trust Citymapper to figure out how to get where they’re going. However, when using other apps to find places to go, it would be handy to be able to get those places into Citymapper automatically. To help with that, we’ve opened things up so that any app or web developer can give their users a chance to jump straight to Citymapper directions with real-time departure information.
We’re happy to share the first two examples of this from our friends at Time Out and YPlan—here’s how they’ve integrated Citymapper into their apps:
Time Out has a long history of being the go-to guide to London events. They’ve just relaunched their iOS app with a lovely redesign, and they’ve added the ability to get directions to any venue in Citymapper:
YPlan is an app that helps their users discover, book in two taps and go see events happening the same night in London (and soon New York). Here’s how they’ve integrated Citymapper:
If you want to give your users the same handy access to Citymapper directions, here are the details!
Launching Citymapper from iOS and Android Apps
The Citymapper iOS and Android apps can be launched using a URL scheme that takes the user straight into directions to the specified destination. It goes like this:
citymapper://directions?startcoord=<lat>,<lon>&startname=<name>&startaddress=<address>&endcoord=<lat>,<lon>&endname=<name>&endaddress=<address>
For example, this URL will give the user directions from their current location to the lovely Abney Park cemetery and nature preserve:
citymapper://directions?endcoord=51.563612,-0.073299&endname=Abney%20Park%20Cemetery&endaddress=Stoke%20Newington%20High%20Street
Strictly speaking, you only need to include endcoord and endname, though including endaddress will add helpful detail to the Citymapper result screen.
If you want to plan a trip arriving at a certain time (for an event, or a flight), you can add an arriveby time in ISO-8601 format, for example:
citymapper://directions?endcoord=51.471493%2C-0.488334&endname=Heathrow%20Airport%20Terminal%205&arriveby=2015-05-23T11%3A00%3A57%2B01%3A00
Launching Citymapper from the Web
If you’re writing a mobile web app, we’ve also got a version of this scheme for the web too. It’s exactly the same, except you start with http://citymapper.com instead of citymapper, like so:
http://citymapper.com/directions?endcoord=51.563612,-0.073299&endname=Abney%20Park%20Cemetery&endaddress=Stoke%20Newington%20High%20StreetThis will bring the user to a web page that shows them the destination. If they’ve got the Citymapper native app, it’ll launch the user into directions in the app.
CMMapLauncher for iOS
Sometimes you just want to quickly add a “get directions” feature to your iOS app without spending a lot of time mucking about with URL parameter formatting. To help out with that, we put together a micro-library called CMMapLauncher that makes it easier to launch Citymapper, as well as Apple, Google, and several other mapping apps. You can get it here: CMMapLauncher on GitHub
The intent is to keep it small and simple so that you can use it by dropping a couple of source files into your project and adding a couple lines of code. If you know of other apps that can be launched to provide directions, we encourage you to share the details via pull request or raising an issue on the Github project.
If you’re using our URL scheme, or if you have ideas for other kinds of integrations with Citymapper, we’d love to hear from you! You can reach us at support@citymapper.com.
