Label in the middle of linestring in OpenLayers

Question

Is there anyone can put label in the middle of the linestring dynamically? I've used labelAlign option. I've changed this value from bc, cc, cm, etc. But it doesn't work at all. There's also option for x offset and y offset. But I don't know how to calculate the right position so the label can show at the middle of linestring. Not at the first line string.

Do you have any idea how to do it?

Thanks,

Answer 1

Check out this answer here may help you if u glance at the code.

i hope it helps you...

Answer 2

It's poccinle to calculate position manually;

1. Define function which will calculate deltaX and deltaY:

..

this.labelDeltaPixels = function (f) {
    var vert = f.geometry.getVertices();
    var startPoint = vert[0];
    var middlePoint = vert[Math.floor(vert.length/2)];
    var pixelStart = self.mapPanel.map.getPixelFromLonLat(new      OpenLayers.LonLat(startPoint.x, startPoint.y));
    var pixelMiddle = self.mapPanel.map.getPixelFromLonLat(new OpenLayers.LonLat(middlePoint.x, middlePoint.y));
    var deltaX = pixelMiddle.x - pixelStart.x;
    var deltaY = pixelStart.y - pixelMiddle.y;
    return {x: deltaX, y: deltaY};
}

2.define context for template

var context = {
          getLableOffsetX: function(f) {
            var zoom = self.mapPanel.map.getZoom();
            if (zoom < self.centreLabelsZoom) {
                return 0;
            }

            if (f.geometry) {
                if (!self.centrelineMiddleCoordsMap[zoom]) {
                    self.centrelineMiddleCoordsMap[zoom] = {};
                }
                if (!self.centrelineMiddleCoordsMap[zoom][f.id]) {
                    self.centrelineMiddleCoordsMap[zoom][f.id] =     self.labelDeltaPixels(f);
                }
                return self.centrelineMiddleCoordsMap[zoom][f.id].x;
                    return 0;
            } else {
                return 0;
            }
        },
        getLableOffsetY: function (){//similar as for x}

}

1. define template. var template = {strokeColor:"${getColor}", label: "${getLabel}", cursor: "crosshair", fontSize: '11px', labelAlign: 'cm', labelXOffset: '${getLableOffsetX}', labelYOffset: '${getLableOffsetY}'};

2. define style and stylemap var style = new OpenLayers.Style(template, {context: context, title: 'default'}); var styleSelect = new OpenLayers.Style({'strokeColor': self.colors['centreline'].selectColor});