[moved] Mobile mh5 markers and infobubbles

[ltomuta]

The error

"Uncaught TypeError: Cannot read property 'cartopoi' of undefined"

comes from infoBubble:, it should be infobubble: (documentation bug?)

[m00zg]

Thanks, that helps! Listeners are now called.

But now in my more complicated code (not the one I pasted) after clicking a bit on map I'm getting "INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value. -- From line 295 of http://api.maps.nokia.com/mobile/0.1.9/lib/mh5.js" in Android WebView , and in Chrome "Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 ".

[ltomuta]

I remember seeing that kind of errors as well, but I don't remember how I got past them. I'm only scratching the surface when it comes to web apps so I hope Leo can give you some better advice.

[ZieL]

Thanks Lucian for your answer. It's really infobubble in the version 0.1.9 and it's a bug. We'll change it to infoBubble.
@ m00zg:
Could you describe more precisely the status of the map:
- does it have pois already;
- what are the steps to reproduce this error.

At the first sight it looks like the size (width and height) of the poi are calculated wrong (line 295: D.drawImage(q.image,n-(h=q.width/ha)/2,p-(j=q.height/ha)/2,h,j)).
What are the poi images you use? Are they the default ones?

Leo

[m00zg]

You can simply reproduce the error using the full code I've pasted yesterday. Just change infoBubble into infobubble. And try longpress on map. The default bubble should be shown, but all I get is only the error (set of the same errors):
Uncaught Error: INVALID_STATE_ERR: DOM Exception 11
There aren't any POI on map.

But it's the same if I add my custom POI (with custom icon) and click on it. Poiclick function is empty. No infoBubble is shown, and I get the same error.

[ZieL]

It's a bug in our code. Currently, if you define listeners on the infobubble you have to define the content property as well. We'll take care of this bug in the next release, but for now please use this:

infobubble: {
                    content: ["title"],//depending on the layout of your infobubble
                    listeners: {
                        click: function(e){},
                        leftclick: function(e){},
                        rightclick: function(e){}
                    }
                }

[m00zg]

Thank you. Now it works correctly

[pamepros]

Can I use HTML code in the infobubble like this:
http://www.developer.nokia.com/Commu...ble_on_the_map

I know that documentation is for the web api and not the mobile one, is there any way to use it in mobile? Maybe change the layout of the infobubble?

[ZieL]

Hi,

Unfortunately, right now it's not provided by the framework. Of cause I'll take care that this feature comes in our backlog.

Though there is a non-straightforward way to do it, but that means you would need to do the entire work by yourself:
- create a HTMLElement with the content you would like to show
- place it on the map. For this you could use the helper function which is not officially public yet: map._map.geoToPoint, which expects an object with latitude, longitude properties and returns proper x,y coordinates of the entire world on the current zoom level (NOT map canvas). That's why they are so huge. To convert them to the canvas coordinates you can use the canvas center which is also the map center at the same time.
centerCoordWorld = map._map.geoToPoint(map.center);
centerCoordCanvas = {x: map.size.width / 2, y: map.size.height / 2);
Having this information it's just a simple math to get canvas coordinates for your specific latitude, longitude.

- register for touchstart, touchmove, toucheend events to track map movements and move your custom infobubble together with the map.

Please let us know if you saw any noticeable performance issues.

Thx,
Leo

[pamepros]

Thanks Leo for your help.
Adding html content to the infobubble looks complicated so I decided to use the conventional ones.
Just a quick question, can I change the font size of the text displayed in the bubble?
Thx
Pam

[ZieL]

Hi Pam,

unfortunately, also this is not possible in the current version. What you can do is to draw your infobubble on the canvas and pass the canvas as "image" property of the infobubble parameters to the showInfobubble.

Using your example below:

var myCanvas = document.createElement("canvas");
myCanvas .height = 120; 
myCanvas .width = 90;
var ctx = myCanvas .getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 50);  

......
listeners:{
	"poiclick": function(e) {

		var params = {
			content: ["title","description","more"],
			image: myCanvas,
			listeners:{
				click: function(e){}
			},
			maxWidth:340
		}
		if(e.data[0].data.state=="FLUENT"){
			params.left = "img/verde.png";	
		}
		if(e.data[0].data.state=="CONGESTED"){
			params.left = "img/amarillo.png";	
		}
		if(e.data[0].data.state=="DELAYED"){
			params.left = "img/rojo.png";	
		}
		if(e.data[0].data.interrupcion=="TOTAL"){
			params.right = "img/corte_total.png";	
		}
		if(e.data[0].data.interrupcion=="PARTIAL"){
			params.right = "img/corte_parcial.png";	
		}
		this.showInfoBubble(e.data[0],params,function(b){console.log(b)});
		e.preventDefault();
	}
}

As you might have noticed in this case you can specify the click handler only. That means if you have several active parts of the infobubble (e.g. right, middle, left) you will need to calculate the right part based on the coordinates given by the event parameter of the click function.

Leo