0

I want to offset my label appearing in the interactive map generated by QGIS2web plugin.

Unfortunately the variables offsetX and offsetY don't work...

 var size = 0;
 var placement = 'point';

 var style_Area_5H_Schematic_7 = function(feature, resolution){
 var context = {
    feature: feature,
    variables: {}
 };
 var value = ""
 var labelText = "";
 size = 0;
 var labelFont = "20px \'MS Shell Dlg 2\', sans-serif";
 var labelFill = "#000000";
 var bufferColor = "";
 var bufferWidth = 0;
 var textAlign = "top";
 var offsetX = 60;  
 var offsetY = 75;
 var placement = 'point';
 if (feature.get("Name") !== null) {
    labelText = String(feature.get("Name"));
 }
 var style = [ new ol.style.Style({
    image: new ol.style.RegularShape({radius: 15.6 + size, points: 8,
        radius2: 7.8, stroke: new ol.style.Stroke({color: 'rgba(9,4,2,1.0)', lineDash: null, lineCap: 
  'butt', lineJoin: 'miter', width: 1}), fill: new ol.style.Fill({color: 'rgba(9,4,2,1.0)'})}),
    text: createTextStyle(feature, resolution, labelText, labelFont,
                          labelFill, placement, bufferColor,
                          bufferWidth)
   })];

   return style;
  };

I've changed these values to:

 var offsetX = "6";
 var offsetY = "8";

but still the same. No result at all.

Does anyone know how to solve it?

enter image description here

UPDATE:

Labels are not editable for the following code:

 var size = 0;
 var placement = 'point';

 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);

    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;}};
                



   return style;


   };

where I have 2 cases.

The label comes out only for one of them, but apart from the font color remains not editable.

enter image description here

is there any way to sort it?

4
  • 1
    The key component here is createTextStyle function. Please edit your question and add code for that function. This might also help: gis.stackexchange.com/questions/374510/…
    – TomazicM
    Nov 11 '20 at 18:40
  • Yes I see now. Thank you so much!
    – MKR
    Nov 12 '20 at 9:19
  • @TomazicM I added another code, where I am still struggling. How it works when I have cases? Why only labelFill works, whereas I have other variables defined?
    – MKR
    Nov 12 '20 at 12:02
  • As I wrote before, please add code for createTextStyle function. I cannot rely on assumption it's being the same as in the example I referenced.
    – TomazicM
    Nov 12 '20 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.