Articles and Tutorials

GSVectorGraphics

GSVectorGraphics is the abstract base class for all vector graphics components in the SmartFIND Vector Graphics API providing a cross-browser interface for creating and manipulating these components. It supports a subset of the SVG presentation attributes for to set fill and stroke properties for each element.
Field Summary
 GSMap map
          When this feature is added to a map instance this field will refer to that instance
 
Constructor Summary
GSVectorGraphics (params)
           
 
Method Summary
 Object addEventHandler(<String> eventType, <Function> func)
           Calls the handler function provided when the given event is triggered on this feature
 GSBounds getBounds()
           Gets the minimum bounding box necessary to contain this map feature.
 String getFill()
           Returns the current fill value for this shape
 Number getFillOpacity()
           Returns the current fill opacity value for this shape
 String getStroke()
           Returns the current stroke value for this shape
 Number getStrokeOpacity()
           Returns the current stroke opacity value for this shape
 Number getStrokeWidth()
           Returns the current stroke width value for this shape
 Object getStyle()
           Returns an object literal containing the current style properties set on this shape
 Object setFill(<String> value)
           Sets the fill for the current graphics element using the browser-native interface
 Object setFillOpacity(<Number> value)
           Sets the fill opacity for the current graphics element using the browser-native interface
 Object setOpacity(<Number> value)
           Sets the overall opacity for the current graphics element using the browser-native interface
 Object setStroke(<String> value)
           Sets the stroke for the current graphics element using the browser-native interface
 Object setStrokeOpacity(<Number> value)
           Sets the stroke opacity for the current graphics element using the browser-native interface
 Object setStrokeWidth(<int> value)
           Sets the stroke width for the current graphics element using the browser-native interface
 void setStyle(<Object> style)
           An associative array of name-value pairs describing how this graphics element should be rendered.
 void setText(<String> text, <GSPoint> position, <Object> style)
           Sets the text to appear inside of the graphics element 
 
 var text = '12345';
 var textPosition = {x: 10px, y: 10px};
 var textStyle = {color: '#a80510', 'font-weight': 'normal', 'font-size': '20px'};
 feature.setText(text, textPosition, textStyle);
 void setVisible(<boolean> value)
           Sets the visibility of this shape

Field Detail

map

GSMap map
    When this feature is added to a map instance this field will refer to that instance
Constructor Detail

GSVectorGraphics

GSVectorGraphics(params)
Method Detail

addEventHandler

Object addEventHandler(<String> eventType, <Function> func)
    Calls the handler function provided when the given event is triggered on this feature
  •  
      eventType - the event that should trigger the handler function
      func - the function to be invoked when the event is triggered
    • Parameters:

getBounds

GSBounds getBounds()
    Gets the minimum bounding box necessary to contain this map feature. In GSVectorGraphics this method is abstract, subclasses should provide their own implementation of this method.
  •  
      the bounds of this map feature
    • Returns:

getFill

String getFill()
    Returns the current fill value for this shape
  •  
      the fill value
    • Returns:

getFillOpacity

Number getFillOpacity()
    Returns the current fill opacity value for this shape
  •  
      the fill opacity value
    • Returns:

getStroke

String getStroke()
    Returns the current stroke value for this shape
  •  
      the stroke value
    • Returns:

getStrokeOpacity

Number getStrokeOpacity()
    Returns the current stroke opacity value for this shape
  •  
      the stroke opacity
    • Returns:

getStrokeWidth

Number getStrokeWidth()
    Returns the current stroke width value for this shape
  •  
      the stroke width value
    • Returns:

getStyle

Object getStyle()
    Returns an object literal containing the current style properties set on this shape
  •  
      the style properties of this shape
    • Returns:

setFill

Object setFill(<String> value)
    Sets the fill for the current graphics element using the browser-native interface
  •  
      value - a paint value which may be none indicating that no paint is applied, or a color value specified using either an HTML4 keyword, RGB hex value, or rgb(...) functional value
    • Parameters:
  •  
      a reference to this vector graphics map feature
    • Returns:

setFillOpacity

Object setFillOpacity(<Number> value)
    Sets the fill opacity for the current graphics element using the browser-native interface
  •  
      value - a decimal value in the range of 0.0 (fully transparent) to 1.0 (fully opaque).
    • Parameters:
  •  
      a reference to this vector graphics map feature
    • Returns:

setOpacity

Object setOpacity(<Number> value)
    Sets the overall opacity for the current graphics element using the browser-native interface
  •  
      value - a decimal value in the range of 0.0 (fully transparent) to 1.0 (fully opaque).
    • Parameters:
  •  
      a reference to this vector graphics map feature
    • Returns:

setStroke

Object setStroke(<String> value)
    Sets the stroke for the current graphics element using the browser-native interface
  •  
      value - a paint value which may be none indicating that no paint is applied, or a color value specified using either an HTML4 keyword, RGB hex value, or rgb(...) functional value
    • Parameters:
  •  
      a reference to this vector graphics map feature
    • Returns:

setStrokeOpacity

Object setStrokeOpacity(<Number> value)
    Sets the stroke opacity for the current graphics element using the browser-native interface
  •  
      value - a decimal value in the range of 0.0 (fully transparent) to 1.0 (fully opaque).
    • Parameters:
  •  
      a reference to this vector graphics map feature
    • Returns:

setStrokeWidth

Object setStrokeWidth(<int> value)
    Sets the stroke width for the current graphics element using the browser-native interface
  •  
      value - the new value for the stroke width (in pixels)
    • Parameters:
  •  
      a reference to this vector graphics map feature
    • Returns:

setStyle

void setStyle(<Object> style)
    An associative array of name-value pairs describing how this graphics element should be rendered.
  •  
    •  
      • stroke: this property paints along the outline of the given graphical element. It takes a paint value which may be none indicating that no paint is applied, or a color value specified using either an HTML4 keyword, RGB hex value, or rgb(...) functional value Note that paint server URIs are not supported as paint values.
      • stroke-width: the width of the stroke on the current object.
      • stroke-opacity: specifies the opacity of the painting operation used to stroke the current object. Value should be in the range of 0.0 (fully transparent) to 1.0 (fully opaque).
      • fill: this property paints the interior of the given graphical element. It takes a paint value which may be none indicating that no paint is applied, or a color value specified using either an HTML4 keyword, RGB hex value, or rgb(...) functional value Note that paint server URIs are not supported as paint values.
      • fill-opacity: specifies the opacity of the painting operation used to paint the interior of the current object. Value should be in the range of 0.0 (fully transparent) to 1.0 (fully opaque).
      • opacity: the uniform opacity setting to be applied across an entire object.
      • style - an associative array of style properties. A subset of the SVG presentation attributes are supported:
    • Parameters:

setText

void setText(<String> text, <GSPoint> position, <Object> style)
    Sets the text to appear inside of the graphics element 
     
     var text = '12345';
     var textPosition = {x: 10px, y: 10px};
     var textStyle = {color: '#a80510', 'font-weight': 'normal', 'font-size': '20px'};
     feature.setText(text, textPosition, textStyle);
  •  
      text - the text to set
      position - specifies the position of the text element relative to the coordinate system of the shape's bounding box. X and Y values are specified in pixels
    •  
      • font-family: a prioritized list of font family names
      • font-size: the size of the font, may use absolute or relative units
      • font-weight: the boldness or lightness of the glyphs used to render the text, available values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 (higher values represent greater boldness)
      • color: the color to render the text, may be specified using either an HTML4 keyword, RGB hex value, or rgb(...) functional value
      • text-align: aligns the text within this shape. Availiable values:
        • left - aligns the text to the left
        • center - centers the text
        • right - aligns the text to the right
      • vertical-align: vertically aligns the text within this shape. Available values:
        • top - the top of the text is aligned with the top of the shape
        • middle - the text is placed in the middle of the shape
        • bottom - the bottom of the text is aligned with the bottom of the shape
      • style - text style properties specified as name-value pairs using an object literal. A subset of the CSS styling properties are supported:
    • Parameters:

setVisible

void setVisible(<boolean> value)
    Sets the visibility of this shape
  •  
      value - true if this feature should be visible on the map
    • Parameters: