html alignment

This forum deals with any kind of web based client technology, whether it is the well known java script based Ajax servlet or the upcoming approaches such as Leaflet, OpenLayers and so on.

html alignment

Postby brettshaw » Fri Mar 31, 2017 10:19 am

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?
Attachments
map.png
Brett Shaw
Software Developer - Route Optimiser Online
PTV GROUP - United Kingdom
User avatar
brettshaw
 
Posts: 7
Joined: Tue Mar 21, 2017 2:08 pm

Re: html alignment

Postby AndreasJunghans » Fri Mar 31, 2017 1:51 pm

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
AndreasJunghans
 
Posts: 11
Joined: Tue May 13, 2014 3:28 pm

Re: html alignment

Postby brettshaw » Mon Apr 03, 2017 9:06 am

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
Brett Shaw
Software Developer - Route Optimiser Online
PTV GROUP - United Kingdom
User avatar
brettshaw
 
Posts: 7
Joined: Tue Mar 21, 2017 2:08 pm


Return to PTV Webclients (Ajax, Leaflet, OpenLayers, WMS, ...) (Admin=LNM)

cron