To style labels with SLD, you can use a TextSymbolizer, which includes settings to configure the label content, the label location, and styling settings such as the font and the color. To enhance readability and visual appearance, you may want to draw the labels inside an icon. The OGC SLD/SE standards don’t support this capability, but LuciadLightspeed and LuciadFusion do support it by means of an SLD/SE extension.

To draw a label inside an icon:

  1. Add the icon to the TextSymbolizer using the ExternalGraphic element. The external graphic article describes several ways of doing this.

  2. Add the vendor option graphic-resize=proportional to the TextSymbolizer. With this setting, you make sure to proportionally re-size the icon to contain the label.

  3. Optionally, add the vendor option graphic-margin to the TextSymbolizer. This vendor option takes an integer value to represent the padding between the label and the icon in pixels.

The order of these elements is important. Place them at the end of the TextSymbolizer block.

A use case for this capability is the labeling of highways. This image shows an empty interstate icon:

interstate
Figure 1. Empty interstate icon

This SLD example adds a label inside this interstate icon to indicate the interstate highway number:

Program: Defining a text label inside an interstate icon
<FeatureTypeStyle xmlns="http://www.opengis.net/se" xmlns:ogc="http://www.opengis.net/ogc"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:schemaLocation="http://www.opengis.net/ogc http://schemas.opengis.net/filter/1.1.0/filter.xsd   http://www.opengis.net/se http://schemas.opengis.net/se/1.1.0/FeatureStyle.xsd   http://www.w3.org/1999/xlink http://www.w3.org/1999/xlink.xsd"
                  version="1.1.0">
  <Rule>
    <TextSymbolizer>
      <Label>
        <ogc:PropertyName>NUMBER</ogc:PropertyName>
      </Label>
      <Font>
        <SvgParameter name="font-family">Dialog</SvgParameter>
        <SvgParameter name="font-weight">normal</SvgParameter>
        <SvgParameter name="font-size">50</SvgParameter>
      </Font>
      <Fill>
        <SvgParameter name="fill">#ffffff</SvgParameter>
      </Fill>
      <Graphic>
        <ExternalGraphic>
          <OnlineResource xlink:href="interstate.svg"/>
          <Format>image/svg+xml</Format>
        </ExternalGraphic>
      </Graphic>
      <VendorOption name="graphic-resize">proportional</VendorOption>
      <VendorOption name="graphic-margin">25</VendorOption>
    </TextSymbolizer>
  </Rule>
</FeatureTypeStyle>

Combined with the road styling SLD, this interstate icon labeling SLD results in:

interstateLabel
Figure 2. Interstate highway number inside interstate icon