none
V8 Web Controls Error when working with RequireJS/Durandal RRS feed

  • Question

  • I have a web application that is built on Durandal/RequireJS that currently uses the Bing Maps V7 Web Controls on 1 of the views. I'm looking at upgrading to upgrade to V8 but I've been getting errors when doing this.

    I had the <script> reference to V7 in the base index.html file but this stopped the application from loading.

    I moved the call to get V8 into the module that is using it based on Ricky Brundritt's example here. This looks to work for RequireJS but when I added the reference to my project I keep getting errors like

    http://localhost/Scripts/require.js0x800a139e - JavaScript runtime error: Mismatched anonymous define() module: function(){return SVG}http://requirejs.org/docs/errors.html#mismatch

    when I try to open the view. It looks like other modules are being cleared out after the map has loaded

    I've also tried adding es6-promise (https://github.com/stefanpenner/es6-promise) which didn't help.

    The link I'm using is http://www.bing.com/api/maps/mapcontrol?callback=loadMap

    Is there a way to get this to work?

    Wednesday, August 17, 2016 4:33 PM

Answers

  • The promise issue from before should be resolved in V8 now. The map control does load a lot of resources after the initial script file is loaded. Have you tied loading the map like this:

    require(['async!http://www.bing.com/api/maps/mapcontrol!callback'], function(){
        var map = new Microsoft.Maps.Map(document.getElementById(uniqid), { credentials: 'Your Bing Maps Key' });
        var color = new Microsoft.Maps.Color(255, 0, 56, 107);
    });


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 17, 2016 5:24 PM
  • Here is a modified version of the viewmodel which appears to work.

    require(['http://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental']);
    define(function () {
        window.loadMap = function() {
            createMap();
        }
    
        function createMap() {
            var mapDiv = document.getElementById('myMap');
            if (mapDiv) {
                var map = new Microsoft.Maps.Map(mapDiv, { credentials: 'Your Bing Maps Key' });
            }
        }
    
        return {
            displayName: 'Bing Maps Example',
            activate: function () {            
                return true;
            },
            compositionComplete: function () {
                if (Microsoft !== undefined) {
                    createMap();
                }
                return true;
            }
        };
    });


    [Blog] [twitter] [LinkedIn]

    Friday, August 19, 2016 6:07 PM
  • experimental/release branch doesn't matter for this scenario. I was just testing with experimental incase it helped solve the original issue. So you can change that back to release or remove the branch information all together which will cause it to automatically default to release.

    For the new error, if you are navigating away from your Bing Maps view, then why is this view model being triggered? Try adding some breakpoints and seeing what code in this view model is firing. When you are leaving this view none of the code in this view model should be triggered. If it is, try stepping backwards through to code to find out why.


    [Blog] [twitter] [LinkedIn]

    Monday, August 22, 2016 4:10 PM
  • The experimental branch has some fixes in it for requires, this is why it is working when in experimental. The fixes and new features in the experimental branch will be rolled into the main release branch in our next monthly update schedule for early September.

    [Blog] [twitter] [LinkedIn]

    Monday, August 29, 2016 4:53 PM

All replies

  • The promise issue from before should be resolved in V8 now. The map control does load a lot of resources after the initial script file is loaded. Have you tied loading the map like this:

    require(['async!http://www.bing.com/api/maps/mapcontrol!callback'], function(){
        var map = new Microsoft.Maps.Map(document.getElementById(uniqid), { credentials: 'Your Bing Maps Key' });
        var color = new Microsoft.Maps.Color(255, 0, 56, 107);
    });


    [Blog] [twitter] [LinkedIn]

    Wednesday, August 17, 2016 5:24 PM
  • The setup for Durandal is slightly different. 

    In main.js

    require.config({
        paths: {
            'bingMaps': '//www.bing.com/api/maps/mapcontrol?callback=loadMap'
        }
    });

    In performance.js

    define(['module1', 'module2', 'module3', 'module4', 'module5', 'module6', 'module7', 'module8', 'module9', 'module10', 'module11', 'bingMaps'], function (module1, module2, module3, module4, module5, module6, module7, module8, module9, module10, module11, bingMaps) {

    window.loadMap = function() {

    console.log('Map loaded');

    } .... });


    This doesn't work but when I change bingMaps in require.config to 

    'bingMaps': '//www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMap'

    it works sometimes

    Wednesday, August 17, 2016 5:44 PM
  • Can you provide a simple sample solution or app that reproduces this issue for us to test? This way we can ensure that we see the same errors. If the sample code is short post on here. Otherwise email me at richbrun at microsoft.com

    [Blog] [twitter] [LinkedIn]

    Thursday, August 18, 2016 3:07 PM
  • Here is a modified version of the viewmodel which appears to work.

    require(['http://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental']);
    define(function () {
        window.loadMap = function() {
            createMap();
        }
    
        function createMap() {
            var mapDiv = document.getElementById('myMap');
            if (mapDiv) {
                var map = new Microsoft.Maps.Map(mapDiv, { credentials: 'Your Bing Maps Key' });
            }
        }
    
        return {
            displayName: 'Bing Maps Example',
            activate: function () {            
                return true;
            },
            compositionComplete: function () {
                if (Microsoft !== undefined) {
                    createMap();
                }
                return true;
            }
        };
    });


    [Blog] [twitter] [LinkedIn]

    Friday, August 19, 2016 6:07 PM
  • I tried updating the example to use your solution but I am still getting an error when I try to navigate away from the Bing Maps page when I've tested it on Chrome and Firefox. The error is different. It is now 

    Uncaught TypeError: Cannot read property 'prototype' of null
        at k (http://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental:12:7096)
        at h (http://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental:12:6285)
        at h (http://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental:12:6042)
        at new Microsoft.Maps.Map (http://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental:14:4304)
        at createMap (http://localhost:8080/app/viewmodels/bingMaps.js:10:23)
        at Object.compositionComplete (http://localhost:8080/app/viewmodels/bingMaps.js:21:17)
        at Array.<anonymous> (http://localhost:8080/lib/durandal/js/composition.js:655:36)
        at http://localhost:8080/lib/durandal/js/composition.js:85:41

    I also noticed that the branch has been updated to experimental. How long does it take for changes to be added to the frozen and released branches?


    Monday, August 22, 2016 9:51 AM
  • experimental/release branch doesn't matter for this scenario. I was just testing with experimental incase it helped solve the original issue. So you can change that back to release or remove the branch information all together which will cause it to automatically default to release.

    For the new error, if you are navigating away from your Bing Maps view, then why is this view model being triggered? Try adding some breakpoints and seeing what code in this view model is firing. When you are leaving this view none of the code in this view model should be triggered. If it is, try stepping backwards through to code to find out why.


    [Blog] [twitter] [LinkedIn]

    Monday, August 22, 2016 4:10 PM
  • I made some changes to the example and it does work for me now but only on the experimental branch. I updated main.js

    requirejs.config({
        paths: {
            'text': '../lib/require/text',
            'durandal':'../lib/durandal/js',
            'plugins' : '../lib/durandal/js/plugins',
            'transitions' : '../lib/durandal/js/transitions',
            'knockout': '../lib/knockout/knockout-3.1.0',
            'bootstrap': '../lib/bootstrap/js/bootstrap',
            'jquery': '../lib/jquery/jquery-1.9.1',
            'bingMaps': '//www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMap'
        },
        shim: {
            'bootstrap': {
                deps: ['jquery'],
                exports: 'jQuery'
           }
        }
    });

    This also works when I update bingMaps.js

    //require(['http://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental']);
    define(['https://www.bing.com/api/maps/mapcontrol?callback=loadMap&branch=experimental'], function (bingMaps) {
        window.loadMap = function() {
            createMap();
        }
    
        function createMap() {
            var mapDiv = document.getElementById('myMap');
            if (mapDiv) {
                var map = new Microsoft.Maps.Map(mapDiv, { credentials: 'Your Bing Maps Key' });
            }
        }
    
        return {
            displayName: 'Bing Maps Example',
            activate: function () {            
                return true;
            },
            compositionComplete: function () {
                if (Microsoft !== undefined) {
                    createMap();
                }
                return true;
            }
        };
    });

    It says in the Map Control Branches article "Tip: Before releasing your application into production, ensure that the branch isn’t set to experimental and test against the branch you plan to use.". I have not been able to get it to work on the released branch. I would like to update our app to use V8 as soon as possible. When will this change be promoted to released/frozen?

    Monday, August 29, 2016 11:22 AM
  • The experimental branch has some fixes in it for requires, this is why it is working when in experimental. The fixes and new features in the experimental branch will be rolled into the main release branch in our next monthly update schedule for early September.

    [Blog] [twitter] [LinkedIn]

    Monday, August 29, 2016 4:53 PM
  • I have updated a single page application using Durandal/RequireJS to use Bing Maps V8 Web Controls from V7. I had hoped to include the reference to Bing Maps in the module it is used so as to not download unneeded code where possible. This works when the code has not been optimized.

    When I minify the code using the gulp-durandal Node.js package the app hangs I get this error in the console "Uncaught Error: viewmodels/bingMaps missing https://www.bing.com/api/maps/mapcontrol?callback=loadMap&setMkt=en-US&setLang=en-US"

    I have created a project on Github that includes the sample code that shows this error. If you open the index.html file using a server and go to the Bing Maps page then the app works. If you open the optimized.html file using a server and go to the Bing Maps page then the app hangs.

    Is there a reason that the optimized code is not working? Can this be fixed or do I need to find a work around?


    • Edited by Tom Conneely Wednesday, June 21, 2017 9:04 AM Link and text change
    Wednesday, June 21, 2017 9:03 AM
  • Hey Rick, thanks for a great BING API, loving it! BUT, I/the World needs better Angular support. Using Example here:

    This works, but breaks Angular:

        <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
        <script src='https://www.bing.com/api/maps/mapcontrol'></script>   

    But if referenced like this (which Angular has to be), it fails:


        <script src="</script">https://code.jquery.com/jquery-2.2.4.js"></script>
        <script type='text/javascript' src="</script">http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
        <script src='https://www.bing.com/api/maps/mapcontrol'></script>   

    With the following:

    mapcontrol:11 Uncaught TypeError: Cannot read property 'prototype' of null
        at k (mapcontrol:11)
        at n.h [as create] (mapcontrol:11)
        at e (mapcontrol:11)
        at t.l [as instance] (mapcontrol:11)
        at n.h [as create] (mapcontrol:11)
        at e (mapcontrol:11)
        at t.l [as instance] (mapcontrol:11)
        at new Microsoft.Maps.Map (mapcontrol:13)
        at ChildScope.$scope.init (maptest.html:89)
        at HTMLDocument.<anonymous> (maptest.html:96)
    k @ mapcontrol:11
    h @ mapcontrol:11
    e @ mapcontrol:11
    l @ mapcontrol:11
    h @ mapcontrol:11
    e @ mapcontrol:11
    l @ mapcontrol:11
    Microsoft.Maps.Map @ mapcontrol:13
    $scope.init @ maptest.html:89
    (anonymous) @ maptest.html:96
    fire @ jquery-2.2.4.js:3187
    fireWith @ jquery-2.2.4.js:3317
    ready @ jquery-2.2.4.js:3536
    completed @ jquery-2.2.4.js:3552

    PS. Also seems to reference raphael, so might want to fix that at the same time:

    mapcontrol:12 Uncaught invalid usage
    u @ mapcontrol:12
    r @ mapcontrol:12
    e @ mapcontrol:12
    (anonymous) @ raphael-min.js:10
    (anonymous) @ raphael-min.js:10

    Wednesday, October 18, 2017 9:48 AM