OL3 wrong text alignemnt
PROBLEM: The text of the white circles is aligned correctly to start from the center, where black circles text alignment is incorrect as it should be centred. It appears that the alignment setting is overridden by the option set for the white circles.
Also the baseline setting appears to be ignored all together.
HTML
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<div id="map"></div>
CSS
#map{
background-color: lightgrey;
height: 800px
}
JavaScript
//PROBLEM: The text of the white circles is aligned ('textAlign') correctly to start from the center, where black circles text alignment is incorrect as it should be centred. It appears that the alignment setting is overridden by the option set for the white circles.
// Also the baseline setting ('textBaseline') appears to be ignored.
$(document).ready(function () {
// World Geodetic System 1984 projection (lon/lat)
var projWGS84 = "EPSG:4326";
// Spherical Mercator projection (meters)
var proj900913 = "EPSG:900913";
var layers = [];
layers[0] = new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
})
});
var map = new ol.Map({
target: document.getElementById('map'),
layers: layers,
view: new ol.View({
center: ol.proj.transform([-123.2, 49], projWGS84, proj900913),
zoom: 9
})
});
var vectorSource = new ol.source.Vector();
var clusterSource = new ol.source.Cluster({
distance: 50,
source: vectorSource
});
var styleCache = {};
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: "center",
textBaseline: "top",
...