Is there a map control for Javascript UWP apps?

Question

Is there any way to include maps in UWP Windows apps written in Javascript?

The obvious options:

• UWP map control https://msdn.microsoft.com/en-gb/windows/uwp/maps-and-location/controls-map ; all the documentation suggests this is only for XAML apps
• Legacy Windows / Windows Phone 8.x Bing maps SDK https://msdn.microsoft.com/en-us/library/hh846481.aspx ; these work but are based on the v7.0 AJAX control which will stop working in 2017
• Bing maps AJAX v8.0 or other web services; these are intended for websites and rely on externally hosted javascript, so won't work in apps

Thank you.

Answer 1

There is no built in JavaScript map API for UWP. You can however use the Bing Maps V8 map control. As you know JavaScript based Windows apps that don't use a WebView/WebBrowser restrict the use of externally hosted JavaScript files. There are two ways around this.

The first is to host your map code inside of an iframe. This works fine if your map functionality is completely contained and you don't need to programmatically make changes to the map from your main app (unlikely). UWP apps won't let you communicate between your main app and JavaScript code in an iframe.

The second is to modify how you reference the start page in your app and instead of using a local context, use a web context. To do this, open the package.appxmanifest, and add "ms-appx-web:///" before the start page value. Likely "ms-appx-web:///index.html". This will may limit your application from using some of the lower level features in JavaScript based UWP apps, like accessing the file system.

In both of these scenarios, also do the following:

• Add the following content URI's and set WinRT access to "All"; "https://.bing.com" and "https://.virtualearth.com"
• Under Capabilities, enable Location. Otherwise, hide the user location button that appears in the map.

• One your map page, it is recommended that you add the following to the head of the page:

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Neither of these solutions is perfect. The security in JavaScript based Windows UWP is the main limitation which many users have experienced with other externally host web based API's. The only real way around this is to host your JavaScript application in a web browser control and then add a communication layer between that and .NET code, and then use the .NET code to access the Windows specific API's, but if you go that route, you might as well use Apache Cordova which does exactly this for you.