.NET Rocks!
Road Trip Tracking

Fig 0 - Tracking a RoadTrip


Overview

Microsoft is on the move this fall. Win8 is the big news, but Visual Studio 2012, .Net 4.5, a revamped Azure, WP8, Office 2013, and even a first foray into consumer hardware, Surface Tablets (not tables), all see daylight this fall.

The Net Rocks duo, Carl Franklin and Richard Campbell, are also on the move. Carl and Richard head out this week for a whirl wind tour through 36 states in 72 days or roughly 1728 hours. The DNR Road Trip Tracking application, http://www.web-maps.com/RoadTrip2012/, keeps tabs on the .Net Rocks RV with Tweet encouragement for the road weary travelers. All are welcome to follow the DNR RV online and add Tweet comments at #dnrRoadTrip. The app gives event information and up to the minute updates of time to next show with tweets along the route. It even gives turn by turn directions for those inclined to catch the .Net Rocks RV and follow along in the real world – .NET Rocks stalking.

Technical Overview

Project Outline

Fig 1 – .Net Rocks Road Trip Tracking app project outline

Backend:

SQL Server Azure is the key resource for the DNR tracking app. GPS feeds are pushed at 1 minute intervals from a commercial Airlink GPS unit to a Windows service listening for UDP packets. This Feed Service turns incoming UDP packets into Feed records stored in SQL Azure with a geography point location and datetime stamp.

On the same system, a Twitter Query service is checking for Tweets on a 30 second interval using the Twitter REST API. Tweets are also turned into Feed records in SQL Azure. However, the geography point locations for Tweets are pulled from the latest GPS record so they are associated in time with the location of the GPS unit in the DNR RV.

Frontend:

Fig2 – Windows 8 IE10 browser showing stop and routes

On the front end, an Azure WebRole provides the UI and WCF service for communicating with the SQL Azure Feed data. In order to handle the widest spectrum of devices, this UI leverages jQuery Mobile sitting on top of HTML5. jQuery Mobile Supported Platforms

Inside the app divs (jQuery Mobile <div data-role=”page”..> ) are maps leveraging Bing Maps Ajax v7 API. The UI client also accesses Bing Geocode and Bing Route services through a proxy.

Fig 3 – IE9 on a laptop with GPS dots and Tweet icons along the way

Some more details:

Routes

Since there are several thousand points for each ‘event to event’ route, these are stored in SQL Azure as geography LineStrings. Using SQL Server spatial functions, the routes can be simplified on query for improved performance in both network latency and map rendering. SQL Azure’s geography Reduce(factor) function is a thinning algorithm that reduces the number of vertices of geography features while maintaining shape integrity. In this app the reduce factor is tied to zoomlevels of the map, thinning the number of points returned to the UI.

The map viewport is used as a bounding box STIntersect so only the visible routes are returned. Obviously Carl and Richard may find reasons to take a different route so the GPS breadcrumbs may wander from the Bing generated routes.

Tweets

Fig 4 – WebMatrix iPad simulator

The Twitter REST API queries are simple search by hashtag queries:
http://search.twitter.com/search.json?q=%23dnrroadtrip

To avoid returning lots of duplicate Tweets the search is limited by the last since_id in the Feed table. There are some caveats to REST Twitter searches:
“Search is focused on relevance and not completeness. This means that some
Tweets and users may be missing from search results

Fig 5 - webmatrix WP7 emulator

Fig 6 - iPhone simulator

GPS points

GPS points are generated every 60 seconds while the RV GPS unit is powered on. When the vehicle is off, and power is scarce, the unit still sends a packet once every 4 hours. Carl and Richard will be driving a lot of hours and there will be lots of points generated over the next 72 days and roughly 1728 hours. Assuming a 25% driving time over the duration, there could be as many as 1728/4 *60 = 25,920 GPS locations. Even Bing Maps Ajax v7 will choke trying to render this many locations.

In order to keep things more reasonable, there is another thinning algorithm used in the GPS query service. This is again tied to zoomlevel . At lower zoom levels points are thinned using a type of decimation – every 20th, 10th, 5th point, etc is kept depending on the zoomlevel. In addition only points required by the viewport bounding box are returned. Once the map is zoomed to higher resolution (zoom > 11) all of the points will be returned.

GPS map locations include a rollover infobox with time and detected speed at the location. We can all check up on Carl’s driving (moving: 86.99mph) and keep track of coffee stops (moving: 0.0 mph).

Bing Routes

Routing services are provided for user position to the latest GPS location and Stop venues selected on the map or from the Stop list. In addition to the route map a turn by turn directions list is provided as a page option. The GeoLocation API is used for identifying a user’s location for these routing requests. Geolocation API is an opt in API, so users need to allow location sharing to have their location automatically available. If allowed, getCurrentPosition returns a latitude, longitude which is run through the Bing reverse geocoding service to get an address used as the ‘from’ field for routing requests.

Fig 7 - Stop Detail with Maps.Themes.BingTheme()

Fig 8 - Bing Route Denver to Seattle Stop

Fig 9 - Bing Turn by Turn directions

jQuery Mobile

jQuery Mobile is a javascript library for abstracting away some of the complexity of supporting a large number of devices. WP7, Win8 tablets, iPads, iPhones, and Android devices are multiplying while traditional laptop and desktop systems have a number of browser choices and versions. jQuery Mobile is not perfect but it is a great help in a project that had to be ready in about ten days from start to finish.

One interesting feature of jQuery Mobile is the page transition effect. These are based on CSS3 and are not supported by all browsers. It adds a little pizazz to see slide, flip, and pop effects for page transitions.

JQuery Mobile apps do not have access to device native sensors such as accelerometer, compass, gyrometer, etc , so jQuery Mobile webapps will not have the full range of capabilities found in custom apps for Win8, WP7, iOS, and Android. However, just one web UI for all is an enticing benefit, while deployment is ordinary webapp rather than a series of more complex app store submissions. This approach allows easy updates over the course of the tour.

Fig 10 – Microsoft Way on an Android AVD emulator

Heatmaps
Collecting some locations always leads to the possibility of heatmaps. These are value gradients which are helpful for analyzing geospatial data.

Fig 11 – Tweet heatmap along tour route from Seattle to Wyoming

Maybe it’s pretty obvious where Tweets are concentrated, but how about locations of app users who share their location. Australia is hot, India is not. Guess who listens to .NetRocks! Or, at least who’s less cautious about sharing location with GeoLocation API. User heatmaps bring to mind some intriguing possibilities for monitoring use, markets, and promotion effectiveness.

Fig 12 - GeoLocation users world wide

Summary

On the Road Again

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.