Style: Bitmap Symbols

Manifold can use bitmap images for symbology in point styles and area styles.   With points, a point symbol can be created using a bitmap image.   With areas, an area can be filled with a repeating image.   If the image has been created so it tiles seamlessly, the effect will be filling the area with what appears to be a continuous bitmap pattern.  

 

Point or area bitmap symbology can use any bitmap image that is less than 4 MB in size and less than 1024 x 1024 pixels in extent, imported from images saved in any raster image  format that Manifold can read.   If the format can save pixel transparency, such as .png format can, Manifold will correctly reckon and utilize pixel transparency when using the bitmap as a symbol.

 

eg_style_bitmap_symbols01_01.png

 

To use a bitmap image as a point symbol:

 

  1. In the Style pane click on the Symbol button or total Style button.

  2. In the drop down menu click on More.

  3. In the dialog click on the collection picker button and choose Image.

  4. In the Import dialog, navigate to the folder containing images.

  5. Click on the desired image, or Ctrl-A to choose all. Press Import.

  6. The Images pane will be filled with imported images.

  7. Click on the image desired and press OK.  

  8. Adjust symbol size as desired.

 


To change the bitmap symbol being used:

 

  1. In the Style pane click on the Symbol button or total Style button.

  2. In the drop down menu click on More.

  3. The dialog will show the current symbol in use in the Current pane.

  4. Click on the collection picker button and choose Image.

  5. The Images pane will fill with any images previously imported during this session.

  6. Click on the new image desired and press OK.

  7. To add more bitmap symbols, right-click into the images pane and choose Add.

Example:  Change Default Point Symbol to an Image

eg_style_bitmap_symbols01_02.png

 

We start with a Cities layer that shows each city as a point.    We have just imported the drawing and have not changed the style from the default, round, gray circles used for points.

 

eg_style_bitmap_symbols01_03.png

 

With the focus on the Cities layer tab (click it) in the map, in the Style pane we click the total Style button for points.

 

eg_style_bitmap_symbols01_04.png

 

In the drop down menu we choose More.

 

eg_style_bitmap_symbols01_05.png

 

btn_font_picker.pngWe click the collections picker button and in the drop down menu we choose Image.    We have not used any images for point symbology in this layer yet, so there have been no images as yet imported.  The dialog goes straight to the Import dialog to allow us to import images to use as symbols.

 

eg_style_bitmap_symbols01_06.png

 

The Import dialog is a typical Windows dialog.   If files appear in list format, we can right-click into the display pane and choose View - Large icons to ask Windows to preview for us images in formats that Windows knows.  We click, or Ctrl-click to choose more than one, on the image we want and press Import.   If we like, we can press Ctrl-A to choose all of the images and then press Import.   For this example, we have ctrl-clicked on four of the "house" images.

 

eg_style_bitmap_symbols01_07.png

 

Manifold populates the Images grid with the images we have imported.  We can populate the Images grid with up to 1024 image symbols.  We can import from any raster image format Manifold knows, as long as the file is less than four megabytes in size and the image is 1024 x 1024 pixels in size or less.   Manifold simply ignores any files that do not fit those criteria.  

 

We click on the image symbol desired and it appears in the Preview pane, probably in too-small a size given default Size settings for points.   We can fix that by increasing the Size.

 

eg_style_bitmap_symbols01_08.png

 

A size of 48 points looks better.  We press OK.

 

eg_style_bitmap_symbols01_09.png

 

The points are instantly redrawn using the image symbol we specified at the size specified.

Example:  Change the  Bitmap Symbol in Use

Changing the bitmap image symbol use is easy.   

 

eg_style_bitmap_symbols01_10.png

 

In the Style pane we click on the total Style button and once again choose More in the drop down menu.

 

eg_style_bitmap_symbols01_11.png

 

The Point Style dialog now launches with the Current image in use as a symbol.   We click on the collections picker and choose Image.  

 

eg_style_bitmap_symbols01_12.png

 

That populates the Images grid with the images we have imported in the current Manifold session.    If we exit Manifold the images grid will not remember, but so long as we are in the same Manifold session the images we have imported will be remembered, for our convenience.   To choose a different image we simply click it, it appears in the Preview pane, and we press OK.  

 

eg_style_bitmap_symbols01_13.png

 

Right away, the new image appears in use in the Cities layer.

Example: Add More Images

If we would like to add more images to the grid from which we can choose image symbols, perhaps from a different folder, that also is easy to do.

 

eg_style_bitmap_symbols01_14.png

 

We drill down to the Images grid display, and then right-click on any blank location in the grid.  

 

eg_style_bitmap_symbols01_15.png

 

From the context menu, we choose Add.   That launches the Import dialog again.

 

eg_style_bitmap_symbols01_16.png

 

In the Import dialog we can browse to whatever folder we want and choose images to import.   We Ctrl-click on two "building" images and press Import.

 

eg_style_bitmap_symbols01_17.png

 

The images we pick are imported and added to the Images grid.  We click on the one we want and press OK.

 

eg_style_bitmap_symbols01_18.png

 

The new bitmap symbol appears in use in the Cities layer.  However, it is a bit smaller than we would like.   That is easy to fix.

 

eg_style_bitmap_symbols01_19.png

 

In the Style pane we click on the Size button to increase the size, to make it larger than the 48 points currently in use.

 

eg_style_bitmap_symbols01_20.png

 

The larger size looks better.

Bitmap Symbols are Stored with the Drawing

Whenever we use a bitmap symbol within a style for a drawing, either for a point or an area, the bitmap is stored within the style's JSON string definition as a BASE64 string that encodes a lossless WEBP format version of the bitmap image.   

 

eg_style_bitmap_symbols01_51.png

 

Consider the use of a bitmap image of a house as a symbol for points in the Cities layer, as seen above.

 

eg_style_bitmap_symbols01_52.png

 

In the Project pane we can right-click on the Cities drawing and choose Properties to see the properties of the Cities layer.   The StylePoint property contains a JSON string specifying the style for the point, including the use of a Bitmap with a long, BASE64 string that encodes the image.

 

eg_style_bitmap_symbols01_53.png

 

In the Properties dialog, if we right-click on the value for StylePoint and then choose Edit in the context menu, we can see that the BASE64 string for the Bitmap is a very long string.   That string encodes the bitmap image.

 

Because the image is encoded into the JSON style string itself, that means whenever we Copy and Paste that JSON style string the image goes with it.  For example, if we Copy the StylePoint value from one drawing and Paste it into the StylePoint value for a different drawing, that image will be copied and pasted as part of the style.   

 

That the bitmap image becomes a built-in part of the style also means that when we send the .map project to a different computer and open it on the different computer, the bitmap image style will appear correctly.  There is no need to drag along any accessory collections of files, because the bitmap image symbol becomes built into the Style of the drawing that is saved within the .map file.  

 

The use of strings encoded within the JSON text for a style also means that we can save such bitmap imagery used for symbols within drawings that are saved within databases that allow saving accessory Manifold tables, like the mfd_meta table within a Manifold System Data folder created on the database.   After all, the bitmap symbol is just part of a text string within a text field, the JSON style specification.  There is no need to get into how a database can or cannot store bitmap images.

 

Keep in mind that the above applies to bitmap images actually used as symbols within point or area styles.  It does not apply to temporary collections of images imported from folders, which may contain images that are not in use within styles.

 

eg_style_bitmap_symbols01_54.png

 

Consider the Point Style dialog above, which shows a grid of Images that have been imported from a file folder during the current Manifold session.   Only the house image indicated is in use within a point style, so only that image has been stored into the point style that uses it.   The other images shown in the grid have been imported from the folder for our convenience and use during this current Manifold session only.   If we save the .map file and then close Manifold, we will save the JSON specifications of styles used within any drawings, including any images encoded within those JSON specifications, but the grid of imported images as seen above goes away.     

 

Notes

Images that tile seamlessly - There are many web sites which allow visitors to create images that tile to create seamless patterns.  The seamless patterns shown in this topic were created using the patterncooler.com web site, to help demonstrate what you can do with that site.  Visit, enjoy, create patterns of your own and support the effort by donating a few bucks so Harvey can keep creating more cool web sites.  Remember to buy a license for commercial use.

 

ICO and CUR files - When importing an image from ICO format to use as a bitmap symbol, if the ICO file contains multiple images the Style dialog will not import them all. Instead, it only imports the image with the greatest size and the largest number of bits per pixel, that is, the most colors.  Importing from CUR format, a format virtually identical to ICO, is the same.  See the ICO topic.

 

Harvesting bitmaps from styles - Suppose a colleague sends us a .map file that uses bitmap image symbols in point styles.   We can see those images in the drawings that use them, and we can use those images in other drawings by copying and pasting the JSON style strings, or even by just copying and pasting those parts of the JSON style strings with the BASE64 string encoding the image. Suppose, however, we would like to use Photoshop or similar to edit the image.  Is there a simple way to read such a BASE64 strings and to export the bitmap image into a file as a .webp or .png or other typical image format?  Not yet.   Future builds are expected to add capabilities to maintain Favorites and to otherwise organize collections of images within a Manifold project (they are, after all, just strings and thus trivial to store in tables). As part of those capabilities it makes sense to enable easy import/export of bitmap images used as symbols to and from files.

 

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: Drawings

 

Style: Thematic Formatting

 

Style: Overrides

 

Style: Labels

 

Style: Areas

 

Style: Lines

 

Style: Points

 

Style: Label Placement

 

Style: Label Icon Placement

 

ICO

 

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