bug when dislpaying multiple ImgTileOverlays?

**timiyay** · 2012-11-02, 18:15

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

**jasfox** · 2012-11-08, 11:26

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.

**timiyay** · 2012-11-08, 19:03

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

**jasfox** · 2013-01-30, 12:23

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);

**timiyay** · 2013-02-06, 18:44

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

Discussion Board

Thread: bug when dislpaying multiple ImgTileOverlays?

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Compressing multiple files or a folder with multiple files

How to create a multiple recordstore for multiple users dynamically ?

How to create a multiple recordstore for multiple users dynamically ?

How to get the multiple "NOTE" fields and multiple "ADDRESS" fields with a PIM?

multiple sms

Posting Permissions