Updating the TEXT attribute on an OpenLayers point

Question

I have the following map and vector layer declaration that is working:

var map;
var vectorLayer = new ol.layer.Vector({
 target: "points",
 source: new ol.source.Vector(),
 style: new ol.style.Style({
 image: new ol.style.Icon({
 anchor: [0.5, 0.5],
 anchorXUnits: "fraction",
 anchorYUnits: "fraction",
 src: "RedDot.svg",
 }),
 label: "My Junk", 
 text: new ol.style.Text({
 font: '15px Calibri,sans-serif',
 fill: new ol.style.Fill({ color: '#000' }),
 stroke: new ol.style.Stroke({
 color: '#fff', width: 2
 }),
 text: "My Truck",
 offsetY: 18,
 })
 })
 });

(key info - Note the default "My Truck" label for each point)

I have the following function that adds a point to the map (I don't honestly know if it's creating a new layer for each point, or adding all the points to the default layer):

function add_map_point(lat, lng, txt) {
 var source = vectorLayer.getSource();
 var pointFeature = new ol.Feature({
 geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
 });
 source.addFeature(pointFeature);
 }

This all works - no issues.

What I would like to do is use the TXT variable passed to that function to update the TEXT label ("My Truck" by default). It seems like I should be able to do something simple like source.getStyle().setStyle(getText().setText(text: txt)); (over simplified I assume).

Could someone point out how this could be done?

I've been searching all morning, and all I can find is redeclaring the style again, which seems unnecessary.

Answer 1

First define a style, with text styling options but no text

var style = new ol.style.Style({
 image: new ol.style.Icon({
 anchor: [0.5, 0.5],
 anchorXUnits: "fraction",
 anchorYUnits: "fraction",
 src: "RedDot.svg",
 }),
 text: new ol.style.Text({
 font: '15px Calibri,sans-serif',
 fill: new ol.style.Fill({ color: '#000' }),
 stroke: new ol.style.Stroke({
 color: '#fff', width: 2
 }),
 offsetY: 18,
 })
});

Then give your layer a style function which sets the style text from a property of a feature

var vectorLayer = new ol.layer.Vector({
 target: "points",
 source: new ol.source.Vector(),
 style: function (feature) {
 style.getText().setText(feature.get('text'));
 return style;
 }
});

When you create features include a text property

function add_map_point(lat, lng, txt) {
 var source = vectorLayer.getSource();
 var pointFeature = new ol.Feature({
 geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
 text: txt
 });
 source.addFeature(pointFeature);
}

• jnewman: it works! But I don't understand how it's different - it really just looks like you pulled out the style definition and defined it before assigning it, but without the TEXT declaration. Unless the getText() function is actually not a static definition when the style is declared, but is a dynamic definition that updates itself when the TEXT feature is added later in the add_map_point function. Do I have that last part right?
• Mike: The important part is setText() in the style function. The function is called whenever a feature is rendered, and setText() ensures the style returned contains the correct text for that feature.
• jnewman: Mike, thanks for the clarification - I had no idea (mind blown actually) that you could assign a function as a "value" for a variable in Javascript. Very cool, and weirdly unsettling at the same time.