none
[UWP] [HTML] [WinJS] how to use Bing Maps v8 in a HTML/JavaScript UWP RRS feed

Answers

  • Took a look at this. As you likely 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 likely 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.


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, October 19, 2016 12:54 AM
    • Marked as answer by f_up Monday, October 24, 2016 1:04 PM
    Wednesday, October 19, 2016 12:54 AM

All replies

  • I've been meaning to put together some documentation around this but haven't had a chance. I'll try and put together something this week.

    [Blog] [twitter] [LinkedIn]

    Tuesday, October 18, 2016 5:12 PM
  • Took a look at this. As you likely 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 likely 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.


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, October 19, 2016 12:54 AM
    • Marked as answer by f_up Monday, October 24, 2016 1:04 PM
    Wednesday, October 19, 2016 12:54 AM
  • Thanks for your fast reply.

    We will go with the second way. With the  invokeScriptAsync method  of the webview object you are able to invoke functions from outside ... As you said, this is everything else than a perfect solution but for now the only way within a native uwp html app to load and change bing map data. 

      

    Monday, October 24, 2016 1:13 PM