none
bingmaps V8 + Typescript + requirejs as AMD loader RRS feed

  • Question

  • Hi,

    I'm not able to get bingmaps V8 loaded, no matter what I do. Its driving me crazy.

    Typescript 1.9

    Here my require config:

    require.config({
        waitSeconds: 10,
        baseUrl: "/",   
        paths: {		
            "bingmaps": "https://www.bing.com/api/maps/mapcontrol?branch=experimental",        
        },
        shim: {
            "bingmaps":{
                exports: "Microsoft"
            },
        },
    });

    I also created a definition file "bingmaps.d.ts":

    declare var bingmaps: any;
    
    declare module 'bingmaps' {
        export = bingmaps;
    }

    So now I can load bing map (for example in my app.ts):

    import Microsoft = require('bingmaps');

    But Microsoft is always undefined. I try to solve this now the last 4h and it drives me crazy.... :(

    UPDATE

    It looks like it is related to this thread.



    Regards Steffen



    Wednesday, July 27, 2016 10:37 PM

Answers

  • Here is a code sample the uses SystemJS which used AMD loader. This may help resolve this issue.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
                   
                   <script src="https://jspm.io/system@0.19.34.js"></script>
                   <script>
                   System.config({
                     defaultJSExtensions: false,
                     meta: {
                                  "BingMap": {
                                    "scriptLoad": true,
                                    "format": "global",
                                    "exports": "BingMap"
                                  }
                     },
                     map: {
                                  "BingMap": "https://www.bing.com/api/maps/mapcontrol?branch=experimental"
                     }
                   });
    
                     System.import('BingMap').then(() => {
                       setTimeout(function(){
                                                 var map = new Microsoft.Maps.Map(document.getElementById('map'), {
                                                   credentials: ''
                                                 });
                                  }, 500);
                     });
                   </script>
    </head>
    <body>
                   <div id='map'></div>
    </body>
    </html>
    


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 31, 2016 1:30 AM