Openlayers 3 Feature Label Background - openlayers-3

Question

we are using OpenLayers 3 and want to add labels to our features. To improve visibility, we also want to add a background to those labels.
I have looked at: http://openlayers.org/en/v3.4.0/examples/vector-labels.html
but could not find another solution than increasing the overdraw width. But this results in bumby backgrounds and seems to be more like a hack for my problem.
Sadly we are not able to use another layer for the labels, cause the feature has to be on the same level as the corresponding label so that you can alway see a feature with its label in case it is overlapping with another feature (not only labels overlapping the features).
So I wanted to ask if you know a way to set the background of a label without using overdraw or a separate layer?
Best regards and thanks in advance
Basti
Updated description:
We want to render cars on a map. These cars should have labels with a rectangular background (in a color we can change) for the text so the user can read them more easily. Furthermore should the label be on the same level as the corresponding car. The reason behind this is that if cars are overlapping each other the labels should too and there should alway be one car with its label on top. I hope this description makes things a little bit clearer.

Answer 1

I managed to solve a similar problem by using a SVG shape behind the Text element and fill-up the shape with color, to achieve the same result.
I had to resize the background shape to match the size of text element and it wasn't as straightforward as I was hoping for.
The main blocks were:
SVG items don't have background style, and fill attribute on text element would only change the text color not its background color. That's why I had to use another shape in the first place.
When a SVG element is used as the source of an image element, all the javascript code inside it is ignored for security reasons. Therefore, you can't dynamically check/change sizes.
Shapes and Paths inside the SVG element are not part of DOM, so you can't access or style them with JavaScript or CSS.
First thing I did was to use the following code -- that I found somewhere on Stackoverflow, to get the width of the rendered text in pixels:
/* Get the rendered size of a text, in pixels */
/* _text: "Blah blah" */
/* _fontStyle: "Normal 12px Arial" */
function getTextWidth ( _text, _fontStyle ) {
var canvas = undefined,
context = undefined,
metrics = undefined;
canvas = document.createElement( "canvas" )
context = canvas.getContext( "2d" );
context.font = _fontStyle;
metrics = context.measureText( _text );
return metrics.width;
}
Then I used it inside my other function which was generating the marker and its label:
...
labelFontStyle = "Normal 12px Arial";
labelWidth = getTextWidth( _text, labelFontStyle );
labelWidth = labelWidth + 10;
iconSVG = '<svg ' +
'version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
'x="0px" y="0px" width="' + labelWidth + 'px" height="16px" ' +
'viewBox="0 0 ' + labelWidth + ' 16" enable-background="new 0 0 ' + labelWidth + ' 16" xml:space="preserve">'+
'<rect x="0" y="0" width="' + labelWidth + '" height="16" stroke="#000000" fill="#DEEFAE" stroke-width="2"></rect>' +
'<text x="5" y="13" fill="#000000" font-family="Arial" font-size="12" font-weight="normal">' + _text + '</text>' +
'</svg>';
imageElement = new Image();
imageElement.src = 'data:image/svg+xml,' + escape( iconSVG );
iconStyle = new ol.style.Style({
"image": new ol.style.Icon({
"img": imageElement,
"imgSize":[labelWidth, 66],
"anchor": [0.5, 0.5],
"offset": [0, -50]
})
});
feature = new ol.Feature({
"geometry": new ol.geom.Point(
ol.proj.fromLonLat( [_longitude, _latitude] )
)
});
feature.setStyle( iconStyle );
return feature;
This is my answer that I originally posted here