none
Bing Map Migration v7 to v8 - Tile is not getting displayed in the map RRS feed

  • Question

  • Migrating maps from version 7 to version 8, the tile layers are not getting displayed in the map. Getting following error in the console :

    Uncaught TypeError: Cannot read property 'id' of www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1 Uncaught TypeError: Cannot read property 'id' of undefined
        at Function.n._clipExact (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)
        at Function.n.clip (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)
        at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)
        at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…

    I have copied the code snippet for reference. 

    thisOneMap.addDataLayer = function addDataLayer(objLayer){
        thisOneMap.strTilePath = objLayer.URL;
        var layer = thisOneMap.getNewLayer(objLayer);
        thisOneMap.map.entities.push(layer);
    }

    thisOneMap.getNewLayer = function getNewLayer(objLayer){
        var tileSize = [256,256];
        
        var tileSource = new Microsoft.Maps.TileSource({uriConstructor: thisOneMap.getTilePath, width: objLayer.tilesize[0], height: objLayer.tilesize[1] });
        var tileLayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: Number(objLayer.opacity), visible: true, downloadTimeout: 30000});
        return tileLayer;
    }

    thisOneMap.getTilePath = function getTilePath(tile){
        var arrSplitLayer = thisOneMap.strTilePath.split("quadKey=");
        var strQuadKey = "quadKey=" +  thisOneMap.tileXYToQuadKey(tile.x, tile.y, tile.levelOfDetail);
        var URL = arrSplitLayer[0] + strQuadKey + arrSplitLayer[1];
        //var URL = "http://32.64.148.208/gla6/OneMap/OneMap.Web/Home/TileService?quadKey=" + thisOneMap.tileXYToQuadKey(tile.x, tile.y, tile.levelOfDetail) + "&returnType=png&csLayerIds=Mti_Coverage_GSM";
        return URL;
    }

    thisOneMap.tileXYToQuadKey = function tileXYToQuadKey(tileX, tileY, levelOfDetail) {
        var quadKey = '';
        for (var i = levelOfDetail; i > 0; i--) {
            var digit = '0';
            var mask = 1 << (i - 1);
            if ((tileX & mask) != 0) {
                digit++;
            }
            if ((tileY & mask) != 0) {
                digit++; digit++;
            }
            quadKey += digit;
        } 
        return quadKey;
    }

    It is showing error in the bing map JS file. Code snippet pasted below. Could anyone please help me with this issue?

     n._clipExact = function(n, t) {
                for (var l = [], a = {}, f = p.fromRegionId(t).splitByInternationalDateLine(), o = [], s = [], h = [], c = [], r, e, i, u = 0; u < f.length; u++)
                    o.push(f[u].getNorth()),
                    s.push(f[u].getSouth()),
                    h.push(f[u].getEast()),
                    c.push(f[u].getWest());
                for (u = 0; u < n.length; ++u) {
                    if (r = n[u],
                    e = a[r.crs.id]   // It is showing error in this line.  I could not see crs under r object whle debugging this line
                    !e) {
                        for (e = [],
                        i = 0; i < f.length; i++) {
                            var y = r.crs.projectToY(o[i], c[i])
                              , w = r.crs.projectToY(s[i], h[i])
                              , b = r.crs.projectToX(o[i], c[i])
                              , k = r.crs.projectToX(s[i], h[i]);
                            e.push(dt.fromSides(b, k, y, w))
                        }
                        a[r.crs.id] = e
                    }



    www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1 Uncaught TypeError: Cannot read property 'id' of undefined at Function.n._clipExact (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Function.n.clip (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at i._showLabelsForFrame (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n._onLayerPrimitivesRendered (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)
    www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1 Uncaught TypeError: Cannot read property 'id' of undefined at Function.n._clipExact (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Function.n.clip (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at i._showLabelsForFrame (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n._onLayerPrimitivesRendered (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)
    www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1 Uncaught TypeError: Cannot read property 'id' of undefined at Function.n._clipExact (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Function.n.clip (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at i._showLabelsForFrame (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n._onLayerPrimitivesRendered (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)
    www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1 Uncaught TypeError: Cannot read property 'id' of undefined at Function.n._clipExact (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Function.n.clip (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at i._showLabelsForFrame (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n._onLayerPrimitivesRendered (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)
    www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1 Uncaught TypeError: Cannot read property 'id' of undefined at Function.n._clipExact (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Function.n.clip (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.getPrimitives (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at i._showLabelsForFrame (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/LabelsBundle/cj,nj/28c97678/b5c332dc.js?bu=rms+answers+Map…elRenderer*CanvasLabelRenderer*VectorLabels*LabelsPluginEnd*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n._onLayerPrimitivesRendered (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at Array.<anonymous> (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1) at n.invoke (www.bing.com/rms/MapCoreBundle/cj,nj/ac38c0ee/6fa841c8.js?bu=rms+answers+Ma…rgs*OverviewMapMode*MapAuthentication*PublicApi*InternalApi*AnonymousEnd:1)

    • Edited by AAKS1 Thursday, April 13, 2017 6:01 PM
    Thursday, April 13, 2017 6:01 PM

Answers

  • In Bing Maps a tile layer is not a shape and thus can't be added to the map using map.entities.push. You have to use map.layers.insert.

    Looking at your code I'm not sure why there is so much of it. Bing Maps supports tile layers that use quadkey, x/y/zoom format, our WMS bounding box. No need for a callback function. Here is some related docs: https://msdn.microsoft.com/en-us/library/mt712690.aspx

    thisOneMap.addDataLayer = function addDataLayer(objLayer){
        thisOneMap.strTilePath = objLayer.URL;
        var layer = thisOneMap.getNewLayer(objLayer);
        thisOneMap.map.layers.insert(layer);
    }
    
    thisOneMap.getNewLayer = function getNewLayer(objLayer){
        var tileSource = new Microsoft.Maps.TileSource({
    		uriConstructor: http://32.64.148.208/gla6/OneMap/OneMap.Web/Home/TileService?quadKey={quadkey}&returnType=png&csLayerIds=Mti_Coverage_GSM"
    	});
        var tileLayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: Number(objLayer.opacity), visible: true, downloadTimeout: 30000});
        return tileLayer;
    }


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Thursday, April 13, 2017 9:59 PM
    • Marked as answer by AAKS1 Monday, April 17, 2017 5:20 AM
    • Unmarked as answer by AAKS1 Monday, April 17, 2017 5:21 AM
    • Marked as answer by Ricky_Brundritt Tuesday, May 2, 2017 4:14 PM
    Thursday, April 13, 2017 9:59 PM
  • This is a new issue in the latest versions of Chrome. Two things to try;

    • Try setting the branch of the map control to experimental to see if this still happens. Add "&branch=experimental" to the map script URL.
    • Enable COR's on your tile server.

    [Blog] [twitter] [LinkedIn]

    Monday, April 17, 2017 10:25 PM

All replies

  • In Bing Maps a tile layer is not a shape and thus can't be added to the map using map.entities.push. You have to use map.layers.insert.

    Looking at your code I'm not sure why there is so much of it. Bing Maps supports tile layers that use quadkey, x/y/zoom format, our WMS bounding box. No need for a callback function. Here is some related docs: https://msdn.microsoft.com/en-us/library/mt712690.aspx

    thisOneMap.addDataLayer = function addDataLayer(objLayer){
        thisOneMap.strTilePath = objLayer.URL;
        var layer = thisOneMap.getNewLayer(objLayer);
        thisOneMap.map.layers.insert(layer);
    }
    
    thisOneMap.getNewLayer = function getNewLayer(objLayer){
        var tileSource = new Microsoft.Maps.TileSource({
    		uriConstructor: http://32.64.148.208/gla6/OneMap/OneMap.Web/Home/TileService?quadKey={quadkey}&returnType=png&csLayerIds=Mti_Coverage_GSM"
    	});
        var tileLayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: Number(objLayer.opacity), visible: true, downloadTimeout: 30000});
        return tileLayer;
    }


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Thursday, April 13, 2017 9:59 PM
    • Marked as answer by AAKS1 Monday, April 17, 2017 5:20 AM
    • Unmarked as answer by AAKS1 Monday, April 17, 2017 5:21 AM
    • Marked as answer by Ricky_Brundritt Tuesday, May 2, 2017 4:14 PM
    Thursday, April 13, 2017 9:59 PM
  • Hi Ricky,

    Thanks much for your reply.  I used maps.layers.insert for the tile layers and I am able to see the tile images in the map :) Have a follow up question on this. For few tile images I am getting the following error and tile is not loading.

    Access to Image has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xyz.com' is therefore not allowed access.

    Few tiles are getting displayed successfully. The tile images should cover the entire US area.  

    Thanks very much in advance!




    • Edited by AAKS1 Monday, April 17, 2017 5:34 AM
    Monday, April 17, 2017 5:33 AM
  • This is a new issue in the latest versions of Chrome. Two things to try;

    • Try setting the branch of the map control to experimental to see if this still happens. Add "&branch=experimental" to the map script URL.
    • Enable COR's on your tile server.

    [Blog] [twitter] [LinkedIn]

    Monday, April 17, 2017 10:25 PM