I have the current set up here: fully functional fiddle example and whilst I have managed to zoom to each polygon feature I would also like to display a centralised text label o
To add a text to ol.Feature
you will store the description in the feature and set a style that is a style function (that will get the description from the feature and show it):
field_polygon.set('description', field_title);
field_polygon.setStyle(styleFunction);
function styleFunction() {
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.4)'
}),
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
stroke: new ol.style.Stroke({
color: '#fff', width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 12 ? this.get('description') : ''
})
})
];
}
Your fiddle.
Since I am new here and are not allowed to comment, I put my comment as a new answer to the question of @andre_ss6. I also get Window
on this
. What works for me is passing in the feature object as the function's first parameter:
function styleFunction(feature) {
and then use that parameter instead of this
:
text: feature.get('description')