Windows 8 RTM and Bing Maps

Fig 1 Windows 8 Grid App template

Windows 8 RTM was released to developers last week. Win8 with its “Metro” style UI promises to be a major reset to both the Windows OS and the Microsoft developer community. No longer called “Metro” due to some potential trademark issues, the new Win8 style is very much aimed at touch devices. It targets the full spectrum of platforms: smart phones, tablets, laptops, desktops, and servers, but touch is obviously the preferred interface.

The goal appears to be an OS that easily transitions between desktop and mobile. A worthy goal for multi device consumers who in a Microsoft world would no longer need to shift gears dramatically from one device to the next. OSs are like musical instruments, the fingerings differ from one to the next requiring an annoying shift of gestalt gears. Now that smartphones are firmly entrenched, consumers are forced to master alternative OSs and leakage out of the Microsoft OS corral is growing. Microsoft is concerned enough to take the risk of a Windows reset with Win8 Metro.

In the conventional desktop world we have Windows, Apple OS X, and Linux focused on screen, mouse, and keyboard interfaces. In the mobile world we have iOS, Android, BlackBerry OS, and WP7 focused on screen, touch, voice, and a plethora of sensors pertinent to motion. Win8 puts both into one OS, desktop and mobile, but mobile is the front man. WP8 and Win8 appear to be on a merging trajectory.

Win8 and Maps
From a mapping perspective there are again two paths, desktop and mobile (Metro)
… oh and plain old internet.

Internet
IE10 forks browser web apps as well:
(with some nice html5, css additions, … and websockets)
1) Win8 desktop IE10 – compatible desktop experience including plugins like Silverlight
2) Win8 mobile IE10 – plugin free and touch complete. Silverlight is out for mobile IE10, as is any sanctioned 3D.

There are also cosmetic differences that make desktop a compatibility version and mobile optimized for smaller form factors and touchy gestures. Bing Maps ajax v7 is slightly upgraded with a new Bing Theme module. As far as IE10 browsers, Bing Maps webapps using generic html5, css, jQuery Mobile with Bing Maps Ajax v7 will work with both IE10 branches and most any device, as well as avoiding Windows Store distribution.

Win8 Desktop – old stuff
Not much to say here. Everything I tried worked the same as usual. Bing Maps ajax v7, Bing Maps Silverlight, and Bing Maps WPF controls are all supported. Normal ClickOnce install works as before. VS2012 continues to evolve to accommodate Azure and mobile target platforms – ARM joins x86 and x64. Everything is familiar once you get to the desktop, but there can be some discovery process getting there.

Win8 Mobile – new stuff
A lot to explore here. – some media info on user experience for mobile Win8 Bing.

From a Bing Maps developer perspective there are again two paths. (Lots of dualism in the picture) ref Windows API for Metro apps
Both paths support distribution through the new Windows Store.

1) Bing Maps SDK for JavaScript – Windows 8 JavaScript API is the same as the existing Bing Maps ajax v7 API and makes transitions easy for existing ajax v7 map applications. Starting a project in VS2012 allows selection of a template with all the appropriate boilerplate. The map action is exactly the same as Bing Maps ajax v7 API.

Sample html for Bing Maps JavaScript SDK:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1024, height=768" />
    <title>BingMaps-JavaScript-SDK</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- BingMaps-JavaScript-SDK references -->
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapiModules.js"></script>

    <!-- application specific -->
    <link href="/css/default.css" rel="stylesheet">
    <script type="text/javascript"  src="/js/default.js"></script>

</head>
<body>
<div id="content">
    <div id="header"> </div>
    <div id="mapdiv"> </div>
 </div>
</body>
</html>

Fig 2 – Windows 8 JavaScript API sample

Javascript SDK event types are just the same as the existing ajax v7 API and do not include all the new sensor capabilities. However, the more interesting parts of Win8 are the multiple sensor support that requires Win8 Bing Maps SDK for Metro.

2) XAML Bing Maps control – This is the most comprehensive SDK with access to all core platform features. Bing Maps SDK for Metro style apps is still RTM Beta with final build due at the end of September. For the present Maps will be decorated with a large BETA band.

First there are some special Bing Map Keys available:

  1. Basic Windows Metro style app – Application is a Windows Metro style app that is publicly available without restriction and does not exceed 500,000 transactions of any type within a 12 month period.
  2. Enterprise Windows Metro style app – Application is a Windows Metro style app that is a public or a private application

The distinguishing capability in Bing Maps SDK for Metro style is access to sensors when available on a target platform:

Sensor classes:

  •  Accelerometer – This sensor returns G-force values with respect to the x, y, and z axes.
  • Compass – This sensor returns a heading with respect to True North and, possibly, Magnetic North.
  • Gyrometer – This sensor returns angular velocity values with respect to the x, y, and z axes
  • Inclinometer -This sensor returns pitch, roll, and yaw values that correspond to rotation angles around the x, y, and z axes, respectively.
  • LightSensor – This sensor returns the ambient-light reading as a LUX value.
  • OrientationSensor – This sensor returns a rotation matrix and a Quaternion that can be used to adjust the user’s perspective in a game application.
  • SimpleOrientationSensor – This sensor detects the current quadrant orientation of the specified device as well as its face-up or face-down status.

GeoLocation:
GPS is a subset of GeoLocation which can use fall back locations such as ip or WiFi triangulation as well as gps.

Fig 3 - Example GeoLocation lookup in Bing Maps SDK for C# .

Fig 4 Win8

Fig 4 – Win8 Bing Maps SDK Beta

Example XAML Page

<Page
    x:Class="BingMap1.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BingMap1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:bm="using:Bing.Maps">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="350" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Button x:Name="btn" Click="btnClicked" Content="Get Location" FontSize="26"/>
            <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBlock TextWrapping="Wrap" Grid.Row="0" Grid.Column="0" Style="{StaticResource BasicTextStyle}" FontSize="24" HorizontalAlignment="Left" Text="Latitude: " />
                    <TextBlock TextWrapping="Wrap" Grid.Row="1" Grid.Column="0" Style="{StaticResource BasicTextStyle}" FontSize="24" HorizontalAlignment="Left" Text="Longitude: " />
                    <TextBlock TextWrapping="Wrap" Grid.Row="2" Grid.Column="0" Style="{StaticResource BasicTextStyle}" FontSize="24" HorizontalAlignment="Left" Text="Accuracy: " />
                    <TextBlock x:Name="ScenarioOutput_Latitude" TextWrapping="Wrap" Grid.Row="0" Grid.Column="1" Style="{StaticResource BasicTextStyle}" FontSize="24" HorizontalAlignment="Right" Text="No data" />
                    <TextBlock x:Name="ScenarioOutput_Longitude" TextWrapping="Wrap" Grid.Row="1" Grid.Column="1" Style="{StaticResource BasicTextStyle}" FontSize="24" HorizontalAlignment="Right" Text="No data" />
                    <TextBlock x:Name="ScenarioOutput_Accuracy" TextWrapping="Wrap" Grid.Row="2" Grid.Column="1" Style="{StaticResource BasicTextStyle}"  FontSize="24" HorizontalAlignment="Right" Text="No data" />
                </Grid>
            </Grid>
        </StackPanel>

        <bm:Map Grid.Column="1" x:Name="map" Width="Auto" Height="Auto" MapType="Road" ZoomLevel="12" Credentials="<Bing Key Here>" >
            <bm:Map.Center>
                <bm:Location Latitude="47.62" Longitude="-122.19" />
            </bm:Map.Center>
        </bm:Map>
    </Grid>
</Page>

C# code behind

using Bing.Maps;
using System;
using System.Threading;
using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace BingMap1
{

    public sealed partial class MainPage : Page
    {
        private Geolocator _geolocator = null;
        private CancellationTokenSource _cts = null;

        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            _geolocator = new Geolocator();
        }

        private void btnClicked(object sender, RoutedEventArgs e)
        {
            GetGeolocation(sender, e);
        }

        async private void GetGeolocation(object sender, RoutedEventArgs e)
        {
            try
            {
                _cts = new CancellationTokenSource();
                CancellationToken token = _cts.Token;

                Geoposition pos = await _geolocator.GetGeopositionAsync().AsTask(token);
		  // update text
                ScenarioOutput_Latitude.Text = pos.Coordinate.Latitude.ToString();
                ScenarioOutput_Longitude.Text = pos.Coordinate.Longitude.ToString();
                ScenarioOutput_Accuracy.Text = pos.Coordinate.Accuracy.ToString();
		   // update map location
                map.SetView(new Location(pos.Coordinate.Latitude, pos.Coordinate.Longitude), 12);
            }
            catch (System.UnauthorizedAccessException ue)
            {
                ScenarioOutput_Latitude.Text = "No data";
                ScenarioOutput_Longitude.Text = "No data";
                ScenarioOutput_Accuracy.Text = "No data";
            }
            catch (TaskCanceledException te)
            {
            }
            finally
            {
                _cts = null;
            }
        }
    }
}

Fig 5 – Metro style tiles including the above BingMaps1 project

Fig 6 – Win8 Bing Maps SDK with GeoLocation and BirdsEye view

Distribution
The Windows Store is a prominent tile in the Start page. Win8 applications are vetted through a Microsoft analysis and certification process before distribution through the public Windows Store. Of course any app created in VS2012 is available as a tile in the Start Page of the development system, but getting an app to clients happens through the Windows Store. Enterprise LOB applications do have a SideLoading process to bypass the public Windows Store.

Fig 7 – Windows Store for Win8 app delivery (Sideloading is possible for Enterprise licensees)

Summary
At present Win8 is still a future affair. Developers can play, while consumers wait. Microsoft dominance of desktops will guarantee a desktop market going forward. Since neither phone nor tablet will be available to consumers with Win8 until later 4th quarter, Win8 is an OS focused on devices that may or may not generate a market. The risk is alienating a relatively loyal base of desktop users in the hope of gaining traction in the fast growing mobile market. Without a market, developers will not devote much effort to all the new stuff.

Win8 is a “do or die” gambit for Balmer, Sinofsky, and friends. Mobile is moving fast and Microsoft’s future in mobile remains in serious question. If the mobile market is entirely lost, Microsoft is headed toward a long slow Gibbonesqe decline. However, Win8 is potentially the lever required to pry Microsoft into at least a place at the mobile table. We won’t know much for a few more quarters. In the meantime steep learning curves ahead for Bing Maps devs.

Fig 8 - NASA Avg Day Temperatures over past month

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.