Mobile Maps with WebMatrix2 and jQuery Mobile

Fig 1 – WebMatrix 2 iPhone Simulator

Some changes have been rolling out of Redmond recently. Perhaps the realization that mobile is truly capable of tipping the Windows canoe is sinking in. The underdog viewpoint is relatively new to Microsoft. The newest Azure rollout includes more versatile VM instances and lots of languages hooks.

Fig 2 – the newest Azure SDK has lots of language hooks

Github:windows plays nice with Windows Azure Websites and Microsoft offers a free website development IDE tool, WebMatrix2. This is not a replacement for Visual Studio, but it’s a great little tool for javascript UI development.

Going Mobile

There are a few ways to approach mobile development. You can develop for each of the popular platforms, but that takes a bit of effort getting the tools for iOS and Android as well as learning enough Objective-C and Android Java to be productive.

There are some tools for cross platform development like Titanium Appcelerator, which provide a runtime for translating controls written in a javascript format to native controls on the device. This requires learning new controls, IDE tools, as well as adding the runtime to your app.

Both of the above require registration and familiarity with various app store submission processes along with a fee.

3rd Way Mobile

One of the easiest ways to make a mobile map app is to just use the familiar web platform approach leveraging HTML5. Expose some data through a custom service layer or hook up to a REST API, and then use jQuery Mobile to make UI apps with HTML5 targeted to mobile clients. This won’t require an app store submission or their requisite fees.

WebMatrix adds some nice features for website development. Just install the tool and open a directory project to get started.

Fig 3 – WebMatrix2 with a MobileLocator project

WebMatrix makes it easy to check a design in most of the common browsers and mobile platforms.

Fig 4 – WebMatrix Run Control exposes multiple browser and simulator options

Mobile simulators for iPhone, iPad, and WP7 are not installed by default. Click on Gallery to check for available online extensions to WebMatrix.

Fig 5 – WebMatrix Gallery button for extensions

For mobile development a couple of “need to have” extensions are the iPhone and iPad Simulators.

Fig 6 – WebMatrix gallery options iPad and iPhone Simulators

A WP7 emulator is also available.

Fig 7 – WebMatrix Windows Phone 7 Emulator

WebMatrix extensions are not available for Android, probably due to some sort of license restriction. However, Android emulators are part of the free Android SDK install under the Android AVD manager. Android testing requires a separate emulator setup without the convenience of the WebMatrix Run list.

Fig 8 – Android emulators are part of the Android SDK install

Once the Android AVD is available, testing is just a matter of typing in the local url of a webapp site and checking for visual integrity.

jQuery Mobile

jQuery Mobile offers HTML5 javascript controls specialized for mobile devices. It abstracts away many of the variations in html5 implementation.
(See supported platform list)

jQuery Mobile makes use of specialized javascript metadata to create jQuery type controls from a single html file. Element attributes like data-role, data-rel, and data-transition add html5 objects and behaviors suited to mobile devices. The data-transition attribute adds animated transition effects. (Note, not all browsers support data-transition but fallback is benign)

<a href="index.html" data-transition="slidefade">Transition to page</a>

jQuery Mobile Theme Roller is a styling mechanism with readymade themes. This is a bit different from jQuery UI themes. Using data theme attributes ‘a’ through ‘e’, called swatches, styling propagates to all contained elements:

<div data-role="page" data-theme='b' id="foo">

Sample Mobile App
http://www.web-maps.com/MobileFinder
With jQuery Mobile the basic UI tools are available for controlling a map application such as this store finder with driving directions. Using HTML5 has the additional benefit of support across both mobile and desktop browsers. Now a useful Mobile UI can be added to a map finder service layer by just adding a page link to a consumer facing business portal.

In this sample, location points are viewed as a map or a list. Bing route and geocode services are used to get basic polyline route and turn by turn directions. Not rocket science, and with jQuery Mobile this is an easy extension geared to mobile device clients.

Fig 9 – Sample app shown in the iPad and iPhone WebMatrix simulators

Fig 10 – iPad Simulator showing a Bing generated Route

Fig 11 – iPad simulator showing the turn by turn directions view

Fig 12 – WP7 WebMatrix Emulator

Summary

The last 6 months have seen a dramatic uptick in mobile phone clients at corporate websites. Adding a mobile option lets customers access simple map finders and directions while on the road. Customers en route typically do not want to install a web app just to find nearby coffee, gas, or grocery stores carrying a particular brand of pretzels. So there is a place for leveraging HTML5 to escape the app store corral, and jQuery Mobile makes it easy.

This entry was posted in Uncategorized by admin. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>