Stretchable label background

You can use a stretchable image as a background for a label on the map. This allows you to create a distinctive background for labels of arbitrary length or for multi-line labels.

To stretch an image properly, you need to specify monotonous image areas, which can be distorted unnoticeably. These areas will be stretched so that the image size corresponds with the label size. In the image below, blue areas indicate horizontal stretch zones and pink areas indicate vertical stretch zones:

The label background is created from an SVG image. You can add your own image or use an existing style icon.

Note

To stretch a texture in width and height independently, some browsers (for example, Firefox) require the SVG image to contain the preserveAspectRatio attribute set to none.

Adding a background image

1. Open the Style editor.

2. Open the Icons menu and select Upload icons -> Select files.

   

3. Wait for the file to load and click OK.

4. Open the Icons menu again, find the uploaded image (search by file name), and select Edit the icon.

   

5. At the bottom of the editing dialog, specify areas stretching the image in width (W) and in height (H):

   

6. Click Save.

Configuring a style layer

1. Open or create a style layer of the Point type.

2. In the layer settings, select the uploaded background image as an icon.

   

3. Configure icon text attributes.

   

4. Configure icon text indents.

   

Result: