Openlayers 3 Add movable marker with icon and text

Question

In OL3, I managed to create a map on which there are movable markers:

var mapVectorSource = new ol.source.Vector({
    features: []
});
var mapVectorLayer = new ol.layer.Vector({
    source: mapVectorSource
});
map.addLayer(mapVectorLayer);

function makeMovable(feature) {
    var modify = new ol.interaction.Modify({
        features: new ol.Collection([feature])
    });

    feature.on('change',function() {
        console.log('Feature Moved To:' + this.getGeometry().getCoordinates());
    }, feature);
    return modify;
}

function createMarker(location, style){
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(location)
    });
    iconFeature.setStyle(style);

    return iconFeature
}

iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: '/static/img/marker-icon.png',
    }))
});
var marker = createMarker(ol.proj.transform([38, 50], 'EPSG:4326', 'EPSG:3857'), iconStyle);
mapVectorSource.addFeature(marker);
var modifyInteraction = makeMovable(marker);
map.addInteraction(modifyInteraction);

But I want to add> 10 markers, so I need to mark them with numbers or text. Is there a way to add text to the overlay? If I check iconStyle, I see that it has a function getText(), but this function always returns undefinedand is not accompanied by a function setText(). It would also be natural to define it like this:

iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: '/static/img/marker-icon.png',
    })),
    text: "Hello, Marker"    // <- operative line
});

But this does not seem to be allowed. Another natural option would be to attach the html element to the style so that we can render everything we want, but there seems to be no way to do this.

So, how do I create a marker with a text label?

Answer 1

this, , .

:

iconStyle = [
    new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 1],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            src: '/static/img/marker-icon.png',
        }))
    }),
    new ol.style.Style({
        text: new ol.style.Text({
            text: "Wow such label",
            offsetY: -25,
            fill: new ol.style.Fill({
                color: '#fff'
            })
        })
    })
];