4

Using OpenLayers3 I have observed an incorrect alignment of the text when styling the features of the Cluster source. Also the baseline of the text appears to be ignored.

The below code sample (or the jsfiddle) presents how I am styling the features of the Cluster source. In short my goal is to present a single feature differently to a clustering of features.

    var aisLayer = new ol.layer.Vector({
        name: 'AIS Layer',
        source: clusterSource,
        style: function (feature, resolution) {
            var size = feature.get('features').length;
            var style;
            if (size === 1) {
                var theFeature = feature.get('features')[0];
                style = [
                new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 15,
                        stroke: new ol.style.Stroke({
                            color: '#000000'
                        }),
                        fill: new ol.style.Fill({
                            color: '#ffffff'
                        })
                    }),
                    text: new ol.style.Text({
                        textAlign: "Start",
                        textBaseline: "Middle",
                        font: 'Normal 12px Arial',
                        text: theFeature.get('name'),
                        fill: new ol.style.Fill({
                            color: '#ffa500'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#000000',
                            width: 3
                        }),
                        offsetX: 0,
                        offsetY: 0,
                        rotation: 0
                    })
                })];
            } else {
                style = styleCache[size];
                if (!style) {
                    style = [
                    new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 12,
                            stroke: new ol.style.Stroke({
                                color: '#ffcc33'
                            }),
                            fill: new ol.style.Fill({
                                color: '#000000'
                            })
                        }),
                        text: new ol.style.Text({
                            textAlign: "Center",
                            textBaseline: "Middle",
                            font: 'Normal 12px Arial',
                            text: size.toString(),
                            fill: new ol.style.Fill({
                                color: '#ffcc33'
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#000000',
                                width: 1
                            }),
                            offsetX: 0,
                            offsetY: 0,
                            rotation: 0
                        })
                    })];
                    styleCache[size] = style;
                }
            }
            return style;
        }
    });

The problem: The text is not centred for the clustered features (black circles), as if it still has the alignment setting used by the not clustered features (white circles). Also the baseline of the text appears to be ignored. To see the problem in action go to the jsfiddle.

2 Answers 2

3

Avoid using capitalised letter within textAlign and textBaseline, the values must be in lowercase.

Next example, fixing that issue, works fine: http://jsfiddle.net/dL3h58a9/8/

2
  • Thank you Eric. That was exactly it. If only the doc was better this would have not taken place. :)
    – Boro
    Nov 19, 2014 at 9:12
  • 1
    You can get help from leanpub.com/thebookofopenlayers3. Cheers.
    – acanimal
    Dec 16, 2014 at 19:07
3

They fixed this in later versions (here's v3.7.0: http://jsfiddle.net/dL3h58a9/268/) so it's the same as the docs - but the values now have to be lowercase!

textAlign: "start",
textBaseline: "middle",

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.