Example: Style Panel Quickstart

This example provides a step-by-step, 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.  The topic is long because we go step-by-step; in real life, even a beginner would perform each step in a second or so.  

 

For a video version of this topic, see the Manifold 9 - Style Panel Quickstart - Points video.

 

eg_contents_style01_01.png

 

We begin with a drawing of six points, seen above in default formatting.  We have used the Layers panel to set a background color for the map that is a darker gray, so the lighter colors that we intend to use in this example will appear more clearly.

 

eg_contents_style01_02.png

 

Clicking on the Style panel of the Contents pane we see default formatting assigned to points, lines and areas.    We click on the Size property for points to change the size of points.

 

eg_contents_style01_03.png

 

We change the Size  to 20 points, choosing the value from the drop down menu that appeared.  

 

Note that the moment we click on a button a field selection box appears in case we want to do thematic formatting.  

 

eg_contents_style01_04.png

 

Immediately the point sizes expand to 20 printer's points in size.  

 

eg_contents_style01_05.png

 

We click into the Fill Color button for points and choose a blue color.

 

eg_contents_style01_06.png

 

Immediately the fill color for the point symbols becomes the specified blue color.

 

eg_contents_style01_07.png

 

We click on the Stroke Color button for points and choose a magenta color.

 

eg_contents_style01_08.png

 

Immediately the border of the point symbol, which is drawn in stroke color, is redrawn in the magenta color specified.

 

eg_contents_style01_09a.png

 

To specify a thematic format for point symbology, we click onto the Symbol button for points.   

 

eg_contents_style01_09.png

 

We then click onto the field box and we choose the mfd_id field from the drop down menu.

 

[In this example, there is no special meaning to our choice of the mfd_id field.  We have chosen it simply because it is a field that occurs by default in newly-created drawings, so anybody who wants to repeat this example can do so.  The mfd_id field contains a different number for each object, so it makes a handy choice for an example where we use a numeric value in a field to control thematic formatting.]

 

eg_contents_style01_10.png

 

Additional controls appear in the pane, showing 5 breaks and an equal intervals method.   The number of breaks by default is whatever we used the last time.  Five breaks is fine for this example so that is what we will use.   See the Style: Thematic Formatting topic for information on controls used for thematic formatting.

 

We double-click onto the point symbol for the first interval.     A drop down menu showing many (over 1300) default symbol choices appears.  

 

eg_contents_style01_10a.png

 

We would like to use symbols in a different collection than the very large standard collection of symbols, so in the resulting drop down menu we choose More....

 

eg_contents_style01_10b.png

 

The Symbol dialog for points appears.     We click on the small icon above the main symbol pane to choose a different collection of symbols.   We can use any font that is installed on our system as a source of symbols.   Some popular symbol fonts, such as Wingdings, appear in the drop down list.  We choose Font... to open a dialog that allows us to specify any font installed on our system.

 

eg_contents_style01_11.png

 

We choose a font, called Meteocons, that we downloaded for free from the web.   the Meteocons font provides meteorological symbols.  It is a typical dingbats style font, that is, a font which consists of symbols.   We click on a symbol to choose it and then we press OK.

 

eg_contents_style01_12.png

 

The symbol appears as the sample for the first interval.     We double-click onto the point symbol for the next interval and again choose a symbol for the next interval.  tech_ravi_sm.png

 

Tech tip:   Whenever we double-click on a symbol, either in the Symbol button or a symbol sample in the intervals pane when doing thematic formatting, the system opens up the Symbol panel with whatever symbol we clicked.  In this example, we started the intervals list populated with the default round circle symbol, so each time we double click on that symbol in the intervals list, that opens the Symbol panel set to the Standard collection.  If we want to choose another icon in the Meteocons font, we have to again go through the hassle of choosing the Meteocons font.

 

eg_contents_style01_12a.png  eg_contents_style01_12b.png

 

A quicker way of using symbols from the same font is to first load all of the intervals with a symbol from that font.  Click into the intervals list to move the keyboard focus there and press Ctrl-A to select All of the intervals.  Double-click onto the first, Meteocons symbol, choose More and then in the resulting dialog press OK.  That simply re-chooses that same symbol.  

 

eg_contents_style01_12c.png  eg_contents_style01_12d.png

 

However, when we specify a symbol in a selected interval, that symbol is automatically copied into all selected intervals.   After a quick Ctrl-I to Invert the selection, that is, to Select None, we have an intervals list that is populated with Meteocons symbols.  Now, whenever we double-click into any of those symbols the Meteocons font will automatically be loaded for us and we can more quickly choose a different symbol from the Meteocons font.

 

eg_contents_style01_13.png

 

We continue in turn choosing a symbol for each interval.  A sample for each symbol we choose appears in the intervals list.    In this example we happen to use symbols from the same font, but we could have used a different font for each symbol, or we could have chosen a symbol from the standard collection of 1300+ symbols and not from a font.

 

When we are done we press Update Style.

 

eg_contents_style01_14.png

 

Immediately, the Symbol button and the Total Style button for points changes to indicate the first symbol from the set we have specified, and a field icon appears on the buttons to indicate that style property is now driven by a field.  The Total Style button also has other style properties, like colors, applied.   

 

eg_contents_style01_15.png

 

Also immediately, the points in our drawing use the symbols specified.   

 

We have six points but only five intervals so two of the points fall into the last interval and both of those use the same symbol.  The symbols from this font use only a single color, Stroke color specified, so Fill color is not used.   

 

eg_contents_style01_16.png

 

We can add other style properties to the thematic format.  For example, we can click on the Stroke color button.

 

eg_contents_style01_16a.png

 

We choose the mfd_id field again to control the thematic format.

 

eg_contents_style01_17.png

 

A new column of color samples appears in the intervals list, colored in magenta color since we have not yet specified a palette to use.  We click on the Palette button and choose the CB Spectral palette from the menus that appear.

 

eg_contents_style01_18.png

 

The palette is immediately applied to the color wells.  To apply it to the drawing we press Update Style.

 

eg_contents_style01_19.png

 

Right away the Stroke color button changes to show the first sample from the palette we have used in the thematic format.  A field icon also appears on the button to indicate that style property is now controlled by a field.

 

eg_contents_style01_20.png

 

The drawing is immediately updated to use the new colors.   

 

There are six objects, which have mfd_id values from 1 to 6 but there are only five intervals, so two of the objects fall into the last interval which covers objects with mfd_id values of 4 and 5.  Both have the same symbol, a crescent moon behind a cloud.  The object with an mfd_id value of 4 has been colored using the green color defined for that bound, but the object with an mfd_id value of 5 has been colored using an interpolated color between the green and blue colors shown in the color wells for the bounds of the interval within which it falls.  There is no meaning of "interpolation" between symbols so both use the same symbol.

 

eg_contents_style01_21.png

 

To thematic format using Size we click on the Size button for points.

 

eg_contents_style01_22.png

 

We again choose the mfd_id field to control the thematic format. 

 

eg_contents_style01_23.png

 

The Size values in the intervals all start at 20, the value that applied before we began thematic formatting.  Next, we double-click into the number for the last interval and choose a value of 40.

 

eg_contents_style01_24.png

 

And now, a cool thing: we press Ctrl-A to select all of the interval list rows.

 

eg_contents_style01_25.png

 

We can now right-click onto any of the numbers in the third row...

 

eg_contents_style01_26.png

 

...and from the resulting context menu we choose Interpolate.

 

eg_contents_style01_27.png

 

The numbers in the rest of the rows are filled in with values interpolated between the first value, 20, and the last value, 40.   We press Update Style.

 

eg_contents_style01_28.png

 

Immediately the number in the Size button shows the first number in the range, while a field icon appears on the button to indicate that property is now controlled by a field.

 

eg_contents_style01_29.png

 

Right away the point objects are redrawn using new sizes.    

 

eg_contents_style01_29a.png

 

We can also quickly reverse assignments using the context menu.   Suppose, for example, we would like to reverse the order of symbols used.  We click on the Symbol button.

 

eg_contents_style01_30.png

 

That loads the thematic format for symbols into the intervals list.   We click into the intervals list to move the focus there and then press Ctrl-A to select all rows.   We right-click onto any of the symbol samples in the second row.

 

eg_contents_style01_31.png

 

In the context menu we choose Reverse.  There are no other choices since symbols can only be reversed, but not interpolated.

 

eg_contents_style01_32.png

 

The symbols are re-ordered in reverse order.   We press Update Style.

 

eg_contents_style01_33.png

 

The drawing is immediately updated to assign symbols to objects using the new order.

 

eg_contents_style01_33a.png

 

Options in the context menu depend upon the style property in use.    For example, we can change the thematic format for Stroke color by clicking on the Stroke color button.

 

eg_contents_style01_34.png

 

We click into the intervals list to move the focus there, do a Ctrl-A to select all of the intervals, and then right-click onto any of the color wells in the first column.

 

eg_contents_style01_35.png

 

In the context menu we choose Reverse again.  With colors we have more choices in the context menu, such as lightening or darkening all of the colors for all intervals at once.

 

eg_contents_style01_36.png

 

The order of colors is reversed.  We press Update Style.

 

eg_contents_style01_37.png

 

Right away the new color ordering is applied to objects in the drawing.

 

eg_contents_style01_38.png

 

To remove a style property from the thematic format we simply click on it and assign a different value.  For example, we can click on the Symbol button and then in the drop down menu choose More...

 

eg_contents_style01_39.png

 

In the Symbol dialog we choose the Monotype Corsiva font, click on the R character and press OK.

 

eg_contents_style01_40.png

 

An R appears as the symbol in the Symbol button and in the Total Style button,  the field icon is removed from the Symbol button since the symbol is no longer selected on the basis of a field.

 

eg_contents_style01_41.png

 

The drawing immediately updates to use R characters as the symbol for points.  The other thematic formatting properties, such as Stroke color and Size, still apply.

Notes

Selection commands - Many of the same keyboard shortcut selection commands that work in tables work in various Contents panes panels that show rows of items such as the Layers panel or interval rows in the Style panel when doing thematic formatting.

 

Ctrl-A selects all rows.

 

Ctrl-I inverts the selection, deselecting those rows that were selected and selecting those that were not selected.

 

Ctrl-click the row handle for a row to toggle selection for that the row.   Ctrl-click selects an unselected row, and deselects a selected row.

 

To Select None from the keyboard, do a Ctrl-A followed by a Ctrl-I.

 

tech_tina_sm.png

 

Important: For icons we can use symbols from the built-in collections of symbols, like the Glyphs collection, from fonts or from bitmap images.   Symbols we use from the built-in collections are always available and will continue to work even if we move the project to a different computer.

 

Symbols we take from bitmap images will also continue to work if we move the project to a different computer.  When we use an icon taken from a bitmap image, the image data for the symbol is encoded and stored into the style within the project.   If we save the project to a .map file we can copy the project to a different computer and the style will still appear correctly even if the original image file does not exist on that new computer.

 

Symbols from fonts are not embedded into the project. They depend on having the font installed in the Windows system we are using.   Suppose we choose a symbol from a font such as Meteocons, the font used as an example in this topic, and we save the project as a .map file.  If we move that .map project to a different computer and then open it with Manifold, the style using that symbol will display correctly only if the Meteocons font is also installed in that new computer.   If the Meteocons font is not installed, the symbol will not display.

 

Videos

Manifold 9 - Style Panel 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 Panel 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 Panel 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 Panel 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

Getting Started

 

User Interface Basics

 

Maps

 

Drawings

 

Style: Drawings

 

Style: Labels

 

Style: Thematic Formatting

 

Contents - Layers

 

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: Layers Tutorial - We take a tour of the Layers panel in the Contents pane, learning how to manage layer display order, select layers, turn several layers on and off at the same time, alter opacity settings for one or more layers and how to change background color.

 

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 dialog.

 

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 dialog that are used for thematic formatting.

 

Example: Edit Coordinates While Creating an Object - When creating an object in a map using a tool such as Create Area, right in the middle of the process we can edit coordinates in the Contents - Record panel's Coordinates tab.   This example shows the step by step process.

 

Example: Edit Attributes and Move a Point - We look at the attributes for a point in a drawing layer and edit one of the attributes using a more expanded Edit dialog.  We then move the point to a new location. Easy!

 

Example: Edit Attributes, Larger Text, IME for Asian Languages - A tour showing how to edit attributes in a drawing using the Record panel Values tab and the expanded Edit dialog, including advanced Unicode facilities and use of the built in Input Method Editor (IME) to input text in Japanese language.

 

Example: Assign Initial Coordinate System - Use the Contents pane to manually assign an initial coordinate system when importing from a format that does not specify the coordinate system.

 

Example: Change Projection of an Image - Use the Change Coordinate System command to change the projection of an image, raster data showing terrain elevations in a region of Florida, from Latitude / Longitude to Orthographic centered on Florida.