Markers Style Reference

This section provides comprehensive information about the style of the markers.
A style is a set of properties defining the way to draw the marker geometry.
The style of markers is handled in the API as a JSON string representing a JSON object.

Here are some example of marker styles:

   This is a simple two pixels wide red pen :

   {  "pen":
      { "enabled" : true,
        "width"   : 2,
        "color"   : "#FF0000"
      }
   } 

   This is a label with an icon fetched from the internet :

   { "label" : 
     { "autoHeight" : false,
       "height" : 1,
       "symbol" : 
       { "enabled" : true, 
         "src"     : "http://google-maps-icons.googlecode.com/files/car.png", 
         "size"    : 100 
       }, 
       "anchor" : 
       { "enabled" : false 
       }
     }
   }

This object is made of several properties which will be detailled in this document.

The style of a marker is defined by some general properties and by a simple set of drawing tools:

• height
• pen
• brush
• extrusion
• object3d
• label
• information

General properties

General properties define the visibility and the opacity of the marker.

   visible: bool

Show or hide the marker (true by default)

   opacity: int

Opacity threshold is set between 0 (transparent) and 100 (opaque, by default)

height

Height defines the behaviour of the geometry regarding elevation. Height is used to specify how to use the geometry Z coordinates, if the geometry has to be projected on the ground, and the height offset.

   height.heightOffset: double

Height used according to 'heightMode' (0 by default)

   height.heightMode: int

Height computation mode

Possible values are :

• 0 / clampTo0: ignore any Z, 'height' is the absolute altitude,
• 1 / clampToGround (by default): ignore any Z, 'height' is the relative altitude,
• 2 / absolute: use Z as absolute, 'height' is an height offset,
• 3 / relativeToGround: use Z as relative, 'height' is an height offset.

The mode clampToGround with an heightOffset of 0 must be used to allow features to be draped on the ground.

pen

Pen defines a linear style to draw the raw geometry.

Example of markers using the pen tool

The pen is used to draw points, lines or contour of polygons. As needed, pen can be rendered in raster or in vector mode.

   pen.enabled: bool

Enable dor disable pen tool (false by default).

   pen.renderMode: int

Shift between raster and vector render mode.

Possible values are :

• 0 / vector (by defaut): draw wired lines,
• 1 / raster: draw raster lines, draped on the ground,

The raster mode is available only if the height settings is set to draped (heightMode 1, heightOffset 0). With the raster mode, pen width, and pattern length are expressed in meters, whereas with vector mode, they are expressed in pixel (screen pixel).

Note: Vector objects are faster to create than raster objects, For this reason, for applications requiring fast object update, vector render mode is better.

   pen.minWidth: double

Minimal line width in pixel (2 by default) in raster render mode (unused in vector render mode).

   pen.patternLength: double

Pattern length (16 by default), defining pattern frequency. For raster render mode, the pattern length is given in meters. For vector render mode, the pattern length is given in pixels (on screen pixels).

A pen style is defined with a combination of 3 independent simple pen styles to allow a large range of custom line style: main, auxLine1 and auxLine2.

    pen.width: double //(1 by default)
    pen.dash: string  //(#FFFF by default)
    pen.color: string //(#00FF00 by default)

Main line properties.

    pen.auxLine1{
            enabled: bool  //(false by default)
            width: double
            dash: string
            color: string
    }

    pen.auxLine2{
            enabled: bool  //(false by default)
            width: double
            dash: string 
            color: string
    }

Auxiliary lines properties.

Each simple pen style is defined by the following properties:

   enabled: bool

Enable or disable the simple pen

   width: double

Line width on the screen, in pixels (1 by default)

   color: string

Line color in hexadecimal (#RRGGBB[AA])

   dash: string

16 bits line pattern to create dash line, in hexadecimal (#FFFF by default)

Examples of dashes:

The combination of the 3 simple pen styles offers a large range of pen styles : bicolor lines, line with outline, etc.

Example of pen styles using simple pen combination:

brush

Brush defines the style for filling areas. Brush defines the way the surface of a polygon is filled; it's not applicable for points or lines.

   brush{
      enabled: bool           //false by default
      foregroundColor: string //#00FF00
          pattern{
                enabled: bool         //false by default
                src: string
                width: double
                height: double
          }
   }

Brush properties.

extrusion

Extrusion allows to extrude the geometry in the Z direction.

Example of polygon markers rendered with the extrusion tool

The 3D volume is defined by the properties 'height', 'mode' and 'roofGeometry'.

   extrusion.enabled: bool

Enable or disable extrusion (false by default)

   extrusion.height: double 

Extrusion height used according to extrusion mode

   extrusion.mode: int

Height computation mode

Possible values are :

• 0 / absoluteHeight: 'height' used as absolute height,
• 1 / relativeHeight (by defaut): 'height' is used as relative height,
• 2 / zAsAbsoluteHeight: 'height' is ignored,
• 3 / zAsRelativeHeight: 'height' is ignored.

   extrusion.roof{
      enabled: bool         //(true by default)
      color: string         //hexadecimal color (ex. #FF0000)
 
      texture{
         enabled: bool      //(false by default)
         src: string        //image url or pseudoloader
         width: double          //real width of the texture
         height: double         //real height of the texture
         lightEnabled: double   //enable face lighting
      }
   }

Define the representation of the roof of the extruded geometry

The texture is mixed with the color, choose a white color to keep original texture (#FFFFFF).

   extrusion.wall{
      enabled: bool         //(true by default)   
      color: string
      
      texture{
         enabled: bool      //(false by default) 
         src: string            //image url or pseudoloader
         width: double          //real width of the texture
         height: double         //real height of the texture
         alphaEnabled: bool     //enable transparency mask
         alphaThreshold: int    //transparency threshold 0..255
         vRepeat: bool          //vertical repeat of the pattern
         vSpread: bool          //vertical adjustment on geometry
         vSpreadZones: int      //nb of zones for the adjustment
         vRoofPosition: double  //roof position in % (0..100)
         lightEnabled: double   //enable face lighting 
      }
   }

Define the representation of the walls of the extruded geometry

   extrusion.edge{
      enabled: bool //(false by default)
      color: string //hexadecimal color
   }

Define the representation of the edges of the extruded volume

   extrusion.roofGeometry{
      type: int
      height: double //height of the roof for non plane roof
   }

Roof 3D geometry type.

Possible values are:

• 0 / flat (by default): horizontal flat roof,
• 1 / custom 3d contour: roof contour height is computed for each point,
• 2 / reserved, not implemented,
• 3 / 4-sides roof (hip),
• 4 / 2-sides roof (gable),

object3d

Object3d places a 3D model on the geometry.

Example of point markers rendered with the object3d tool

Object3d properties allow to define the model and its position behaviour according to the geometry.

   object3d.enabled: bool

Enable or disable the 3D object representation (false by default)

   object3d.src: string

3D model url or pseudoloader

The 3D model is loaded from the specified source, all formats supported by SpacEyes3D kernel can be used (kmz, 3ds, dae, obj, dxf, ive...). The url can include the following parameters: -$( Sp3dLibraryDir ) : the directory of SpacEyes3D library.

   object3d.objRefMode: int

The reference point in the 3D model:

Possible values are:

• 0 / bboxcenter (by default),
• 1 / objectOrigin,
• 2 / georeferenced.

   object3d.insertMode: int

The placement point on the marker geometry.

Possible values are:

• 0 / center (by default),
• 1 / firstPoint,
• 2 / eachPoint,
• 3 / lastPoint,
• 4 / interval,
• 5 / surface.

   object3d.interval: double

Interval between objects, used only for the insertmode 'interval' and 'surface'

   object3d.insertPatternSrc: double

Image defining the insertion pattern. In each pixel which is no black, an object will be inserted. By default, an irregular pattern with a medium density (20%) is used.

   object3d.sizeMode: int

Object sizing behaviour.

Possible values are:

• 0 / originalSize (by default), keeps object original size, ignore sizeX, sizeY, sizeZ,
• 2 / fixedsize_z, consider sizeZ to rescale the model.

   object3d.sizeX: double
   object3d.sizeY: double
   object3d.sizeZ: double
   // In this release, only the sizeZ property is taken into account

Size of the object used according to 'size mode'

   object3d.scaleX: double 
   object3d.scaleY: double
   object3d.scaleZ: double
   // In this release, the all axis are scaled with the same ratio

Scale factor applied to object size, works for any 'sizeMode' The scale factor is affected by object interactive resizing.

   object3d.azimuthMode: int

Object orientation behaviour.

Possible values are:

• 0 / north (by default): keeps object original orientation (Y point to north),
• 1 / followGeometry: orient Y axis to the geometry main orientation.

   object3d.azimuthOffset: double

Clockwise azimuth offset in degrees, works for any 'azimuth mode'

   object3d.pitchOffset: double 

Pitch offset in degrees

label

Label defines symbol or text annotations.

Example of marker rendered with the label text tool

label.screenScale: bool 

Label size mode.

Possible values are:

• false (by default): size is metric,
• true: size is in pixel on the screen.

label.alwaysOnTop: bool 

Label display mode.

Possible values are:

• false (by default): normal behaviour,
• true: displayed even behind objects.

label.autoHeight: bool

Label auto height mode.

Possible values are:

• false: height offset is set to 'height',
• true (by default): height offset is computed automatically according label size. 'height' is ignored.

label.height: double

Label height offset, used if 'autoHeight' is set to false

   label.orientationMode: int

Label orientation behaviour.

Possible values are:

• 0 / face to camera (by default): the label always faces to the camera
• 1 / north (by default): orient the label to the north in the horizontal plane
• 2 / followGeometry: orient the label in the horizontal plane relatively to the geometry (valid only for lines).

   label.azimuthOffset: double

Clockwise azimuth offset in degrees (not used in the mode 'face to camera')

   label.anchor{
      enabled: bool
          color: color
          width: int
   }

Line which links the label to the geometry (enabled by default)

   label.text{
      enabled: bool //(false by default)
      text: string
      color: color

      font{
         family: string     //font family
         size: double       //char height
         ratio: double      //char ratio
         resolution: double //font resolution
      }

      shadow{
         style: int
         color: color
      }
   }

Text representation

The text string is specified with the 'text' property.

   label.text.shadow{
      style: int
   }

Shadow style around characters.

Possible values are:

• 0 / none (by default),
• 1 / bottomLeft,
• 2 / outline.

   label.symbol{
      enabled: bool //(false by default)
      src: string   //image url or pseudoloader
      size: double
   }

Symbol representation.

The image is loaded from the specified source ('src'), all icon formats supported by SpacEyes3D kernel can be used (png, jpg, bmp, gif, tga...).

information

Information specifies information attached to the marker, and displayed when the user interacts with the marker.

information.tooltip: string

Simple text displayed when the mouse is above the marker.

information.infoBalloon: string

Defines an information sheet displayed when the user click on the marker. Sheet contents can be formatted using simple HTML tags (tables, images, hyperlinks...).

information.hyperlink: string

Link or action started when the user click on the marker.

For rerouting events to the API, hyperlinks can include the macro "sp3d_event(".

Tooltip, infoballon and hyperlink strings can include the following parameters that are converted in real time according to the marker context:

• : the ID of the marker
• : the ID of the marker layer

For hyperlinks, the following parameter are supported:

• : the base directory of the current project