The “Windows 8 Modern UI” (formerly known as “Metro”) defines a new programming model for apps which supports tablets and other touch devices.

Accessing xServers from these apps is simple: Just use SOAP with C#/VB or the new JSON API (see blog post of September 2012) with JavaScript to access the xServer functions directly from a Windows 8 app. A more complex task is the integration of a “slippy map” control where the user can interact with the xMap Server visualization. This component always has a strong relation to the UI framework (i.e. WinRT), especially as Win8 apps should support mouse/keyboard interaction as well as touch gestures.

Here we present two options for building interactive Windows 8 apps with xSever functions:

1. Embed xMap in “Bing Maps SDK for Windows Store apps”

Microsoft provides a Bing Maps SDK for Windows Store apps which is based on WinRT and allows access from all WinRT programming languages (i.e. C#, VB, C++ and JavaScript). The API is flexible enough to add custom imagery content like PTV xMap Server. The control supports an empty map type, which is intended for displaying custom imagery instead of Bing Maps imagery. Another option would be to add a semi-opaque xMap Server overlay and combine Bing aerials with the xMap street map.

C# app with xMap Server as semi-opaque overlay on Bing aerials (left) and in exclusive mode (right) together with some client-side vector shapes.

This approach has the advantage that it works for any Windows 8 programming language. But it is a very new control and the API is currently restricted to some basic functions. Another restriction is that the control requires a Bing Maps key, even if it is used to display custom content only.

2. Use the Leaflet HTML5 map control

Leaflet is a quite young HTML5 (see HTML5 blog post) map control. It was built from scratch to support touch devices. The Leaflet developers added touch support for IE10 with the latest version. This works both for websites and inside a Win8 JavaScript app. The file leaflet.js can be embedded in a Visual Studio JavaScript project to run in “local context”. This allows the app to access the Leaflet API directly. The Leaflet engine is powerful and supports optimizations like the dynamic simplification of complex geometries. This can be used to display long routes on the client-side without harming performance. xMap Server can be accessed in Leaflet with the WMS adapter.

JavaScript app with xMap Server showing a route calculated with xRoute. The route is rendered client-side with the Leaflet vector API.

This approach works for JavaScript only. An option for C#/VB would be to embed Leaflet inside a WebView control, but this involves some interop overhead. On the other hand the Leaflet approach allows the code-base to be shared with web development. Leaflet offers a pleasant user experience, and even though it’s quite young, it has a very powerful API and many contributions.

Conclusion

The flexibility of PTV xMap Server allows using virtually any interactive map control. Although Windows 8 is a very young system, and its developing infrastructure is currently in the making, powerful “apps” with PTV xServers can be built right now.

Feel free to ask for detailed information or source code of the samples: contact the xServer Support Team

And of course we would really appreciate your recommendation 🙂

Further links and information:

[ratings]