Labels in QGIS2web are not editable

Question

I want to have my labels visible and customizable in QGIS2web plugin.

My code look like this:

 var size = 0;
 var placement = 'point';
 function categories_Area5chamber_14(feature, value, size, resolution, labelText,
                   labelFont, labelFill, bufferColor, bufferWidth,
                   placement) {
            switch(value.toString()) {case 'BT':
                return [ new ol.style.Style({
    stroke: new ol.style.Stroke({color: 'rgba(35,35,35,1.0)', lineDash: null, lineCap: 'butt', 
  lineJoin: 'miter', width: 0}),fill: new ol.style.Fill({color: 'rgba(0,0,0,1.0)'}),
    text: createTextStyle(feature, resolution, labelText, labelFont,
                          labelFill, placement, bufferColor,
                          bufferWidth)
})];
                break;
 case 'Voneus':
                return [ new ol.style.Style({
    stroke: new ol.style.Stroke({color: 'rgba(35,35,35,1.0)', lineDash: null, lineCap: 'butt', 
  lineJoin: 'miter', width: 0}),fill: new ol.style.Fill({color: 'rgba(252,0,0,1.0)'}),
    text: createTextStyle(feature, resolution, labelText, labelFont,
                          labelFill, placement, bufferColor,
                          bufferWidth)
})];
                break;}};

  var style_Area5chamber_14 = function(feature, resolution){
    var context = {
    feature: feature,
    variables: {}
   };
var value = feature.get("Chamber Type");
var labelText = "";
size = 1;
var labelFont = "15px, sans-serif";
var labelFill = "#787878";
var bufferColor = "";
var bufferWidth = 0;
var textAlign = "left";
var offsetX = 0;
var offsetY = 0;
var placement = 'point';
  if (feature.get("Chamber No") !== null) {
    labelText = String(feature.get("Chamber No"));
}

  var style = categories_Area5chamber_14(feature, value, size, resolution, labelText,
                      labelFont, labelFill, bufferColor,
                      bufferWidth, placement);

   return style;
 };

The elements defining the text don't work at all. only labelFill is valid.

I found some solution here:

https://gis.stackexchange.com/questions/374510/how-to-make-labels-be-center-justified-in-an-openlayers-web-map

but it doesn't really match my example, because I have:

     var style = categories_Area5chamber_14(feature, value, size, resolution, labelText,
                      labelFont, labelFill, bufferColor,
                      bufferWidth, placement);

     return style;

How can I solve this problem? I want to change the font, offset and colour but only the colour labelFill is working.

In the image below you can see my 2 cases listed in the code. One corresponds to the red box with no text (I don't know why?) and another one to black box with a label, which is not editable apart from the colour.

Answer 1

The soluton for similar issue is here:

https://github.com/tomchadwin/qgis2web/issues/627

If the labelFont doesn't return the funt result, we can add it after the feature.get in our labelText .

  var style_Area5chamber_14 = function(feature, resolution){
    var context = {
    feature: feature,
    variables: {}
   };
  var value = feature.get("Chamber Type");
  var labelText = "";
  size = 0;
  var labelFont = "15px \'MS Shell Dlg 2\', sans-serif";
  var labelFill = "#787878";
  var bufferColor = "";
  var bufferWidth = 0;
  var textAlign = "center";
  var offsetX = 0;
  var offsetY = 0;
  var placement = 'point';
    if (feature.get("Chamber No") !== null) {
       labelText = String(feature.get("Chamber No")); labelFont = "15px \'MS Shell Dlg 
 2\', sans-serif";    //adding our font properties again ;
   }


    var style = categories_Area5chamber_14(feature, value, size, resolution, 
 labelText,
                      labelFont, labelFill, bufferColor,
                      bufferWidth, placement);
                
     return style;

    };

In order to text disappear, we must be aware of our zoom level, which we set for our map. If the string is too long, it might be not displayed when exceeds the text bound (assuming, that it's the red box size). It happens, when you decide to set a smaller zoom level . In the QGIS2web plugin, the maximum zoom level for our map can be 28. If you reduce it to ie 21 or 22, then longer strings might not be visible for us.