Bing Get Me There App for iOS. How did they do that?

The Bing team just recently released the Bing Get Me There App for iOS which is available here. This app was originally released to Windows Phone (available here). Bing Get Me There is a London (UK) travel app that gets people from A to B with true door-to-door directions using Bing maps and live tube updates as well as Bus, Docklands Light Rail (DLR) and Overground data, to ensure that people get the best route. Here are a couple screen shots of the application.

clip_image001clip_image002clip_image003

Now this blog post isn’t meant to be an announcement for this application but instead is meant to show how Bing Maps can be used in iOS. You might think well that’s easy, they must be using the Bing Maps iOS control. Well, that’s a reasonable assumption but you would be wrong. This is actually built using the Bing Maps V7 AJAX control. That’s right; the same map control used for creating web applications is being used to create an iOS application. This map control is built on top of HTML5 and as a result has excellent performance on mobile devices that support HTML5. In fact, it performs so well that it is as good if not better than the built in maps on iOS devices. To make things even more interesting this map control is being used inside a native iOS application which means that it can be made available to users through the marketplace.

How to create native mobile application using HTML5

So how can this be done you ask? Well there is this excellent open source framework call Apache Cordova which allows you to wrap HTML5 based applications with native code which can be used on mobile devices. There are wrappers for several different mobile platforms which means you can create a single HTML5 application and deploy it to not only iOS but also to Android, Windows Phone, Blackberry, and a number of other platforms as well. You can even deploy your application to the web as well although you will likely want to change the layout and styles. This is pretty significant as this drastically reduces development time and as a result drastically reduces development costs. The Apache Cordova has been adopted by a project called PhoneGap which has a lot of documentation and useful resources to get you started. PhoneGap was actually used to create the Bing Get Me There app. In addition these frameworks also expose functionalities like the GPS and Camera through to your HTML5 code.

One issue you may come across if you decide to develop an application using this approach is having to have all the right software and hardware needed to compile your code for the different mobile platforms. Well there is a solution for that too called PhoneGap Build which compiles the applications for you in the cloud.

Since we are on the topic of using the Bing Maps V7 AJAX control for creating native applications it is also worth mentioning that this map control is also the basis for the HTML5 version of the Bing Maps control in Windows 8 which means you could also reuse a large portion of the code you create for your mobile application to create a Windows Metro Bing Maps application for Windows 8.

How to look and feel like a mobile app

Now how do you get your HTML5 application to look and feel like a mobile application you ask? jQuery is a very common tool used on website for making JavaScript development faster and easier. There is also jQuery UI tool which can be used to add different types of animations and controls such as sliders. For mobile development there is yet another version of jQuery called jQuery Mobile. jQuery Mobile has all the JavaScript and CSS styles you need to make your HTML5 application look and feel like a mobile application. jQuery Mobile can make all your buttons and transition look identical to the ones that are in native applications

Get building!!!

If you want to create a single Bing Maps application to target multiple mobile platforms then this is the way to go. One of the best things about taking this approach is that you get access to all the features that are available in the Bing Maps V7 AJAX control such as Venue Maps and support for complex shapes. So what are you waiting for, get building!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s