html alignment

[brettshaw]

Not sure if this is a bug or im missing something obvious

Currently when adding an HTML element to the map the alignment appears to be failing, so even though i set the alignment to be MID VERT and MID HORIZ it aligns to 'TOP LEFT'.

You can clearly see this in the attached image. The drawn circle at the same XY is correct but the HTML element added to the same XY is aligning to the top left of the icon

sample code:

Code: Select all

var html = new vector.HTML();
html.set({x:con.x,y:con.y});
html.setAlignment(VectorLayerClass.ALIGN_MID_VERT + VectorLayerClass.ALIGN_MID_HORIZ);
html.setHtml('<img id="img27448381L2D" src="./romapicons/cir1/cir10DFCA4.png" />');
html.setTopLevel(true);
vectorLayer.addElement(html);

Any ideas?

[AndreasJunghans]

Hi there,

the alignment only works when the size of the HTML element doesn't change. In your case, the image is loaded asynchronously, so the size changes from 0 to the size of the image after the element is already positioned. You need to specify a fixed width and height for your img element (via a "style"-Attribute or via CSS).

Regards,

Andreas

[brettshaw]

thanks for the info.

I had already had the sizes in the code, i took them out of the sample so it was in its simplest form, as i was convinced it was something related to map

turns out it was a sneaky 'position:absolute;' which was hiding in the CSS