none
Bing Maps V8, t.clearState is not a function RRS feed

  • Question

  • Hi, 

    Whenever I tried to add multiple shapes to a layer, and having the Drawing tool manager shown on the map, I'll get t.clearState is not a function error. I can reproduce this with the following code sample:

    Whenever, i repeatedly mouseover and mouseout from a polygon quickly for about 20 to 30 times, the error will occurs for every mousemove.

    Could someone try this out and confirm whether it is a bug or something i'd done wrong?

    Thanks,

    Leon

    <!DOCTYPE html>
    <html>
        <head>
            <title>loadMapSyncHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script>
            <script type='text/javascript'>
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'YOUR BING MAPS KEY'
                    });
                    var center = new Microsoft.Maps.Location(-31.338853, 117.201589);
                    map.setView({
                        center: center, 
                        zoom: 15
                    });
    
                
    
                    var g1 = {"id":"fb951d2f6407bbc3e9b67452c0fba902","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":950815.3638831512,"name":"Block 05"},"geometry":{"coordinates":[[[117.201589,-31.338853],[117.210515,-31.338707],[117.210515,-31.348676],[117.200816,-31.348163],[117.201589,-31.338853]]],"type":"Polygon"}};
    
                    var g2 = {"id":"38cab20a451e29a723784bed01794952","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"description":"test","crop":"grape","area":967031.7700244302,"name":"Block 01"},"geometry":{"coordinates":[[[117.210601,-31.355273],[117.219785,-31.355273],[117.22236,-31.363995],[117.210687,-31.364068],[117.210601,-31.355273]]],"type":"Polygon"}};
    
                    var g3 = {"id":"0ad933c1f789823efb90c10abd661fe5","type":"Feature","properties":{"id":35,"assetBaseTypeId":2,"description":"Test 2","crop":"Apple","area":1010547.6343736993,"name":"Block 02"},"geometry":{"coordinates":[[[117.23506,-31.35344],[117.23506,-31.36326],[117.2385,-31.36055],[117.24742,-31.3607],[117.24742,-31.35307],[117.23506,-31.35344]]],"type":"Polygon"}};
    
                    var g4 = {"id":"9684a571942790dd667cfc217488cc3f","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":901262.1372654379,"name":"Block 03"},"geometry":{"coordinates":[[[117.216094,-31.338707],[117.228797,-31.33856],[117.228711,-31.345817],[117.217982,-31.345964],[117.216094,-31.338707]]],"type":"Polygon"}};
    
                    var g5 = {"id":"bec991bebaffce5d3c27a110d797426c","type":"Feature","properties":{"id":43,"assetBaseTypeId":2,"description":"Test df sd","area":659652.3783846833,"name":"Block 564"},"geometry":{"coordinates":[[[117.213948,-31.369125],[117.223476,-31.369125],[117.225192,-31.375207],[117.213948,-31.375061],[117.213948,-31.369125]]],"type":"Polygon"}};
    
                    
    
                    var layer = new Microsoft.Maps.Layer();
    
                    map.layers.insert(layer);
    
                    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
                        var s1 = Microsoft.Maps.GeoJson.read(g1, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s1);
    
                        var s2 = Microsoft.Maps.GeoJson.read(g2, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s2);
    
                        var s3 = Microsoft.Maps.GeoJson.read(g3, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s3);
    
                        var s4 = Microsoft.Maps.GeoJson.read(g4, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s4);
    
                        var s5 = Microsoft.Maps.GeoJson.read(g5, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s5);
                    });
    
                    Microsoft.Maps.Events.addHandler(layer, 'click', function(){console.log('click');});
    
                    Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
                        var tools = new Microsoft.Maps.DrawingTools(map);
                        tools.showDrawingManager(function (manager) {
    
                        });
                    });
                    
                }
            </script>
        </head>
        <body onload='loadMapScenario();'>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        </body>
    </html>


    • Edited by Ricky_Brundritt Monday, November 21, 2016 10:06 PM Removed users Bing Maps key from code sample
    Sunday, November 20, 2016 1:42 AM

Answers

  • Ok, the only thing I can think of is that the GeoJSON module is loading faster than the DrawingTools module and as such the layer is being added before the drawing tools are loaded. The code can be modified to wait for both modules to load before doing anything. Here is an updated version of the code:

    <!DOCTYPE html>
    <html>
        <head>
            <title>loadMapSyncHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script>
            <script type='text/javascript'>
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'YOUR BING MAPS KEY'
                    });
                    var center = new Microsoft.Maps.Location(-31.338853, 117.201589);
                    map.setView({
                        center: center, 
                        zoom: 15
                    });
    
    				 Microsoft.Maps.loadModule(['Microsoft.Maps.DrawingTools', 'Microsoft.Maps.GeoJson'], function () {
                        var tools = new Microsoft.Maps.DrawingTools(map);
                        tools.showDrawingManager();
    
    					var g1 = {"id":"fb951d2f6407bbc3e9b67452c0fba902","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":950815.3638831512,"name":"Block 05"},"geometry":{"coordinates":[[[117.201589,-31.338853],[117.210515,-31.338707],[117.210515,-31.348676],[117.200816,-31.348163],[117.201589,-31.338853]]],"type":"Polygon"}};
    
    					var g2 = {"id":"38cab20a451e29a723784bed01794952","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"description":"test","crop":"grape","area":967031.7700244302,"name":"Block 01"},"geometry":{"coordinates":[[[117.210601,-31.355273],[117.219785,-31.355273],[117.22236,-31.363995],[117.210687,-31.364068],[117.210601,-31.355273]]],"type":"Polygon"}};
    
    					var g3 = {"id":"0ad933c1f789823efb90c10abd661fe5","type":"Feature","properties":{"id":35,"assetBaseTypeId":2,"description":"Test 2","crop":"Apple","area":1010547.6343736993,"name":"Block 02"},"geometry":{"coordinates":[[[117.23506,-31.35344],[117.23506,-31.36326],[117.2385,-31.36055],[117.24742,-31.3607],[117.24742,-31.35307],[117.23506,-31.35344]]],"type":"Polygon"}};
    
    					var g4 = {"id":"9684a571942790dd667cfc217488cc3f","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":901262.1372654379,"name":"Block 03"},"geometry":{"coordinates":[[[117.216094,-31.338707],[117.228797,-31.33856],[117.228711,-31.345817],[117.217982,-31.345964],[117.216094,-31.338707]]],"type":"Polygon"}};
    
    					var g5 = {"id":"bec991bebaffce5d3c27a110d797426c","type":"Feature","properties":{"id":43,"assetBaseTypeId":2,"description":"Test df sd","area":659652.3783846833,"name":"Block 564"},"geometry":{"coordinates":[[[117.213948,-31.369125],[117.223476,-31.369125],[117.225192,-31.375207],[117.213948,-31.375061],[117.213948,-31.369125]]],"type":"Polygon"}};
    
    					var layer = new Microsoft.Maps.Layer();
    
    					map.layers.insert(layer);
    
    					var s1 = Microsoft.Maps.GeoJson.read(g1, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s1);
    
    					var s2 = Microsoft.Maps.GeoJson.read(g2, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s2);
    
    					var s3 = Microsoft.Maps.GeoJson.read(g3, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s3);
    
    					var s4 = Microsoft.Maps.GeoJson.read(g4, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s4);
    
    					var s5 = Microsoft.Maps.GeoJson.read(g5, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s5);
    
    					Microsoft.Maps.Events.addHandler(layer, 'click', function(){console.log('click');});
                    });                
                }
            </script>
        </head>
        <body onload='loadMapScenario();'>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Wednesday, November 23, 2016 5:32 PM
  • Ok, I managed to get it to occur some times. I took a look at the code throwing the error and this is related to one of the bugs the team found earlier when looking into this. The modified code sample I provided above made it a bit harder to reproduce the error, but the underlying issue is still there, which the team is aware of an plans to fix in one of the upcoming updates. I don't have a timeline for this at this time, but will likely be fixed in January or February.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Tuesday, November 29, 2016 11:31 PM
    • Marked as answer by de5a1n7 Wednesday, November 30, 2016 12:09 AM
    Tuesday, November 29, 2016 11:31 PM

All replies

  • After a bunch of testing I managed to reproduce this issue in the desktop version of Chrome. IE11, Firefox and the mobile version of Chrome all worked without any issues. I will pass this on to the dev team for investigation. I did however find that if you add the shapes after the drawing tools have been loaded, the issue is resolved:

    <!DOCTYPE html>
    <html>
        <head>
            <title>loadMapSyncHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script>
            <script type='text/javascript'>
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'YOUR BING MAPS KEY'
                    });
                    var center = new Microsoft.Maps.Location(-31.338853, 117.201589);
                    map.setView({
                        center: center, 
                        zoom: 15
                    });
    
    				 Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
                        var tools = new Microsoft.Maps.DrawingTools(map);
                        tools.showDrawingManager(function (manager) {
    
                        });
                   
                
    
                    var g1 = {"id":"fb951d2f6407bbc3e9b67452c0fba902","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":950815.3638831512,"name":"Block 05"},"geometry":{"coordinates":[[[117.201589,-31.338853],[117.210515,-31.338707],[117.210515,-31.348676],[117.200816,-31.348163],[117.201589,-31.338853]]],"type":"Polygon"}};
    
                    var g2 = {"id":"38cab20a451e29a723784bed01794952","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"description":"test","crop":"grape","area":967031.7700244302,"name":"Block 01"},"geometry":{"coordinates":[[[117.210601,-31.355273],[117.219785,-31.355273],[117.22236,-31.363995],[117.210687,-31.364068],[117.210601,-31.355273]]],"type":"Polygon"}};
    
                    var g3 = {"id":"0ad933c1f789823efb90c10abd661fe5","type":"Feature","properties":{"id":35,"assetBaseTypeId":2,"description":"Test 2","crop":"Apple","area":1010547.6343736993,"name":"Block 02"},"geometry":{"coordinates":[[[117.23506,-31.35344],[117.23506,-31.36326],[117.2385,-31.36055],[117.24742,-31.3607],[117.24742,-31.35307],[117.23506,-31.35344]]],"type":"Polygon"}};
    
                    var g4 = {"id":"9684a571942790dd667cfc217488cc3f","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":901262.1372654379,"name":"Block 03"},"geometry":{"coordinates":[[[117.216094,-31.338707],[117.228797,-31.33856],[117.228711,-31.345817],[117.217982,-31.345964],[117.216094,-31.338707]]],"type":"Polygon"}};
    
                    var g5 = {"id":"bec991bebaffce5d3c27a110d797426c","type":"Feature","properties":{"id":43,"assetBaseTypeId":2,"description":"Test df sd","area":659652.3783846833,"name":"Block 564"},"geometry":{"coordinates":[[[117.213948,-31.369125],[117.223476,-31.369125],[117.225192,-31.375207],[117.213948,-31.375061],[117.213948,-31.369125]]],"type":"Polygon"}};
    
                    
    
                    var layer = new Microsoft.Maps.Layer();
    
                    map.layers.insert(layer);
    
                    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
                        var s1 = Microsoft.Maps.GeoJson.read(g1, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s1);
    
                        var s2 = Microsoft.Maps.GeoJson.read(g2, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s2);
    
                        var s3 = Microsoft.Maps.GeoJson.read(g3, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s3);
    
                        var s4 = Microsoft.Maps.GeoJson.read(g4, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s4);
    
                        var s5 = Microsoft.Maps.GeoJson.read(g5, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
                        layer.add(s5);
                    });
    
                    Microsoft.Maps.Events.addHandler(layer, 'click', function(){console.log('click');});
    
                    });                
                }
            </script>
        </head>
        <body onload='loadMapScenario();'>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        </body>
    </html>
    Adding shapes before loading the drawing tools shouldn't throw an error, so I'll have the team look into that.

    [Blog] [twitter] [LinkedIn]

    Monday, November 21, 2016 10:06 PM
  • Hi Ricky, 

    Thanks for investigating this.

    For your information, I tried to load the drawing module first before adding the shapes as suggested in your reply, however doing this does not prevent the error, I still get the error after mouseover the polygon for a few times.

    The Chrome browser that I'm using is Desktop Version 54.0.2840.99 m

    Cheers, 

    Leon

    Tuesday, November 22, 2016 12:24 PM
  • I'm using the exact same version of Chrome and not seeing this issue with the revised code. Try clearing your cache.

    The team had a quick look at this and verified that the revised code would resolve the issue.


    [Blog] [twitter] [LinkedIn]

    Tuesday, November 22, 2016 8:32 PM
  • Hi Ricky, 

    I tried and tried again with cache disabled but i still getting the t.clearState is not a function error.

    Could you please have a look at the code in yours previous reply again? I copied the exact code from your reply but I'm still getting the same error.

    Thanks,

    Leon 

    Wednesday, November 23, 2016 12:25 PM
  • Ok, the only thing I can think of is that the GeoJSON module is loading faster than the DrawingTools module and as such the layer is being added before the drawing tools are loaded. The code can be modified to wait for both modules to load before doing anything. Here is an updated version of the code:

    <!DOCTYPE html>
    <html>
        <head>
            <title>loadMapSyncHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script>
            <script type='text/javascript'>
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'YOUR BING MAPS KEY'
                    });
                    var center = new Microsoft.Maps.Location(-31.338853, 117.201589);
                    map.setView({
                        center: center, 
                        zoom: 15
                    });
    
    				 Microsoft.Maps.loadModule(['Microsoft.Maps.DrawingTools', 'Microsoft.Maps.GeoJson'], function () {
                        var tools = new Microsoft.Maps.DrawingTools(map);
                        tools.showDrawingManager();
    
    					var g1 = {"id":"fb951d2f6407bbc3e9b67452c0fba902","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":950815.3638831512,"name":"Block 05"},"geometry":{"coordinates":[[[117.201589,-31.338853],[117.210515,-31.338707],[117.210515,-31.348676],[117.200816,-31.348163],[117.201589,-31.338853]]],"type":"Polygon"}};
    
    					var g2 = {"id":"38cab20a451e29a723784bed01794952","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"description":"test","crop":"grape","area":967031.7700244302,"name":"Block 01"},"geometry":{"coordinates":[[[117.210601,-31.355273],[117.219785,-31.355273],[117.22236,-31.363995],[117.210687,-31.364068],[117.210601,-31.355273]]],"type":"Polygon"}};
    
    					var g3 = {"id":"0ad933c1f789823efb90c10abd661fe5","type":"Feature","properties":{"id":35,"assetBaseTypeId":2,"description":"Test 2","crop":"Apple","area":1010547.6343736993,"name":"Block 02"},"geometry":{"coordinates":[[[117.23506,-31.35344],[117.23506,-31.36326],[117.2385,-31.36055],[117.24742,-31.3607],[117.24742,-31.35307],[117.23506,-31.35344]]],"type":"Polygon"}};
    
    					var g4 = {"id":"9684a571942790dd667cfc217488cc3f","type":"Feature","properties":{"id":0,"assetBaseTypeId":2,"area":901262.1372654379,"name":"Block 03"},"geometry":{"coordinates":[[[117.216094,-31.338707],[117.228797,-31.33856],[117.228711,-31.345817],[117.217982,-31.345964],[117.216094,-31.338707]]],"type":"Polygon"}};
    
    					var g5 = {"id":"bec991bebaffce5d3c27a110d797426c","type":"Feature","properties":{"id":43,"assetBaseTypeId":2,"description":"Test df sd","area":659652.3783846833,"name":"Block 564"},"geometry":{"coordinates":[[[117.213948,-31.369125],[117.223476,-31.369125],[117.225192,-31.375207],[117.213948,-31.375061],[117.213948,-31.369125]]],"type":"Polygon"}};
    
    					var layer = new Microsoft.Maps.Layer();
    
    					map.layers.insert(layer);
    
    					var s1 = Microsoft.Maps.GeoJson.read(g1, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s1);
    
    					var s2 = Microsoft.Maps.GeoJson.read(g2, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s2);
    
    					var s3 = Microsoft.Maps.GeoJson.read(g3, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s3);
    
    					var s4 = Microsoft.Maps.GeoJson.read(g4, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s4);
    
    					var s5 = Microsoft.Maps.GeoJson.read(g5, { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
    					layer.add(s5);
    
    					Microsoft.Maps.Events.addHandler(layer, 'click', function(){console.log('click');});
                    });                
                }
            </script>
        </head>
        <body onload='loadMapScenario();'>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Wednesday, November 23, 2016 5:32 PM
  • Hi Ricky, 

    Unfortunately, I still get the same error when mouseover and mouseout repeatedly.

    Could you please have a look again?

    Thanks, 

    Leon

    Thursday, November 24, 2016 1:42 PM
  • I can't reproduce this issue. Try clearing your cache to make sure that old code isn't the issue. I have had a bunch of my developers test this on multiple browsers and none of them are able to see this issue using the code I provided above.

    [Blog] [twitter] [LinkedIn]

    Monday, November 28, 2016 7:48 PM
  • Hi Ricky, 

    Thanks for being patient.

    I had cleared the browser cache and I even copied the code and created a new html file in another computer but the same error still occurs. Some time it can takes up to about 80 to 100 times of mouse over and mouse out but if you move the mouse cursor quickly in a circular motion above 3 of the polygon, you should see the error after a short while. 

    I can do a video capture of how i reproduce the error if that would help?

    Thanks, 

    Leon


    • Edited by de5a1n7 Tuesday, November 29, 2016 1:37 PM
    Tuesday, November 29, 2016 1:36 PM
  • Ok, I managed to get it to occur some times. I took a look at the code throwing the error and this is related to one of the bugs the team found earlier when looking into this. The modified code sample I provided above made it a bit harder to reproduce the error, but the underlying issue is still there, which the team is aware of an plans to fix in one of the upcoming updates. I don't have a timeline for this at this time, but will likely be fixed in January or February.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Tuesday, November 29, 2016 11:31 PM
    • Marked as answer by de5a1n7 Wednesday, November 30, 2016 12:09 AM
    Tuesday, November 29, 2016 11:31 PM
  • Thanks Ricky, 

    Really appreciate the efforts of your whole team.

    Cheers, 

    Leon

    • Marked as answer by de5a1n7 Wednesday, November 30, 2016 12:09 AM
    • Unmarked as answer by de5a1n7 Wednesday, November 30, 2016 12:09 AM
    Wednesday, November 30, 2016 12:08 AM
  • Good news, it looks like the original issue has been resolved in the experimental branch. This fix should be in the next update to the release branch which will likely be sometime in February.

    [Blog] [twitter] [LinkedIn]

    Tuesday, January 24, 2017 7:51 PM