OL4 example: does the label text really have to be built into an SVG?

[tomchadwin]

Without Labelgun, I label OL features as follows:

new ol.style.Style({
    text: new ol.style.Text({
    font: '10.725px \'MS Shell Dlg 2\', sans-serif',
    text: labelText,
    textBaseline: 'middle',
    textAlign: textAlign,
    offsetX: offsetX,
    offsetY: offsetY,
    fill: new ol.style.Fill({
        color: 'rgba(0, 0, 0, 1)'
    })
});});

The Labelgun OL4 examples seems to write the text into an SVG:

var iconSVG = "<svg " +
                    "version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" " +
                    "x=\"0px\" y=\"0px\" width=\"" + labelWidth + "px\" height=\""+labelHeight+"px\" " +
                    "viewBox=\"0 0 " + labelWidth + " "+labelHeight+"\" " +
                    "enable-background=\"new 0 0 " + labelWidth + " "+labelHeight+"\" >"+
                    "<g>" +
                    "<rect x=\"0\" y=\"0\" width=\"" + labelWidth + "\" height=\""+labelHeight+"\" stroke=\"#000000\" fill=\"" + fillColor + "\" stroke-width=\"2\"></rect>" +
                    "<text x=\"5\" y=\"14\" fill=\"#000000\" font-family=\"Arial\" font-size=\""+labelFontSize+"\" font-weight=\"normal\">" +
                        _.escape(text) +  // We need to escape all the special characters like & etc
                    "</text>" +
                    "</g>" +
                "</svg>";

  var svgURI = encodeURIComponent(iconSVG);
  var src = "data:image/svg+xml;charset=utf-8," + svgURI;

Is this a prerequisite for Labelgun in OL4, or could it be applied to my existing labelling method?

[JamesLMilner]

Hey @tomchadwin, no you can use other methods if you so wish :). At the time we struggled to find an example of being able to get vector labels and there bounds, but now there is an example on the official OpenLayers docs: https://openlayers.org/en/latest/examples/street-labels.html

[tomchadwin]

Right, I saw that, but was struggling to unpick the Labelgun in that example from the other techniques it demonstrated (textpath and label-segment). I'll have another go.

[JamesLMilner]

This should be possible following there examples, albeit they are using an older version of labelgun (I need to send a PR to their docs). Sorry I can't be of more help right now regarding qgis2web. When I have some more time I will try and get a version working for you. Can you open up an issue on qgis2web for me to track? I'll close this for now as it's more a qgis2web issue as it stands.

[tomchadwin]

I'm afraid I disagree. I'd say the labelling method I use above is the simplest and most frequently used OL technique. Without a bare-bones example, it's not going to get anything like as much usage as it deserves.

So, no SVG, no textpath, no label-segment. That's the example we need.

[tomchadwin]

qgis2web issue is https://github.com/tomchadwin/qgis2web/issues/398.

[JamesLMilner]

I'll open the issue but can we rename it to be more specific to the exact technique you're using (I.e. Maybe the OL method name in question)? Also a code small snippet example of how you're doing labels would be great.

[JamesLMilner]

I can look into making a bare bones example in that case :)

[JamesLMilner]

I just published a new example using more idiomatic labelling: https://github.com/Geovation/labelgun/tree/master/docs/examples/openlayers4-vec

[tomchadwin]

This looks absolutely perfect. I'll try it ASAP. Thanks!

[tomchadwin]

This worked for me 100% - thanks so much. Very much appreciated. It's now hooked into qgis2web master:

https://github.com/tomchadwin/qgis2web/commit/d4ff58217826cb1a8e14153b107ddc2f483de8ce