×

Discussion Board

Results 1 to 5 of 5

Hybrid View

  1. #1
    Registered User
    Join Date
    Oct 2012
    Posts
    4

    bug when displaying multiple ImgTileOverlays?

    Hi folks,

    I've been doing some work with the Nokia Maps Javascript API recently, and am trying to pin down a bug. Our current app uses multiple opaque ImgTileOverlays simultaneously, serving our custom image tiles on a Nokia Map. However, when more than one ImgTileOverlay is added to the map, the results are buggy and inconsistent.

    The first layer renders OK, but future layers will only render 50% of the time. If I have one layer on the map, then I add more, the new layers often won't show up. But then, if I remove the first layer, some of the additional layers will render. This bug is not reproducible, though, and only happens at random. In a minority of cases, rendering happens as it should. I've looked at the state of the nokia.maps.map.Display.overlays object, and can confirm that the ImgTileOverlay objects were all added and removed when they should be. It should also be noted that the tile overlays have transparency.

    Has anyone else seen this behaviour in their own ImgTileOverlays?

    Some more background: the serving of our custom tiles is a legacy process, and is actually just serving static image tiles from URLs. The tiles are pre-rendered in advance, based on user-uploaded files, and the underlying spatial attributes are never captured. This means that the spatial bounds of a particular ImgTileOverlay are unknown to the client, and so a tile request is made for every possible tile in the map view, for every active ImgTileOverlay. This results in a lot of tile requests that result in a 404. I don't know if this may influence the rendering of the tile layer.

    Some details for the bug
    Hardware: DESKTOP
    OS Version: WINDOWS 7 | MAC O/S | UBUNTU 12.04
    Browser and Version: IE 8-9 | FIREFOX 10 - 16 | CHROME 20-22 | SAFARI
    Steps to reproduce:
    • Create Nokia Map Display object
    • Create 2 or more valid ImgTileOverlays
    • Add multiple ImgTileOverlays (preferably sharing some overlapping spatial dimensions, covering the same town) to the Map Display object, using map.overlays.add()
    • interact with the map, and check if all layers are rendering correctly


    Actual Results: Some ImgTileOverlays render, some do not. Inconsistent results
    Expected behaviour: All tile overlays should render
    Last edited by timiyay; 2012-11-02 at 18:35.

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: bug when displaying multiple ImgTileOverlays?

    It is difficult to reproduce the bug you describe without gaining access to your tile provider URL and seeing what tile source you are using.
    I have appended a test example below which combines two overlays and it seems to work fine.
    It just seems to be a matter of altering the opacity values because the transparency can either be in the tile source or in the overlay.

    • The open street map is an opaque tile source with a translucent overlay
    • The old berlin tile source is translucent and the overlay is opaque.



    The only issue I've had is with cached images within the browser. Is it possible that your html or images need a cache-control directive?



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- 
    	Example from Nokia Maps API Playground, for more information visit http://api.maps.nokia.com
     -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
                    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
    		<title>Multiple Overlays</title>
    		
    		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
    		<style type="text/css">
    			html {
    				overflow:hidden;
    			}
    			
    			body {
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    				width: 100%;
    				height: 100%;
    				position: absolute;
    			}
    			
    			#mapContainer {
    				width: 100%;
    				height: 100%;
    				left: 0;
    				top: 0;
    				position: absolute;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="mapContainer"></div>
    		<div id="uiContainer"></div>
    		<script type="text/javascript" id="exampleJsSource">
    /////////////////////////////////////////////////////////////////////////////////////
    // Don't forget to set your API credentials
    //
    // Replace with your appId and token which you can obtain when you 
    // register on http://api.developer.nokia.com/ 
    //
    			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
    			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
    //			
    /////////////////////////////////////////////////////////////////////////////////////
    
    var mapContainer = document.getElementById("mapContainer");
    var map = new nokia.maps.map.Display(mapContainer, {
    	// initial center and zoom level of the map
    	center: [52.515, 13.405],
    	zoomLevel: 14,
    	components: [
    		// ZoomBar provides a UI to zoom the map in & out
    		new nokia.maps.map.component.ZoomBar(), 
    		// We add the behavior component to allow panning / zooming of the map
    		new nokia.maps.map.component.Behavior()
    	]
    });
    
    
    var getTileUrlBerlin = function (zoom, row, column) {
    
    
    		return "http://api.maps.nokia.com/en/playground/examples/maps/res/old_berlin_overlay_tiles/"+ zoom+ "/"+ row + "/"+ column+ ".png";
    	},
    	tileProviderOptionsBerlin = {
    		getUrl: getTileUrlBerlin, // Obligatory function
    		max:15, // The highest zoom level for the overlay.
    		min:12, // The lowest zoom level for the overlay.
    		opacity: 1, // Overlay opacity.0 is fully transparent, 1 is fully opaque.
    		alpha:true // This value tells the renderer to read the alpha channel; required if opacity is used.
    	},
    	// Create an overlay by calling the constructor for ImgTileProvider
    	oldBerlinOverlay = new nokia.maps.map.provider.ImgTileProvider(tileProviderOptionsBerlin);
    	
    // Add the overlay to the map
    map.overlays.add(oldBerlinOverlay);
    
    
    
    var getTileUrlCycle = function (zoom, row, column) {
    
    
    		return "http://a.tile.opencyclemap.org/cycle/"+ zoom+ "/"+ column + "/"+ row+ ".png";
    	},
    	tileProviderOptionsCycle = {
    		getUrl: getTileUrlCycle, // Obligatory function
    		max:15, // The highest zoom level for the overlay.
    		min:12, // The lowest zoom level for the overlay.
    		opacity: 0.5, // Overlay opacity.0 is fully transparent, 1 is fully opaque.
    		alpha:true // This value tells the renderer to read the alpha channel; required if opacity is used.
    	},
    	// Create an overlay by calling the constructor for ImgTileProvider
    	openCycleMapOverlay = new nokia.maps.map.provider.ImgTileProvider(tileProviderOptionsCycle);
    	
    // Add the overlay to the map
    map.overlays.add(openCycleMapOverlay);
    map.overlays.add(oldBerlinOverlay);
    
    
    		</script>
    	</body>
    </html>
    Note the Old Berlin source has doesn't cover the globe and since I've removed the error checking code from the getTileUrlBerlin function regularly requests 404s.

  3. #3
    Registered User
    Join Date
    Oct 2012
    Posts
    4

    Re: bug when displaying multiple ImgTileOverlays?

    Thanks for the info, Jason.

    That has given me some good ammo for trying to tackle the problem. I'll post to the thread when / if I manage to narrow down the bug.

    Thanks,

    Tim

  4. #4
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: bug when displaying multiple ImgTileOverlays?

    On further investigation, I never get any overlay problems when using DOM mode - it seem to get this problem only seems to occur in Canvas mode.
    A work around for this problem therefore would be to force the library to use the DOM
    Code:
    <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all&map=js-p2d-dom"></script>
    The ordering of the overlays seems to have some effect as well - it may be worthwhile adding a short pause between adding each overlay.

    Code:
    setTimeout( function() {
        map.overlays.add(firstOverlay);
    }, 2000);
    
    setTimeout( function() {
        map.overlays.add(secondOverlay);
    }, 4000);
    
    setTimeout( function() {
        map.overlays.add(thirdOverlay);
    }, 6000);

  5. #5
    Registered User
    Join Date
    Oct 2012
    Posts
    4

    Re: bug when displaying multiple ImgTileOverlays?

    Hi Jason,

    Thanks for following up this issue for me, you've really helped me out. This issue has reared up again, as our app is getting heavy usage at the moment, and our users are rightfully complaining about their overlays not rendering.

    Happily, forcing the Nokia Maps Javascript API into DOM mode has solved my problem, hopefully permanently. Thankyou.

    I did try your 2nd solution (using setTimeout) when I first encountered the bug, but it didn't seem to help. It doesn't seem to make a difference for me when using DOM mode either, so I'm holding off using it unless the bug re-emerges.

    I had no idea the DOM mode option even existed. Even now that I know it does exist, I can't find any reference to it in the API documentation, or using the Nokia Developer site search. Do you have any handy links to documentation that explains the details of canvas v DOM mode?

    Thanks again,

    Tim

Similar Threads

  1. Replies: 3
    Last Post: 2008-11-28, 09:35
  2. Replies: 5
    Last Post: 2007-04-09, 19:08
  3. Replies: 1
    Last Post: 2007-04-05, 19:12
  4. Replies: 0
    Last Post: 2007-02-21, 01:19
  5. multiple sms
    By matrix241 in forum Mobile Java Networking & Messaging & Security
    Replies: 0
    Last Post: 2005-05-22, 21:19

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×