Style: Drawingsdlg_contents_style_panel_labeled.png

Using the Style pane we can set the display characteristics of areas, lines and points in a drawing.    See the Style: Labels topic for information on styling labels.  See Style: Images for how the Style pane works with images.

 

The Style pane does simple things right away, hiding more controls until they are needed.

 

 

 

Style settings applied to drawings are also known as formatting.   Changing basic style properties, such as fill color or symbol, lets us create whatever overall effect, called the total style, we want.  

Related topics:

 

dlg_point_style_labeled_01.png

 

To change the format of a drawing:

 

  1. Open the drawing or click onto the drawing's tab in an open map window.

  2. Open the Style pane.

  3. Click on the button for the Style property to be changed.

  4. Change the property as desired.  Press the Esc key or click anywhere outside the button menu to cancel.

  5. The change will automatically be applied to the drawing.

 

Controls

(Tabs)

The Drawing tab shows style property controls.  The Options tab provides controls for style overrides.

btn_style_prop_nofield.png

Buttons without any extra sub-icons apply that same setting throughout the entire layer.   Clicking the button will show a drop down menu providing typical, one-click choices.   To see a field choice box allowing choice of a field for thematic formatting, simply click back into the Style pane outside of the drop down menu.

btn_style_prop_field.png

Buttons that show a small "field" sub-icon have their style property controlled by a field, using thematic formatting.   The color, symbol, or number shown as a sample is the first style in the range of thematic formatting styles.  

 

Clicking the button will show the thematic formatting arrangement and controls in the Style pane.  To get a drop down menu providing typical, one-click choices, simply click the button again.

btn_style_prop_override.png

Buttons that show a small "box" sub-icon indicate that style property has style overrides enabled, allowing manual setting of style properties on individual objects within a layer.

Total Style

A button showing the combined effect of the other properties to create the illustrated Style for areas, for lines or for points.  Often simply called Style.  

Stroke Color

The primary color applied in point and line styles that use a single color.  Also applied to the borders of areas, to the borders of point styles that use two colors, as the hatch line color in area styles, and as the primary color in line styles that use two colors.

 

Important:  Setting Stroke color to transparent makes objects disappear completely.  To render a style without using Stroke color, use the Symbol button to drill into the Symbol menu and set the Stroke width parameter to a very small width, such as 0.1.  

Fill Color

The fill or secondary color.  Applied to the interior of area styles.  Also applied as the secondary color in area, line and point styles that use two colors.

Size

The size of point objects, the thickness of lines, and the sizing of hatch patterns for areas, by default expressed in printer's points.    May be fractions such as a size of 0.1 or 2.8.  Enables specification of the density of hatch patterns and other area style symbology.  The drop down menu provides a range of default choices.  Enter a specific value into the box to specify a Size other than one of the default choices.

Rotation

The rotation in degrees.  Rotates the hatch pattern of areas and rotates the entire symbol of points.  Lines do not use Rotation.  The drop down menu provides a range of default choices.  Enter a specific value into the box to specify a Rotation other than one of the default choices.

Symbol

Choose symbology for areas, lines or points.  The drop down menu provides a range of default symbols, with a toolbar that allows configuration of the drop down menu.  Press the More... button at the bottom of the drop down menu for the full Symbol dialog that provides more options.

 

Style Applies to an Entire Layer

Settings in the Style pane, such as fill color for areas, by default apply to all objects in the layer. 

 

eg_style_drawings_same_style01_01.png  eg_style_drawings_same_style01_02.png

 

 If we change the fill color for areas to slate blue color, all areas in that layer will have a fill color of slate blue.

 

eg_style_drawings_same_style01_03.png  eg_style_drawings_same_style01_04.png

 

That makes it easy to change the appearance of every object in a layer, instantly.

Different Styles Within a Layer

There are two ways to vary the formatting for individual objects:

 

 

 

To apply thematic formatting, we choose a field in the drop down menu that appears when we have formatted some style property, such as fill colors for areas, and then we set the desired style for each of the intervals.   See the Style: Thematic Formatting topic.

 

eg_style_drawings_same_style01_05.png  eg_style_drawings_same_style01_06.png

 

When we choose a field, like the mfd_id field in the example above, the style buttons that use a field will have a field icon added.

Change basic properties quickly, or Compose combinations

Style pane buttons support two ways of making quick changes, which can be mixed together for fast workflow:

 

 

 

Manifold drawings can contain areas, lines and points in the same layer, so the Style pane has similar controls in three sections, one for areas, one for lines and one for points.  

 

dlg_contents_style_panel_labeled.png

 

The left-most, total Style button is a larger button that shows the total, combined style that results from choices made for basic style  properties.  The smaller buttons to the right show the basic style properties that make up the total style.   Because symbols can be complicated, the Symbol property buttons for choosing a symbol are larger than the properties buttons for colors, size, or rotation.

 

Areas, lines and points each have a total Style.  We compose a Style by choosing Stroke Color, Fill Color, Size, and Symbol properties.   Area styles and point styles also have a Rotation property.     Line styles do not have a rotation property.

Quickly Make Basic Changes

Changing a basic property is easy: we click the button and choose what we want.   Buttons launch a drop down menu with the most popular choices.   If we want more, we click More... at the bottom of the drop down menu and then we get even more choices.

 

dlg_point_style_labeled_01.png

 

Style controls for points are shown above.  The Total Style button adds up all effects to preview the combined result.   If we want to change the Fill Color, the Symbol, the Size and Rotation, we can click those buttons in turn and choose what we want.

 

dlg_point_style_labeled_02.png

In the example above, we have picked a bright green color for Fill, a fire extinguisher Symbol, a Size of 36 points, and a Rotation of 15 degrees.

 

With each change, the result is applied immediately to the drawing.  

 

dlg_point_style_labeled_03.png

 

See the Example: Change Point Style  topic for a more detailed, step-by-step example of the above.

Compose Combinations All at Once

Sometimes we want to change everything at once, using a preview in the dialog before committing changes.   That is what the Total Style buttons allow us to do.

 

dlg_point_style_labeled_04.png

 

Suppose we start with a drawing, called Equipment, that marks the locations of fire extinguishers in the plan of a theater.   We want to change the default formatting of small gray dots to a more visible symbol.

dlg_point_style_labeled_05.png

We click directly on the total Style button.   A drop down menu shows popular choices.    If a thematic format has already been assigned to the total Style button, that thematic format arrangement will appear instead of a drop down menu. To get the drop down menu, simply click the Style button again.

 

dlg_point_style_labeled_06.png

 

We ignore the preset choices and choose More... at the bottom of the drop down menu, to launch the Point Style dialog,

 

dlg_point_style_labeled_07.png

 

The Point Style dialog allows us to choose Stroke and Fill colors, Size, Rotation and the Symbol.  It provides many more controls for various style options for points.  It also allows us to quickly choose a background for the preview pane's canvas, so we can see what our proposed style will look like in the actual layer.   If we like the effect we press OK, or Cancel if we do not want to apply the changes.

 

See the Example: Change Point Style  topic for a more detailed, step-by-step example of the above.

 

Illustrated Guide to Style Properties

Using simplified illustrations, we show what the Size property does for points, lines and areas.

Points

eg_style_button_size_01.png

eg_style_button_size_02.png

A default size of 5 points shows points as small dots.  

 

 

eg_style_button_size_03.png

eg_style_button_size_04.png

 

Changing the Size to 16 points increases the size of the points.

 

eg_style_button_size_04a.pngeg_style_button_size_04b.png

 

Clicking onto the Symbol button in the Style pane, we can create  thematic format as seen above, left, using different symbols for different field values in the points of interest layer, drilling down into the full Symbol dialog to use symbols from the Glyphs collection as discussed in the Style: Points topic.  The symbols used are very simple, just a slight drop Shadow effect and no halo or box effects, as more complex styles might use.

 

If we prefer bitmaps, or a mix of bitmap images and vector symbols, we can use bitmap image symbols as discussed in the Style: Bitmap Symbols topic and seen above at right (using a random collection of images).   In both of the images we have added a background, buildings layer, seen using 20% opacity set in the Layers pane.

Lines

eg_style_button_size_05.png

eg_style_button_size_06.png

 

A default Size of 1 point shows thin lines.   We could use an even thinner size, such as 0.5 points, but lines much thinner than one point can be difficult to see.  The small "field" icons in the buttons indicate a thematic format is being used to vary the Stroke color of different lines by a field.

 

eg_style_button_size_07.png

eg_style_button_size_08.png

 

Changing the Size to 2 points results in thicker lines.  

 

eg_style_button_size_08a.png

 

We can drill down in the Symbol button to the Symbol dialog for points, as shown in the Style: Lines topic, and check the Halo box to apply a halo in black color with Padding of 0.5 points.  That will render each line with thin black borders as seen above.

 

eg_style_button_size_08b.pngeg_style_button_size_08c.png

 

The full Symbol dialog for line styles allows us to many more effects, such as repeating symbols for the line, as seen at left, or to add left and right accessory lines and dashed lines with halos, as seen above.

 

eg_style_button_size_08d.png

 

The Symbol dialog for lines also allows adding symbols at the beginning or end of lines, as seen above.

 

Areas

eg_style_button_size_09.png

eg_style_button_size_10.png

 

Size with areas sets the spacing of hatch patterns.   For example, when the Symbol button is used to apply a mesh hatch pattern to areas, the default Size of 8 points results in the mesh size seen above.  The small "field" icons in the buttons indicate a thematic format is being used to vary the Fill color of different areas by a field.

 

 

eg_style_button_size_11.png

eg_style_button_size_12.png

 

If we change the Size to 4 points, the mesh size becomes smaller, using half the spacing between horizontal and vertical mesh lines as was used with a Size of 8 points.

 

Rotation with Areas

The Rotation property changes the rotation angle of patterns applied to areas.

 

eg_style_button_rotation_01.png

eg_style_button_rotation_02.png

 

Using the default Rotation angle of 0 degrees, a vertical thin line hatch pattern applied using the Symbol button results in lines that are aligned exactly vertically.

 

 

eg_style_button_rotation_03.png

eg_style_button_rotation_04.png

 

If we change Rotation angle to 60 degrees, the hatch pattern now is rotated so the lines are at a 60 degree angle to the vertical.

 

eg_style_button_rotation_04a.pngeg_style_button_rotation_04b.png

 

In the Style pane we can click on the Symbol button to drill down into the full Symbol dialog, to add effects as illustrated in the Style: Areas topic.   For example, we can use a subtle Inner effect as seen above, left, or we can utilize bitmap image symbols as area fills, together with use of Border and Outer Border effects as seen above, right.

Drop Down Menus

Clicking a style pane button launches a drop down menu that allows a quick choice with one click.    The examples below show drop down menus that appear for colors.  Drop down menus for Symbols and Total Style are similar.

 

ico_nb_arrow_blue.png   Drop down menus offering one-click choices appear if a thematic format has not been assigned to the total Style button.   If a thematic format has already been assigned to the total Style button, that thematic format arrangement will appear instead of a drop down menu. To get the drop down menu, simply click the button again.

 

When clicking a color button, such as the Stoke Color or Fill Color, a drop down menu appears showing color samples that may be chosen with a single click.  Up / Down keyboard arrows and Page Up / Page Down buttons scroll the display.   

 

dlg_color_dropdown_labeled.png

 

 A toolbar at the top of the drop down menu allows us to rapidly find and arrange colors, with arrangements normally being remembered.   Hovering the mouse cursor above a color will report in a tooltip the name of the color, the group and the hexadecimal color.

 

Color groups are indicated by varying the gray background from lighter to darker gray.   Basic colors are those in prior versions of Manifold.  Standard colors are those which have become popular in classic GIS packages from industry leaders.  Web colors are the standard selection of named colors used in web page programming.    Upcoming builds will likely enable addition of other groups of colors, for example, from other industries, from other famous applications or as compiled in custom collections by users.

 

(Filter Box)

Show only those colors whose names contain the given string, case not significant.

btn_dropdown_sort.png

Sort - Toggle sort order of colors either by hue or alphabetically by name.

btn_dropdown_grid.png

Grid - Show colors as a grid of color samples.

btn_dropdown_list.png

List - Show colors as a list with a color sample, the name of the color, and the hexadecimal code for that color.

More

Open a full dialog for picking any color desired.

Color Picker

Everyone's favorite tool:  Click the Color Picker button and the mouse cursor changes to an eyedropper shape with a slightly lighter shade overlaid on all monitors to indicate every location that might be touched.   Click with the eyedropper on any pixel anywhere and that color will be picked.   We can click on Windows status bars, on open dialogs, onto other applications or anywhere visible on any of our monitors.

Filter Box

dlg_color_dropdown_filter.png  dlg_color_dropdown_filter_list.png

 

Entering blue into the filter box shows only those colors with "blue" in their names, case not significant.   Colors are displayed using whatever are the toolbar button settings.   The Grid layout is shown on the left and the List layout is shown on the right.

Sort Button

dlg_color_dropdown_hue.png  dlg_color_dropdown_sort.png

 

Pressing the Sort button displays colors sorted by similar hue, within groups.  Releasing the Sort button displays colors sorted alphabetically by name, within groups.

Grid / List Buttons

dlg_color_dropdown_list.png

 

Clicking the List button shows colors in a list, providing the name and hexadecimal code for each color.  Clicking the Grid button restores the grid view.

 

Symbol Button Drop Down Menus

Clicking a Symbol property button for points, lines or areas launches a drop down menu, similar to those used for colors, that allows a quick choice with one click. Choosing the More option at the bottom opens up a full Symbol dialog with more options.  

 

ico_nb_arrow_blue.png   Drop down menus offering one-click choices appear if a thematic format has not been assigned to the Symbol button.   If a thematic format has already been assigned to the Symbol button, that thematic format arrangement will appear instead of a drop down menu. To get the drop down menu, simply click the button again.

 

Point Symbols

dlg_symbol_dropdown_01.png

dlg_symbol_dropdown_02.png

 

There are over 1300 point symbols in the drop down menu, beginning with a Standard collection.   With so many choices, a good way to find symbols is to use the Filter box to filter by name

 

dlg_symbol_dropdown_03.png

 

Switching from List to Grid display makes it easier to see more points.   The Glyphs collection provides hundreds of symbols.  It is followed by a Brands collection providing well known logos.    A good way to find symbols is to use the Filter box to filter by name.

 

Line Symbols

dlg_symbol_dropdown_04.png

dlg_symbol_dropdown_05.png

 

Line symbols also have names.  The Standard collection provides typical symbols used in classic GIS.

 

Area Symbols

dlg_symbol_dropdown_06.png

dlg_symbol_dropdown_07.png

 

The Standard collection of Area symbols provides typical area fill patterns used in classic GIS.   There are no horizontal or inclined angle hatch patterns since those are set using the Rotation angle, using 90 degrees for horizontal lines, for example.

 

Total Style Drop Down Menus

Total Style buttons for points, lines and areas allow us to specify all style properties at once.   The choices in the drop down patterns provide typical combinations, the Standard collection, often used in classic GIS.

Total Style for Points

dlg_total_style_dropdown_01.png

dlg_total_style_dropdown_02.png

 

Total Style combinations allow us to specify colors and all other style properties, so the very many symbology options for points can provide symbology for any need.

Total Style for Lines

dlg_total_style_dropdown_03.png

dlg_total_style_dropdown_04.png

 

In the illustration above, we have scrolled down into the drop down menu to see various combinations of properties that provide standard cartographic lines.

 

Total Style for Areas

dlg_total_style_dropdown_05.png

dlg_total_style_dropdown_06.png

Area style combinations also follow naming conventions for standard cartography from classic GIS.

Endless Combinations

By varying the settings of a few, basic style properties we can create a seemingly infinite variety of appearances.  The four drawings below use the same map with the same drawings but with different Style settings for the drawings.   The overall background color is set in the Layers pane.

 

il_spatial_overlay01_05.png il_format_eg01_01.png

il_format_eg01_03.pngil_format_eg01_02.png

 

Notes

Drop down menu or thematic format?  -  The default desire in most cases is to simply click a button and to change a style property.  By default, clicking a button opens a drop down menu with one-click choices to do that.   If we have already applied a thematic format to a style property we usually want to tinker with that thematic format, so clicking a button that has a thematic format on it will immediately display the thematic format arrangement.   We can get a drop down menu with one-click choices by just clicking the button a second time.

 

Undo for Changes - Suppose we love the ability to instantly change fill color for areas, but when a change we make results in an ugly effect we want to get the previous color back?   For now, make a copy of a drawing before any changes (takes but a second in the Project pane).   Upcoming builds will provide a "Back" capability to get back the prior color.

 

Not a Legend - Because the Total Style button shows a preview of the combined effects of individual basic properties, the Style pane provides a quick and dirty legend.   Much better will be the formal Legend capabilities that will soon appear in upcoming builds.

 

Transparent colors - The first "color" in drop down color menus, represented by a box with an X, is transparent color.  Using that color for an object makes invisible those parts of the object using transparent color.    Setting Stroke color to transparent makes the entire object disappear.  To render a style without using Stroke color, use the Symbol button to drill into the Symbol menu and set the Stroke width parameter to a very small width, such as 0.1.  Use transparent color with care.   See the discussion in the Example: How Not to Format a Drawing topic.

 

Nomenclature - The word format is traditionally used in GIS to mean display characteristics.  A more contemporary word is style, hence the name of the dialog in Manifold.   In this documentation we normally use the words style and format as interchangeable synonyms, albeit with style used more often to refer to patterns, such as icons for points or hatch patterns for areas, with format being a broader term to refer to any display characteristic.

 

Rotation - It doesn't make sense to choose a Point rotation value that ends up presenting the selected Point style with the same appearance.   For example, choosing a Point rotation value of 90, 180 or 270 will make no visual difference in the appearance of a square, which looks the same rotated 180 degrees as it does without any rotation.

 

Videos

Manifold 9 - Style Pane Quickstart - Points - A fast and easy introduction to the new Style and formatting capabilities for Pionts in Manifold Release 9 and Viewer.  Learn how to rapidly change colors, symbology, sizes and rotations including the use of vector symbols, fonts and even bitmap images. The new system is "always on" and immediately shows changes in the main workspace for rapid, easy choice of exactly the visual effect we want.  This video gets right to the basics used every day.

 

Manifold 9 - Style Pane Quickstart - Lines - Learn how to use the spectacular new style capabilities for lines in Manifold Release 9 and Manifold Viewer to create an endless variety lines quickly and easily.  See how to add arrowheads or other symbols to the ends of lines, how to customize lines with repeating symbols, how to start lines with custom symbols and how to add accessory left and right lines for exactly the right effect.

 

Manifold 9 - Style Pane Quickstart - Areas - New area style capabilities in Release 9 and Viewer make it easy to rapidly create spectacular visuals that get the story across with clarity and compelling effect.  Learn how to use point and click controls to fill areas, control borders, draw "inner area" effects and "outer area" effects for a seeming infinite range of options, all available with a rapid click of the mouse.  Use bitmap images for area effects too!

 

Manifold 9 - Style Pane Quickstart - Labels - Recent builds of Release 9 have added extensive new style facilities for labels, making it easy to choose a wide variety of effects, including sidecar icons, box frames, drop shadows and many others. This video shows how fast and easy point-and-click dialogs make it easy to create exactly the label look you want.  Works for the free Manifold Viewer, too!

 

Manifold 9 - Bitmap Styles - A quick, first look at very extensive additions to Style, enabling use of bitmaps for styles, inner and outer area hatches, left and right line style additions and many other new features.

 

See Also

Maps

 

Drawings

 

Labels

 

Style: Labels

 

Style: Thematic Formatting

 

Style: Overrides

 

Style: Areas

 

Style: Lines

 

Style: Points

 

Style: Bitmap Symbols

 

Example: Change Point Style - Using new Style pane 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 Pane Quickstart - A tutorial introduction to using the Style pane to apply color, symbology, size and rotation to areas, lines and points in drawings.

 

Example: Format a Drawing using the Style Pane - In this example we provide a first, step by step look at how to format areas in a drawing using the Style pane.  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 pane.

 

Example: Add, Delete and Edit Thematic Formatting Intervals - This topic provides a step by step example of adding, deleting and editing intervals in the Style pane that are used for thematic formatting.

 

Example: Style Properties in the mfd_meta Table - Style properties for drawings such as colors for areas are stored in human readable JSON values as properties in the mfd_meta system table.   This example shows how we can copy formatting from one drawing to another by simply copying values between records in the mfd_meta table.

 

Example: Formatting Tricks - The visualization capabilities of Manifold using Style can be exploited to provide many visual effects.   This topic provides some examples of how to use Style in unexpected ways to create a range of more elaborate effects.

 

Example: How Not to Format a Drawing -  When using Style to format a drawing it is a really bad idea to use the same color for objects that is used for the background color.    It can also be a bad idea to use transparent color.   This topic illustrates why.

 

Example: Style Overrides - Working with style overrides to individually style areas, to use or not use style overrides, to find all records using style overrides and to clear style overrides.

 

Example: Complex Point Style using a Circle Box - This example creates a complex point style, which uses a variety of different colors within the different effects tabs in the Point Style dialog.

 

Example: Point Style using Move and Rotate -  The Move parameter for symbols allows us to move symbols in an angular direction even as we rotate them.   This example shows how to create point symbols that are clock faces with hands, using Move and Rotate.

 

Example: Line Style with Multiple Effects -  We can use effects from all of the Line Style dialog tabs to create a more complex line style.  This example shows how to create a line style with an arrowhead symbol at the end of the line, a symbol at the beginning of the line and accessory lines in different colors to the left and right of the main line.

 

Example: Fill Areas with Bitmap Images - We can use bitmap images as "fill" symbology for areas, including for the fill of the area itself, or as fill for Inner or Outer effects.  In this example we use Style Overrides to fill different areas in a map of provinces with a different bitmap image pattern.

 

Example: Use Repeating Images to Fill Areas - Areas are often filled with bitmap images that form a seamless pattern when tiled.  If we like, we can use any bitmap image that can be used as a symbol, which will repeat within the area.

 

Example: Inner and Outer Effects using a Bitmap - The Inner and Outer effects with area styles can use bitmap images for fills.   We first illustrate an Outer effect using a bitmap, and then add an Inner effect.