Skip to content

Marker Effects

You can add special effects to marker styles to add interest and make your markers stand out. Because effects are part of a marker's style, they can apply to shape markers, text markers, and photo markers, but not to symbol markers which do not use marker styles.

How to add an effect to a marker style
  • Choose Library > Marker Styles from the Tour Builder menu
  • On the Marker Style Library screen:
    • Click the marker style name in the list
      • On the Edit Marker Style screen:
        • Add the effects to the Normal Appearance and Selected Appearance fields

Kinds of Effects

The following effects are supported:

  • Blend
  • Glow
  • Shadow
  • Line Dash

Each marker effect takes one or more parameters that specify how the effect will be rendered. Because an effect specification can be used as a single parameter to some API methods, you specify the effect and its parameters as a string enclosed in quotes.

All parameters are optional; however, any parameters that are specified must appear in the correct sequence. If a parameter is provided after a parameter that is omitted, you must include a comma as a placeholder for the omitted parameter.

The effect name is case-insensitive. For example, you can specify "Glow" or "glow".

Blend Effect

The blend effect combines a shape’s line and fill colors with the colors of the underlying map image. The blend effect is most commonly used to create marker styles that let the underlying map image show beneath the marker. How the colors blend is controlled by the mode parameter.

mode
A mode name that indicates what effect the blend will have. The default mode is multiply. A brief explanation of each mode follows.
Mode Description
darken Replaces only the areas that are lighter than the blend color. Areas darker than the blend color don’t change.
difference Subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. The effect is similar to a color negative.
hardlight Multiplies or screens the colors, depending on the blend mode color. The effect is similar to shining a spotlight on the object.
invert Inverts the base color.
lighten Replaces only pixels that are darker than the blend color. Areas lighter than the blend color don’t change.
multiply Multiplies the base color by the blend color, resulting in darker colors.
normal Applies color normally, with no interaction with the base colors.
overlay Multiplies or screens the colors, depending on the base colors.
screen Multiplies the inverse of the blend color by the base color, resulting in a bleaching effect.

Perhaps the most useful blend mode is multiply. Without the multiply effect, a shape’s fill color will tend to wash out the underlying map image, especially text. By using the multiply effect, the shape can highlight and enhance an area of the map image without negatively affecting the map image.

In the image below, all three circles have the same fill color #ffcf00, but each alters the appearance of the map in a different way. The first circle has 100% fill color opacity without blend. The second circle has 70% opacity without blend. The third circle has 70% opacity with blend multiply. The fourth circle has 100% opacity with blend multiply.

Blend Effects

Performance

Blending is a very compute-intensive operation, especially while panning or zooming a map that has a lot of markers that use the blend effect. If these operations are sluggish, try using the setTourSetting function to apply a performance setting to not show the blend effect during panning and zooming.

The blend effect will work with text markers, but the shape’s fill color opacity must be 99% or less. If the opacity is 100%, the text marker will have an opaque background even with the blend effect.

Examples

"blend"
"blend,invert"

Glow Effect

The glow effect adds a glow to the outside of a shape to help it stand out more from the underlying map image.

color
The color of the glow. The default value is the shape’s line color (even if the line thickness is zero and/or the line’s opacity is zero).
opacity
The opacity value for the color. Valid values are 0 to 100. The default value is 50. Note that the base opacity of the glow itself is the opacity of the shape and therefore the shape and/or its line must be visible for the glow to be visible. If the shape and its line are both transparent, there will be no glow.
blurX
The amount of horizontal blur. Valid values are 0 to 255. The default value is 10. Directional blur is not supported when the map is rendered in HTML5 – the average of blurX and blurY is used instead.
blurY
The amount of vertical blur. Valid values are 0 to 255. The default value is 10. Directional blur is not supported when the map is rendered in HTML5 – the average of blurX and blurY is used instead.

Examples

"glow"
"glow,,50"
"glow,0x00ff00,50,4,4"

Tip: if you want a glow around a shape, but want the shape to be invisible, set the shape’s fill color to white, 100% opacity, with no line thickness. You can also use the blend effect with multiply mode to cause the shape to blend with the background.

Shadow Effect

The shadow effect adds a drop shadow to a shape to help it stand out more from the underlying map image.

distance
The offset distance for the shadow, in pixels. The default value is 4.
angle
The angle of the shadow. Valid values are 0 to 360 degrees. The default value is 45. To give you a feel for the angle, when zero the shadow appears as if the light is coming from the left side of the marker. An angle of 45 makes the light appear to come from the upper left corner of the marker. An angle of 270 makes the light appear to come from the top of the marker.
color
The color of the shadow. The default value is 0x000000.
opacity
The opacity value for the shadow color. Valid values are 0 to 100. The default value is 40. Note that the base opacity of the shadow itself is the opacity of the shape and therefore the shape and/or its line must be visible for the shadow to be visible. If the shape and its line are both transparent, there will be no shadow.
blurX
The amount of horizontal blur. Valid values are 0 to 255. The default value is 10. Directional blur is not supported when the map is rendered in HTML5 – the average of blurX and blurY is used instead.
blurY
The amount of vertical blur. Valid values are 0 to 255. The default value is 10. Directional blur is not supported when the map is rendered in HTML5 – the average of blurX and blurY is used instead.

Example

"shadow,5,135,0x748b5d,60,7,7"

Line Dash Effect

The linedash effect sets the line dash pattern used for a shape’s lines.

segments
A comma-separated list of numbers that specify distances to alternately draw a line and a gap.

Examples

The linedash settings that follow produce the results shown below.

"linedash" (the default, produces a solid line)
"linedash,1,1"
"linedash,10,10"
"linedash,20,5"
"linedash,15,3,3,3"
"linedash, 20,3,3,3,3,3,3,3"
"linedash,12,3,3"

Results

Line Dash Effect

Effect Combinations

You can combine more than one effect into an effect string by separating each effect with a semicolon.

For example, you can specify "blend,invert;shadow" to combine the blend and shadow effects. The glow and shadow effects are mutually exclusive and so it makes no sense to combine them. If you use both, only the shadow effect will apply.

Examples

"blend,invert;glow,0x00ff00,50,4,4"