none
Random Transparency on Tile Layers RRS feed

  • Question

  • Hi,

    It looks like tile layers are coming in with random opacity when you pan around, sometimes some tiles have different opacity.  when interrogating the pictures that are being served, they all have the same opacity it seems to be changing when rendering on the map.

    

    Thursday, November 7, 2019 7:38 PM

All replies

  • Hi Brock,

    can you please provide the full details of the setup here?  That is, what are the steps someone at Microsoft would have to take to see the issue you are seeing?

    Sincerely,

    IoTGirl

    Monday, November 11, 2019 5:00 PM
    Owner
  • loTGirl,

    We're using a Microsoft.Maps.TileSource object and passing an image based on quadkey from our service layer. The image is being served by our service correctly but it seems like the transparency of the images when they render on the map is different especially when the image is on the border of the map.

    Let me know if this is helpful or if you need more information.

    Thank you.

    Wednesday, November 13, 2019 3:43 PM
  • Hi Brock,

    Is there something specific or unique about the rendering step that might help us see your issue?  I assume you are following these steps, https://docs.microsoft.com/en-us/bingmaps/rest-services/directly-accessing-the-bing-maps-tiles.  the metadata step is actually very important as it will point you to the most recent tile set.  If you keep this value for an extended time you will start to get bad tiles as they age out of the current tile set.

    Can you confirm that you are calling the meta data call for each tile retrieval session?

    Sincerely,

    IoTGirl 

    Wednesday, November 13, 2019 7:36 PM
    Owner
  • loTGirl,

    We're not doing anything out of the ordinary. Here is a snippet of what we're doing.  This seems to a relatively new issue. If you provide an ftp link, I can take a video for you and try and show you whats going on.

    new Microsoft.Maps.TileSource({
    		uriConstructor: function (tile)
    		{
    			return "http://services.tradeareasystems.net/Tiles.ashx?Id=8&Quadkey=" + tile.quadKey;
    		}
    	}),
    	opacity: 1,
    	zIndex: 8000,
    	downloadTimeout: 20000,
    	animationDisplay: "hide",
    	enableCors: true
    };


    Wednesday, November 13, 2019 8:15 PM
  • Hi Brock,

    Thank you for the extra detail.  I have escalated this to the Microsoft Maps Control team for review.  I am providing them the link to this MSDN link so please don't hesitate to add more detail you think might help.

    Sincerely,

    IoTGirl

    Thursday, November 14, 2019 4:39 PM
    Owner
  • loTGirl,

    I have some more information.  It looks like it's a caching issue.  If the tile layer is rendered on the map with images containing opacity, the render fine the first time.  However as you pan it seems that the tile layer (any maybe the browser) is doubling up the image.  I added a random number generator to the end of the uriConstructor and the coloring issue went away, however when doing this, the application is not taking advantage of caching and the browser will be forced to download the same image over and over even if it already has it in cache.

    I don't believe this was an issue in the past. I'm not sure if Chrome or the map control caused this change.

    Hope this helps.

    Also, it looks like the TileSource is requesting the same quadkey multiple times on a pan when the image is not cached.

    new Microsoft.Maps.TileSource({
    		uriConstructor: function (tile)
    		{
    		     console.log(tile.quadKey);
    		}
    	}),
    	opacity: 1,
    	zIndex: 8000,
    	downloadTimeout: 20000
    };
    Produces:

    03023323003211
    0302332300321
    030233230032
    03023323003
    0302332300
    030233230
    03023323
    0302332
    030233
    03023
    0302
    030
    03
    0
    03023323003211
    0302332300321
    030233230032
    03023323003
    0302332300
    030233230
    03023323
    0302332
    030233
    03023
    0302
    030
    03
    0
    03023323003213
    0302332300321
    030233230032
    03023323003
    0302332300
    030233230
    03023323
    0302332
    030233
    03023
    0302
    030
    03
    0
    03023323003213
    0302332300321
    030233230032
    03023323003
    0302332300
    030233230
    03023323
    0302332
    030233
    03023
    0302
    030
    03
    0
    03023323003033
    0302332300303
    030233230030
    03023323003
    0302332300
    030233230
    03023323
    0302332
    030233
    03023
    0302
    030
    03
    0
    03023323003211
    0302332300321
    030233230032
    03023323003
    0302332300
    030233230
    03023323
    0302332
    030233
    03023
    0302
    030
    03
    0

    • Edited by Broc8875 Friday, December 13, 2019 8:25 PM
    Friday, December 13, 2019 8:13 PM
  • Hi Brock,

    Can you confirm that this only occurs with "chrome" based browsers?  That is the latest Edge based on Chrome / or Google Chrome and not browsers like IE?

    Sincere thanks,

    IoTGirl

    Monday, December 16, 2019 5:47 PM
    Owner
  • I tested it in Firefox and it happens there as well.
    Tuesday, December 17, 2019 6:33 PM
  • Hi Brook,

    (Sorry for the delay in responding)

    I was trying to repro the issue, but I was always getting 404 for http://services.tradeareasystems.net/Tiles.ashx?Id=8&Quadkey={quardkey}

    Can you please try this sample (Just replaced tile url) and see if you can repro your issue. Also since when did you started seeing this behavior? Will be great, if you can provide a sample, so we can try to repro and resolve the issue.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Tile Layer</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    					center: new Microsoft.Maps.Location(25, -90),
    					zoom:5});
    
    				var tileLayer = new Microsoft.Maps.TileLayer({
    						mercator: new Microsoft.Maps.TileSource({
    										uriConstructor: function (tile)
    										{
    											return "https://t.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/" + tile.quadKey + "?mkt=en-US&it=A,G,RL&shading=hill&n=z&og=640&c4w=1&src=h";
    										}}),
    										opacity: 1,
    										zIndex: 8000,
    										downloadTimeout: 20000,
    										animationDisplay: "hide",
    										enableCors: true
    					});
    				map.layers.insert(tileLayer);
                    
                }
            </script>
            <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?branch=release&key=YourBingMapsKey&callback=loadMapScenario' async defer></script>
        </body>
    </html>

    Thursday, December 19, 2019 10:44 PM
  • lotGirl,

    The sample code that I provided is using a URL that is hosted behind a pay wall in our application.

    The example that you provided does not produce the issue because the issue is only produced when the tiles that are being drawn over the map have transparency.  If you use an image source that serves images with transparency then you should be able to see that the tiles get progressively darker in random areas.

    We have been using the Bing v8 control since the the Bing v7 control was deprecated and this is a relatively new issue.

    Let me know if this helps at all or if you need more information.

    Wednesday, January 22, 2020 4:41 PM
  • Thanks for the additional info. Will further look into it.
    Wednesday, January 22, 2020 6:29 PM
  • I still can't repro the issue using transparent labels tiles drawn over mercator mapType. Can you please provide a sample of transparent tile that you are using to help repro it.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Tile Layer</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>        
        </head>
        <body>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    					center: new Microsoft.Maps.Location(25, -90),
    					mapTypeId: Microsoft.Maps.MapTypeId.mercator,
    					zoom:5});
    
    				var katrinaTileLayer = new Microsoft.Maps.TileLayer({
    						mercator: new Microsoft.Maps.TileSource({
    										uriConstructor: function (tile)
    										{
    											return "https://t.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/"+ tile.quadKey +"?mkt=en-US&it=Z,L,LA&og=649&c4w=1&cstl=vb&src=h";
    										}}),
    										opacity: 1,
    										zIndex: 8000,
    										downloadTimeout: 20000,
    										animationDisplay: "hide",
    										enableCors: true
    					});
    				map.layers.insert(katrinaTileLayer);
                    
                }
            </script>
            <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?branch=release&key=YourBingMapsKey&callback=loadMapScenario' async defer></script>
        </body>
    </html>


    Wednesday, January 22, 2020 6:46 PM
  • I'm not sure if the "https://t.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/" + tile.quadKey + "?mkt=en-US&it=Z,L,LA&og=649&c4w=1&cstl=vb&src=h" is rendering a completely transparent image but you would need to use an image that has transparency over 0% and under 100%.  I believe the images that we're using have transparency of 60%.

    Our tile server that hosts our transparent tiles that are being overlayed on the map is behind a paywall and I can't expose them.

    Let me know if there's something else that I can provide you.

    Wednesday, January 22, 2020 7:14 PM
  • Yes these are 100% transparent tiles. Will try to create new tiles with 60% opacity to repro the issue. 
    Wednesday, January 22, 2020 7:22 PM
  • Just checking in. Were you guys able to replicate?
    Thursday, January 30, 2020 3:45 PM
  • Still can't repro it. Trying to reach you via support to help resolve this issue faster.
    Monday, February 3, 2020 11:27 PM
  • Hi Broc88875,

    Can you please create a Support Case at Microsoft.com/Maps > Support > Enterprise Customer Support?  We are unable to see your issue here and will have to work with you more closely to identify the issue so we will need you to initiate contact and refer to this case when you create your support ticket.

    Sincerely,

    IoTGirl

    Monday, February 3, 2020 11:45 PM
    Owner
  • I opened a ticket here's the number: 120020424002982
    Tuesday, February 4, 2020 4:03 PM
  • Excellent! I warned them your case was coming and the Support team has already looped in Pramil. 
    Wednesday, February 5, 2020 7:03 PM
    Owner
  • I have confirmation that this issue has been fixed and is in production.
    Monday, February 17, 2020 4:18 AM
    Owner