Text Positioning

[plexus77]

Hi there,

I have some text that I am adding to a some interactive floorplans, while some of the attributes that I am overriding are being set properly on the text elements some are not, in particular "text-anchor" : "end".

attrs : {
    "font-size" : 10,
    "font-family" : "Montserrat",
    "text-anchor" : "end"
}

So font size and family both work fine, as do most other attributes I have tried.

Also wondering if there is a way to modify the position by providing relative values ie dx and dy?

[plexus77]

In your documentaton you mention a position attribute: Possible values : 'inner', 'right', 'left', 'top' or 'bottom', in your code however this is used to set the text-anchor attribute, the possible values for this are actually 'start', 'middle', 'end'.

I also ended up modifying your code slightly from line 420...

// Init the label related to the element
if (options.text && typeof options.text.content != "undefined") {
    // Set a text label in the area
    bbox = elem.mapElem.getBBox();
    // As you can see on the line below the options.text.position is actually the text-anchor value
    textPosition = $.fn.mapael.getTextPosition(bbox, options.text.position, options.text.margin);
    options.text.attrs["text-anchor"] = textPosition.textAnchor;

    // I have added in some handling for a dx and dy attribute.
    var dx = 0, dy = 0;
    if(typeof options.text.attrs != "undefined" && typeof options.text.attrs.dx != "undefined") dx = options.text.attrs.dx;
    if(typeof options.text.attrs != "undefined" && typeof options.text.attrs.dy != "undefined") dy = options.text.attrs.dy;
    elem.textElem = paper.text(textPosition.x + dx, textPosition.y + dy, options.text.content).attr(options.text.attrs);

    $.fn.mapael.setHoverOptions(elem.textElem, options.text.attrs, options.text.attrsHover);
    options.eventHandlers && $.fn.mapael.setEventHandlers(id, options, elem.mapElem, elem.textElem);
    $.fn.mapael.setHover(paper, elem.mapElem, elem.textElem);
    $(elem.textElem.node).attr("data-id", id);
} else {
    options.eventHandlers && $.fn.mapael.setEventHandlers(id, options, elem.mapElem);
    $.fn.mapael.setHover(paper, elem.mapElem);
}

[plexus77]

BTW Great work with the plugin, it works really well :)

[neveldo]

Hello plexus77,

You are right, in order to set the position of a text related to an area or a plotted point, you have to use the option 'position', that, indeed, sets the proper value for the "text-anchor" attribute, depending on the choosen position.

Did you saw the option 'margin', that allow to set the space between the area or the plotted point and the text ? (the default value is 10).

Maybe the additional options dx and dy to adjust finely the position of the text could be useful, so I re-open the issue. Feel free to submit a pull-request on the master branch (that has evolved a lot since the 1.1 version). Do you have any online example that use the options dx/dy you have added to your copy of Mapael ?

[plexus77]

Hi neveldo, Yes I did see the margin but as I was working with some small spaces I thought the dx/dy solution would work the best.

You can see floorplans that I am currently working on here... http://cp.psd-dev.com/our-place/

Happy to create a pull request for you, I will do that soon.

[neveldo]

Hi plexus77,

Thanks for the example and thanks a ton the PR, I will review it ASAP !!

[okwme]

hi is there any integration of this feature yet?

[neveldo]

Hello,

Unfortunately not yet. There is still a pull request open for this feature : https://github.com/neveldo/jQuery-Mapael/pull/186 made by @plexus77 . But it needs to be refactored (see comments in the PR).

We will let you know as soon as the feature will be implemented (or feel free to contribute if you can !)

[okwme]

great i think i've implemented it correctly, let me look into how to make a pull request now : )