Style: Label Icon Placement

This topic provides illustrations showing how icons can be placed within labels.  Manifold labels allow placement of an icon, called a sidecar icon, next to the label text.  

 

eg_label_icon_sectors01_00.png

 

The Icon tab within Label Style dialogs allows us to place an icon symbol within the label.  Check the Icon box and choose an icon and it will appear by default to the left of the label text.  We can position the icon in a different place, relative to the label text, by checking the Move box and specifying the Angle and the offset for the icon.   The illustration above shows a bitmap image icon chosen from a group of three images showing various Manifold logos.   The icon is positioned to the left of the text, at the 270 degree angle (the default) with an offset of 5 points, slightly larger than the default of 3 points offset.    The label also uses a Box, enabled in the Box tab, to provide better visual context for the placement of the icon relative to the label text.

 

eg_label_icon_sectors01_00a.png

 

It seems that we can use any degree value for the Angle, but in reality the placement of sidecar icons is quantized into one of twelve possible positions relative to the label text.  

 

eg_label_icon_sectors01_01.pngeg_label_icon_sectors01_02.png

 

If we consider a label as seen above at left, with no icon, we can see in the illustration at right the twelve possible positions for a sidecar icon relative to the label text.   Manifold quantizes label text placement because it is absurd to seek a visual difference between, say, 34 degrees and 35 degrees of angle.     

 

To enable the same Angle control to work the same way in all Style dialogs, Manifold simply rounds whatever value is provided in the Angle box so that the sidecar icon is placed into one of twelve bins.  For example, if the value entered into the Angle box is between 15 and 45 degrees, the icon is placed as if the value of 30 was entered.     Most Manifold users, therefore, tend to use round numbers for the Angle indicating where they want the icon to be placed.    The diagrams below show the round numbers Manifold users might prefer to use.  

 

The equivalent negative number is OK as well, since it may be easier to remember -30 for a position instead of 330 and -60 instead of 300.

 

eg_label_style_icon_position_guide01.pngeg_label_style_icon_position_guide02.png

 

Most users will either leave the default 270 for icon placement directly to the left of the text, or they will enter 0, 90, or 180 to place the icon above, to the right, or below the label text.   If they want the icon placed in the top slot to the right of the text, they will enter 60, and for the top slot to the left of the text, -60.

 

We can illustrate how icons are placed based on the Angle specified using the diagram below:

 

eg_label_icon_sectors01_03.png

 

 

The illustration shows a diagram that represents the twelve possible relative locations with differently colored regions, each marked with the representative, round, value of the Angle in degrees that causes the icon to be placed in that location relative to the text.   A value of 240, for example, places the icon at the bottom of the stack to the left of the text.  The radial lines are marked with smaller numbers indicating the borders between regions where values are averaged into the region.

 

 

eg_label_icon_sectors01_04.png

 

We can show how a sidecar icon given an Angle of 270 is placed in the middle region to the left of the text.   Placing an icon to the left or right of the text will expand the label box to make room for the icon.

 

The Illustration above shows how with labels that have only a single line of text there is virtually no visible difference between the top, middle, and bottom positions to the left of the label if the sidecar icon is the same size as the text (the default).  When the sidecar icon is as big as the text it seems to occupy the same position in all three cases.

 

Until Manifold acquires the ability to have multiline labels (a capability planned for Cutting Edge builds in the not-too-distant future), we can show how the relative placement of icons works by using a smaller icon and a bigger text.

 

eg_label_icon_sectors01_05.png

 

In the illustration above, we have increased the size of the label text to 72 points, while decreasing the size of the icon to 33%, that is, about one-third the size of the label text.    That provides more room for the icon to move up and down when placed in the top, middle, or bottom region to the left of the label text.    270 is the default Angle value for icons, so it is easy to remember.  If we prefer, we can use -90 for the same effect.

 

eg_label_icon_sectors01_06.png

 

Changing the Angle to 300 for the icon (using -60 would give the same effect) we see it appears to the top position at the left side of the label text.    The illustration has also colored the small 300 label in bright yellow to make it more distinctive.   Note that the icon is placed in a zone to the left of the label text, and is not placed above the label text.   To place the icon above the label text we would use an Angle of 330.

 

The illustrations for this topic were created in Manifold, using Style Overrides to color the small labels individually as desired.    The rectangles marking regions where icons can go relative to the text are areas colored using the CB Pastel palette, with their layer at 50% opacity so the pastel colors appear darker as the very dark gray background combines with the pastel color.

 

 

eg_label_icon_sectors01_07.png

 

 

Three positions above the label text can be selected with Angle values of 330, 0 and 30.   Manifold also recognizes mirror-image negative numbers, so using an Angle of -30 provides the same icon placement as using 330.  

 

Note that the difference between an Angle of 300 and an Angle of 330 is that the 300 value places the icon to the left of the label text, while 330 places the icon above the label text.    Placing icons above the label text will expand the label box vertically, to make room for the icon above the text.  

 

eg_label_icon_sectors01_08.png

 

 

An Angle of 0 places the icon directly above the label text, in the middle position.

 

 

eg_label_icon_sectors01_09.png

 

An Angle of 30 places the icon in the right-most region above the label text.   Note that the icon is placed above the label text, and not in the zones to the right of the label text.   To place the icon in the zone to the right of the label text we could use a value of 60.

 

eg_label_icon_sectors01_10.png

 

Using an Angle value of 60 places the icon in the top slot to the right of the label text. This position is often used for a copyright or trademark symbol.  Because the icon is now placed to the right of the text, the label box reduces in size vertically (the region above the label text no longer hosts an icon) and expands horizontally, to make room for the sidecar icon at the right of the label text.

 

eg_label_icon_sectors01_11.png

 

An Angle of 90 places the icon directly to the right of the label text.

 

 

eg_label_icon_sectors01_12.png

 

An Angle of 120 places the icon in the bottom slot to the right of the label text.    Note from this illustration and the two preceding illustrations that if the icon was not significantly smaller than the size of the label text, the icon would occupy so much room to the right of the single-line label text that there would be little or not visible difference between the 60, 90 and 120 settings in terms of vertical positioning of the icon.

 

 

eg_label_icon_sectors01_13.png

 

An Angle of 150 places the icon in the right-most position below the label text.   The label box contracts horizontally since there is no longer an icon to the right of the text, while expanding vertically to make room for the icon below the label text.

 

eg_label_icon_sectors01_14.png

 

An Angle of 180 places the icon directly below the label text, in the middle position.

 

eg_label_icon_sectors01_15.png

 

An Angle of 210 (or -150) places the icon in the left-most position below the label text.   

 

eg_label_icon_sectors01_16.png

 

Using an Angle of 240 (or -120) reduces the vertical size of the label box and expands the horizontal size, to make room for the label position to the left of the label text.

 

Removing the supplementary diagrams, we can see how labels look using the most popular settings for icon position.  We will use the first "bead" from the beads collection of sample bitmap images published for use as bitmap icons with Manifold styles.    The Fill color for the label box is the same color as seen in the diagram above as the color for the 210 area.   We can pick it for use as the Fill color by using the eyedropper tool in Manifold's color-picker dialog.

 

eg_label_icon_sectors01_17.png

 

The default position at the left (an Angle of 270 or -90) works well for single-line text...

 

 

eg_label_icon_sectors01_18.png

 

... as does the 90 degree angle position, placing the icon directly to the right of the text.

 

eg_label_icon_sectors01_19.png

 

The upper row of label positions is more rarely used.    An Angle of 330 or -30 (same thing) is seen above.

 

 

eg_label_icon_sectors01_20.png

 

The  middle center position (an Angle of 0) may be a good choice for a title caption, using a company logotype.

 

eg_label_icon_sectors01_21.png

 

The upper right position, at an angle of 30.

 

eg_label_icon_sectors01_22.png

 

 

The lower middle position, an Angle of 180, can provide a great label for a title caption, using a logo image for an icon.

 

 

eg_label_icon_sectors01_23.png

 

We can illustrate the use of labels to create bigger captions, suitable for titles of maps, by using the Release 9 logo, with various colors used as Fill colors for the box.

 

eg_label_icon_sectors01_24.png

 

Changing colors for fill color can instantly alter the "personality" of a label.    We can change parameters like the Fill color for the box without changing anything else in the Style.

 

eg_label_icon_sectors01_25.png

 

This series of illustrations uses a slightly thicker Shadow, at 2 points, than the preceding series.  

 

eg_label_icon_sectors01_26.png

 

The Release 9 logo used as an icon comes from a .png format image that uses partial transparency in some of the pixels to provide a more natural look for the faint drop shadow.

 

eg_label_icon_sectors01_27.png

 

Use the colors in this topic for maps by showing this topic in a browser, and then using the color picker tool in Manifold to "harvest" any of the colors that are visible.  

Notes

Rounding - Angles of 360 or greater are flattened to 0.   Future builds may provide a more quantized way of choosing Angle values, instead of allowing values like 31 or 37 simply forcing all values between 15 and 45 to 30, for example.

 

Multiline Text - Angle settings of 60 and -60 or 120 and -120 are primarily intended for use with multiline text labels.   When that capability arrives in Manifold, those settings will come in handy.

 

See Also

Maps

 

Drawings

 

Labels

 

Style: Drawings

 

Style: Labels

 

Style: Thematic Formatting

 

Style: Overrides

 

Style: Areas

 

Style: Points

 

Style: Bitmap Symbols

 

Style: Label Placement

 

Example: Change Point Style - Using new Style panel controls to change point style, either very rapidly one property at a time, or using the total Style button to compose a new style with changes to several properties at once.

 

Example: Style Panel Quickstart - A tutorial introduction to using the Style panel in the Contents pane to apply color, symbology, size and rotation to areas, lines and points in drawings.

 

Example: Format a Drawing using the Style Panel - In this example we provide a first, step by step look at how to format areas in a drawing using the Style panel.  We can specify the same formatting for all areas or use a field to automatically set formatting, a process usually known as thematic formatting.

 

Example: Format the Size of City Points by Population - A common GIS task is to format the size of points in a drawing based on some value.  For example, the size of points that represent cities might be formatted based on the value of the city's population, with cities that have larger populations being marked by larger point icons.  This is an example of thematic formatting and is easy to do using the Style panel.