---
title: "KLTraffic, now on the iPhone"
description: "KLTraffic is on the iPhone now, and the Android version has a new design. It's the oldest app we have, the one we sent Nokia back in 2009."
url: "https://rayson.me/writing/kl-traffic-on-the-iphone/"
category: "Projects"
author: "Janarayson"
published: 2012-11-26
---

KLTraffic is on the iPhone now, and the Android version has a new design. Add Symbian, MeeGo and Windows Phone, and it's on five platforms now.

It's the oldest app we have. After Nokia's [One Connected World](/writing/the-break-2009/) in 2009, KLTraffic was the app Ow and I spent a week on and sent to Nokia ... the one that got us into Forum Nokia Pro. We did an Android version the same year, and since then it's come along with us everywhere. It was one of our [five apps on the N8](/writing/five-apps-on-the-n8/), and a widget on the N8's home screen at our [first booth](/writing/nokia-connection-2010/). Earlier this year the Windows Phone version won Best UX and Best Use of WP Features at the Lumia League developer competition, and the prize, an Xbox 360 with Kinect, now lives in our office.

<Screens
  screens={[
    { src: android2010Routes, alt: 'The old KLTraffic for Android: a list of roads, Federal Highway, Jln Ampang, Jln Bangsar, Jln Duta, Jln Gombak, Jln Istana and Jln Kinabalu, each with an arrow button' },
    { src: android2010Camera, alt: 'The old Android camera screen for Jln Tun Razak, a night picture from the camera with an ITIS logo and the caption Jalan Tun Razak near Istana Budaya' },
  ]}
  caption="On Android, October 2010."
/>

<Screens
  screens={[
    { src: wpTweets, alt: 'KLTraffic for Windows Phone, a tweets page in yellow headings with traffic tweets from kltrafficupdate and TrafficDotMy' },
    { src: wpFavourites, alt: 'The Windows Phone favourites page, four camera pictures for Federal Highway, the KL-Seremban Expressway and MRR2' },
    { src: wpMenu, alt: 'The Windows Phone menu: report, sign in, settings, suggestions and about kltraffic, with KLTRAFFIC written sideways' },
  ]}
  caption="On Windows Phone."
/>

## The cameras

It works the same as on the N8. You pick a road and see the traffic camera pictures for it, with arrows showing which way each side is going, and there's a tab of tweets from @kltrafficupdate, @TrafficDotMy, @plustrafik and @astrotraffic. The pictures for the city roads come from ITIS, KL's Integrated Transport Information System, which DBKL set up in 2005 with the highway authority, JKR and the transport ministry.

This time round we added the highways too. LLM, the Malaysian Highway Authority, has a mobile site with camera pictures and traffic updates for each highway ... AKLEH, ELITE, KESAS, LDP, NKVE, SPRINT, SMART and the rest. We turn those pages into a JSON feed for the app with Dapper.

## The new Android design

Google put out its Android design guidelines in January, for Android 4, and the new KLTraffic follows them. Routes, favourites and tweets are tabs under the action bar, and the buttons sit in a split action bar. In favourites you can select a few cameras at once and remove them. It's built on ActionBarSherlock, so phones still on Android 2.3 get the same action bar.

The report screen is where you post your own update. It's tagged #kltraffic, you can add your location, and it goes to Facebook, Twitter or both.

<Screens
  screens={[
    { src: androidRoutes, alt: 'The new Android design: a dark action bar with the KLTraffic logo, tabs for Routes, Favourites and Tweets, and a list of roads starting with Federal Highway' },
    { src: androidCamera, alt: 'The new Android camera screen for Federal Highway near PJ Hilton, a camera picture dated 29 August 2012 with red arrows labelled To Klang and To KL, and a yellow star to favourite it' },
    { src: androidReport, alt: 'The new Android report screen: a text box starting with #kltraffic and 130 characters left, switches for Include location, Share to Facebook and Share to Twitter, and a Post Report button' },
  ]}
  caption="The new Android design, August 2012."
/>

## The iPhone

On the iPhone the tabs go at the bottom, the way iPhone apps do it ... routes, favourites, tweets and more. The highways are in the list with the city roads, and there's a taller splash screen for the iPhone 5.

<Screens
  screens={[
    { src: iphoneRoutes, alt: 'KLTraffic on the iPhone: a list starting with AKLEH, ELITE, Federal Highway, Federal Route 2 and Jln Duta, with tabs for routes, favourites, tweets and more at the bottom' },
    { src: iphoneCamera, alt: 'The iPhone camera screen for Jln Duta, a camera picture with red arrows labelled To NKVE Jln Segambut and To Sprint, Jln Damansara, and a star to favourite it' },
    { src: iphoneTweets, alt: 'The iPhone tweets tab, traffic updates in Malay from TrafficDotMy and retweets from kltrafficupdate' },
  ]}
  caption="On the iPhone, November 2012."
/>