none
CurrentFrameData Error RRS feed

  • Question

  • Hi Everyone,

    Did anyone start noticing this error today? 

    "TypeError: Cannot read property 'currentFrameData' of undefined"

    In last few hours, we are receiving this error a lot. Not sure if anything has been changed from Bing side. This is coming while using - GeoData API Manager to get boundaries, Drawing Module tool.

    We are playing around with multiple layer on map, we have identified this issue in past resolved it and we have started receiving this again while there is no change in our solution (like nothing changed in code).

    Thanks in advance for help!

    Tuesday, November 21, 2017 4:29 PM

Answers

  • Ok, that helps a lot. I suspect the issue is with how you are loading the modules. When a module loads it asynchronously loads the code it needs, thus the reason why it has a callback function. If your code doesn't wait for all the modules to load then it may try to access parts of one of the modules before it is fully loaded. This would also explain why things work with a button click as the module likely has finished loading by then. To correct this you need to wait for all the modules to be loaded. There are two ways to do this, one is to nest each module load inside of each other, but that is messy and likely slow. The better way is to simply pass in an array of all the modules you want and the map control will load them in parallel and only call the callback when they have all loaded. This is a scenario we specifically optimized for as we expect many apps to use multiple modules. Here is a code sample:

    Microsoft.Maps.loadModule([
    'Microsoft.Maps.DrawingTools',
    'Microsoft.Maps.Clustering', 
    'Microsoft.Maps.Search', 
    'Microsoft.Maps.Directions', 
    'Microsoft.Maps.SpatialDataService', 
    'Microsoft.Maps.Traffic', 
    'Microsoft.Maps.SpatialMath'], function () {
    
    	//Your post module load code goes here.
    });


    [Blog] [twitter] [LinkedIn]

    Wednesday, November 22, 2017 6:34 PM

All replies

  • The last update to the main release branch was two weeks ago, so if this issue just started in the last day or two, its unlikely due to a release. If you are using the experimental branch, that branch is updated several times a day. Can you step through your code and see at which line in your app this error occurs and then provide that line and a few lines before so we have an idea of what's being done and can see if we can reproduce it.

    [Blog] [twitter] [LinkedIn]


    Tuesday, November 21, 2017 9:08 PM
  • Thanks for reply. 

    We have saved the coordinates of drawn shape using drawing tool from the Bing Maps in a field. User can re-plot the same shape using that.  We add this shape in one layer and also the pushpin in another layer. After successfully load of map it give error in console. See the below screenshot:


    As per our code, we follow below steps:

    1. First, we load the Bing Maps and after success, we load different modules of Bing map inside drawing module.

    Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {

    Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {

                clusterLayer = new Microsoft.Maps.ClusterLayer(ClusterPinColl, {

                    clusteredPinCallback: createClusteredPin

                });

            });

            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {

            });

            Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {

            });

            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {

            });

            Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {

            });

            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {

            });

    });

    2. After load of drawing module, we add draw shape layer on Bing Maps.

    var isLayerFound = false;

            //loop through the layers and find the current location

            angular.forEach(map.layers, function (layer) {

                if (layer._id == "DrawingLayer") {

                    isLayerFound = true;

                }

            });

            if (isLayerFound == false) {

                //Create a base layer to add drawn shapes.

                drawingLayer = new Microsoft.Maps.Layer("DrawingLayer");

                map.layers.insert(drawingLayer);

                //Add a click event to the base layer.

                Microsoft.Maps.Events.addHandler(drawingLayer, 'click', Read);     

            }

    3. After adding shape layer, we add pushpin layer on Bing Maps.

    //create layer object

    var pushpinLayer = new Microsoft.Maps.Layer("account");

    //create pin

                var pin = new Microsoft.Maps.Pushpin(location, {

                    icon: PushpinShape,

                    anchor: new Microsoft.Maps.Point(9, 29)

                });

               

                //insert pushpin

                pushpinLayer.add(pin);

    4. Shape is visible but pushpin layer is not visible. Drawn shape displays in dark color. See the below screenshot:

    If we zoom in or zoom out, we see same shapes in lighter color:

    The above scenario work properly when we add same shapes from button click where Bing Maps & all other files are already loaded.

    Thank You for your help!

    Wednesday, November 22, 2017 2:38 PM
  • Ok, that helps a lot. I suspect the issue is with how you are loading the modules. When a module loads it asynchronously loads the code it needs, thus the reason why it has a callback function. If your code doesn't wait for all the modules to load then it may try to access parts of one of the modules before it is fully loaded. This would also explain why things work with a button click as the module likely has finished loading by then. To correct this you need to wait for all the modules to be loaded. There are two ways to do this, one is to nest each module load inside of each other, but that is messy and likely slow. The better way is to simply pass in an array of all the modules you want and the map control will load them in parallel and only call the callback when they have all loaded. This is a scenario we specifically optimized for as we expect many apps to use multiple modules. Here is a code sample:

    Microsoft.Maps.loadModule([
    'Microsoft.Maps.DrawingTools',
    'Microsoft.Maps.Clustering', 
    'Microsoft.Maps.Search', 
    'Microsoft.Maps.Directions', 
    'Microsoft.Maps.SpatialDataService', 
    'Microsoft.Maps.Traffic', 
    'Microsoft.Maps.SpatialMath'], function () {
    
    	//Your post module load code goes here.
    });


    [Blog] [twitter] [LinkedIn]

    Wednesday, November 22, 2017 6:34 PM